/* UX-патерни еталону до ux.js, twin3d.js, iso.js і motion.js (25.10.2026). Підключати після wow.css:
   <link rel="stylesheet" href="https://etalon.initask.com/kit/wow.css"><link rel="stylesheet" href="https://etalon.initask.com/kit/ux.css">
   Світла тема, один гротеск, цифри tabular-nums, цілі від 44 px, кожен рух з кінцевим кадром для reduced-motion. */

/* ---- Доступність: фокус, пропуск до змісту, прихований текст ---- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--w-focus,#0B6BC2);outline-offset:2px;border-radius:10px}
.u-skip{position:absolute;left:16px;top:-80px;z-index:10000;background:#fff;color:var(--w-ink);font-weight:750;padding:12px 16px;border-radius:12px;box-shadow:var(--w-sh-2),var(--w-sh-3);text-decoration:none;transition:top var(--w-small) var(--w-std)}
.u-skip:focus{top:12px}
.u-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.u-i{display:block;flex:none}
.w-btn:disabled,.u-ib:disabled{opacity:.42;cursor:default;transform:none;box-shadow:none}

/* ---- Спільні дрібниці: чіп статусу, пігулка, посилання-кнопка, кнопка-іконка ---- */
.u-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:750;line-height:1;padding:6px 10px;border-radius:999px;white-space:nowrap;font-style:normal;background:var(--w-soft);color:var(--w-dim)}
.u-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.u-chip.ok{background:#E6F5EE;color:var(--w-ok)}.u-chip.run{background:#E6F3FF;color:var(--w-accent-t)}.u-chip.wait{background:var(--w-soft);color:var(--w-muted)}.u-chip.bad{background:#FDECEF;color:var(--w-bad)}
.u-pill{min-height:44px;padding:10px 14px;border-radius:999px;border:1px solid var(--w-line);background:#fff;font:inherit;font-size:14px;font-weight:650;color:var(--w-dim);cursor:pointer;box-shadow:var(--w-sh-1);transition:transform var(--w-micro) var(--w-std),border-color var(--w-micro)}
.u-pill:hover{border-color:#9FD2FF}.u-pill:active{transform:scale(.97)}
.u-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 6px;border:0;background:none;font:inherit;font-weight:700;color:var(--w-accent-t);cursor:pointer}
.u-ib{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--w-line);background:#fff;color:var(--w-ink);cursor:pointer;box-shadow:var(--w-sh-1);transition:transform var(--w-micro) var(--w-std)}
.u-ib:active{transform:scale(.95)}
kbd{font:inherit;font-size:12px;font-weight:700;min-width:22px;padding:2px 6px;border-radius:6px;border:1px solid var(--w-line);border-bottom-width:2px;background:#fff;color:var(--w-dim);text-align:center}

/* ---- Тости і скасування ---- */
.u-toasts{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:9000;display:grid;gap:8px;width:min(440px,calc(100vw - 32px));pointer-events:none}
.u-toast{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 8px 8px 16px;border-radius:16px;background:#0E1422;color:#fff;font-size:14.5px;font-weight:650;box-shadow:0 18px 40px -16px rgba(14,20,34,.55);pointer-events:auto;animation:u-up var(--w-mid) var(--w-in)}
.u-toast>span{flex:1;min-width:0}
.u-toast.out{opacity:0;transform:translateY(10px);transition:opacity .26s var(--w-std),transform .26s var(--w-std)}
.u-undo-s{font-size:13px;color:#AFC4DA;font-weight:700}
.u-undo-b{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border:0;border-radius:12px;background:#fff;color:#0E1422;font:inherit;font-weight:800;cursor:pointer}
.u-undo-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:#5CB8FF;transform-origin:left;transform:scaleX(1)}
@keyframes u-up{from{opacity:0;transform:translateY(14px)}}

/* ---- 3D-сцени: двійник процесу, стовпці, скляні мітки ---- */
.u-3d{position:relative;margin:0;border-radius:22px;overflow:hidden;background:radial-gradient(120% 90% at 30% 0%,#fff 0,#F4F7FA 60%,#EDF1F5 100%);touch-action:pan-y}
.u-3d canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.u-3d .lbl{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.u-3d .lb{position:absolute;left:0;top:0;white-space:nowrap;will-change:transform;opacity:0;transition:opacity .3s}
.u-tw-lb{display:grid;grid-template-columns:auto auto;align-items:baseline;column-gap:6px;padding:7px 11px 8px;border-radius:13px;background:rgba(255,255,255,.94);border:1px solid #E2E6EC;box-shadow:var(--w-sh-1),var(--w-sh-2);margin-top:-8px}
.u-tw-lb span{grid-column:1/-1;font-size:11.5px;font-weight:750;color:var(--w-muted);letter-spacing:.02em}
.u-tw-lb b{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.05;display:inline-block;transform-origin:left bottom}
.u-tw-lb small{font-size:12px;font-weight:650;color:var(--w-dim)}
.u-tw-lb b.bump,.u-glass.flash b{animation:u-bump .5s var(--w-spring)}
.compact .u-tw-lb{padding:6px 9px 7px;margin:0 6px}.compact .u-tw-lb b{font-size:17px}
@keyframes u-bump{40%{transform:scale(1.16);color:var(--w-accent-t)}}
.u-glass{display:grid;grid-template-columns:auto auto;align-items:baseline;justify-content:start;column-gap:6px;padding:7px 11px 8px;border-radius:14px;background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 1px 0 #fff,0 10px 26px -12px rgba(14,20,34,.35);margin-top:-6px}
.u-glass span{grid-column:1/-1;font-size:11.5px;font-weight:750;color:var(--w-dim)}
.u-glass b{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.1;display:inline-block;transform-origin:left bottom}
.u-glass small{font-size:11.5px;font-weight:650;color:var(--w-dim)}
.u-dl{display:inline-flex;align-items:center;gap:1px;font-style:normal;font-size:11.5px;font-weight:800}
.u-glass small+.u-dl{grid-column:1/-1;margin-top:2px}
.u-dl.up{color:var(--w-ok)}.u-dl.down{color:var(--w-bad)}
.compact .u-glass{padding:5px 7px 6px;border-radius:11px;column-gap:3px}.compact .u-glass b{font-size:14px}.compact .u-glass span{font-size:10px}.compact .u-dl{font-size:10px}.compact .u-dl svg{width:10px;height:10px}
.u-tw-fb{display:none;list-style:none;padding:24px;gap:10px;flex-wrap:wrap;align-content:center;height:100%}
.nogl .u-tw-fb{display:flex}.nogl canvas,.nogl .lbl{display:none}
.u-tw-fb li{display:grid;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--w-line);min-width:120px}
.u-tw-fb span{font-size:12px;font-weight:750;color:var(--w-muted)}.u-tw-fb b{font-size:22px;font-weight:800}.u-tw-fb small{font-size:12px;color:var(--w-dim)}

/* ---- Ізометричні предмети ---- */
.u-iso{display:block;max-width:100%;height:auto;overflow:visible}

/* ---- 19. Мікровідео в картках ---- */
.u-loop{position:relative;overflow:hidden;border-radius:18px;background:#EEF1F5;border:1px solid var(--w-line);box-shadow:var(--w-sh-1),var(--w-sh-2);isolation:isolate}
.u-loop video,.u-loop canvas,.u-loop img{display:block;width:100%;height:100%;object-fit:cover}
.u-loop figcaption{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.92);font-size:12.5px;font-weight:750;color:var(--w-ink);box-shadow:var(--w-sh-1)}
.u-loop figcaption i{width:7px;height:7px;border-radius:50%;background:var(--w-muted)}
.u-loop.on figcaption i{background:var(--w-ok);box-shadow:0 0 0 0 rgba(4,120,87,.5);animation:u-live 1.8s var(--w-std) infinite}
@keyframes u-live{70%{box-shadow:0 0 0 7px rgba(4,120,87,0)}100%{box-shadow:0 0 0 0 rgba(4,120,87,0)}}

/* ---- 20. Кабінет у 3D-пристроях, прокрутка відкриває кришку ---- */
.u-devbox{container-type:inline-size;overflow:hidden}
.u-dev{--p:0;--q:calc(1 - var(--p));--u:1cqw;--pu:1cqw;--pz:24cqw;position:relative;height:66cqw;perspective:1500px;perspective-origin:50% 20%}
.u-dev .u-scene{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(calc(-14deg - 26deg * var(--q))) rotateY(calc(-8deg - 14deg * var(--q)))}
.u-mac{position:absolute;left:calc(8*var(--u));top:calc(5*var(--u));width:calc(66*var(--u));height:calc(41.25*var(--u));transform-style:preserve-3d}
.u-lid{position:absolute;inset:0;transform-origin:50% 100%;transform-style:preserve-3d;transform:rotateX(calc(6deg - 96deg * var(--q)))}
.u-lid>div{position:absolute;inset:0;border-radius:calc(2.2*var(--u)) calc(2.2*var(--u)) calc(.6*var(--u)) calc(.6*var(--u));backface-visibility:hidden}
.u-face{background:#0E1422;padding:calc(1.5*var(--u));box-shadow:0 0 0 calc(.25*var(--u)) #C9D0DA}
.u-back{transform:rotateY(180deg);background:linear-gradient(160deg,#E9EDF2,#C8CFD9);box-shadow:inset 0 0 0 calc(.25*var(--u)) #D6DCE4}
.u-back::after{content:"";position:absolute;left:50%;top:50%;width:calc(5*var(--u));height:calc(5*var(--u));margin:calc(-2.5*var(--u));border-radius:50%;background:#DDE2E9;box-shadow:inset 0 1px 2px rgba(14,20,34,.15)}
.u-base{position:absolute;left:calc(-4*var(--u));right:calc(-4*var(--u));top:100%;height:calc(30*var(--u));transform-origin:50% 0;transform:rotateX(90deg);border-radius:0 0 calc(2.4*var(--u)) calc(2.4*var(--u));background:linear-gradient(180deg,#DCE1E8,#E8ECF1 30%,#D5DBE3);box-shadow:inset 0 0 0 calc(.2*var(--u)) #CDD3DC}
.u-base::before{content:"";position:absolute;left:8%;right:8%;top:7%;height:52%;border-radius:calc(1*var(--u));background:repeating-linear-gradient(90deg,#C9D0D9 0 calc(.3*var(--u)),transparent calc(.3*var(--u)) calc(4.6*var(--u))),repeating-linear-gradient(0deg,#C9D0D9 0 calc(.3*var(--u)),transparent calc(.3*var(--u)) calc(3.2*var(--u))),#D2D8E0;opacity:.75}
.u-base::after{content:"";position:absolute;left:36%;right:36%;bottom:8%;height:26%;border-radius:calc(1*var(--u));background:#D9DEE5;box-shadow:inset 0 0 0 calc(.2*var(--u)) #C9D0D9}
.u-scr{position:relative;height:100%;border-radius:calc(.8*var(--u));overflow:hidden;background:#FAFAFA;color:var(--w-ink);font-size:calc(1.3*var(--u));line-height:1.3;display:grid;grid-template-columns:calc(13*var(--u)) 1fr}
.u-scr nav{background:#fff;border-right:1px solid var(--w-line);padding:calc(1.4*var(--u)) calc(1*var(--u));display:grid;align-content:start;gap:calc(.6*var(--u))}
.u-scr nav b{font-size:calc(1.35*var(--u));margin-bottom:calc(.6*var(--u))}
.u-scr nav i{display:block;height:calc(1.9*var(--u));border-radius:calc(.6*var(--u));background:var(--w-soft);font-style:normal;font-size:calc(1.1*var(--u));padding:calc(.35*var(--u)) calc(.7*var(--u));color:var(--w-dim)}
.u-scr nav i.on{background:#E6F3FF;color:var(--w-accent-t);font-weight:700}
.u-scr main{padding:calc(1.6*var(--u));display:grid;gap:calc(1.2*var(--u));align-content:start}
.u-scr h4{font-size:calc(2*var(--u));letter-spacing:-.02em}
.u-kp{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(1*var(--u))}
.u-kp div{background:#fff;border-radius:calc(1*var(--u));padding:calc(1*var(--u));box-shadow:var(--w-sh-1)}
.u-kp small{display:block;font-size:calc(1*var(--u));color:var(--w-muted)}.u-kp b{font-size:calc(2.4*var(--u));letter-spacing:-.03em}
.u-bars{display:flex;align-items:flex-end;gap:calc(.8*var(--u));height:calc(9*var(--u));background:#fff;border-radius:calc(1*var(--u));padding:calc(1*var(--u));box-shadow:var(--w-sh-1)}
.u-bars i{flex:1;border-radius:calc(.5*var(--u)) calc(.5*var(--u)) calc(.2*var(--u)) calc(.2*var(--u));background:#BFE1FF;transform-origin:bottom;transform:scaleY(calc(.15 + .85 * var(--p)));transition:transform .2s linear}
.u-bars i:nth-child(3n){background:#1A99FE}
.u-rows{display:grid;gap:calc(.5*var(--u))}
.u-rows div{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:calc(.8*var(--u));padding:calc(.7*var(--u)) calc(1*var(--u));font-size:calc(1.15*var(--u));box-shadow:var(--w-sh-1)}
.u-rows em{font-style:normal;font-weight:700;font-size:calc(1*var(--u));padding:calc(.2*var(--u)) calc(.7*var(--u));border-radius:calc(9*var(--u));background:#E6F5EE;color:var(--w-ok)}
.u-phone{position:absolute;right:4.5cqw;bottom:16cqw;width:calc(19*var(--pu));height:calc(39*var(--pu));border-radius:calc(3.4*var(--pu));background:#0E1422;padding:calc(.8*var(--pu));transform-style:preserve-3d;
  transform:translateZ(var(--pz)) translateY(calc(8cqw * var(--q))) rotateY(calc(-16deg - 30deg * var(--q))) rotateX(calc(8deg * var(--q)));box-shadow:0 2cqw 4cqw -1.6cqw rgba(14,20,34,.45)}
.u-phone::before{content:"";position:absolute;inset:0;border-radius:inherit;background:#3A4354;transform:translateZ(calc(-1.1*var(--pu)))}
.u-phone .u-ps{position:relative;height:100%;border-radius:calc(2.7*var(--pu));overflow:hidden;background:#FAFAFA;padding:calc(3.4*var(--pu)) calc(1.4*var(--pu)) calc(1.4*var(--pu));display:grid;align-content:start;gap:calc(1*var(--pu));font-size:calc(1.25*var(--pu))}
.u-phone .u-ps::before{content:"";position:absolute;left:50%;top:calc(.9*var(--pu));width:calc(5.6*var(--pu));height:calc(1.5*var(--pu));margin-left:calc(-2.8*var(--pu));border-radius:calc(2*var(--pu));background:#0E1422}
.u-ps small{color:var(--w-muted);font-size:calc(1.1*var(--pu))}.u-ps b{font-size:calc(3.4*var(--pu));letter-spacing:-.03em;line-height:1}
.u-ps .u-pr{display:flex;justify-content:space-between;align-items:center;height:calc(2.8*var(--pu));padding:0 calc(1*var(--pu));border-radius:calc(1*var(--pu));background:#fff;box-shadow:var(--w-sh-1);font-size:calc(1.1*var(--pu));font-weight:650}
.u-ps .u-pbtn{margin-top:calc(1*var(--pu));height:calc(3.6*var(--pu));border-radius:calc(1.2*var(--pu));background:var(--w-btn-bg);color:#fff;font-weight:800;display:grid;place-items:center;font-size:calc(1.3*var(--pu))}
.u-dev::after{content:"";position:absolute;left:10%;right:10%;bottom:2%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(14,20,34,.22),rgba(14,20,34,0));transform:translateZ(-1px)}
.u-dev-p{position:absolute;left:16px;top:14px;z-index:2}
@container (max-width:520px){.u-dev{--u:1.3cqw;--pu:2.15cqw;--pz:44cqw;height:128cqw}.u-mac{left:6.5cqw;top:5cqw}.u-phone{right:6cqw;bottom:22cqw}}

/* ---- 21. Мапа України ---- */
.u-map{position:relative}
.u-map svg{display:block;width:100%;height:auto;overflow:visible}
.u-map-land{filter:drop-shadow(0 10px 14px rgba(14,20,34,.12)) drop-shadow(0 1px 1px rgba(14,20,34,.08))}
.u-map-land path{fill:#fff;stroke:#DCE2EA;stroke-width:1;stroke-linejoin:round;transition:fill var(--w-small)}
.u-map-land path:hover{fill:#F4F9FF}
.u-pt{cursor:pointer;outline:none}
.u-pt-ring{fill:rgba(26,153,254,.16);stroke:rgba(26,153,254,.45);stroke-width:1;transform-box:fill-box;transform-origin:center;animation:u-pulse 2.6s var(--w-std) infinite;animation-delay:var(--d)}
.u-pt-dot{fill:#0B6BC2;stroke:#fff;stroke-width:2;transition:transform var(--w-small) var(--w-spring);transform-box:fill-box;transform-origin:center}
.u-pt-hit{fill:transparent}
.u-pt.on .u-pt-dot,.u-pt:focus-visible .u-pt-dot{transform:scale(1.35)}
.u-pt:focus-visible .u-pt-ring{stroke:#0B6BC2;stroke-width:2.5}
.u-map:not(.live) .u-pt-ring{animation-play-state:paused}
@keyframes u-pulse{0%{transform:scale(.8);opacity:.9}70%{transform:scale(1.9);opacity:0}100%{transform:scale(1.9);opacity:0}}
.u-map-tip{position:absolute;z-index:3;display:grid;gap:2px;padding:9px 12px;border-radius:12px;background:#0E1422;color:#fff;font-size:13px;box-shadow:var(--w-sh-3);pointer-events:none;white-space:nowrap}
.u-map-tip em{font-style:normal;font-weight:800;font-size:16px}.u-map-tip small{color:#AFC4DA}

/* ---- 22. Гант ---- */
.u-gantt{display:grid;gap:14px}
.u-g-bar{display:flex;align-items:center;gap:12px}
.u-g-play{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:0;background:var(--w-btn-bg);color:#fff;cursor:pointer;box-shadow:0 10px 20px -10px rgba(11,107,194,.8);transition:transform var(--w-micro) var(--w-std)}
.u-g-play:active{transform:scale(.94)}
.u-g-now b{display:block;font-size:17px;font-weight:800;letter-spacing:-.01em}.u-g-now span{font-size:12.5px;color:var(--w-muted)}
.u-g-sum{margin-left:auto;font-size:13px;color:var(--w-dim)}.u-g-sum b{font-size:17px;color:var(--w-ink)}
.u-g-grid{display:grid;grid-template-columns:minmax(118px,30%) 1fr;gap:0 12px}
.u-g-names{display:grid;grid-auto-rows:44px;padding-top:24px}
.u-g-names div{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:13.5px;font-weight:650;min-width:0}
.u-g-names span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u-g-names .u-chip{font-size:11px;padding:4px 7px}
.u-g-area{position:relative;display:grid;grid-auto-rows:44px;padding-top:24px;cursor:ew-resize;touch-action:pan-y;user-select:none}
.u-g-scale{position:absolute;left:0;right:0;top:0;height:24px;border-bottom:1px solid var(--w-line)}
.u-g-scale i{position:absolute;top:2px;font-style:normal;font-size:12px;font-weight:650;color:var(--w-muted);transform:translateX(-50%)}
.u-g-row{position:relative;border-bottom:1px dashed #E8ECF1}
.u-g-task{position:absolute;top:11px;height:22px;border-radius:7px;background:#E6EBF1;overflow:hidden;opacity:.55;transition:opacity var(--w-small)}
.u-g-task.on{opacity:1}
.u-g-task i{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--k,0));background:linear-gradient(180deg,#2AA3FF,#0B6BC2);border-radius:inherit}
.u-g-cur{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--w-ink);outline:none}
.u-g-cur b{position:absolute;top:-2px;left:50%;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:#fff;border:2px solid var(--w-ink);box-shadow:var(--w-sh-2)}
.u-g-cur::after{content:"";position:absolute;inset:0 -21px}
.u-g-cur:focus-visible b{box-shadow:0 0 0 4px #9FD2FF}

/* ---- 23. Голос ---- */
.u-voice{display:grid;gap:14px}
.u-v-top{display:flex;align-items:center;gap:14px}
.u-mic{position:relative;flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;border:0;background:var(--w-btn-bg);color:#fff;cursor:pointer;box-shadow:0 14px 26px -12px rgba(11,107,194,.8);transition:transform var(--w-micro) var(--w-std)}
.u-mic:active{transform:scale(.95)}
.u-mic::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:2px solid rgba(26,153,254,.35);opacity:0}
.listen .u-mic::before{animation:u-ring 1.4s var(--w-std) infinite}
@keyframes u-ring{0%{transform:scale(.9);opacity:1}100%{transform:scale(1.25);opacity:0}}
.u-wave{position:absolute;bottom:-18px;display:flex;gap:3px;height:12px;align-items:flex-end;opacity:0}
.u-wave i{width:3px;height:100%;border-radius:2px;background:var(--w-accent-t);transform-origin:bottom;transform:scaleY(.3)}
.listen .u-wave{opacity:1}.listen .u-wave i{animation:u-eq .9s var(--w-std) infinite alternate}
.u-wave i:nth-child(2){animation-delay:.15s}.u-wave i:nth-child(3){animation-delay:.3s}.u-wave i:nth-child(4){animation-delay:.45s}.u-wave i:nth-child(5){animation-delay:.6s}
@keyframes u-eq{to{transform:scaleY(1)}}
.u-v-state b{display:block;font-size:17px;font-weight:800}.u-v-state span{font-size:13.5px;color:var(--w-muted)}
.u-v-log{display:grid;gap:8px;max-height:220px;overflow:auto;align-content:start;min-height:88px;padding:2px}
.u-msg{max-width:86%;padding:10px 13px;border-radius:16px;font-size:14.5px;line-height:1.4}
.u-msg.me{justify-self:end;background:#E6F3FF;color:#08477F;border-bottom-right-radius:6px}
.u-msg.ag{justify-self:start;background:#fff;border:1px solid var(--w-line);box-shadow:var(--w-sh-1);border-bottom-left-radius:6px}
.u-msg.typing{display:flex;gap:4px;padding:14px}
.u-msg.typing i{width:6px;height:6px;border-radius:50%;background:var(--w-muted);animation:u-dot 1s var(--w-std) infinite}
.u-msg.typing i:nth-child(2){animation-delay:.15s}.u-msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes u-dot{50%{transform:translateY(-4px);opacity:.5}}
.u-v-hints{display:flex;flex-wrap:wrap;gap:8px}
.u-v-form{display:flex;gap:8px}
.u-v-form input,.u-r-pair input,.u-in{flex:1;min-width:0;min-height:48px;padding:0 14px;border-radius:14px;border:1px solid var(--w-line);background:#fff;font:inherit;font-size:15px;color:var(--w-ink)}
.u-v-form .w-btn{padding:12px 14px}

/* ---- 24. Показ і пульт ---- */
.u-deck{position:relative;aspect-ratio:16/10;border-radius:20px;overflow:hidden;background:#fff;border:1px solid var(--w-line);box-shadow:var(--w-sh-1),var(--w-sh-2),var(--w-sh-3);container-type:inline-size;outline-offset:3px}
.u-slide{position:absolute;inset:0 0 56px;padding:6cqw 6cqw 3cqw;opacity:0;transform:translateX(calc(4% * var(--dir,1)));transition:opacity var(--w-mid) var(--w-in),transform var(--w-mid) var(--w-in);pointer-events:none}
.u-slide.on{opacity:1;transform:none;pointer-events:auto}
.u-slide .k{font-size:max(12px,1.8cqw);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--w-accent-t)}
.u-slide h3{font-size:max(20px,5.6cqw);line-height:1.02;letter-spacing:-.04em;font-weight:800;margin-top:1.6cqw;max-width:70%}
.u-slide .big{font-size:max(44px,15cqw);line-height:.9;font-weight:800;letter-spacing:-.05em;color:var(--w-accent-t)}
.u-deck-ui{position:absolute;left:0;right:0;bottom:0;height:56px;display:flex;align-items:center;gap:6px;padding:0 6px;border-top:1px solid var(--w-line);background:rgba(255,255,255,.96)}
.u-deck-n{min-width:52px;text-align:center;font-weight:750;font-size:14px}
.u-deck-sp{flex:1}
.u-deck-code{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--w-muted);padding:0 6px}
.u-deck-code b{font-size:16px;letter-spacing:.12em;color:var(--w-ink)}
.u-deck:fullscreen{border-radius:0;border:0;aspect-ratio:auto;width:100vw;height:100vh}
.u-remote{display:grid;gap:14px}
.u-r-pair{display:grid;gap:8px}.u-r-pair label{font-size:13px;font-weight:700;color:var(--w-dim)}.u-r-pair div{display:flex;gap:8px}
.u-r-pair input{font-size:22px;letter-spacing:.3em;text-align:center;font-weight:800}
.u-r-now{display:grid;gap:2px;text-align:center}.u-r-now span{font-size:12px;color:var(--w-muted);font-weight:700}.u-r-now b{font-size:28px;font-weight:800}.u-r-now em{font-style:normal;font-size:13.5px;color:var(--w-dim);min-height:18px}
.u-r-btns{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}.u-r-btns .w-btn{min-height:76px;border-radius:20px}
.u-pult{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:24px 16px;background:#F2F4F7}
.u-pult>div{width:min(360px,100%);display:grid;gap:18px}

/* ---- 25. Перегони ---- */
.u-race{display:grid;gap:14px}
.u-lane{display:grid;grid-template-columns:96px 1fr 56px;align-items:center;gap:12px;--k:0}
.u-lane-who{display:flex;align-items:center;gap:7px;font-weight:750;font-size:14px}
.u-lane.a .u-lane-who{color:var(--w-accent-t)}
.u-track{position:relative;height:44px;border-radius:14px;background:var(--w-soft);overflow:hidden}
.u-track>.u-i{position:absolute;right:10px;top:13px;color:var(--w-muted)}
.u-fill{position:absolute;inset:0;transform-origin:left;transform:scaleX(var(--k));background:#D8DEE6;border-radius:inherit}
.u-lane.a .u-fill{background:linear-gradient(90deg,#BFE1FF,#5DB5FD)}
.u-runner{position:absolute;top:7px;left:calc(var(--k) * (100% - 38px) + 4px);width:30px;height:30px;border-radius:9px;background:#fff;display:grid;place-items:center;color:var(--w-ink);box-shadow:var(--w-sh-2)}
.u-lane.a .u-runner{color:var(--w-accent-t)}
.u-time{font-size:20px;font-weight:800;text-align:right;letter-spacing:-.02em}
.u-lane.done .u-time{color:var(--w-ok)}
.u-race-foot{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.u-race-res{font-size:14px;padding:9px 13px;animation:u-up var(--w-mid) var(--w-spring)}

/* ---- 27. Звуковий логотип ---- */
.u-snd{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 11px;border-radius:999px;border:1px solid var(--w-line);background:#fff;font:inherit;font-size:14px;font-weight:700;color:var(--w-ink);cursor:pointer;box-shadow:var(--w-sh-1)}
.u-snd[aria-pressed="false"]{color:var(--w-muted)}
.u-snd:not([data-text]){width:44px;padding:0;justify-content:center}
.u-snd-viz{display:flex;align-items:center;gap:4px;height:56px}
.u-snd-viz i{width:5px;height:100%;border-radius:3px;background:#CFE6FB;transform:scaleY(.28);transform-origin:center}
.u-snd-viz.on i{animation:u-snd 1.2s var(--w-in) both}
.u-snd-viz i:nth-child(odd){background:#1A99FE}
@keyframes u-snd{0%{transform:scaleY(.28)}18%{transform:scaleY(var(--h,.9))}100%{transform:scaleY(.28)}}

/* ---- 28. Справжні фото і логотипи ---- */
.u-logos{display:flex;flex-wrap:wrap;gap:10px}
.u-logo{display:flex;align-items:center;gap:10px;min-height:52px;padding:10px 14px 10px 12px;border-radius:14px;background:#fff;border:1px solid var(--w-line);box-shadow:var(--w-sh-1);font-size:14px;font-weight:700;transition:transform var(--w-micro) var(--w-std),box-shadow var(--w-micro)}
.u-logo:hover{transform:translateY(-2px);box-shadow:var(--w-sh-2)}
.u-logo img{width:28px;height:28px;display:block}
.u-photo{position:relative;margin:0;overflow:hidden;border-radius:18px;aspect-ratio:16/9;background:#DCE3EC;box-shadow:var(--w-sh-1),var(--w-sh-2)}
.u-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--w-in)}
.u-photo:hover img{transform:scale(1.03)}
.u-photo figcaption{position:absolute;left:12px;bottom:12px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.94);font-size:12.5px;font-weight:750}

/* ---- 29. Онбординг і порожній стан ---- */
.u-coach-host{position:relative}
.u-coach{position:absolute;inset:0;z-index:20;border-radius:inherit;overflow:hidden;opacity:0;transition:opacity var(--w-small) var(--w-std)}
.u-coach.in{opacity:1}.u-coach.out{opacity:0}
.u-spot{position:absolute;border-radius:14px;box-shadow:0 0 0 9999px rgba(14,20,34,.46),0 0 0 3px #fff inset;transition:all var(--w-mid) var(--w-in)}
.u-pop{position:absolute;padding:14px 14px 10px;border-radius:16px;background:#fff;box-shadow:var(--w-sh-3);transition:top var(--w-mid) var(--w-in),left var(--w-mid) var(--w-in)}
.u-pop-n{font-size:12px;font-weight:800;color:var(--w-accent-t)}
.u-pop b{display:block;font-size:16px;margin-top:3px}.u-pop p{font-size:13.5px;color:var(--w-dim);margin-top:2px}
.u-pop-a{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.u-empty{display:grid;justify-items:center;text-align:center;gap:6px;padding:22px 16px}
.u-empty-art{width:96px;margin-bottom:4px}
.u-empty b{font-size:17px}.u-empty p{font-size:14px;color:var(--w-dim);max-width:300px}
.u-empty .w-btn{margin-top:8px}

/* ---- 30. Палітра команд ---- */
.u-pal{position:fixed;inset:0;z-index:9600;display:grid;justify-items:center;align-items:start;padding:12vh 16px 16px}
.u-pal-bg{position:absolute;inset:0;background:rgba(14,20,34,.38);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .16s var(--w-std)}
.u-pal-box{position:relative;width:min(600px,100%);border-radius:20px;background:#fff;box-shadow:0 30px 70px -20px rgba(14,20,34,.5);overflow:hidden;transform:translateY(-8px) scale(.98);opacity:0;transition:transform .2s var(--w-in),opacity .16s var(--w-std)}
.u-pal.in .u-pal-bg,.u-pal.in .u-pal-box{opacity:1}.u-pal.in .u-pal-box{transform:none}
.u-pal-in{display:flex;align-items:center;gap:10px;padding:0 14px;border-bottom:1px solid var(--w-line);color:var(--w-muted)}
.u-pal-in input{flex:1;min-width:0;height:58px;border:0;outline:0;font:inherit;font-size:17px;color:var(--w-ink);background:none}
.u-pal-list{max-height:min(380px,52vh);overflow:auto;padding:6px}
.u-pal-it{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 12px;border-radius:12px;cursor:pointer;color:var(--w-dim);font-size:15px}
.u-pal-it span{flex:1;min-width:0;color:var(--w-ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u-pal-it small{font-size:12px;color:var(--w-muted)}
.u-pal-it.on{background:#EEF6FF;color:var(--w-accent-t)}
.u-pal-it mark{background:none;color:var(--w-accent-t);font-weight:800}
.u-pal-none{padding:22px;text-align:center;color:var(--w-muted)}
.u-pal-ft{display:flex;gap:16px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--w-line);font-size:12px;color:var(--w-muted)}
.u-pal-ft kbd{margin-right:3px}
.u-search{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 10px 0 14px;border-radius:14px;border:1px solid var(--w-line);background:#fff;font:inherit;font-size:15px;color:var(--w-muted);cursor:pointer;box-shadow:var(--w-sh-1);min-width:min(320px,100%)}
.u-search span{flex:1;text-align:left}

/* ---- 31. Застосунок: одна головна дія, нижня навігація до 640 px ---- */
.u-app{container-type:inline-size;margin:0 auto;width:100%;transition:max-width var(--w-mid) var(--w-in)}
.u-app-in{position:relative;display:grid;grid-template-columns:88px 1fr;min-height:420px;border-radius:24px;overflow:hidden;background:#FAFAFA;border:1px solid var(--w-line)}
.u-tabs{display:grid;align-content:start;gap:6px;padding:14px 8px;background:#fff;border-right:1px solid var(--w-line)}
.u-tab{display:grid;justify-items:center;gap:3px;min-height:56px;padding:8px 4px;border:0;border-radius:14px;background:none;font:inherit;font-size:12px;font-weight:700;color:var(--w-muted);cursor:pointer;transition:background var(--w-small),color var(--w-small)}
.u-tab[aria-selected="true"]{background:#E6F3FF;color:var(--w-accent-t)}
.u-tab:active{transform:scale(.96)}
.u-pane{padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.u-pane h4{font-size:20px;letter-spacing:-.02em}
.u-pane .u-big{display:grid;gap:2px;padding:16px;border-radius:18px;background:#fff;box-shadow:var(--w-sh-1),var(--w-sh-2)}
.u-pane .u-big small{font-size:12.5px;color:var(--w-muted)}.u-pane .u-big b{font-size:34px;letter-spacing:-.03em;line-height:1}
.u-pane ul{list-style:none;display:grid;gap:8px}
.u-pane li{display:flex;justify-content:space-between;align-items:center;min-height:52px;padding:0 14px;border-radius:14px;background:#fff;box-shadow:var(--w-sh-1);font-size:14.5px;font-weight:600}
.u-cta{margin-top:auto}
.u-cta .w-btn{width:100%;min-height:56px;font-size:16px}
@container (max-width:640px){
  .u-app-in{grid-template-columns:1fr;grid-template-rows:1fr auto;min-height:560px}
  .u-tabs{order:2;grid-template-columns:repeat(4,1fr);gap:4px;padding:6px 8px calc(8px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--w-line);background:rgba(255,255,255,.97)}
  .u-pane{padding-bottom:12px}
  .u-cta{position:sticky;bottom:8px}
}

/* ---- 33. Чому: висновок з джерелами ---- */
.u-why{display:grid;gap:12px}
.u-why-card{display:grid;gap:8px;padding:16px;border-radius:18px;background:#fff;border:1px solid var(--w-line);box-shadow:var(--w-sh-1),var(--w-sh-2)}
.u-why-card .u-chip{justify-self:start}
.u-why-card b{font-size:18px;letter-spacing:-.01em;line-height:1.25}
.u-why-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.u-why-b{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid #BFE1FF;background:#F2F9FF;font:inherit;font-size:14px;font-weight:750;color:var(--w-accent-t);cursor:pointer}
.u-why-b .u-i{transition:transform var(--w-small) var(--w-std)}
.u-why-b[aria-expanded="true"] .u-i{transform:rotate(180deg)}
.u-why-src ol{list-style:none;display:grid;gap:8px}
.u-why-src a{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:14px;background:#fff;border:1px solid var(--w-line);text-decoration:none;color:inherit;transition:border-color var(--w-micro),transform var(--w-micro) var(--w-std)}
.u-why-src a:hover{border-color:#9FD2FF;transform:translateX(3px)}
.u-why-src a>.u-i{color:var(--w-accent-t);margin-top:2px}.u-why-src a>.u-i:last-child{margin-left:auto;color:var(--w-muted)}
.u-why-src span{display:grid;gap:2px;min-width:0}
.u-why-src b{font-size:14px}.u-why-src small{font-size:12.5px;color:var(--w-muted)}
.u-why-src q{font-size:13.5px;color:var(--w-dim);quotes:none}
.u-why-src mark,.u-doc mark{background:#FFF1C2;color:inherit;border-radius:4px;padding:0 3px}
.u-doc{border-radius:16px;border:1px solid var(--w-line);background:#fff;overflow:hidden}
.u-doc-h{display:flex;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--w-line);font-size:13px;font-weight:750}
.u-doc table{width:100%;border-collapse:collapse;font-size:13px}
.u-doc td{padding:8px 12px;border-bottom:1px solid #EEF1F5;white-space:nowrap}.u-doc td:last-child{text-align:right}
.u-doc tr.hl td{background:#FFF8DD}
.u-doc tr.hl td:first-child{box-shadow:inset 3px 0 0 #F2C14E}

/* ---- 34. Дайджест змін ---- */
.u-digest{display:grid;gap:10px}
.u-dg-h{display:flex;align-items:center;gap:12px}
.u-dg-h>.u-i{width:42px;height:42px;padding:10px;border-radius:12px;background:#E6F3FF;color:var(--w-accent-t)}
.u-dg-h b{display:block;font-size:17px}.u-dg-h span{font-size:13px;color:var(--w-muted)}
.u-dg-h em{margin-left:auto}
.u-digest ul{list-style:none;display:grid;gap:6px}
.u-digest li a{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 12px;border-radius:14px;background:#fff;border:1px solid var(--w-line);text-decoration:none;color:inherit;font-size:14.5px;font-weight:600;transition:opacity var(--w-mid)}
.u-digest li a span{flex:1}.u-digest li a b{font-size:18px;font-weight:800}.u-digest li a .u-i{color:var(--w-muted)}
.u-dg-dot{width:8px;height:8px;border-radius:50%;background:var(--w-accent)}.u-dg-dot.ok{background:var(--w-ok)}.u-dg-dot.warn{background:#E59A2F}.u-dg-dot.bad{background:var(--w-bad)}
.u-digest.seen li a{opacity:.55}
.u-dg-ok{justify-self:start}

/* ---- 35. Продовжити з місця ---- */
.u-resume{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 12px 12px 14px;border-radius:16px;background:#EEF6FF;border:1px solid #BFE1FF;margin-bottom:14px}
.u-resume>.u-i{color:var(--w-accent-t)}
.u-resume>div{flex:1;min-width:180px}.u-resume b{display:block;font-size:14.5px}.u-resume span{font-size:13px;color:var(--w-dim)}
.u-steps{display:flex;gap:6px;margin-bottom:12px}
.u-steps i{flex:1;height:6px;border-radius:3px;background:var(--w-soft);transition:background var(--w-small)}
.u-steps i.on{background:var(--w-accent)}

/* ---- 36. Звіт контрасту ---- */
.u-a11y{display:grid;gap:10px}
.u-a11y-h{display:flex;align-items:baseline;gap:8px}.u-a11y-h b{font-size:30px;letter-spacing:-.03em}.u-a11y-h span{color:var(--w-dim)}
.u-a11y ul{list-style:none;display:grid;gap:6px}
.u-a11y li{display:grid;grid-template-columns:44px 1fr auto auto;align-items:center;gap:10px;padding:6px 8px 6px 6px;border-radius:12px;background:#fff;border:1px solid var(--w-line)}
.u-sw{display:grid;place-items:center;width:44px;height:36px;border-radius:9px;font-weight:800;font-size:15px;border:1px solid rgba(14,20,34,.08)}
.u-a11y-n{display:grid;min-width:0}.u-a11y-n b{font-size:13.5px}.u-a11y-n small{font-size:12px;color:var(--w-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u-a11y-r{font-size:15px}

/* ---- 26. Превʼю кривих руху ---- */
.u-ez-chips{display:flex;flex-wrap:wrap;gap:6px}
.u-ez-chips button{min-height:44px;padding:0 13px;border-radius:999px;border:1px solid var(--w-line);background:#fff;font:inherit;font-size:13.5px;font-weight:700;color:var(--w-dim);cursor:pointer}
.u-ez-chips button[aria-checked="true"]{background:#0E1422;border-color:#0E1422;color:#fff}
.u-ez-main{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;margin-top:14px}
.u-ez-plot{width:150px;height:auto;overflow:visible}
.u-ez-side{display:grid;gap:12px;min-width:0}
.u-ez-track{position:relative;height:44px;border-radius:22px;background:var(--w-soft);padding:6px}
.u-ez-dot{display:block;width:32px;height:32px;border-radius:50%;background:var(--w-btn-bg);box-shadow:0 6px 14px -6px rgba(11,107,194,.8)}
.u-ez-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;color:var(--w-dim);overflow-wrap:anywhere}
.u-ez-play{justify-self:start}
.u-ez-durs{display:grid;gap:6px;margin-top:16px}
.u-ez-durs div{display:grid;grid-template-columns:84px 1fr 64px;align-items:center;gap:10px;font-size:13px}
.u-ez-durs span{color:var(--w-dim);font-weight:650}.u-ez-durs b{text-align:right}
.u-ez-durs i{height:10px;border-radius:5px;background:linear-gradient(90deg,#8CC8F8,#1A99FE);transform-origin:left;transform:scaleX(var(--k))}

@media (max-width:560px){
  .u-ez-main{grid-template-columns:96px 1fr;gap:12px}.u-ez-plot{width:96px}
  .u-lane{grid-template-columns:78px 1fr 48px;gap:8px}.u-time{font-size:17px}
  .u-g-grid{grid-template-columns:104px 1fr;gap:0 8px}.u-g-names div{font-size:12.5px}.u-g-names .u-chip{display:none}
  .u-a11y li{grid-template-columns:40px 1fr auto}.u-a11y li .u-chip{grid-column:2/-1;justify-self:start}
  .u-deck-code span{display:none}
}

@media (prefers-reduced-motion:reduce){
  .u-pt-ring,.u-loop.on figcaption i,.listen .u-mic::before,.listen .u-wave i,.u-msg.typing i,.u-snd-viz.on i,.u-toast,.u-race-res,.u-tw-lb b.bump,.u-glass.flash b{animation:none!important}
  .u-pt-ring{transform:scale(1.35);opacity:.55}
  .u-slide,.u-pal-box,.u-pal-bg,.u-spot,.u-pop,.u-coach,.u-photo img,.u-skip,.u-app{transition:none!important}
  .u-snd-viz i{transform:scaleY(var(--h,.5))}
}