/* ── компактна модалка «Налаштувати теми» (як у krokTestView) ── */
      #topicsModal .topics{width:min(640px,94vw)}
      #topicsModal .topics__header{padding:12px 16px;gap:10px}
      #topicsModal .topics__title{font-size:16px}
      #topicsModal .topics__search{padding:7px 12px}
      #topicsModal .topics__body{padding:12px 14px}
      #topicsModal .subject{border-radius:12px;margin-bottom:10px;box-shadow:none}
      #topicsModal .subject__head{padding:9px 12px}
      #topicsModal .subject__name{font-size:14px}
      #topicsModal .subject__body{padding:10px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
      #topicsModal .topic-pill{padding:7px 10px;border-radius:10px;gap:8px;box-shadow:none}
      #topicsModal .topic-pill:hover{transform:none;box-shadow:none}
      #topicsModal .topic-pill input{width:16px;height:16px;margin-top:1px;transform:translateY(1px)}
      #topicsModal .topic-pill span{font-size:12.5px;line-height:1.25;font-weight:500}
      #topicsModal .topics__footer{padding:10px 14px}
      #topicsModal .footer__left{font-size:13px}

      /* ===== «ОБРАНІ ТЕМИ» — телефон: компактно, дрібним і акуратним шрифтом ===== */
      @media (max-width:640px){
        /* модалка як нижній лист майже на весь екран */
        #topicsModal{align-items:flex-end !important;}
        #topicsModal .topics{
          width:100% !important;
          height:94vh !important;
          max-height:94vh !important;
          border-radius:18px 18px 0 0 !important;
        }

        /* шапка */
        #topicsModal .topics__header{padding:10px 12px !important;gap:8px !important;}
        #topicsModal .topics__title{font-size:15px !important;}
        #topicsModal .topics__search{padding:6px 10px !important;gap:6px !important;}
        #topicsModal .topics__search input{font-size:13px !important;}
        #topicsModal .topics__close{font-size:18px !important;}

        /* тіло */
        #topicsModal .topics__body{padding:10px !important;}

        /* предмет: назва+лічильник зверху, кнопки дій — окремим рядком */
        #topicsModal .subject{border-radius:12px !important;margin-bottom:8px !important;}
        #topicsModal .subject__head{
          display:flex !important;
          flex-direction:column !important;
          align-items:stretch !important;
          gap:8px !important;
          padding:9px 11px !important;
        }
        #topicsModal .subject__left{gap:8px !important;min-width:0 !important;}
        #topicsModal .subject__name{font-size:13.5px !important;line-height:1.2 !important;}
        #topicsModal .badge{font-size:11px !important;padding:3px 8px !important;}
        #topicsModal .subject__actions{gap:6px !important;}
        #topicsModal .subject__btn{font-size:11px !important;padding:6px 10px !important;flex:1 1 0;}

        /* теми: один стовпець, акуратні рядки, довгі назви переносяться */
        #topicsModal .subject__body{grid-template-columns:1fr !important;gap:6px !important;padding:9px !important;}
        #topicsModal .topic-pill{
          align-items:flex-start !important;
          gap:8px !important;
          padding:8px 10px !important;
          border-radius:10px !important;
          box-shadow:none !important;
        }
        #topicsModal .topic-pill input{width:16px !important;height:16px !important;margin-top:1px !important;transform:none !important;}
        #topicsModal .topic-pill span{
          font-size:12px !important;
          line-height:1.3 !important;
          font-weight:500 !important;
          min-width:0 !important;
          overflow-wrap:anywhere !important;
          word-break:break-word !important;
          hyphens:auto !important;
        }

        /* футер */
        #topicsModal .topics__footer{padding:9px 12px !important;gap:8px !important;}
        #topicsModal .footer__left{font-size:12px !important;}
        #topicsModal .footer__actions{gap:8px !important;}
        #topicsModal .btn{font-size:12.5px !important;padding:8px 14px !important;}
      }

      /* зовсім вузькі екрани — ще дрібніше */
      @media (max-width:380px){
        #topicsModal .topics__title{font-size:14px !important;}
        #topicsModal .subject__name{font-size:13px !important;}
        #topicsModal .topic-pill span{font-size:11.5px !important;}
        #topicsModal .subject__btn{font-size:10.5px !important;}
      }

      /* === Бейдж «Найкращий результат» на картці буклета === */
      .best-result{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700;line-height:1;width:fit-content;max-width:100%}
      .best-result svg{width:14px;height:14px;flex-shrink:0}
      .best-result b{font-weight:800}
      .best-result--great{background:rgba(16,185,129,.12);color:#059669}
      .best-result--good{background:rgba(14,165,233,.12);color:#0369a1}
      .best-result--mid{background:rgba(245,158,11,.14);color:#b45309}
      .best-result--low{background:rgba(239,68,68,.12);color:#dc2626}
      body.dark-mode .best-result--great{background:rgba(74,160,110,.2);color:#6fae8c}
      body.dark-mode .best-result--good{background:rgba(14,165,233,.2);color:#7dd3fc}
      body.dark-mode .best-result--mid{background:rgba(245,158,11,.2);color:#fbbf24}
      body.dark-mode .best-result--low{background:rgba(239,68,68,.2);color:#fca5a5}

      /* === History modal — cards layout === */
      .hist-modal .modal-content{max-width:760px;padding:28px 28px 22px}
      .hist-modal__header{margin-bottom:18px}
      .hist-modal__header h3{margin-bottom:4px}
      .hist-modal__sub{margin:0;font-size:13px;color:#64748b;font-weight:500}
      body.dark-mode .hist-modal__sub{color:#94a3b8}

      .hist-modal__list{display:flex;flex-direction:column;gap:12px;max-height:62vh;overflow-y:auto;padding-right:4px;margin:0 -4px 0 0}
      .hist-modal__list::-webkit-scrollbar{width:6px}
      .hist-modal__list::-webkit-scrollbar-thumb{background:linear-gradient(135deg,var(--blue) 0%,var(--purple) 100%);border-radius:10px}

      .hist-card{display:grid;grid-template-columns:64px 1fr auto;gap:14px;align-items:center;padding:14px 16px;border-radius:18px;background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);border:1px solid var(--line);box-shadow:0 2px 8px rgba(15,23,42,.04);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .25s var(--ease)}
      .hist-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(15,23,42,.10);border-color:rgba(99,102,241,.4)}
      body.dark-mode .hist-card{background:var(--card);border-color:var(--line);box-shadow:0 1px 0 rgba(255,255,255,.02)}
      body.dark-mode .hist-card:hover{border-color:rgba(129,140,248,.55);box-shadow:0 10px 24px rgba(0,0,0,.45)}

      .hist-card__score{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;font-family:'Poppins',sans-serif;font-weight:800;font-size:18px;color:#fff;letter-spacing:-.02em;background:linear-gradient(135deg,#64748b 0%,#475569 100%);box-shadow:inset 0 0 0 3px rgba(255,255,255,.25),0 4px 10px rgba(15,23,42,.18)}
      .hist-card__score--great{background:linear-gradient(135deg,#10b981 0%,#059669 100%)}
      .hist-card__score--good{background:linear-gradient(135deg,#0ea5e9 0%,#6366f1 100%)}
      .hist-card__score--mid{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%)}
      .hist-card__score--low{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%)}

      .hist-card__body{min-width:0;display:flex;flex-direction:column;gap:6px}
      .hist-card__date{font-size:14px;font-weight:700;color:var(--ink);letter-spacing:-.01em;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
      body.dark-mode .hist-card__date{color:#f1f5f9}
      .hist-card__date small{font-weight:500;font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:.05em}
      .hist-card__stats{display:flex;flex-wrap:wrap;gap:6px}
      .hist-stat{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;background:#f1f5f9;color:#475569;border:1px solid transparent}
      body.dark-mode .hist-stat{background:rgba(30,41,59,.85);color:#d4d4d8}
      .hist-stat--ok{background:#dcfce7;color:#166534}
      .hist-stat--warn{background:#fef3c7;color:#92400e}
      .hist-stat--bad{background:#fee2e2;color:#b91c1c}
      body.dark-mode .hist-stat--ok{background:rgba(22,52,31,.7);color:#9ed4b4}
      body.dark-mode .hist-stat--warn{background:rgba(120,53,15,.55);color:#fcd34d}
      body.dark-mode .hist-stat--bad{background:rgba(58,31,31,.7);color:#fda4af}
      .hist-stat__dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}

      .hist-card__action{display:flex;align-items:center;justify-content:flex-end}
      .hist-act{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:12px;font-size:13px;font-weight:700;text-decoration:none;border:none;cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s var(--ease);white-space:nowrap}
      .hist-act--primary{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);color:#fff;box-shadow:0 4px 12px rgba(239,68,68,.35)}
      .hist-act--primary:hover{transform:translateY(-2px);filter:saturate(115%);box-shadow:0 8px 20px rgba(239,68,68,.45)}
      .hist-act--done{background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:#fff;cursor:default;box-shadow:0 4px 12px rgba(16,185,129,.3)}
      .hist-act--muted{background:transparent;color:#94a3b8;cursor:default;font-weight:500;font-size:12px}

      .hist-modal__empty{padding:32px 20px;text-align:center;color:#64748b;font-size:14px;border-radius:16px;background:rgba(241,245,249,.5);border:1px dashed var(--line)}
      body.dark-mode .hist-modal__empty{background:rgba(30,41,59,.4);color:#94a3b8}
      .hist-modal__empty strong{display:block;margin-bottom:6px;color:var(--ink);font-size:15px}
      body.dark-mode .hist-modal__empty strong{color:#f1f5f9}

      .hist-modal__pager{align-items:center;gap:14px;margin-top:18px}
      .hist-modal__page-info{font-size:12px;color:#64748b;font-weight:600;min-width:64px;text-align:center}
      body.dark-mode .hist-modal__page-info{color:#94a3b8}

      @media (max-width: 560px){
        .hist-card{grid-template-columns:54px 1fr;grid-template-rows:auto auto;row-gap:10px;padding:12px 14px}
        .hist-card__score{width:54px;height:54px;font-size:16px}
        .hist-card__action{grid-column:1 / -1;justify-content:stretch}
        .hist-act{width:100%;justify-content:center}
      }

      /* ============================================================
         Archive head bar — заголовок + кнопка налаштувань + зведення
         ============================================================ */
      .arch-headbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:6px 0 14px;padding:14px 18px;border-radius:18px;background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);border:1px solid var(--line);box-shadow:0 4px 14px rgba(15,23,42,.04)}
      body.dark-mode .arch-headbar{background:var(--card);border-color:var(--line);box-shadow:0 1px 0 rgba(255,255,255,.02)}
      .arch-headbar__left{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1 1 auto}
      .arch-headbar__title{margin:0 !important;padding:0 !important;background:none !important;border:none !important;font-family:'Poppins',sans-serif !important;font-size:18px !important;font-weight:800 !important;color:var(--ink) !important;letter-spacing:-.01em !important;text-align:left !important;display:block !important}
      body.dark-mode .arch-headbar__title{color:#f1f5f9 !important}

      .arch-summary{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;color:#64748b;font-weight:500}
      body.dark-mode .arch-summary{color:#94a3b8}
      .arch-summary__item{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:#f1f5f9;line-height:1.4}
      body.dark-mode .arch-summary__item{background:rgba(30,41,59,.7)}
      .arch-summary__item b{color:#4f46e5;font-weight:700}
      body.dark-mode .arch-summary__item b{color:#e4e4e7}
      .arch-summary__filters{background:linear-gradient(135deg,rgba(99,102,241,.12),rgba(139,92,246,.12));color:#4f46e5}
      body.dark-mode .arch-summary__filters{background:rgba(255,255,255,.2);color:#e4e4e7}
      .arch-summary__count{background:linear-gradient(135deg,rgba(16,185,129,.12),rgba(5,150,105,.12));color:#059669}
      body.dark-mode .arch-summary__count{background:rgba(74,160,110,.18);color:#9ed4b4}
      .arch-summary__count b{color:inherit}

      .arch-settings-btn{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:none;border-radius:14px;background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);color:#fff;font:700 13px inherit;cursor:pointer;box-shadow:0 6px 18px rgba(99,102,241,.32);transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;flex-shrink:0}
      .arch-settings-btn:hover{transform:translateY(-2px);filter:saturate(115%);box-shadow:0 10px 24px rgba(99,102,241,.4)}
      .arch-settings-btn:active{transform:translateY(0)}
      .arch-settings-btn svg{transition:transform .35s var(--ease, ease)}
      .arch-settings-btn:hover svg{transform:rotate(70deg)}
      .arch-settings-btn__dot{position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:#facc15;box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 0 8px rgba(250,204,21,.6)}
      body.dark-mode .arch-settings-btn__dot{box-shadow:0 0 0 2px #1a1a1d, 0 0 8px rgba(250,204,21,.6)}

      /* Активні чіпи фільтрів зовні модалки (швидкий доступ для зняття) */
      .arch-active-bar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:10px 12px;border-radius:12px;background:linear-gradient(135deg,rgba(99,102,241,.06),rgba(139,92,246,.04));border:1px dashed rgba(99,102,241,.25)}
      body.dark-mode .arch-active-bar{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}

      @media (max-width: 560px){
        .arch-headbar{padding:12px 14px;gap:10px}
        .arch-headbar__title{font-size:16px !important}
        .arch-settings-btn{padding:9px 12px;font-size:12px}
        .arch-settings-btn__label{display:none}
        .arch-settings-btn{border-radius:12px}
      }

      /* ============================================================
         Archive settings modal — compact bottom-sheet style
         ============================================================ */
      .asm{display:none;position:fixed !important;inset:0 !important;z-index:2147483647 !important;background:rgba(15,23,42,.55);backdrop-filter:blur(6px);align-items:center;justify-content:center;animation:asmFade .2s ease-out;isolation:isolate}
      .asm[style*="flex"]{display:flex !important}
      @keyframes asmFade{from{opacity:0}to{opacity:1}}
      @keyframes asmSlide{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

      .asm__sheet{width:min(560px, 94vw);max-height:88vh;background:#fff;border-radius:20px;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(15,23,42,.3);border:1px solid rgba(255,255,255,.7);overflow:hidden;animation:asmSlide .25s ease-out}
      body.dark-mode .asm__sheet{background:#161618;border-color:rgba(148,163,184,.12);box-shadow:0 24px 60px rgba(0,0,0,.55)}

      /* Header */
      .asm__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid #f1f5f9;flex-shrink:0}
      body.dark-mode .asm__head{border-bottom-color:rgba(148,163,184,.12)}
      .asm__head-left{display:flex;align-items:center;gap:12px;min-width:0}
      .asm__head-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;flex-shrink:0;box-shadow:0 4px 12px rgba(99,102,241,.3)}
      .asm__title{margin:0;font:800 15px/1.2 'Poppins',sans-serif;color:#0f172a;letter-spacing:-.01em;background:none !important;-webkit-text-fill-color:#0f172a !important}
      body.dark-mode .asm__title,
      body.dark-mode .asm__title{color:#f1f5f9 !important;-webkit-text-fill-color:#f1f5f9 !important}
      .asm__sub{margin:2px 0 0;font:500 11px/1 inherit;color:#94a3b8}
      body.dark-mode .asm__sub{color:#94a3b8}
      .asm__close{width:32px;height:32px;border:none;border-radius:10px;background:#f1f5f9;color:#64748b;cursor:pointer;display:grid;place-items:center;transition:all .15s;flex-shrink:0}
      .asm__close:hover{background:#fee2e2;color:#dc2626}
      body.dark-mode .asm__close{background:rgba(30,41,59,.8);color:#d4d4d8}
      body.dark-mode .asm__close:hover{background:rgba(239,68,68,.2);color:#fca5a5}

      /* Scrollable body */
      .asm__body{flex:1;overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:12px}
      .asm__body::-webkit-scrollbar{width:6px}
      .asm__body::-webkit-scrollbar-track{background:transparent}
      .asm__body::-webkit-scrollbar-thumb{background:rgba(148,163,184,.4);border-radius:6px}
      body.dark-mode .asm__body::-webkit-scrollbar-thumb{background:rgba(148,163,184,.2)}

      /* Footer */
      .asm__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;border-top:1px solid #f1f5f9;background:#f8fafc;flex-shrink:0;flex-wrap:wrap}
      body.dark-mode .asm__foot{border-top-color:rgba(148,163,184,.12);background:rgba(15,23,42,.5)}
      .asm__foot-actions{display:flex;gap:8px;margin-left:auto}

      @media (max-width: 480px){
        .asm{align-items:flex-end}
        .asm__sheet{width:100%;max-height:92vh;border-radius:20px 20px 0 0;animation:asmSlideUp .28s ease-out}
        @keyframes asmSlideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
        .asm__head{padding:14px 16px}
        .asm__body{padding:12px 16px}
        .asm__foot{padding:10px 16px}
      }

      /* ============================================================
         Compact form rows — namespace .af / .af-row
         ============================================================ */
      .af-row{display:flex;flex-direction:column;gap:6px}
      .af-row__label{font:700 11px/1 inherit;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;padding-left:2px}
      body.dark-mode .af-row__label{color:#64748b}

      /* Пошук */
      .af__search{display:flex;align-items:center;gap:8px;padding:0 12px;height:38px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;color:#94a3b8;transition:all .15s}
      .af__search:focus-within{border-color:#6366f1;background:#fff;color:#0f172a;box-shadow:0 0 0 3px rgba(99,102,241,.1)}
      .af__search input{flex:1;border:none;outline:none;background:transparent;font:500 13px/1 inherit;color:inherit;min-width:0}
      .af__search input::-webkit-search-cancel-button{appearance:none;display:none}
      body.dark-mode .af__search{background:rgba(30,41,59,.6);border-color:rgba(148,163,184,.1);color:#64748b}
      body.dark-mode .af__search:focus-within{background:rgba(30,41,59,.9);color:#f4f4f5;border-color:rgba(255,255,255,.5)}

      /* Сортування — повна ширина */
      .af-host .af__sort{width:100%;height:38px;padding:0 36px 0 12px;border-radius:10px;border:1px solid #e2e8f0;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;background-size:12px;font:600 13px inherit;color:#0f172a;cursor:pointer;appearance:none;-webkit-appearance:none;transition:all .15s}
      .af-host .af__sort:hover{border-color:#cbd5e1}
      .af-host .af__sort:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.1)}
      body.dark-mode .af-host .af__sort{background-color:rgba(30,41,59,.6);color:#f4f4f5;border-color:rgba(148,163,184,.1);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
      body.dark-mode .af-host .af__sort option{background:#242428;color:#f4f4f5}

      /* Чіпи статусу */
      .af__chips-row{display:flex;gap:6px;flex-wrap:wrap}
      .af-host .af-chip{padding:6px 12px;border-radius:8px;border:1px solid #e2e8f0;background:#fff;color:#475569;font:600 12px inherit;cursor:pointer;transition:all .15s;line-height:1.2;height:auto;box-shadow:none}
      .af-host .af-chip:hover{border-color:#cbd5e1;color:#0f172a;transform:none;box-shadow:none}
      .af-host .af-chip.is-active{background:#6366f1;color:#fff;border-color:#6366f1;box-shadow:0 2px 6px rgba(99,102,241,.25)}
      .af-host .af-chip--ok.is-active{background:#10b981;border-color:#10b981;box-shadow:0 2px 6px rgba(16,185,129,.25)}
      .af-host .af-chip--bad.is-active{background:#ef4444;border-color:#ef4444;box-shadow:0 2px 6px rgba(239,68,68,.25)}
      body.dark-mode .af-host .af-chip{background:rgba(30,41,59,.6);color:#d4d4d8;border-color:rgba(148,163,184,.1)}
      body.dark-mode .af-host .af-chip:hover{background:rgba(30,41,59,.9);color:#f4f4f5;border-color:rgba(148,163,184,.25)}

      /* Пікери */
      .af__pickers{display:flex;gap:6px;flex-wrap:wrap}
      .af-picker{position:relative}
      .af-host .af-picker__btn{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;height:auto;border-radius:8px;border:1px solid #e2e8f0;background:#fff;color:#0f172a;font:600 12px inherit;cursor:pointer;transition:all .15s;box-shadow:none}
      .af-host .af-picker__btn:hover{border-color:#6366f1;color:#6366f1;transform:none;box-shadow:none}
      .af-host .af-picker.is-open .af-picker__btn{border-color:#6366f1;color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.1)}
      .af-host .af-picker.has-selection .af-picker__btn{background:rgba(99,102,241,.08);border-color:rgba(99,102,241,.4);color:#4f46e5}
      .af-picker__count{display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:999px;background:#6366f1;color:#fff;font:700 10px/1 inherit}
      .af-picker__btn svg{transition:transform .2s;flex-shrink:0;opacity:.55}
      .af-picker.is-open .af-picker__btn svg{transform:rotate(180deg)}
      body.dark-mode .af-host .af-picker__btn{background:rgba(30,41,59,.6);color:#f4f4f5;border-color:rgba(148,163,184,.1)}
      body.dark-mode .af-host .af-picker__btn:hover,
      body.dark-mode .af-host .af-picker.is-open .af-picker__btn{border-color:rgba(255,255,255,.5);color:#e4e4e7;background:rgba(30,41,59,.9)}
      body.dark-mode .af-host .af-picker.has-selection .af-picker__btn{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.55);color:#e4e4e7}

      .af-picker.is-open{z-index:5}
      .af-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:6;min-width:220px;max-width:300px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 12px 32px rgba(15,23,42,.16);padding:8px;display:none}
      .af-picker.is-open .af-pop{display:block;animation:afPopIn .15s ease-out}
      @keyframes afPopIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
      body.dark-mode .af-pop{background:#242428;border-color:rgba(148,163,184,.15);box-shadow:0 12px 32px rgba(0,0,0,.5)}

      .af-pop__search{width:100%;height:30px;padding:0 10px;border-radius:6px;border:1px solid #e2e8f0;background:#f8fafc;font:500 12px inherit;color:#0f172a;outline:none;margin-bottom:6px}
      .af-pop__search:focus{border-color:#6366f1;background:#fff}
      body.dark-mode .af-pop__search{background:rgba(15,23,42,.5);color:#f4f4f5;border-color:rgba(148,163,184,.1)}

      .af-pop__list{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:1px}
      .af-pop__list::-webkit-scrollbar{width:5px}
      .af-pop__list::-webkit-scrollbar-thumb{background:rgba(148,163,184,.35);border-radius:6px}

      .af-pop__opt{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;cursor:pointer;font:500 12px inherit;color:#0f172a;transition:background .12s;user-select:none}
      .af-pop__opt:hover{background:#f1f5f9}
      .af-pop__opt input{accent-color:#6366f1;cursor:pointer;flex-shrink:0;margin:0;width:13px;height:13px}
      .af-pop__opt[data-checked="1"]{background:rgba(99,102,241,.08);color:#4f46e5;font-weight:600}
      body.dark-mode .af-pop__opt{color:#f4f4f5}
      body.dark-mode .af-pop__opt:hover{background:rgba(30,41,59,.7)}
      body.dark-mode .af-pop__opt[data-checked="1"]{background:rgba(255,255,255,.18);color:#e4e4e7}

      .af-pop__actions{display:flex;gap:6px;padding:6px 2px 0;border-top:1px solid #f1f5f9;margin-top:6px}
      body.dark-mode .af-pop__actions{border-top-color:rgba(148,163,184,.1)}
      .af-pop__act{flex:1;padding:5px 8px;border-radius:6px;border:none;background:#f1f5f9;color:#475569;font:600 11px inherit;cursor:pointer;transition:background .15s}
      .af-pop__act:hover{background:#e2e8f0;color:#0f172a}
      .af-pop__act--primary{background:#6366f1;color:#fff}
      .af-pop__act--primary:hover{background:#4f46e5;color:#fff}
      body.dark-mode .af-pop__act{background:rgba(30,41,59,.8);color:#d4d4d8}
      body.dark-mode .af-pop__act:hover{background:rgba(30,41,59,1);color:#f4f4f5}

      .af-pop__empty{padding:14px 8px;text-align:center;color:#94a3b8;font-size:11px}

      /* Дати */
      .af__dates{display:flex;gap:8px;flex-wrap:wrap}
      .af-date{flex:1;min-width:130px;display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;border-radius:10px;border:1px solid #e2e8f0;background:#fff}
      .af-date__lbl{font:700 10px/1 inherit;color:#94a3b8;text-transform:uppercase;letter-spacing:.06em;flex-shrink:0}
      .af-date__inp{flex:1;min-width:0;border:none;background:transparent;font:600 12px inherit;color:#0f172a;outline:none;cursor:pointer;color-scheme:light;padding:0}
      body.dark-mode .af-date{background:rgba(30,41,59,.6);border-color:rgba(148,163,184,.1)}
      body.dark-mode .af-date__lbl{color:#64748b}
      body.dark-mode .af-date__inp{color:#f4f4f5;color-scheme:dark}

      /* Активні чіпи (всередині модалки) */
      .af__active{display:flex;flex-wrap:wrap;gap:5px;padding:10px;border-radius:10px;background:rgba(99,102,241,.05);border:1px dashed rgba(99,102,241,.2)}
      body.dark-mode .af__active{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25)}
      .af-tag{display:inline-flex;align-items:center;gap:5px;padding:3px 4px 3px 9px;border-radius:999px;background:rgba(99,102,241,.12);color:#4f46e5;font:600 11px/1.4 inherit;border:1px solid rgba(99,102,241,.2)}
      body.dark-mode .af-tag{background:rgba(255,255,255,.18);color:#e4e4e7;border-color:rgba(255,255,255,.35)}
      .af-tag__k{opacity:.65;text-transform:uppercase;font-size:9px;letter-spacing:.04em}
      .af-tag__x{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:rgba(99,102,241,.18);border:none;color:inherit;cursor:pointer;font:700 11px/1 inherit;padding:0;transition:all .12s}
      .af-tag__x:hover{background:#ef4444;color:#fff}

      /* Лічильник у футері */
      .af__count{font:500 12px inherit;color:#64748b}
      body.dark-mode .af__count{color:#94a3b8}
      .af__count b{color:#4f46e5;font-weight:800}
      body.dark-mode .af__count b{color:#e4e4e7}

      /* Кнопки футера */
      .af-host .af-reset,
      .af-host .af-apply{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;margin:0;border-radius:10px;font:700 13px inherit;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;letter-spacing:.01em;white-space:nowrap;line-height:1}
      .af-host .af-reset svg,
      .af-host .af-apply svg{flex-shrink:0}

      .af-host .af-reset{border:1.5px solid #e2e8f0;background:#fff;color:#64748b;box-shadow:0 1px 2px rgba(15,23,42,.04)}
      .af-host .af-reset:hover{border-color:#fca5a5;color:#dc2626;background:#fef2f2;transform:translateY(-1px);box-shadow:0 4px 12px rgba(239,68,68,.12)}
      .af-host .af-reset:active{transform:translateY(0);box-shadow:0 1px 2px rgba(239,68,68,.1)}
      .af-host .af-reset svg{transition:transform .35s ease}
      .af-host .af-reset:hover svg{transform:rotate(-180deg)}
      body.dark-mode .af-host .af-reset{background:rgba(30,41,59,.6);color:#94a3b8;border-color:rgba(148,163,184,.15);box-shadow:0 1px 2px rgba(0,0,0,.2)}
      body.dark-mode .af-host .af-reset:hover{background:rgba(239,68,68,.12);color:#fca5a5;border-color:rgba(239,68,68,.4);box-shadow:0 4px 12px rgba(239,68,68,.2)}

      .af-host .af-apply{border:none;color:#fff;background:linear-gradient(135deg,#10b981 0%,#059669 100%);box-shadow:0 4px 12px rgba(16,185,129,.35), inset 0 1px 0 rgba(255,255,255,.2);position:relative;overflow:hidden}
      .af-host .af-apply::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,0) 50%);pointer-events:none}
      .af-host .af-apply:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(16,185,129,.45), inset 0 1px 0 rgba(255,255,255,.25);filter:brightness(1.05)}
      .af-host .af-apply:active{transform:translateY(0);box-shadow:0 2px 6px rgba(16,185,129,.3)}
      .af-host .af-apply svg{stroke:#fff}
      body.dark-mode .af-host .af-apply{box-shadow:0 4px 14px rgba(74,160,110,.4), inset 0 1px 0 rgba(255,255,255,.15)}
      body.dark-mode .af-host .af-apply:hover{box-shadow:0 8px 22px rgba(74,160,110,.5), inset 0 1px 0 rgba(255,255,255,.2)}

      /* Замок для старого CSS — занулити нав'язані стилі для всіх button/select всередині host */
      .af-host button,
      .af-host select,
      .af-host input{box-shadow:none !important}

      /* ─── Небезпечна зона: «Очистити архів» ─── */
      .af-host .af-danger-row{margin-top:6px;padding:12px 14px;border-radius:12px;background:#fef2f2;border:1px solid #fee2e2;display:flex;flex-direction:column;gap:8px}
      .af-host .af-danger-row .af-row__label{color:#b91c1c}
      .af-host .af-danger-btn{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;height:36px;padding:0 14px;border-radius:10px;border:1.5px solid #fecaca;background:#fff;color:#dc2626;font:700 13px inherit;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease,transform .12s ease,box-shadow .15s ease}
      .af-host .af-danger-btn:hover{background:#dc2626;border-color:#dc2626;color:#fff;transform:translateY(-1px);box-shadow:0 6px 16px rgba(220,38,38,.25)}
      .af-host .af-danger-btn:active{transform:translateY(0);box-shadow:0 2px 6px rgba(220,38,38,.25)}
      .af-host .af-danger-btn svg{flex-shrink:0;stroke:currentColor}
      .af-host .af-danger-hint{font-size:12px;color:#7f1d1d;line-height:1.45}
      body.dark-mode .af-host .af-danger-row{background:rgba(127,29,29,.18);border-color:rgba(220,38,38,.35)}
      body.dark-mode .af-host .af-danger-row .af-row__label{color:#fca5a5}
      body.dark-mode .af-host .af-danger-btn{background:rgba(15,23,42,.45);border-color:rgba(248,113,113,.45);color:#fca5a5}
      body.dark-mode .af-host .af-danger-btn:hover{background:#dc2626;border-color:#dc2626;color:#fff}
      body.dark-mode .af-host .af-danger-hint{color:#fca5a5}

      /* ─── Модал підтвердження очистки архіву ─── */
      #archClearConfirm{display:none;position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:10010;align-items:center;justify-content:center;padding:16px}
      #archClearConfirm.is-open{display:flex}
      #archClearConfirm .acc__box{background:#fff;border-radius:16px;padding:22px 22px 18px;width:100%;max-width:420px;box-shadow:0 24px 60px rgba(15,23,42,.35);animation:accIn .18s ease}
      @keyframes accIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
      #archClearConfirm .acc__title{font:700 17px inherit;color:#0f172a;margin:0 0 8px;display:flex;align-items:center;gap:8px}
      #archClearConfirm .acc__title svg{flex-shrink:0;color:#dc2626}
      #archClearConfirm .acc__body{font:400 14px/1.5 inherit;color:#475569;margin:0 0 18px}
      #archClearConfirm .acc__btns{display:flex;gap:8px;justify-content:flex-end}
      #archClearConfirm .acc__btn{height:38px;padding:0 16px;border-radius:10px;font:700 13px inherit;cursor:pointer;border:1.5px solid transparent;transition:transform .12s ease,box-shadow .15s ease,background .15s ease}
      #archClearConfirm .acc__btn--cancel{background:#fff;border-color:#e2e8f0;color:#475569}
      #archClearConfirm .acc__btn--cancel:hover{background:#f1f5f9}
      #archClearConfirm .acc__btn--danger{background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);color:#fff;box-shadow:0 6px 16px rgba(220,38,38,.32)}
      #archClearConfirm .acc__btn--danger:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(220,38,38,.4);filter:brightness(1.05)}
      #archClearConfirm .acc__btn[disabled]{opacity:.7;cursor:wait;transform:none;box-shadow:none}
      body.dark-mode #archClearConfirm .acc__box{background:#161618;color:#f4f4f5;box-shadow:0 24px 60px rgba(0,0,0,.55)}
      body.dark-mode #archClearConfirm .acc__title{color:#f8fafc}
      body.dark-mode #archClearConfirm .acc__body{color:#94a3b8}
      body.dark-mode #archClearConfirm .acc__btn--cancel{background:rgba(30,41,59,.6);border-color:rgba(148,163,184,.2);color:#d4d4d8}
      body.dark-mode #archClearConfirm .acc__btn--cancel:hover{background:rgba(30,41,59,.85)}

      /* ─── Поліпшені кнопки футера модалки ───────────────────── */
      .asm__foot{
        gap:10px !important;
        background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%) !important;
        padding:14px 18px !important;
        border-top:1px solid #e2e8f0 !important;
      }
      body.dark-mode .asm__foot{
        background:linear-gradient(180deg,rgba(15,23,42,.6) 0%,rgba(15,23,42,.85) 100%) !important;
        border-top-color:rgba(148,163,184,.15) !important;
      }

      /* Базові спільні стилі — за ID для максимальної специфічності */
      #archResetFilters,
      #archSettingsApply{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:8px !important;
        height:44px !important;
        min-width:120px !important;
        padding:0 20px !important;
        margin:0 !important;
        border-radius:12px !important;
        font:800 13px/1 'Inter','Poppins',system-ui,sans-serif !important;
        letter-spacing:.02em !important;
        cursor:pointer !important;
        white-space:nowrap !important;
        user-select:none !important;
        transition:transform .15s ease, box-shadow .2s ease,
                   background .2s ease, color .2s ease,
                   border-color .2s ease, filter .2s ease !important;
        outline:none !important;
      }
      #archResetFilters svg,
      #archSettingsApply svg{ flex-shrink:0 !important; }

      /* «Скинути» — нейтральна, акцент червоним на hover */
      #archResetFilters{
        background:#ffffff !important;
        border:1.5px solid #e2e8f0 !important;
        color:#64748b !important;
        box-shadow:0 1px 2px rgba(15,23,42,.04) !important;
      }
      #archResetFilters:hover{
        background:#fef2f2 !important;
        border-color:#fca5a5 !important;
        color:#dc2626 !important;
        transform:translateY(-1px) !important;
        box-shadow:0 6px 16px rgba(239,68,68,.18) !important;
      }
      #archResetFilters:hover svg{ transform:rotate(-180deg) !important; }
      #archResetFilters svg{ transition:transform .35s ease !important; }
      #archResetFilters:active{
        transform:translateY(0) !important;
        box-shadow:0 1px 2px rgba(239,68,68,.12) !important;
      }
      body.dark-mode #archResetFilters{
        background:rgba(30,41,59,.6) !important;
        border-color:rgba(148,163,184,.18) !important;
        color:#cbd5e1 !important;
        box-shadow:0 1px 2px rgba(0,0,0,.25) !important;
      }
      body.dark-mode #archResetFilters:hover{
        background:rgba(239,68,68,.12) !important;
        border-color:rgba(239,68,68,.45) !important;
        color:#fca5a5 !important;
        box-shadow:0 6px 16px rgba(239,68,68,.25) !important;
      }

      /* «Готово» — основний CTA, зелений градієнт */
      #archSettingsApply{
        background:linear-gradient(135deg,#10b981 0%,#059669 100%) !important;
        border:none !important;
        color:#ffffff !important;
        box-shadow:0 6px 18px rgba(16,185,129,.38),
                   inset 0 1px 0 rgba(255,255,255,.25) !important;
        position:relative !important;
        overflow:hidden !important;
      }
      #archSettingsApply::before{
        content:"" !important;
        position:absolute !important; inset:0 !important;
        background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%) !important;
        pointer-events:none !important;
      }
      #archSettingsApply:hover{
        background:linear-gradient(135deg,#059669 0%,#047857 100%) !important;
        transform:translateY(-1px) !important;
        box-shadow:0 10px 24px rgba(16,185,129,.48),
                   inset 0 1px 0 rgba(255,255,255,.3) !important;
        filter:brightness(1.04) !important;
      }
      #archSettingsApply:active{
        transform:translateY(0) !important;
        box-shadow:0 3px 8px rgba(16,185,129,.35) !important;
      }
      #archSettingsApply svg{ stroke:#ffffff !important; }
      body.dark-mode #archSettingsApply{
        box-shadow:0 6px 18px rgba(16,185,129,.45),
                   inset 0 1px 0 rgba(255,255,255,.18) !important;
      }
      body.dark-mode #archSettingsApply:hover{
        box-shadow:0 10px 24px rgba(16,185,129,.55),
                   inset 0 1px 0 rgba(255,255,255,.22) !important;
      }

      /* Мобільна адаптація */
      @media (max-width: 480px){
        #archResetFilters,
        #archSettingsApply{
          height:42px !important;
          min-width:0 !important;
          flex:1 1 0 !important;
          padding:0 14px !important;
          font-size:12.5px !important;
        }
      }
      .af__count{
        font:600 12px/1.3 inherit !important;
        color:#475569 !important;
        flex:1;
        min-width:0;
      }
      body.dark-mode .af__count{color:#d4d4d8 !important}

      @media (max-width: 480px){
        .asm__foot{
          padding:12px 14px env(safe-area-inset-bottom, 12px) !important;
          flex-wrap:nowrap !important;
        }
        .asm__foot-actions{gap:8px !important; flex-shrink:0}
        .af-host .af-reset,
        .af-host .af-apply{
          height:40px !important;
          padding:0 14px !important;
          font-size:12.5px !important;
        }
        .af__count{font-size:11px !important}
      }

      /* ─── Поки модалка відкрита, ховаємо нижню навігацію
             і dark-mode toggle, щоб не наїжджали на футер ─── */
      body.modal-open .tabs-wrap,
      body.modal-open .dark-mode-toggle{
        opacity:0 !important;
        pointer-events:none !important;
        visibility:hidden !important;
      }

      /* ─── Native-select заміна для пікерів ──────────────────── */
      .af__pickers{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px !important}
      @media (min-width: 640px){
        .af__pickers{grid-template-columns:repeat(3,minmax(0,1fr))}
      }
      .af-host .af-native{
        width:100%;height:42px;padding:0 36px 0 12px;border-radius:10px;
        border:1px solid #e2e8f0;background:#fff
          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
          no-repeat right 12px center;background-size:12px;
        font:600 13px inherit;color:#0f172a;cursor:pointer;
        appearance:none;-webkit-appearance:none;-moz-appearance:none;
        transition:all .15s;
      }
      .af-host .af-native:hover{border-color:#cbd5e1}
      .af-host .af-native:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.1) !important}
      .af-host .af-native.has-value{
        background-color:rgba(99,102,241,.08);
        border-color:rgba(99,102,241,.45);
        color:#4f46e5;
        font-weight:700;
      }
      body.dark-mode .af-host .af-native{
        background-color:rgba(30,41,59,.6);
        color:#e2e8f0;
        border-color:rgba(148,163,184,.1);
        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
      }
      body.dark-mode .af-host .af-native.has-value{
        background-color:rgba(99,102,241,.18);
        border-color:rgba(99,102,241,.55);
        color:#c7d2fe;
      }
      body.dark-mode .af-host .af-native option{background:#242428;color:#f4f4f5}