/* Стилі сайту Ліцею №2
   Що де:
   1. змінні і база          6. плитки, вкладки, списки
   2. анімації               7. новини, допомога, розділи
   3. шапка                  8. контакти і форма
   4. головний екран         9. підвал, кнопка нагору
   5. пошук                 10. внутрішні сторінки
                            11. педколектив
                            12. тема, гуртки, відгуки, карусель
                            13. міні-гра
                            14. все про заклад
                            15. архів
                            16. розділові сторінки
                            17. питання, календар, розклад
                            18. друк
                            19. меню їдальні
                            20. профтест
                            21. вкладки на сторінці новин
                            22. профільне навчання
                            23. тест на вибір профілю */

/* 1. змінні та база */
:root{
  --navy:#14274E; --navy-2:#1F3A78; --ink:#16213A; --muted:#556079;
  --paper:#F4F7FC; --white:#fff; --sun:#F4B400; --sky:#DCE7F8; --line:#D3DCEC;
  --ok:#1E7B45; --bad:#B3261E;
  --r-s:10px; --r-m:16px; --r-l:22px;
  --sh1:0 1px 2px rgba(20,39,78,.06),0 6px 18px rgba(20,39,78,.07);
  --sh2:0 2px 4px rgba(20,39,78,.08),0 14px 32px rgba(20,39,78,.16);
  --ease:cubic-bezier(.2,.7,.2,1);
  --bg:#fff; --surface:#fff; --fill:#14274E; --band:#14274E; --ink-2:#34405A; --header-bg:rgba(255,255,255,.97);
  --serif:"Literata", Georgia, "Times New Roman", serif;
  --sans:"Onest", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
html.large{font-size:118%}
html.dark{color-scheme:dark;
  --bg:#0D1424; --surface:#152038; --paper:#111A2E; --sky:#1D2B4A; --line:#2B3B5E;
  --ink:#E7ECF7; --ink-2:#C4CEE3; --muted:#9AA7C2; --navy:#A4BEFA; --navy-2:#BCD0FF;
  --fill:#2F5BC4; --band:#0A1122; --header-bg:rgba(13,20,36,.94); --ok:#4CC27E; --bad:#FF7A70;
  --sh1:0 1px 2px rgba(0,0,0,.35),0 6px 18px rgba(0,0,0,.28);
  --sh2:0 2px 4px rgba(0,0,0,.4),0 14px 32px rgba(0,0,0,.45)}
html.dark .map-frame{filter:invert(.9) hue-rotate(180deg) brightness(.95)}
html.dark .sent{background:#10301F;border-color:#1F5A38}
html.contrast{--navy:#000;--navy-2:#000;--ink:#000;--ink-2:#000;--muted:#1a1a1a;--paper:#fff;--sky:#fff;--line:#000;--sun:#FFE600;--sh1:none;--sh2:none;
  --bg:#fff;--surface:#fff;--fill:#000;--band:#000;--header-bg:#fff}
html.contrast .tile,html.contrast details.grp,html.contrast .feature,html.contrast .quick a,html.contrast .formcard{border:2px solid #000}
html.contrast .ico{background:var(--surface);border:2px solid #000}

*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;font-family:var(--sans);font-size:1rem;line-height:1.55;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit}
img,svg{max-width:100%}
h1,h2,h3{margin:0}
.ic{width:1.2em;height:1.2em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:3px solid var(--navy-2);outline-offset:2px;border-radius:4px}
.on-dark :focus-visible{outline-color:var(--sun)}
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}
.skip{position:absolute;left:-999px;top:0;background:var(--sun);color:#2A1E00;padding:.7rem 1rem;z-index:100;font-weight:600}
.skip:focus{left:.5rem;top:.5rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:12px;background:var(--sky);color:var(--navy);transition:transform .25s var(--ease),background .25s,color .25s}
.ico .ic{font-size:1.3rem}

/* 2. анімації */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes drop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes pop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-6px)}40%,60%{transform:translateX(6px)}}
@keyframes ripple{to{transform:scale(3.4);opacity:0}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes settle{from{opacity:0;transform:translate(60px,-50%)}to{opacity:1;transform:translate(0,-50%)}}
@keyframes bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-4px) scale(1.15)}}

/* поява при скролі (.js ставиться в head, .in додає app.js) */
.js [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .65s var(--ease),transform .65s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal].in{opacity:1;transform:none}

/* 3. верхня частина */
.notice{background:var(--sun);color:#2A1E00;font-weight:500;animation:drop .4s var(--ease)}
.notice[hidden]{display:none}
.notice .wrap{display:flex;align-items:center;gap:1rem;min-height:44px;padding:.35rem 0}
.notice a{font-weight:700}
.notice button{margin-left:auto;background:none;border:0;font-size:1.5rem;line-height:1;cursor:pointer;color:inherit;padding:.2rem .5rem}

.util{background:var(--band);color:#D5DEF2;font-size:.85rem}
.util .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:40px;flex-wrap:wrap}
.util-l,.util-r{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap}
.util a{text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.util a:hover{text-decoration:underline}
.util button{display:inline-flex;align-items:center;gap:.35rem;font:inherit;color:inherit;background:none;border:1px solid rgba(255,255,255,.4);border-radius:8px;padding:.15rem .6rem;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.util button:hover{background:rgba(255,255,255,.12)}
.util button[aria-pressed=true]{background:var(--sun);color:#2A1E00;border-color:var(--sun)}
@media (max-width:700px){.util-l{display:none}.util .wrap{justify-content:flex-end;padding:.4rem 0}.util-r{gap:.5rem}}

.site-header{position:sticky;top:0;z-index:50;background:var(--header-bg);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);transition:box-shadow .25s}
.site-header.scrolled{box-shadow:0 6px 20px rgba(20,39,78,.12)}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--sun);transform-origin:left;transform:scaleX(0);pointer-events:none}
.bar{display:flex;align-items:center;gap:1rem;min-height:68px}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.brand .mark{transition:transform .35s var(--ease)}
.brand:hover .mark{transform:rotate(-8deg) scale(1.06)}
.mark{width:44px;height:44px;flex:none;display:block;color:var(--ink)}
.brand b{font-family:var(--serif);font-size:1.2rem;line-height:1.1;display:block}
.brand small{font-size:.78rem;color:var(--muted);display:block;line-height:1.25}
.nav{margin-left:auto}
.nav ul{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.nav a,.nav-btn{display:flex;align-items:center;gap:.4rem;padding:.55rem .8rem;border-radius:var(--r-s);text-decoration:none;font:inherit;font-weight:500;font-size:.95rem;color:inherit;
  background:none;border:0;cursor:pointer;transition:background .2s,color .2s}
.nav a:hover,.nav-btn:hover{background:var(--sky)}
.nav a.active{background:var(--fill);color:#fff}
.nav .nav-search a{border:1px solid var(--line);margin-left:.35rem}
/* групи меню: кнопка зі стрілкою і список сторінок */
.nav-grp{position:relative}
.nav-btn .ic{width:1em;height:1em;transform:rotate(90deg);transition:transform .2s var(--ease);opacity:.7}
.nav-grp.open>.nav-btn .ic{transform:rotate(-90deg)}
.nav-grp.here>.nav-btn{background:var(--fill);color:#fff}
.nav .nav-sub{display:none;flex-direction:column;align-items:stretch;gap:.1rem}
.nav .nav-sub a{font-size:.93rem;white-space:nowrap}
.nav .nav-sub a[aria-current="page"]{background:var(--sky);color:var(--navy);font-weight:600}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:var(--r-s);padding:.55rem;cursor:pointer;color:var(--ink)}
@media (min-width:1081px){
  /* на компі список випадає при наведенні або кліку */
  .nav .nav-sub{position:absolute;top:100%;left:0;z-index:50;min-width:230px;margin-top:.35rem;padding:.4rem;
    background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:0 18px 40px rgba(10,20,50,.16)}
  .nav .nav-sub::before{content:"";position:absolute;left:0;right:0;top:-.45rem;height:.45rem}   /* невидимий місток, щоб меню не закривалось, поки ведеш мишку */
  .nav-grp:is(.open,:hover,:focus-within)>.nav-sub{display:flex;animation:drop .2s var(--ease)}
  .nav-grp:is(:hover,:focus-within)>.nav-btn .ic{transform:rotate(-90deg)}
}
@media (max-width:1080px){
  /* телефон/планшет: меню під кнопкою, групи відкриваються тапом */
  .menu-btn{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - 80px);overflow:auto;background:var(--surface);border-bottom:1px solid var(--line);padding:.5rem 1.25rem 1rem;box-shadow:0 14px 24px rgba(10,20,50,.12)}
  .site-header.open .nav{display:block;animation:drop .25s var(--ease)}
  .nav ul{flex-direction:column;align-items:stretch}
  .nav a,.nav-btn{padding:.85rem .5rem;font-size:1.05rem;width:100%;justify-content:flex-start}
  .nav-btn .ic{margin-left:auto}
  .nav-grp.here>.nav-btn{background:none;color:var(--navy);font-weight:700}
  .nav .nav-sub{padding:0 0 .4rem .9rem;border-left:2px solid var(--line);margin-left:.5rem}
  .nav .nav-sub a{padding:.65rem .5rem;font-size:1rem}
  .nav-grp.open>.nav-sub{display:flex}
  .nav .nav-search a{margin:.4rem 0 0}
}

/* 4. головний екран */
.hero{position:relative;background:var(--band);color:#fff;padding:clamp(3rem,7vw,5.25rem) 0 clamp(5rem,9vw,7rem)}
.hero-bg{position:absolute;inset:0;overflow:hidden;
  background-image:
    radial-gradient(60% 90% at 88% 0%,rgba(90,130,230,.34),transparent 62%),
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:auto,28px 28px,28px 28px}
.hero-bg .num{position:absolute;right:2%;top:50%;transform:translateY(-50%);font-family:var(--serif);font-weight:700;font-size:clamp(14rem,32vw,27rem);line-height:1;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.14);user-select:none}
.js .hero-bg .num{animation:settle 1.2s var(--ease) .1s both}
.hero-in{position:relative;z-index:2}
.hero h1{font-family:var(--serif);font-weight:700;font-size:clamp(2.1rem,5vw,3.6rem);line-height:1.08;max-width:17ch;text-wrap:balance}
.hero-sub{margin:1.1rem 0 0;max-width:50ch;font-size:1.15rem;color:#D5DEF2}
/* при відкритті все з'являється по черзі зверху вниз */
.js .hero h1{animation:rise .8s var(--ease) .05s both}
.js .hero-sub{animation:rise .8s var(--ease) .18s both}
.js .search{animation:rise .8s var(--ease) .3s both}
.js .quick li{animation:rise .7s var(--ease) both;animation-delay:calc(.45s + var(--i,0) * .07s)}

/* 5. пошук */
.search{position:relative;max-width:740px;margin-top:2rem}
.search form{display:flex;align-items:center;gap:.25rem;background:var(--surface);border-radius:18px;padding:.4rem .4rem .4rem 1.1rem;
  box-shadow:0 14px 36px rgba(0,0,0,.3),0 0 0 0 rgba(244,180,0,0);outline:3px solid transparent;outline-offset:3px;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.search form:focus-within{transform:translateY(-3px);box-shadow:0 20px 46px rgba(0,0,0,.38),0 0 0 4px var(--sun)}
.search form.shake{animation:shake .5s}
.search .si{color:var(--muted);font-size:1.4rem;transition:transform .35s var(--ease),color .25s}
.search form:focus-within .si{color:var(--navy);transform:scale(1.15) rotate(-10deg)}
.search .si.bump{animation:bounce .35s}
.search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:1.1rem;padding:.95rem .7rem;color:var(--ink)}
.search input:focus{outline:none}
.search input::placeholder{color:#7A859B;transition:opacity .25s}
.search input:focus::placeholder{opacity:.55}
.search .clear{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:var(--paper);color:var(--muted);cursor:pointer;opacity:0;transform:scale(.4) rotate(-90deg);pointer-events:none;transition:opacity .2s,transform .3s var(--ease),background .2s}
.search .has-text .clear{opacity:1;transform:none;pointer-events:auto}
.search .clear:hover{background:var(--sky);color:var(--navy)}
.search kbd{font:inherit;font-size:.8rem;color:var(--muted);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:.05rem .45rem;margin:0 .5rem 0 .25rem;transition:opacity .2s}
.search form:focus-within kbd,.search .has-text kbd{opacity:0}
@media (max-width:700px){.search kbd{display:none}}
.search .go{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:.4rem;background:var(--sun);color:#2A1E00;border:0;border-radius:14px;font:inherit;font-weight:600;padding:.9rem 1.4rem;cursor:pointer;transition:transform .15s,filter .2s}
.search .go .ic{transition:transform .25s var(--ease)}
.search .go:hover{filter:brightness(.96)}
.search .go:hover .ic{transform:translateX(4px)}
.search .go:active{transform:scale(.96)}

.results{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:40;list-style:none;margin:0;padding:.4rem;background:var(--surface);color:var(--ink);border-radius:var(--r-m);box-shadow:0 18px 44px rgba(10,20,50,.4);max-height:min(60vh,440px);overflow:auto;animation:drop .22s var(--ease)}
.results[hidden]{display:none}
.results .head{padding:.5rem .9rem .3rem;font-size:.82rem;font-weight:600;color:var(--muted)}
.results li[role=option]{animation:rise .3s var(--ease) both;animation-delay:calc(var(--i,0) * 35ms)}
.results a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.7rem .9rem;border-radius:var(--r-s);text-decoration:none;transition:background .15s,padding-left .2s var(--ease)}
.results a small{flex:none;color:var(--muted);text-align:right;max-width:40%}
.results li[aria-selected=true] a,.results a:hover{background:var(--sky);padding-left:1.15rem}
.results mark{background:rgba(244,180,0,.4);color:inherit;border-radius:3px;padding:0 1px}
.results .none{padding:.9rem;color:var(--muted)}
.results .none a{display:inline;padding:0;text-decoration:underline}

/* 6. швидкі плитки, вкладки, списки */
.quick{position:relative;z-index:1;margin-top:-3rem}
.quick ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.8rem}
.quick a{display:flex;flex-direction:column;align-items:flex-start;gap:.75rem;height:100%;padding:1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--sh1);text-decoration:none;font-weight:600;line-height:1.25;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.quick a:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:var(--navy)}
.quick a:hover .ico{background:var(--fill);color:#fff;transform:rotate(-6deg) scale(1.08)}
@media (max-width:1000px){.quick ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.quick ul{grid-template-columns:repeat(2,minmax(0,1fr))}.quick{margin-top:-2.5rem}}

.sec{padding:clamp(3rem,7vw,5rem) 0}
.sec.alt{background:var(--paper)}
.sec.sky{background:var(--sky)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem 2rem;flex-wrap:wrap;margin-bottom:2rem}
h2{font-family:var(--serif);font-weight:650;font-size:clamp(1.65rem,3.2vw,2.35rem);line-height:1.15}
.lead{margin:.6rem 0 0;color:var(--muted);max-width:62ch}
.more{font-weight:600;text-decoration:none;padding-bottom:1px;background:linear-gradient(var(--sun),var(--sun)) 0 100%/100% 2px no-repeat;transition:background-size .25s var(--ease)}
.more:hover{background-size:100% 100%}

.tabs{position:relative;display:flex;gap:.4rem;margin-bottom:1.25rem;overflow-x:auto;padding-bottom:.25rem;scrollbar-width:thin}
.tab-pill{position:absolute;left:0;top:0;border-radius:999px;background:var(--fill);pointer-events:none}
.tab-pill.ready{transition:transform .4s var(--ease),width .4s var(--ease),height .4s var(--ease)}
.tab{position:relative;z-index:1;flex:none;font:inherit;font-weight:600;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.6rem 1.15rem;cursor:pointer;transition:color .3s,background .3s,border-color .3s}
.tab:hover{border-color:var(--navy)}
.tab[aria-selected=true]{background:transparent;border-color:transparent;color:#fff}

.linklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem 1.25rem}
.linklist.swap li{animation:rise .38s var(--ease) both;animation-delay:calc(var(--i,0) * 40ms)}
.linklist a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem .9rem;border:1px solid var(--line);border-radius:var(--r-m);text-decoration:none;font-weight:500;background:var(--surface);transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.linklist a:hover{border-color:var(--navy);box-shadow:var(--sh1);transform:translateX(3px)}
.linklist a:hover .ico{background:var(--fill);color:#fff;transform:scale(1.08)}
.linklist a>.ic:last-child{color:var(--muted);transition:transform .2s var(--ease),color .2s}
.linklist a:hover>.ic:last-child{transform:translateX(4px);color:var(--navy)}
.linklist .t{display:flex;align-items:center;gap:.9rem;min-width:0}
@media (max-width:860px){.linklist{grid-template-columns:1fr}}

/* 7. новини, допомога, розділи */
.news{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.feature{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(1.4rem,3vw,2.3rem);box-shadow:var(--sh1)}
.tag{display:inline-block;background:var(--sun);color:#3A2A00;font-weight:600;font-size:.82rem;border-radius:6px;padding:.2rem .6rem}
.feature h3{font-family:var(--serif);font-weight:650;font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.2;margin:.9rem 0 .8rem}
.feature p{margin:0 0 1rem}
.checks{list-style:none;margin:0 0 1.25rem;padding:0;display:grid;gap:.5rem}
.checks li{display:flex;gap:.65rem;align-items:flex-start}
.checks .ic{background:var(--fill);color:#fff;border-radius:50%;padding:3px;width:1.4rem;height:1.4rem;margin-top:.1rem}
/* галочки домальовуються, коли картка з'являється */
.js .checks .ic{stroke-dasharray:24;stroke-dashoffset:24}
.js .feature.in .checks .ic{animation:draw .5s ease forwards;animation-delay:calc(.35s + var(--i,0) * .12s)}

.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.25rem;border-radius:12px;font:inherit;font-weight:600;text-decoration:none;border:2px solid var(--navy);background:var(--surface);color:var(--navy);cursor:pointer;transition:background .2s,transform .15s,box-shadow .2s}
.btn:hover{background:var(--sky)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--fill);color:#fff}
.btn.primary:hover{background:var(--navy-2);box-shadow:var(--sh2)}
.ripple{position:absolute;border-radius:50%;background:rgba(255,255,255,.5);transform:scale(0);animation:ripple .65s linear;pointer-events:none}

.nl article{padding:1.3rem 0;border-top:1px solid var(--line)}
.nl article:first-child{border-top:0;padding-top:0}
.nl time{display:block;font-size:.85rem;color:var(--muted)}
.nl h3{font-family:var(--serif);font-weight:650;font-size:1.22rem;line-height:1.25;margin:.15rem 0 .45rem}
.nl p{margin:0;color:var(--ink-2)}
.nl .rd{display:inline-block;margin-top:.5rem;font-weight:600}
@media (max-width:860px){.news{grid-template-columns:1fr}}

.help{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.phones{margin-top:1.75rem;display:grid;gap:.75rem}
.phone{display:flex;align-items:center;gap:1rem;text-decoration:none;background:var(--surface);border-radius:var(--r-m);padding:.85rem 1.1rem;box-shadow:var(--sh1);transition:box-shadow .2s,transform .2s var(--ease)}
.phone strong{font-family:var(--serif);font-weight:700;font-size:1.8rem;color:var(--navy);min-width:4.4ch;white-space:nowrap}
.phone:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.tile{display:block;background:var(--surface);border:2px solid transparent;border-radius:var(--r-m);padding:1.3rem;text-decoration:none;transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.tile:hover{border-color:var(--navy);transform:translateY(-4px);box-shadow:var(--sh2)}
.tile:hover .ico{background:var(--fill);color:#fff;transform:rotate(-6deg) scale(1.08)}
.tile .ico{margin-bottom:.9rem}
.tile b{display:block;font-family:var(--serif);font-weight:650;font-size:1.2rem;margin-bottom:.35rem}
.tile span.d{color:var(--muted);font-size:.94rem}
@media (max-width:860px){.help{grid-template-columns:1fr}}
@media (max-width:520px){.tiles{grid-template-columns:1fr}}

.map{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:1rem;align-items:start}
details.grp{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);transition:box-shadow .2s}
details.grp[open]{box-shadow:var(--sh1)}
details.grp summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;list-style:none;padding:1.05rem 1.25rem;font-family:var(--serif);font-weight:650;font-size:1.15rem}
details.grp summary::-webkit-details-marker{display:none}
details.grp summary .ic{transition:transform .3s var(--ease)}
details.grp[open] summary .ic{transform:rotate(90deg)}
details.grp[open] ul{animation:drop .3s var(--ease)}
details.grp ul{list-style:none;margin:0;padding:0 1.25rem 1.1rem}
details.grp li a{display:block;padding:.4rem 0;text-decoration:none;font-size:.95rem;transition:padding-left .2s var(--ease),color .2s}
details.grp li a:hover{padding-left:.4rem;color:var(--navy-2);text-decoration:underline}
details.grp li.sub a{padding-left:1rem;color:var(--muted);font-size:.9rem}
details.grp li.sub a:hover{padding-left:1.4rem}

/* 8. контакти та форма */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.5rem,4vw,3rem);align-items:stretch}
.info{list-style:none;margin:1.5rem 0;padding:0;display:grid;gap:1rem}
.info li{display:flex;gap:.9rem;align-items:flex-start}
.info .ic{margin-top:.2rem;color:var(--navy-2);font-size:1.3rem}
.info a{text-underline-offset:3px}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}
.also{margin:1.25rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;font-size:.95rem}
.also a{font-weight:600;text-underline-offset:3px}
.map-frame{border:0;width:100%;height:100%;min-height:420px;border-radius:var(--r-l);background:var(--sky)}
@media (max-width:860px){.contact{grid-template-columns:1fr}.map-frame{min-height:320px}}

.formcard{margin-top:2rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(1.1rem,3vw,1.6rem)}
.formcard h3{font-family:var(--serif);font-weight:650;font-size:1.3rem;margin-bottom:1.1rem}
.field{margin-bottom:1rem}
.field .box{position:relative}
.field input,.field textarea{width:100%;display:block;font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-m);padding:1.5rem 2.6rem .55rem 1rem;transition:border-color .2s,box-shadow .25s}
.field textarea{resize:vertical;min-height:7.5rem;padding-bottom:1.6rem}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px rgba(31,58,120,.16)}
.field label{position:absolute;left:1rem;top:1rem;color:var(--muted);pointer-events:none;transform-origin:left top;transition:transform .22s var(--ease),color .2s}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{transform:translateY(-.62rem) scale(.78);color:var(--navy-2)}
.field .st{position:absolute;right:.9rem;top:1.05rem;color:var(--ok);opacity:0;transform:scale(.4);transition:opacity .25s,transform .35s var(--ease);pointer-events:none}
.field.valid .st{opacity:1;transform:none}
.field.valid input,.field.valid textarea{border-color:#8CC7A1}
.field.invalid input,.field.invalid textarea{border-color:var(--bad);box-shadow:0 0 0 4px rgba(179,38,30,.12);animation:shake .4s}
.field .err{margin:0;color:var(--bad);font-size:.88rem;max-height:0;opacity:0;overflow:hidden;transition:max-height .3s var(--ease),opacity .25s,margin .3s}
.field.invalid .err{max-height:3rem;opacity:1;margin-top:.35rem}
.field .count{position:absolute;right:.9rem;bottom:.55rem;font-size:.78rem;color:var(--muted);pointer-events:none}
.formcard .btn[type=submit]{min-width:11rem}
.btn.loading{pointer-events:none;opacity:.9}
.btn.loading .ic{display:none}
.btn.loading::after{content:"";width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.form-note{margin:.9rem 0 0;font-size:.88rem;color:var(--muted)}
.sent{margin-top:2rem;background:#EAF6EF;border:1px solid #B9DEC6;border-radius:var(--r-l);padding:1.6rem;animation:rise .5s var(--ease)}
.sent[hidden]{display:none}
.sent .big{width:56px;height:56px;border-radius:50%;background:var(--ok);display:grid;place-items:center;margin-bottom:1rem;animation:pop .5s var(--ease)}
.sent .big svg{width:30px;height:30px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:draw .5s ease .25s forwards}
.sent h3{font-family:var(--serif);font-size:1.3rem;margin-bottom:.4rem}
.sent p{margin:0 0 .8rem}

/* 9. підвал, «нагору» */
footer{background:var(--band);color:#D5DEF2;padding:3rem 0 2rem;font-size:.95rem}
.foot{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.7fr) minmax(0,1.4fr);gap:2rem}
.foot h2{font-size:1.15rem;color:#fff;margin-bottom:.8rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.foot ul.two{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.4rem 2rem}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}
.copy{margin-top:2rem;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.2);font-size:.85rem}
@media (max-width:860px){.foot{grid-template-columns:1fr}}

.totop{position:fixed;right:1rem;bottom:1rem;z-index:60;width:46px;height:46px;border-radius:50%;border:0;background:var(--fill);color:#fff;box-shadow:var(--sh2);cursor:pointer;display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateY(12px) scale(.8);transition:opacity .25s,transform .3s var(--ease)}
.totop.show{opacity:1;pointer-events:auto;transform:none}
.totop:hover .ic{animation:bounce .5s}
.totop .ic{font-size:1.4rem}
.totop:focus-visible{outline-color:var(--sun)}
noscript div{padding:1rem;background:var(--sun);color:#2A1E00;text-align:center}

/* якщо в системі вимкнені анімації - сайт без руху */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js [data-reveal]{opacity:1;transform:none}
  .js .checks .ic{stroke-dashoffset:0}
}

/* 10. внутрішні сторінки */
.page{padding:2.5rem 0 4.5rem}
.crumbs{display:flex;flex-wrap:wrap;gap:.35rem .5rem;font-size:.9rem;color:var(--muted);margin-bottom:1.25rem}
.crumbs a{text-decoration:none}.crumbs a:hover{text-decoration:underline}
.page-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.side{position:sticky;top:88px;border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;font-size:.95rem;max-height:calc(100vh - 110px);overflow:auto}
.side h2{font-size:1.05rem;margin-bottom:.5rem}
.side ul{list-style:none;margin:0;padding:0}
.side ul ul{padding-left:.9rem;border-left:2px solid var(--line);margin:.15rem 0 .35rem}
.side a{display:block;padding:.35rem 0;text-decoration:none;line-height:1.3}
.side a:hover{text-decoration:underline}
.side a[aria-current]{font-weight:700;color:var(--navy)}
.content{min-width:0;max-width:78ch}
.content h1{font-family:var(--serif);font-weight:700;font-size:clamp(1.8rem,3.5vw,2.6rem);line-height:1.15;margin-bottom:1.5rem;text-wrap:balance}
.content h2,.content h3,.content h4{font-family:var(--serif);font-weight:650;line-height:1.25;margin:2rem 0 .6rem}
.content h2{font-size:1.6rem}.content h3{font-size:1.3rem}.content h4{font-size:1.1rem}
.content p{margin:0 0 1rem}
.content ul,.content ol{margin:0 0 1rem;padding-left:1.4rem}
.content li{margin:.25rem 0}
.content a{color:var(--navy-2);text-underline-offset:3px}
.content a.file{display:inline-block;padding:.15rem 0}
.content a.file::before{content:"";display:inline-block;width:1em;height:1.15em;margin-right:.5rem;vertical-align:-.2em;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5'/%3E%3C/svg%3E") center/contain no-repeat}
.content img{height:auto;border-radius:10px;margin:.5rem 0}
.content table{border-collapse:collapse;display:block;overflow-x:auto;max-width:100%;margin:0 0 1.25rem}
.content td,.content th{border:1px solid var(--line);padding:.5rem .7rem;vertical-align:top}
.content blockquote{margin:0 0 1rem;padding-left:1rem;border-left:4px solid var(--sun);color:var(--ink-2)}
.content .embed{position:relative;aspect-ratio:16/10;margin:1.25rem 0;background:var(--paper);border-radius:10px}
.content .embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:10px}
@media (max-width:900px){.page-grid{grid-template-columns:1fr}.side{position:static;max-height:none}}

/* 11. педагогічний колектив (teachers.html) */
.t-hero{padding:clamp(2.25rem,5vw,3.5rem) 0 clamp(2.5rem,5vw,3.75rem)}
.t-hero .hero-bg .num{font-size:clamp(9rem,22vw,18rem)}
.t-hero .crumbs{color:#B9C6E4;margin-bottom:1rem}
.t-hero .crumbs a{color:#fff}
.t-stats{list-style:none;margin:1.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.t-stats li{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:.35rem 1rem;color:#D5DEF2}
.t-stats b{color:var(--sun);font-size:1.1rem;margin-right:.2rem}
.js .t-stats{animation:rise .8s var(--ease) .3s both}

.t-sec{padding-top:clamp(2rem,4vw,3rem)}
.t-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:clamp(1.5rem,3.5vw,3rem);align-items:start}
.t-side{position:sticky;top:88px;display:grid;gap:.75rem}
.t-find{position:relative}
.t-find .ic{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);color:var(--muted);pointer-events:none;transition:color .2s}
.t-find input{width:100%;font:inherit;color:var(--ink);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-m);padding:.8rem 1rem .8rem 2.7rem;transition:border-color .2s,box-shadow .25s}
.t-find input:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px rgba(31,58,120,.16)}
.t-find:focus-within .ic{color:var(--navy)}

.t-groups{list-style:none;margin:0;padding:.45rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);display:grid;gap:.15rem}
.t-g{width:100%;display:flex;align-items:center;gap:.7rem;font:inherit;font-weight:500;font-size:.95rem;line-height:1.25;text-align:left;color:var(--ink);background:transparent;border:0;border-radius:var(--r-m);padding:.5rem .6rem;cursor:pointer;transition:background .2s,color .2s}
.t-g .ico,.t-pick .ico{width:34px;height:34px;border-radius:10px;background:var(--surface)}
.t-g .ico .ic,.t-pick .ico .ic{font-size:1.05rem}
.t-g-name{flex:1;min-width:0}
.t-n{flex:none;min-width:1.9rem;text-align:center;font-size:.8rem;font-weight:600;color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.1rem .45rem;transition:background .2s,color .2s,border-color .2s}
.t-g:hover{background:var(--surface)}
.t-g:hover .ico{transform:rotate(-6deg) scale(1.08)}
.t-g[aria-current=true]{background:var(--fill);color:#fff}
.t-g[aria-current=true] .ico{background:rgba(255,255,255,.14);color:#fff}
.t-g[aria-current=true] .t-n{background:var(--sun);border-color:var(--sun);color:#2A1E00}
.t-pick{display:none}

.t-head{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;min-height:52px}
.t-head .ico{width:52px;height:52px;border-radius:14px;background:var(--fill);color:#fff}
.t-head h2{font-size:clamp(1.4rem,2.6vw,1.9rem)}
.t-head .lead{margin-top:.2rem}
.t-head .lead:empty{display:none}

.t-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:1rem}
.t-grid.swap li{animation:rise .4s var(--ease) both;animation-delay:calc(var(--i,0) * 35ms)}
.t-card{display:flex;flex-direction:column;width:100%;height:100%;padding:0;font:inherit;text-align:left;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;cursor:pointer;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.t-card:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:var(--navy)}
.t-ph{position:relative;display:grid;place-items:center;aspect-ratio:4/5;overflow:hidden;color:rgba(255,255,255,.5);
  background-color:var(--band);
  background-image:radial-gradient(80% 70% at 85% 0%,rgba(90,130,230,.45),transparent 65%),
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:auto,22px 22px,22px 22px}
.t-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 20%;margin:0;border-radius:0;transition:transform .5s var(--ease)}
.t-card:hover .t-ph img{transform:scale(1.05)}
.t-ph>.ic{width:42%;height:42%;stroke-width:1.3}
.t-ini{font-family:var(--serif);font-weight:700;font-size:2.6rem;color:#fff;letter-spacing:.02em}
.t-ph .gal-ph{position:absolute;inset:0}
.t-ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--sun);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.t-card:hover .t-ph::after{transform:scaleX(1)}
.t-body{display:flex;flex-direction:column;gap:.2rem;padding:.85rem 1rem 1rem;flex:1}
.t-body b{font-family:var(--serif);font-weight:650;font-size:1.05rem;line-height:1.25}
.is-ph{color:var(--muted)}
.t-role{color:var(--muted);font-size:.9rem;line-height:1.35}
.t-grp{font-size:.8rem;color:var(--navy-2);font-weight:600}
.t-badge{align-self:flex-start;margin-top:.35rem;font-size:.78rem;font-weight:600;background:var(--sky);color:var(--navy);border-radius:6px;padding:.15rem .5rem}
.t-empty{margin:0;padding:1.5rem;background:var(--paper);border:1px dashed var(--line);border-radius:var(--r-m);color:var(--muted);text-align:center}

.t-dlg{overscroll-behavior:contain;width:min(780px,100% - 2rem);max-height:calc(100% - 2rem);padding:0;border:0;border-radius:var(--r-l);color:var(--ink);background:var(--surface);box-shadow:0 30px 80px rgba(10,20,50,.45);overflow:auto}
.t-dlg[open]{animation:rise .35s var(--ease)}
.t-dlg::backdrop{background:rgba(20,39,78,.55);backdrop-filter:blur(4px)}
.t-dlg-in{display:grid;grid-template-columns:280px minmax(0,1fr)}
.t-dlg-in.swap .t-info>*{animation:rise .35s var(--ease) both}
.t-dlg .t-ph{aspect-ratio:auto;min-height:360px}
.t-info{padding:clamp(1.25rem,3vw,2rem);display:flex;flex-direction:column}
.t-info .t-grp{text-transform:uppercase;letter-spacing:.04em;margin-right:3rem}
.t-info h2{font-size:clamp(1.4rem,2.6vw,1.8rem);margin:.35rem 0 .3rem}
.t-info .t-role{font-size:1rem}
.t-dl{margin:1.25rem 0 0;display:grid;gap:.7rem}
.t-dl div{border-top:1px solid var(--line);padding-top:.65rem}
.t-dl dt{font-size:.82rem;color:var(--muted)}
.t-dl dd{margin:.1rem 0 0;font-weight:500}
.t-about{margin-top:1.1rem}
.t-about p{margin:0 0 .75rem}
.t-proj-h{font-size:1.05rem;margin:1rem 0 .6rem}
.t-proj{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.t-proj li{display:flex;gap:.6rem;align-items:flex-start;background:var(--paper);border-radius:var(--r-s);padding:.65rem .8rem;line-height:1.45}
.t-proj .ic{flex:none;width:1.1rem;height:1.1rem;margin-top:.15rem;color:var(--navy-2)}
.t-soon{color:var(--muted);font-size:.95rem;background:var(--paper);border-radius:var(--r-s);padding:.75rem .9rem}
.t-nav{margin-top:auto;padding-top:1.25rem;display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.t-nav .btn{padding:.55rem .8rem}
.t-nav .btn:disabled{opacity:.35;cursor:default;background:var(--surface)}
.t-nav .prev .ic{transform:rotate(180deg)}
.t-pos{font-size:.88rem;color:var(--muted)}
.t-x{position:absolute;right:.75rem;top:.75rem;z-index:2;width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:50%;background:var(--paper);color:var(--ink);cursor:pointer;transition:background .2s,transform .3s var(--ease)}
.t-x:hover{background:var(--sky);transform:rotate(90deg)}

@media (max-width:899px){
  .t-layout{grid-template-columns:1fr}
  .t-side{position:static}
  .t-pick{display:flex;align-items:center;gap:.7rem;width:100%;font:inherit;font-weight:600;line-height:1.25;text-align:left;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-m);padding:.55rem .9rem .55rem .6rem;cursor:pointer}
  .t-pick small{display:block;font-size:.75rem;font-weight:500;color:var(--muted)}
  .t-pick>.ic:last-child{color:var(--muted);transform:rotate(90deg);transition:transform .3s var(--ease)}
  .t-side.open .t-pick>.ic:last-child{transform:rotate(-90deg)}
  .t-groups{display:none}
  .t-side.open .t-groups{display:grid;animation:drop .25s var(--ease)}
  .t-main{scroll-margin-top:84px}
}
@media (max-width:560px){
  .t-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}
  .t-body{padding:.7rem .75rem .8rem}
  .t-body b{font-size:.97rem}
}
@media (max-width:640px){
  .t-dlg-in{grid-template-columns:1fr}
  .t-dlg .t-ph{min-height:0;aspect-ratio:auto;height:min(58vw,260px)}
  /* якщо є фото - вертикальний портрет по центру, щоб голову не різало */
  .t-dlg .t-ph:has(img){width:min(62%,230px);height:auto;aspect-ratio:4/5;margin:1.5rem auto 0;border-radius:var(--r-m)}
  .t-dlg .t-ph:has(img) img{object-position:50% 12%}
  .t-dlg .t-ph:has(img)::after{display:none}
  .t-dlg .t-info{text-align:center}
  .t-dlg .t-info :is(.t-dl,.t-about){text-align:left}
  .t-dlg .t-info .t-grp{margin-right:0}
}
html.contrast .t-card,html.contrast .t-groups,html.contrast .t-pick,html.contrast .t-dlg{border:2px solid #000}

/* 12. налаштування, гуртки, відгуки, фотокарусель */
/* плавно міняємо кольори при перемиканні теми (common.js ставить клас на пів секунди) */
html.theming *,html.theming *::before,html.theming *::after{transition:background-color .4s,color .4s,border-color .4s,fill .4s!important}
@media (max-width:480px){.util #btn-dark .lbl{display:none}}
.hero-bg.has-photo{background-image:
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(100deg,rgba(20,39,78,.95) 30%,rgba(20,39,78,.72)),
    var(--photo);
  background-size:28px 28px,28px 28px,auto,cover;background-position:0 0,0 0,0 0,center}
html.dark .hero-bg.has-photo{background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(100deg,rgba(10,17,34,.96) 30%,rgba(10,17,34,.78)),var(--photo)}
.sec.alt .formcard{background:var(--surface)}
.empty-note{grid-column:1/-1;list-style:none;padding:1.5rem;background:var(--paper);border:1px dashed var(--line);border-radius:var(--r-m);color:var(--muted);text-align:center}

/* кнопки-фішки (фільтр гуртків, "хто ви" у формі) */
.club-filters,.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.club-filters{margin-bottom:1.5rem}
.club-filters:empty{display:none}
.chip{position:relative;display:inline-flex;align-items:center;gap:.45rem;font:inherit;font-weight:600;font-size:.95rem;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .15s}
.chip:hover{border-color:var(--navy)}
.chip:active{transform:scale(.96)}
.chip span{font-size:.78rem;color:var(--muted);transition:color .2s}
.chip[aria-pressed=true],.chip:has(input:checked){background:var(--fill);border-color:var(--fill);color:#fff}
.chip[aria-pressed=true] span{color:var(--sun)}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip:has(input:focus-visible){outline:3px solid var(--navy-2);outline-offset:2px}
.chips .chip span{font-size:inherit;color:inherit}

.clubs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:1rem}
.clubs.swap li{animation:rise .4s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms)}
.club{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:1.25rem;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.club:hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:var(--navy)}
.club:hover .ico{background:var(--fill);color:#fff;transform:rotate(-6deg) scale(1.08)}
.club-top{display:flex;align-items:center;gap:.85rem}
.club h3{font-family:var(--serif);font-weight:650;font-size:1.2rem;line-height:1.2}
.club-cat{font-size:.8rem;font-weight:600;color:var(--muted)}
.club p{margin:.85rem 0 0;color:var(--ink-2);font-size:.95rem}
.club-meta{margin:auto 0 0;padding-top:1rem;display:grid;gap:.4rem;font-size:.92rem}
.club-meta div{display:flex;align-items:center;gap:.55rem;border-top:1px solid var(--line);padding-top:.45rem}
.club-meta dt{display:flex;color:var(--navy-2)}
.club-meta dd{margin:0}
html.contrast .club,html.contrast .rv{border:2px solid #000}

/* відгуки */
.rv-top{align-items:center}
.rv-sum{display:grid;grid-template-columns:auto auto;column-gap:.75rem;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);padding:.7rem 1.1rem}
.rv-sum:empty{display:none}
.rv-sum b{grid-row:1/3;font-family:var(--serif);font-size:2.3rem;line-height:1;color:var(--navy)}
.rv-sum small{color:var(--muted);font-size:.85rem}
.rv-stars{display:inline-flex;gap:2px}
.rv-stars .ic{width:1.05rem;height:1.05rem;fill:var(--sun);stroke:var(--sun)}
.rv-stars .ic.off{fill:none;stroke:var(--line)}
.rv-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}
.rv{position:relative;display:flex;flex-direction:column;gap:.75rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:1.35rem 1.35rem 1.2rem}
.rv-q{position:absolute;right:1.1rem;top:1rem;width:2.4rem;height:2.4rem;color:var(--sky);fill:var(--sky);stroke:none}
.rv blockquote{margin:0;position:relative}
.rv blockquote p{margin:0;color:var(--ink-2);white-space:pre-line}
.rv.long:not(.open) blockquote p{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.rv-toggle{align-self:flex-start;font:inherit;font-size:.9rem;font-weight:600;color:var(--navy-2);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.rv-by{margin-top:auto;display:flex;align-items:center;gap:.75rem;padding-top:.85rem;border-top:1px solid var(--line)}
.rv-av{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:var(--fill);color:#fff;font-family:var(--serif);font-weight:700}
.rv-by b{display:block;line-height:1.2}
.rv-by small{color:var(--muted);font-size:.85rem}
.rv-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}

.rv-dlg,.game{width:min(560px,100% - 2rem);max-height:calc(100% - 2rem);padding:0;border:0;border-radius:var(--r-l);color:var(--ink);background:var(--surface);box-shadow:0 30px 80px rgba(10,20,50,.45);overflow:auto;overscroll-behavior:contain}
.rv-dlg[open],.game[open]{animation:rise .35s var(--ease)}
.rv-dlg::backdrop,.game::backdrop{background:rgba(20,39,78,.55);backdrop-filter:blur(4px)}
.rv-form{padding:clamp(1.25rem,4vw,1.8rem)}
.rv-form h3{font-family:var(--serif);font-weight:650;font-size:1.45rem;margin-right:2.5rem}
.rv-form .form-note{margin:.4rem 0 1.25rem}
.rv-set{border:0;margin:0 0 1rem;padding:0}
.rv-set legend{padding:0;margin-bottom:.5rem;font-weight:600;font-size:.95rem}
.rv-set legend small{font-weight:400;color:var(--muted)}
.rv-set .chip{font-size:.88rem;padding:.4rem .85rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.rv-dlg .sent{margin:0;border:0;border-radius:0;padding:clamp(1.5rem,4vw,2.2rem)}
.stars-in{display:inline-flex;flex-direction:row-reverse;gap:.15rem}
.stars-in input{position:absolute;opacity:0;pointer-events:none}
.stars-in label{cursor:pointer;padding:.15rem;border-radius:8px;color:var(--line);transition:transform .15s var(--ease),color .15s}
.stars-in label .ic{width:2rem;height:2rem;fill:currentColor;stroke:currentColor}
.stars-in label:hover,.stars-in label:hover~label,.stars-in input:checked~label{color:var(--sun)}
.stars-in label:hover{transform:scale(1.15)}
.stars-in input:focus-visible+label{outline:3px solid var(--navy-2)}

/* фотокарусель під картою */
.gal-sec{overflow:hidden}
.gal-nav{display:flex;gap:.5rem}
.gal-btn{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .15s,opacity .2s}
.gal-btn:hover:not(:disabled){background:var(--fill);border-color:var(--fill);color:#fff}
.gal-btn:active:not(:disabled){transform:scale(.92)}
.gal-btn:disabled{opacity:.35;cursor:default}
.gal-btn.prev .ic,.lb-nav.prev .ic{transform:rotate(180deg)}
.gal-track{list-style:none;margin:0;display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:.25rem max(1.25rem,(100% - 1180px) / 2) 1rem;scroll-padding-inline:max(1.25rem,(100% - 1180px) / 2)}
.gal-track::-webkit-scrollbar{display:none}
.gal-slide{flex:0 0 min(82%,540px);scroll-snap-align:start}
.gal-item{position:relative;display:block;width:100%;aspect-ratio:16/10;padding:0;border:0;border-radius:var(--r-l);overflow:hidden;cursor:zoom-in;background:var(--band);box-shadow:var(--sh1);transition:box-shadow .25s,transform .25s var(--ease)}
.gal-item:hover{box-shadow:var(--sh2);transform:translateY(-3px)}
html.dark .gal-item,html.dark .t-ph{box-shadow:inset 0 0 0 1px var(--line)}
.gal-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.gal-item:hover img{transform:scale(1.05)}
.gal-cap{position:absolute;left:0;right:0;bottom:0;padding:2.5rem 1.1rem .9rem;text-align:left;color:#fff;font-weight:600;background:linear-gradient(transparent,rgba(8,14,30,.78))}
.gal-ph{display:grid;grid-template:minmax(0,1fr)/minmax(0,1fr);width:100%;height:100%;color:rgba(255,255,255,.55);
  background-image:radial-gradient(80% 70% at 85% 0%,rgba(90,130,230,.45),transparent 65%),
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:auto,24px 24px,24px 24px}
.cat-box{display:block;box-sizing:border-box;width:100%;height:100%;padding:5%}
.cat-box text{font-family:var(--f-text,"Manrope",sans-serif);font-weight:800}
.cat-box .cat-s{font-weight:600}

.lb{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(6,10,22,.94);color:#fff;overflow:hidden}
.lb[open]{display:grid;place-items:center;animation:rise .3s var(--ease)}
.lb::backdrop{background:transparent}
.lb-fig{margin:0;width:min(1200px,100% - 7rem);display:grid;gap:.8rem}
.lb-img{display:flex;align-items:center;justify-content:center;height:min(78vh,760px);min-height:0}
.lb-img.swap>*{animation:rise .3s var(--ease)}
.lb-img img{display:block;width:auto;height:auto;max-width:100%;max-height:min(78vh,760px);object-fit:contain;border-radius:12px}
.lb-img .gal-ph{border-radius:var(--r-l);background-color:var(--band);aspect-ratio:16/10;height:auto;max-height:100%}
.gal-ph.cat-ph{background:#E6ECF7}
.lb figcaption{display:flex;justify-content:space-between;gap:1rem;font-weight:500}
.lb-pos{color:#B9C6E4;font-variant-numeric:tabular-nums}
.lb-x,.lb-nav{position:absolute;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;transition:background .2s}
.lb-x:hover,.lb-nav:hover{background:rgba(255,255,255,.24)}
.lb-x{right:1rem;top:1rem;width:46px;height:46px}
.lb-nav{top:50%;width:52px;height:52px;margin-top:-26px;left:1rem}
.lb-nav:not(.prev){left:auto;right:1rem}
.lb :focus-visible{outline-color:var(--sun)}
@media (max-width:700px){
  .lb-fig{width:calc(100% - 1.5rem)}
  .lb-img{height:min(62vh,760px)}
  .lb-img img{max-height:min(62vh,760px)}
  .lb-nav{top:auto;bottom:1rem;margin:0}
  .lb figcaption{padding-bottom:4.5rem}
  .gal-nav{display:none}
}

/* 13. пасхалка: міні-гра (js/game.js) */
.game{width:min(560px,100% - 1.5rem)}
.game-hud{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 4rem 1rem 1.25rem;border-bottom:1px solid var(--line);font-size:.9rem;color:var(--muted)}
.game-hud b{font-family:var(--serif);font-size:1.3rem;color:var(--ink);margin-left:.25rem;font-variant-numeric:tabular-nums}
.game-lives{display:flex;gap:.2rem}
.game-lives .ic{fill:var(--bad);stroke:var(--bad)}
.game-lives .ic.off{fill:none;stroke:var(--line)}
.game-stage{position:relative;height:min(68vh,560px);background:var(--paper);touch-action:none}
.game-stage canvas{display:block;width:100%;height:100%;outline:none;cursor:none}
.game-screen{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:.8rem;padding:1.5rem;text-align:center;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(3px);cursor:default}
.game-screen[hidden]{display:none}
.game-screen h2{font-size:clamp(1.6rem,5vw,2.2rem)}
.game-screen p{margin:0;max-width:36ch;color:var(--ink-2)}
.game-screen .bad{color:var(--bad)}
.game-badge{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--sun);color:#2A1E00;border-radius:6px;padding:.2rem .6rem;animation:pop .5s var(--ease)}
.game .t-x{top:.55rem}
.lb-nav[hidden]{display:none}

/* 14. все про заклад (about.html) */
.jump{list-style:none;margin:1.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.jump a{display:inline-block;text-decoration:none;font-weight:500;font-size:.92rem;color:#D5DEF2;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:.4rem .95rem;transition:background .2s,color .2s,border-color .2s}
.jump a:hover{background:var(--sun);border-color:var(--sun);color:#2A1E00}
.js .jump{animation:rise .8s var(--ease) .3s both}

/* історія */
.h-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.h-text{font-size:1.08rem;color:var(--ink-2);max-width:62ch}
.h-text p{margin:0 0 1rem}
.h-text p:first-child::first-letter{float:left;font-family:var(--serif);font-weight:700;font-size:3.4em;line-height:.85;margin:.08em .12em 0 0;color:var(--navy)}
.h-side{display:grid;gap:1rem}
.h-age{position:relative;overflow:hidden;display:grid;background:var(--band);color:#fff;border-radius:var(--r-l);padding:1.4rem 1.5rem;
  background-image:radial-gradient(70% 90% at 100% 0%,rgba(90,130,230,.45),transparent 60%),linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:auto,22px 22px,22px 22px}
.h-age b{font-family:var(--serif);font-weight:700;font-size:clamp(3rem,7vw,4.2rem);line-height:1;color:var(--sun)}
.h-age span{font-size:1.15rem;font-weight:600}
.h-age small{color:#B9C6E4}
.h-dirs{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:1.1rem 1.2rem}
.h-dirs h3{font-family:var(--serif);font-weight:650;font-size:1.1rem;margin-bottom:.6rem}
.h-dirs ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.h-dirs li{display:flex;align-items:center;gap:.75rem}
.h-dirs .ico{width:38px;height:38px;border-radius:50%;background:var(--surface)}
.h-dirs li.now .ico{background:var(--fill);color:#fff}
.h-dirs b{display:block;line-height:1.25}
.h-dirs small{color:var(--muted);font-size:.85rem}

.timeline{list-style:none;margin:clamp(2rem,5vw,3.25rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1.25rem;position:relative}
.timeline::before{content:"";position:absolute;left:0;right:0;top:3.05rem;height:2px;background:linear-gradient(90deg,var(--sun),var(--line))}
.timeline li{position:relative}
.tl-year{display:block;font-family:var(--serif);font-weight:700;font-size:2rem;line-height:1;color:var(--navy)}
.tl-dot{display:block;width:16px;height:16px;border-radius:50%;background:var(--surface);border:3px solid var(--sun);margin:.75rem 0 .9rem;position:relative;z-index:1;transition:transform .3s var(--ease)}
.timeline li:hover .tl-dot{transform:scale(1.35);background:var(--sun)}
.timeline li:last-child .tl-dot{background:var(--sun)}
.timeline b{display:block;font-weight:600;line-height:1.3}
.timeline p{margin:.3rem 0 0;color:var(--muted);font-size:.92rem}
.js .timeline.in li{animation:rise .6s var(--ease) both;animation-delay:calc(.1s + var(--i,0) * .1s)}
@media (max-width:860px){
  .h-grid{grid-template-columns:1fr}
  .timeline{grid-template-columns:1fr;gap:0;padding-left:1.75rem}
  .timeline::before{left:7px;right:auto;top:.4rem;bottom:.4rem;width:2px;height:auto;background:linear-gradient(var(--sun),var(--line))}
  .timeline li{padding-bottom:1.4rem}
  .tl-dot{position:absolute;left:-1.75rem;top:.35rem;margin:0}
  .tl-year{font-size:1.6rem;margin-bottom:.3rem}
}

/* акордеон */
.acc{display:grid;gap:.75rem}
.acc-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);transition:box-shadow .25s,border-color .25s}
.acc-item.open{box-shadow:var(--sh1);border-color:var(--navy)}
.acc-item h3{margin:0;font:inherit}
.acc-head{width:100%;display:flex;align-items:center;gap:1rem;font:inherit;text-align:left;text-decoration:none;color:var(--ink);background:none;border:0;border-radius:var(--r-l);padding:1rem 1.25rem;cursor:pointer}
.acc-head:hover .ico,.acc-item.open .acc-head .ico{background:var(--fill);color:#fff}
.acc-head:hover .ico{transform:rotate(-6deg) scale(1.06)}
.acc-t{flex:1;min-width:0;font-family:var(--serif);font-weight:650;font-size:clamp(1.05rem,2vw,1.25rem);line-height:1.25}
.acc-t small{display:block;margin-top:.15rem;font-family:var(--sans);font-weight:400;font-size:.88rem;color:var(--muted)}
.acc-t small:empty{display:none}
.acc-chev{color:var(--muted);transition:transform .35s var(--ease),color .2s}
.acc-item.open .acc-chev{transform:rotate(90deg);color:var(--navy)}
.acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.acc-item.open .acc-body{grid-template-rows:1fr}
.acc-item.instant .acc-body{transition:none}
.acc-in{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s .45s}
.acc-item.open .acc-in{visibility:visible;transition:none}
.acc-pad{padding:.25rem 1.25rem 1.5rem;border-top:1px solid var(--line);padding-top:1.25rem;margin:0 0 0}
.acc-item.link .acc-head{border-radius:var(--r-l)}
.acc-item.link:hover{border-color:var(--navy);box-shadow:var(--sh1)}
.acc-go{display:inline-flex;align-items:center;gap:.35rem;font-weight:600;font-size:.92rem;color:var(--navy-2);white-space:nowrap}
.acc-go .ic{transition:transform .2s var(--ease)}
.acc-item.link:hover .acc-go .ic{transform:translateX(4px)}
.acc-sub{font-family:var(--serif);font-weight:650;font-size:1.1rem;margin:1.75rem 0 .85rem}
@media (max-width:560px){.acc-go{font-size:0;gap:0}.acc-go .ic{font-size:1rem}.acc-head{padding:.9rem 1rem;gap:.75rem}.acc-pad{padding-inline:1rem}}

/* адміністрація */
.adm-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem}
.adm{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s}
.adm:hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.adm .t-ph{aspect-ratio:1/1}
.adm.adm-lead .t-ph::after{transform:scaleX(1)}
.adm-body{display:flex;flex-direction:column;gap:.25rem;padding:.95rem 1.05rem 1.1rem;flex:1}
.adm-pos{font-size:.78rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--navy-2)}
.adm h4{font-family:var(--serif);font-weight:650;font-size:1.12rem;line-height:1.25;margin:0}
.adm-sub{color:var(--muted);font-size:.9rem}
.adm-contacts{display:grid;gap:.2rem;margin-top:.35rem;font-size:.9rem}
.adm-contacts a{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none}
.adm-contacts a:hover{text-decoration:underline}
.adm-rec{margin-top:auto;padding-top:.8rem}
.adm-rec>span{display:flex;align-items:center;gap:.4rem;font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:.35rem}
.adm-rec ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.adm-rec li{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600;background:var(--sky);color:var(--navy);border-radius:8px;padding:.2rem .55rem .2rem .25rem}
.rec-d{background:var(--fill);color:#fff;border-radius:6px;padding:.05rem .4rem;font-size:.75rem}

/* графік прийому */
.rec{margin-top:1.75rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(1rem,3vw,1.5rem);scroll-margin-top:96px}
.rec-top{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}
.rec-top h4{font-family:var(--serif);font-weight:650;font-size:1.3rem;margin:0}
.rec-note{margin:.35rem 0 0;color:var(--muted);font-size:.92rem;max-width:60ch}
.rec-note .more{margin-left:.25rem}
.rec-today{display:flex;align-items:center;gap:.6rem;margin:1rem 0;padding:.7rem .95rem;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--sun);border-radius:var(--r-s);font-size:.95rem}
.rec-today .ic{color:var(--navy-2);flex:none}
.rec-week{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem}
.rec-day{display:flex;flex-direction:column;gap:.5rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:.8rem;min-height:9rem;transition:transform .2s var(--ease)}
.rec-day.today{border:2px solid var(--sun);box-shadow:0 8px 24px rgba(244,180,0,.18);transform:translateY(-3px)}
.rec-h{display:flex;justify-content:space-between;align-items:center;gap:.4rem;flex-wrap:wrap}
.rec-h b{font-size:.95rem}
.rec-now{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--sun);color:#2A1E00;border-radius:5px;padding:.1rem .4rem}
.rec-slot{display:grid;gap:.05rem;padding:.55rem .6rem;background:var(--sky);border-radius:var(--r-s)}
.rec-time{display:flex;align-items:center;gap:.3rem;font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums}
.rec-time .ic{width:.95rem;height:.95rem}
.rec-slot b{font-size:.9rem;font-weight:600;line-height:1.25}
.rec-slot small{font-size:.78rem;color:var(--muted);line-height:1.3}
.rec-none{margin:auto 0;color:var(--muted);font-size:.85rem;text-align:center}
.rec-day.empty{background:transparent;border-style:dashed}
@media (max-width:860px){
  .rec-week{grid-template-columns:1fr}
  .rec-day{min-height:0;flex-direction:row;flex-wrap:wrap;align-items:center}
  .rec-h{flex:0 0 8.5rem}
  .rec-slot{flex:1 1 12rem}
  .rec-none{margin:0;text-align:left}
  .rec-day.today{transform:none}
}

/* структура управління */
.org{display:grid;justify-items:center;padding:.5rem 0}
.org-row{display:flex;justify-content:center;gap:1rem;width:100%;position:relative}
.org-node{flex:1 1 0;max-width:280px;display:grid;gap:.2rem;text-align:center;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-m);padding:.8rem 1rem;position:relative}
.org-node b{font-weight:650;line-height:1.25}
.org-node small{color:var(--muted);font-size:.84rem;line-height:1.35}
.org-node.top{background:var(--paper)}
.org-node.head{background:var(--fill);border-color:var(--fill);color:#fff;max-width:340px;box-shadow:var(--sh2)}
.org-node.head small{color:#D5DEF2}
.org-node.head b{font-family:var(--serif);font-size:1.25rem}
.org-link{width:2px;height:1.5rem;background:var(--line)}
.org-row.branch{padding-top:1.1rem}
.org-row.branch::before{content:"";position:absolute;top:0;height:2px;background:var(--line);left:calc(50% / var(--n));right:calc(50% / var(--n))}
.org-row.merge{padding-bottom:1.1rem}
.org-row.merge::after{content:"";position:absolute;bottom:0;height:2px;background:var(--line);left:calc(50% / var(--n));right:calc(50% / var(--n))}
.org-row.merge .org-node::after{content:"";position:absolute;left:50%;bottom:-1.1rem;width:2px;height:1.1rem;background:var(--line);transform:translateX(-50%)}
.org-row.branch .org-node::before{content:"";position:absolute;left:50%;top:-1.1rem;width:2px;height:1.1rem;background:var(--line);transform:translateX(-50%)}
@media (max-width:700px){
  .org-row{flex-direction:column;align-items:center;gap:.6rem}
  .org-node{width:100%;max-width:none}
  .org-row.branch{padding-top:0}
  .org-row.branch::before,.org-row.branch .org-node::before,.org-row.merge::after,.org-row.merge .org-node::after{display:none}
  .org-row.merge{padding-bottom:0}
}
.org-bodies{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.75rem}
.org-bodies li{display:flex;gap:.85rem;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);padding:.95rem}
.org-bodies .ico{width:38px;height:38px;background:var(--surface)}
.org-bodies b{display:block;line-height:1.25}
.org-bodies p{margin:.25rem 0 0;color:var(--muted);font-size:.9rem}

/* посилання на документи (структура, архів) */
.doc-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem}
.doc-row:empty{display:none}
.doc-link{display:flex;align-items:center;gap:.8rem;padding:.8rem 1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);text-decoration:none;font-weight:500;transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.doc-link>.ic:first-child{color:var(--navy-2);font-size:1.2rem}
.doc-link>span{flex:1;min-width:0;line-height:1.3}
.doc-link small{display:block;color:var(--muted);font-size:.82rem;font-weight:400}
.doc-link>.ic:last-child{color:var(--muted);transition:transform .2s var(--ease)}
a.doc-link:hover{border-color:var(--navy);box-shadow:var(--sh1);transform:translateX(3px)}
a.doc-link:hover>.ic:last-child{transform:translateX(3px);color:var(--navy)}
.doc-link.off{border-style:dashed;color:var(--muted)}
.doc-ext{font-style:normal;font-size:.72rem;font-weight:700;letter-spacing:.04em;background:var(--sky);color:var(--navy);border-radius:6px;padding:.15rem .45rem}

/* самоврядування */
.sg-top{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(240px,1fr);gap:1.25rem;align-items:center;margin-bottom:1.25rem}
.sg-intro p{margin:0 0 .75rem;color:var(--ink-2)}
.sg-leader{display:flex;align-items:center;gap:1rem;background:var(--band);color:#fff;border-radius:var(--r-l);padding:1.1rem 1.25rem;
  background-image:radial-gradient(70% 90% at 100% 0%,rgba(90,130,230,.45),transparent 60%)}
.sg-leader .ico{width:52px;height:52px;border-radius:50%;background:var(--sun);color:#2A1E00}
.sg-leader small{display:block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--sun)}
.sg-leader b{display:block;font-family:var(--serif);font-size:1.25rem;line-height:1.2}
.sg-leader b.is-ph{color:#B9C6E4}
.sg-leader span{font-size:.85rem;color:#D5DEF2}
.sg-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.75rem}
.sg-list li{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);padding:1rem;transition:transform .2s var(--ease),border-color .2s}
.sg-list li:hover{transform:translateY(-3px);border-color:var(--navy)}
.sg-list li:hover .ico{background:var(--fill);color:#fff;transform:rotate(-6deg)}
.sg-list .ico{width:40px;height:40px;background:var(--surface);margin-bottom:.7rem}
.sg-list b{display:block;line-height:1.25}
.sg-list p{margin:.3rem 0 0;color:var(--muted);font-size:.9rem}
@media (max-width:760px){.sg-top{grid-template-columns:1fr}}

/* правила */
.rules-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem}
.rules-tabs .chip .ic{width:1.05rem;height:1.05rem}
.rules-body.swap .rule-list>li{animation:rise .35s var(--ease) both}
.rule-list{list-style:none;margin:0;padding:0;counter-reset:r;display:grid;gap:.6rem}
.rule-list>li{counter-increment:r;position:relative;padding:.85rem 1rem .85rem 3.4rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m)}
.rule-list>li::before{content:counter(r);position:absolute;left:.85rem;top:.8rem;display:grid;place-items:center;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--fill);color:#fff;font-weight:700;font-size:.85rem}
.rule-list p{margin:0}
.rule-sub{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.3rem}
.rule-sub li{position:relative;padding-left:1.25rem;color:var(--ink-2);font-size:.95rem}
.rule-sub li::before{content:"";position:absolute;left:.2rem;top:.6em;width:.45rem;height:.45rem;border-radius:2px;background:var(--sun);transform:rotate(45deg)}
html.contrast .acc-item,html.contrast .adm,html.contrast .rec-day,html.contrast .rule-list>li{border:2px solid #000}

/* 15. архів (archive.html) */
.ar-preview{display:flex;align-items:center;gap:.6rem;margin:0 0 1.25rem;padding:.75rem 1rem;background:rgba(244,180,0,.15);border:1px solid var(--sun);border-radius:var(--r-m);font-size:.92rem}
.ar-preview[hidden]{display:none}
.ar-tabs{margin-bottom:1.75rem}
.ar-tabs .hid{font-size:.72rem;font-weight:600;opacity:.75;margin-left:.2rem}
.ar-panel.swap .ar-block{animation:rise .45s var(--ease) both}
.ar-panel.swap .ar-block+.ar-block{animation-delay:.08s}
.ar-block+.ar-block{margin-top:clamp(2rem,5vw,3rem)}
.ar-h{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.ar-h h2{display:flex;align-items:center;gap:.6rem;font-size:clamp(1.3rem,2.4vw,1.65rem)}
.ar-h h2 .ic{color:var(--navy-2)}
.ar-h>span{font-size:.82rem;font-weight:700;background:var(--sky);color:var(--navy);border-radius:999px;padding:.1rem .6rem}
.ev-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1.25rem}
.ev-open{display:flex;flex-direction:column;width:100%;height:100%;padding:0;font:inherit;text-align:left;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);cursor:zoom-in;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
.ev-open:disabled{cursor:default}
.ev-open:not(:disabled):hover{transform:translateY(-4px);box-shadow:var(--sh2);border-color:var(--navy)}
.ev-cover{position:relative;display:block;aspect-ratio:16/10;margin:.6rem .6rem 0;border-radius:calc(var(--r-l) - 6px);background:var(--band);overflow:visible}
.ev-cover>img,.ev-cover>.gal-ph{position:relative;z-index:1;display:grid;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.ev-cover.stack::before,.ev-cover.stack::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--band);border:1px solid var(--line);transition:transform .3s var(--ease)}
.ev-cover.stack::before{transform:rotate(-3deg) translate(-4px,2px);opacity:.55}
.ev-cover.stack::after{transform:rotate(2deg) translate(4px,1px);opacity:.8}
.ev-open:hover .ev-cover.stack::before{transform:rotate(-6deg) translate(-10px,4px)}
.ev-open:hover .ev-cover.stack::after{transform:rotate(4deg) translate(10px,2px)}
.ev-count{position:absolute;z-index:2;right:.6rem;bottom:.6rem;display:inline-flex;align-items:center;gap:.3rem;font-size:.8rem;font-weight:700;color:#fff;background:rgba(8,14,30,.7);backdrop-filter:blur(4px);border-radius:999px;padding:.2rem .6rem}
.ev-count .ic{width:.95rem;height:.95rem}
.ev-body{display:grid;gap:.25rem;padding:1rem 1.1rem 1.15rem}
.ev-body time{font-size:.82rem;font-weight:600;color:var(--navy-2)}
.ev-body b{font-family:var(--serif);font-weight:650;font-size:1.15rem;line-height:1.25}
.ev-body p{margin:0;color:var(--muted);font-size:.92rem}
.doc-group+.doc-group{margin-top:1.25rem}
.doc-group h3{font-size:.85rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:.6rem}
.doc-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
@media (max-width:760px){.doc-list{grid-template-columns:1fr}}
.ar-empty{max-width:560px;margin:1rem auto;text-align:center;display:grid;justify-items:center;gap:.75rem;padding:clamp(2rem,6vw,3.5rem) 1.5rem;background:var(--paper);border:1px dashed var(--line);border-radius:var(--r-l)}
.ar-empty[hidden]{display:none}
.ar-empty-ic{display:grid;place-items:center;width:84px;height:84px;border-radius:24px;background:var(--fill);color:#fff;transform:rotate(-6deg);box-shadow:var(--sh2)}
.ar-empty-ic .ic{width:2.4rem;height:2.4rem}
.ar-empty h2{font-size:clamp(1.5rem,3vw,2rem)}
.ar-empty p{margin:0;color:var(--muted)}
.ar-empty .actions{margin-top:.5rem;justify-content:center}
html.contrast .ev-open{border:2px solid #000}

/* 16. розділові сторінки (education, public, upbringing, services, news) */
.sp-sec{padding-top:clamp(2rem,4vw,3rem)}
.sp-tools{display:flex;gap:.75rem;align-items:center;margin-bottom:1.25rem;flex-wrap:wrap}
.sp-tools .t-find{flex:1 1 260px;max-width:460px}
.sp-tools .btn{padding:.7rem 1.1rem}
.sp-tools .btn[aria-pressed=true]{background:var(--sky)}
.acc-item[hidden]{display:none}
.acc .acc-pad>*+*,.b-feed>*+*{margin-top:1.1rem}
.acc-pad>.acc-sub{margin-top:1.6rem}
.acc-pad>.acc-sub:first-child{margin-top:0}
.b-text p{margin:0 0 .8rem;color:var(--ink-2);max-width:75ch}
.b-text p:last-child{margin-bottom:0}
.b-list{margin:0}
.b-list li{font-size:1rem}
.b-note{display:flex;gap:.7rem;align-items:flex-start;margin:0;padding:.85rem 1rem;border-radius:var(--r-m);background:var(--sky);border-left:4px solid var(--fill)}
.b-note .ic{flex:none;margin-top:.15rem;color:var(--navy)}
.b-note.warn{background:rgba(244,180,0,.14);border-left-color:var(--sun)}
.b-note.warn .ic{color:#9A6B00}
html.dark .b-note.warn .ic{color:var(--sun)}
.b-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.6rem}
.b-links a{display:grid;gap:.2rem;height:100%;padding:.85rem 1rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);text-decoration:none;transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
.b-links a:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:var(--sh1)}
.b-lk-t{font-weight:600;line-height:1.3}
.b-links small{color:var(--muted);font-size:.88rem}
.b-lk-h{display:flex;align-items:center;gap:.35rem;margin-top:.2rem;font-size:.8rem;color:var(--navy-2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.b-lk-h .ic{width:.9rem;height:.9rem}
.b-cards a{display:flex;gap:.85rem;align-items:flex-start;text-decoration:none;color:inherit}
.b-people{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.75rem}
.b-people li{display:flex;gap:.9rem;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);padding:.75rem}
.b-people .t-ph{flex:none;width:64px;height:64px;aspect-ratio:1/1;border-radius:50%}
.b-people .t-ini{font-size:1.4rem}
.b-people .t-ph::after{display:none}
.b-people div{display:grid;gap:.1rem;min-width:0}
.b-people b{font-family:var(--serif);font-weight:650;line-height:1.25}
.b-people small,.b-people a{display:inline-flex;align-items:center;gap:.35rem;font-size:.88rem;color:var(--muted);text-decoration:none}
.b-people a:hover{color:var(--navy);text-decoration:underline}
.b-phones{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.6rem}
.b-phones .phone{height:100%;flex-direction:column;align-items:flex-start;gap:.35rem;background:var(--paper);border:1px solid var(--line);box-shadow:none}
.b-phones .phone:hover{border-color:var(--navy);box-shadow:var(--sh1)}
.b-phones .phone strong{font-size:1.3rem;min-width:0}
.b-phones .phone span{display:grid;line-height:1.3}
.b-phones .phone b{font-weight:600;font-size:.95rem}
.b-phones .phone small{color:var(--muted);font-size:.84rem}
.b-stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem}
.b-stats li{display:grid;gap:.2rem;padding:1rem 1.1rem;border-radius:var(--r-m);background:var(--band);color:#fff;
  background-image:radial-gradient(80% 100% at 100% 0%,rgba(90,130,230,.4),transparent 60%)}
.b-stats b{font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,3vw,2rem);line-height:1.05;color:var(--sun)}
.b-stats span{font-size:.88rem;color:#D5DEF2;line-height:1.3}
.b-facts{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.6rem}
.b-facts div{padding:.75rem 1rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m)}
.b-facts dt{font-size:.82rem;color:var(--muted)}
.b-facts dd{margin:.15rem 0 0;font-weight:600}
.b-table{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-m)}
.b-table table{width:100%;border-collapse:collapse;font-size:.95rem}
.b-table th,.b-table td{padding:.65rem .9rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.b-table thead th{background:var(--paper);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.b-table tbody th{font-weight:600}
.b-table tbody tr:last-child>*{border-bottom:0}
.b-table tbody tr:hover{background:var(--paper)}
.b-button{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:1rem 1.1rem;background:var(--paper);border:1px dashed var(--line);border-radius:var(--r-m)}
.b-button p{margin:0;color:var(--ink-2)}
.b-button .btn .ic{transition:transform .2s var(--ease)}
.b-button .btn:hover .ic{transform:translateX(3px)}
.b-news{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.b-news article{padding:1rem 1.15rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m)}
.b-news time{display:block;font-size:.85rem;color:var(--muted)}
.b-news h4{font-family:var(--serif);font-weight:650;font-size:1.2rem;margin:.1rem 0 .4rem}
.b-news p{margin:0;color:var(--ink-2)}
.b-news .more{display:inline-block;margin-top:.5rem}
html.contrast .b-links a,html.contrast .b-people li,html.contrast .b-facts div,html.contrast .b-news article{border:2px solid #000}

/* галереї (порожній шлях = заготовка) */
.b-gallery{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.6rem}
.b-gallery.one{grid-template-columns:minmax(0,420px)}
.b-ph{display:block;width:100%;aspect-ratio:4/3;padding:0;border:0;border-radius:var(--r-m);overflow:hidden;cursor:zoom-in;background:var(--band);transition:transform .2s var(--ease),box-shadow .2s}
.b-ph:hover{transform:translateY(-2px);box-shadow:var(--sh2)}
.b-ph img{width:100%;height:100%;object-fit:cover;display:block}
html.dark .b-ph{box-shadow:inset 0 0 0 1px var(--line)}

/* ютуб: спочатку картинка, по кліку плеєр */
.b-yts{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.9rem}
.b-yt{display:grid;gap:.45rem}
.yt,.yt-frame{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r-m);overflow:hidden;background:#000}
.yt{padding:0;cursor:pointer}
.yt img{width:100%;height:100%;object-fit:cover;display:block;opacity:.9;transition:opacity .2s,transform .4s var(--ease)}
.yt:hover img{opacity:1;transform:scale(1.03)}
.yt-play{position:absolute;left:50%;top:50%;width:64px;height:44px;margin:-22px 0 0 -32px;border-radius:12px;background:rgba(220,30,30,.92);transition:transform .2s var(--ease)}
.yt-play::after{content:"";position:absolute;left:26px;top:13px;border-style:solid;border-width:9px 0 9px 15px;border-color:transparent transparent transparent #fff}
.yt:hover .yt-play{transform:scale(1.1)}
.yt-t{font-size:.9rem;font-weight:500;line-height:1.35;color:var(--ink-2)}

/* стрічка (feed) */
.b-feed>*+*{margin-top:.8rem}
.f-p{margin:0;color:var(--ink-2)}
.f-link{font-weight:600;color:var(--navy-2);text-underline-offset:3px;word-break:break-word}

/* 17. часті питання, календар, розклад */
.sp-tools .btn .ic{width:1.05rem;height:1.05rem}
.b-faq{display:grid;gap:.5rem}
.faq{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m);transition:border-color .2s}
.faq[open]{border-color:var(--navy)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1rem;cursor:pointer;list-style:none;font-weight:600;line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{flex:none;color:var(--muted);transition:transform .3s var(--ease)}
.faq[open] summary .ic{transform:rotate(90deg);color:var(--navy)}
.faq-a{padding:0 1rem 1rem;color:var(--ink-2);animation:drop .25s var(--ease)}
.faq-a p{margin:0 0 .6rem}
.faq-a .more{display:inline-block}

.cal-layout{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:clamp(1.25rem,3vw,2rem);align-items:start}
.cal-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(.9rem,2.5vw,1.4rem)}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cal-head h2{font-size:clamp(1.3rem,2.6vw,1.7rem);text-align:center}
.cal-today{margin:.75rem 0}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-grid.swap{animation:drop .3s var(--ease)}
.cal-wd{text-align:center;font-size:.78rem;font-weight:700;color:var(--muted);padding:.3rem 0;text-transform:uppercase}
.cal-wd.we{color:var(--bad)}
.cal-d{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;min-height:5.2rem;padding:.35rem .4rem;font:inherit;text-align:left;color:var(--ink);background:var(--paper);border:1px solid transparent;border-radius:10px;cursor:pointer;overflow:hidden;transition:border-color .2s,background .2s}
.cal-d>span:first-child{font-weight:600;font-size:.92rem}
.cal-d:hover{border-color:var(--navy)}
.cal-d.out{opacity:.4}
.cal-d.we>span:first-child{color:var(--bad)}
.cal-d.vac{background:rgba(47,163,107,.12)}
.cal-d.today{border-color:var(--sun);box-shadow:inset 0 0 0 1px var(--sun)}
.cal-d.today>span:first-child{background:var(--sun);color:#2A1E00;border-radius:6px;padding:0 .35rem}
.cal-d.sel{border-color:var(--fill);background:var(--sky)}
.cal-dots{display:flex;gap:3px}
.cal-dot{display:inline-block;flex:none;width:9px;height:9px;border-radius:50%}
.cal-t{font-size:.72rem;line-height:1.2;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cal-legend{margin:1rem 0 0}
.cal-legend .chip{font-size:.85rem;padding:.35rem .8rem}
.cal-legend .chip[aria-pressed=false]{opacity:.5}
.cal-legend .chip[aria-pressed=true]{background:var(--paper);color:var(--ink);border-color:var(--navy)}
.cal-side{position:sticky;top:88px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:1.1rem 1.2rem}
.cal-side h2{font-size:1.2rem;margin-bottom:.7rem}
.cal-side h2+ul+h2{margin-top:1.25rem}
.cal-list{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.cal-list a,.cal-list div{display:flex;gap:.65rem;align-items:flex-start;padding:.55rem .6rem;border-radius:var(--r-s);text-decoration:none;background:var(--paper)}
.cal-list a:hover{background:var(--sky)}
.cal-list .cal-dot{margin-top:.4rem}
.cal-list b{display:block;font-weight:600;line-height:1.3}
.cal-list small{color:var(--muted);font-size:.84rem}
@media (max-width:900px){.cal-layout{grid-template-columns:1fr}.cal-side{position:static}}
@media (max-width:560px){.cal-d{min-height:3rem;align-items:center}.cal-t{display:none}}

.sch-now{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem;padding:1rem 1.2rem;border-radius:var(--r-l);color:#fff;background:var(--band);
  background-image:radial-gradient(70% 120% at 100% 0%,rgba(90,130,230,.45),transparent 60%)}
.sch-now:empty{display:none}
.sch-now>.ic{width:2rem;height:2rem;color:var(--sun)}
.sch-now b{display:block;font-family:var(--serif);font-size:clamp(1.15rem,2.4vw,1.45rem)}
.sch-now small{color:#D5DEF2}
.sch-num{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--sun);color:#2A1E00;font-family:var(--serif);font-weight:700;font-size:1.5rem}
.sch-bar{flex:1 1 100%;height:6px;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden}
.sch-bar i{display:block;height:100%;background:var(--sun);border-radius:inherit}
.sch-layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:clamp(1.25rem,3vw,2rem);align-items:start}
.sch-main{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(1rem,2.5vw,1.4rem)}
.sch-pick{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}
.sch-pick label{font-weight:600}
.sch-pick select{font:inherit;font-weight:600;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-s);padding:.55rem .8rem;min-width:12rem}
.sch-pick select:focus{outline:none;border-color:var(--navy);box-shadow:0 0 0 4px rgba(31,58,120,.16)}
.sch-list>li p{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.sch-list>li small{color:var(--muted);font-variant-numeric:tabular-nums}
.sch-list>li.free{opacity:.55}
.sch-room{font-weight:600;color:var(--navy-2)}
#sch-body.swap .sch-list>li{animation:rise .3s var(--ease) both}
.sch-side{position:sticky;top:88px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:1.1rem 1.2rem}
.sch-side h2{font-size:1.2rem;margin-bottom:.7rem}
.sch-side h2:not(:first-child){margin-top:1.25rem}
.sch-side .b-note{margin-top:.75rem;font-size:.88rem}
.sch-bells{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.sch-bells li{display:flex;justify-content:space-between;padding:.45rem .7rem;border-radius:var(--r-s);background:var(--paper);font-variant-numeric:tabular-nums}
.sch-bells li span{color:var(--muted)}
.sch-bells li.now{background:var(--fill);color:#fff}
.sch-bells li.now span{color:var(--sun)}
.sch-docs{grid-template-columns:1fr}
@media (max-width:900px){.sch-layout{grid-template-columns:1fr}.sch-side{position:static}}

/* 18. друк: без меню і кнопок, все розгорнуто, чорне на білому */
@media print{
  html,html.dark{--bg:#fff;--surface:#fff;--paper:#fff;--ink:#000;--ink-2:#111;--muted:#444;--line:#bbb;--navy:#000;--navy-2:#000;--fill:#333;--band:#fff;--sky:#f1f1f1}
  body{font-size:11pt}
  .util,.site-header,footer,.totop,.jump,.sp-tools,.t-find,.gal-btn,.b-gallery,.b-yts,.acc-chev,.acc-go,.chip.cal-today,#notice,.skip,.rv-actions,.gal-sec,.acc-item.link,.b-button .btn{display:none!important}
  .hero,.t-hero{background:none!important;color:#000!important;padding:0 0 1rem!important}
  .hero-bg{display:none}
  .hero h1{color:#000;font-size:22pt}
  .hero-sub,.crumbs,.crumbs a{color:#333!important}
  .sec{padding:0!important;background:none!important}
  .acc-item{border:0!important;box-shadow:none!important;break-inside:auto}
  .acc-item[hidden]{display:none!important}
  .acc-body{grid-template-rows:1fr!important}
  .acc-in{visibility:visible!important}
  .acc-head{padding:.6rem 0!important}
  .acc-head .ico{display:none}
  .acc-pad{border-top:1px solid #999;padding:.6rem 0 1rem!important}
  .faq{border:0}
  .faq .faq-a{display:block}
  details.faq>*:not(summary){display:block}
  .doc-link,.b-links a,.b-facts div,.rule-list>li,.b-stats li{border:1px solid #bbb!important;background:#fff!important;color:#000!important;box-shadow:none!important;transform:none!important}
  .b-stats b{color:#000}
  .b-stats span{color:#333}
  a.doc-link::after,.b-links a::after{content:" (" attr(href) ")";font-size:8pt;color:#555;word-break:break-all}
  .reveal,[data-reveal]{opacity:1!important;transform:none!important}
  body.mn-printing .sp-sec,body.mn-printing .hero{display:none!important}
  body.mn-printing .mn-printable{display:block!important}
  body.rules-printing>*:not(.rules-printable){display:none!important}
  body.rules-printing .rules-printable{display:block!important}
  .rules-printable h1{font-size:16pt;margin:0 0 .2rem}
  .rules-printable h2{font-size:13pt;margin:1rem 0 .4rem}
  .rules-printable .rule-list>li{padding:.3rem .5rem .3rem 2.4rem}
  .rules-printable .rule-list>li::before{background:#333;width:1.4rem;height:1.4rem;left:.5rem;top:.3rem}
}
.rules-printable{display:none}
.rules-print{margin-top:1rem}

/* 19. меню їдальні (menu.html) */
.mn-now>.ic{color:var(--sun)}
.mn-bar{display:flex;justify-content:space-between;align-items:center;gap:.75rem 1.5rem;flex-wrap:wrap;margin-bottom:1rem}
.mn-bar .rules-tabs{margin:0}
.mn-age{display:flex;gap:.4rem;flex-wrap:wrap}
.mn-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,1fr);gap:clamp(1.25rem,3vw,2rem);align-items:start}
.mn-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(1rem,2.5vw,1.5rem)}
.mn-card.swap .mn-list li{animation:rise .35s var(--ease) both;animation-delay:calc(var(--i,0) * 40ms)}
.mn-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:1rem}
.mn-head h2{font-size:clamp(1.4rem,2.8vw,1.9rem)}
.mn-head span{color:var(--muted);font-weight:500}
.mn-list{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.mn-list li{display:flex;align-items:center;gap:.85rem;padding:.7rem .85rem;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-m)}
.mn-list .ico{width:40px;height:40px;background:var(--surface)}
.mn-name{flex:1;min-width:0;display:grid;line-height:1.3}
.mn-name small{color:var(--muted);font-size:.8rem}
.mn-g{flex:none;font-family:var(--serif);font-weight:700;font-size:1.1rem;color:var(--navy);font-variant-numeric:tabular-nums}
.mn-total{display:flex;justify-content:space-between;gap:1rem;margin:1rem 0 0;padding:.8rem .9rem;border-top:2px dashed var(--line);font-weight:600}
.mn-total b{font-family:var(--serif);font-size:1.2rem;color:var(--navy)}
.mn-side{display:grid;gap:.75rem}
.mn-side h2{margin-bottom:0}
.mn-week{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.mn-week li{display:flex;gap:.7rem;align-items:center;padding:.5rem .7rem;border-radius:var(--r-s);background:var(--paper);cursor:pointer;border:1px solid transparent;transition:border-color .2s,background .2s}
.mn-week li:hover{border-color:var(--navy)}
.mn-week li span{flex:none;width:2rem;font-weight:700;color:var(--muted)}
.mn-week li b{font-weight:500;font-size:.92rem;line-height:1.3}
.mn-week li.today span{color:var(--sun)}
.mn-week li.cur{background:var(--fill);color:#fff}
.mn-week li.cur span{color:var(--sun)}
.mn-print{justify-self:start}
.mn-printable{display:none}
.mn-printable table{width:100%;border-collapse:collapse;margin:0 0 .6rem;font-size:10pt}
.mn-printable th,.mn-printable td{border:1px solid #999;padding:.25rem .45rem;text-align:left}
.mn-printable h3{margin:.6rem 0 .25rem;font-size:12pt}
@media (max-width:900px){.mn-grid{grid-template-columns:1fr}}
@media (max-width:560px){.mn-list li{padding:.6rem .7rem;gap:.6rem}.mn-list .ico{width:34px;height:34px}}

/* lazyload: фото плавно проявляються, поки вантажаться - мерехтить фон */
.lazy-on img[loading="lazy"]{opacity:0;transition:opacity .45s var(--ease),transform .5s var(--ease)}
.lazy-on img[loading="lazy"].is-loaded{opacity:1}
.lazy-on :is(.t-ph,.gal-item,.ev-cover):has(img[loading="lazy"]:not(.is-loaded)){
  background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);
  background-size:220% 100%;animation:lazy-shimmer 1.3s linear infinite}
@keyframes lazy-shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){
  .lazy-on img[loading="lazy"]{transition:none}
  .lazy-on :is(.t-ph,.gal-item,.ev-cover):has(img[loading="lazy"]:not(.is-loaded)){animation:none}
}

/* відгуки: напис, якщо таблиця не відповіла */
.rv-note{margin:.9rem 0 0;color:var(--muted);font-size:.9rem;text-align:center}

/* кролик, що бігає за мишкою */
.bunny{position:fixed;left:0;top:0;z-index:300;width:80px;pointer-events:none;will-change:transform}
.bunny svg{display:block;width:100%;height:auto;overflow:visible;transform-origin:50% 100%;transition:transform .12s ease-out;
  filter:drop-shadow(0 6px 6px rgba(10,20,50,.22))}
.bunny.land svg{transform:scale(1.06,.9)}
.bunny-flip{display:block}
/* на телефоні кролика можна тапнути, над ним бульбашка з підказкою */
.bunny.touch{pointer-events:auto;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bunny-say{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:8px;width:max-content;max-width:min(240px,calc(100vw - 16px));
  padding:.4rem .7rem;border-radius:12px;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh2);
  font-size:.82rem;font-weight:600;line-height:1.3;text-align:center;opacity:0;transition:opacity .2s;pointer-events:none}
.bunny.say .bunny-say{opacity:1}
/* схований кролик, видно тільки вушка */
.bunny-peek{position:absolute;z-index:5;width:42px;height:22px;padding:0;margin:0;border:0;background:none;cursor:pointer;
  transform-origin:50% 100%;transition:transform .2s var(--ease)}
.bunny-peek svg{display:block;width:100%;height:100%}
.bunny-peek:hover,.bunny-peek:focus-visible{transform:translateY(-3px) scale(1.08)}
.bunny-peek:focus-visible{outline:2px solid var(--sun);outline-offset:3px;border-radius:6px}
.bunny-peek .ear{transform-box:view-box}
@media (prefers-reduced-motion:no-preference){
  .bunny-peek .ear{animation:peek-ears 6s ease-in-out infinite}
  .bunny-peek .ear-r{animation-delay:.12s}
  .bunny-peek.out{animation:peek-out .28s ease-in forwards}
  .bunny.pop svg{animation:bunny-pop .52s cubic-bezier(.25,1.5,.5,1) both}
}
@keyframes peek-ears{0%,90%,100%{rotate:0deg}93%{rotate:-12deg}96%{rotate:9deg}}
@keyframes peek-out{40%{transform:translateY(-10px) scale(1.15)}100%{transform:translateY(-4px) scale(.6);opacity:0}}
@keyframes bunny-pop{0%{transform:translateY(30%) scale(.35);opacity:0}45%{transform:translateY(-45%) scale(1.05,.95);opacity:1}
  70%{transform:translateY(0) scale(1.12,.86)}85%{transform:scale(.95,1.06)}100%{transform:none}}
@media print{.bunny,.bunny-peek{display:none!important}}

/* кішка з лазером (замість кролика, js/common.js) */
.cat{position:fixed;left:0;top:0;z-index:300;width:76px;cursor:pointer;will-change:transform;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.cat-flip{display:block}
.cat.land svg{transform:scale(1.06,.9)}
.cat svg{display:block;width:100%;height:auto;overflow:visible;transform-origin:50% 100%;transition:transform .12s ease-out;filter:drop-shadow(0 6px 6px rgba(10,20,50,.22))}
.cat .cat-tail{transform-box:view-box;transform-origin:28px 74px}
.cat-say{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:6px;width:max-content;max-width:min(240px,calc(100vw - 16px));
  padding:.4rem .7rem;border-radius:12px;background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--sh2);
  font-size:.82rem;font-weight:600;line-height:1.3;text-align:center;opacity:0;transition:opacity .2s;pointer-events:none}
.cat.say .cat-say{opacity:1}
html.cat-laser-on,html.cat-laser-on *{cursor:none!important}
.cat-laser{position:fixed;left:-7px;top:-7px;z-index:301;width:14px;height:14px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff 0 18%,#ff2a2a 45%,rgba(255,30,30,0) 72%);box-shadow:0 0 12px 4px rgba(255,40,40,.55)}
.cat-peek{position:absolute;z-index:5;width:46px;height:24px;padding:0;margin:0;border:0;background:none;cursor:pointer;
  transform-origin:50% 100%;transition:transform .2s var(--ease)}
.cat-peek svg{display:block;width:100%;height:100%;overflow:hidden}
.cat-peek:hover,.cat-peek:focus-visible{transform:translateY(-3px) scale(1.08)}
.cat-peek:focus-visible{outline:2px solid var(--sun);outline-offset:3px;border-radius:6px}
.cat-peek .ear{transform-box:view-box}
@media (prefers-reduced-motion:no-preference){
  .cat .cat-tail{animation:cat-tail 2.6s ease-in-out infinite}
  .cat.wag .cat-tail{animation:cat-wag .32s ease-in-out infinite}
  .cat.pop svg{animation:bunny-pop .52s cubic-bezier(.25,1.5,.5,1) both}
  .cat-peek .ear{animation:peek-ears 6s ease-in-out infinite}
  .cat-peek .ear-r{animation-delay:.12s}
  .cat-peek.out{animation:peek-out .28s ease-in forwards}
  .cat-laser{animation:cat-laser .18s steps(2) infinite}
}
@keyframes cat-tail{0%,100%{rotate:-8deg}50%{rotate:12deg}}
@keyframes cat-wag{0%,100%{rotate:-14deg}50%{rotate:16deg}}
@keyframes cat-laser{50%{opacity:.75}}
@media print{.cat,.cat-peek,.cat-laser{display:none!important}}

/* анімації гуртків при наведенні */
.club[class*="fx-"] .ico{position:relative}
.fx-bits{position:absolute;inset:0;pointer-events:none}
.fx-bits i{position:absolute;left:50%;top:0;font-style:normal;font-weight:700;font-size:1rem;line-height:1;color:var(--navy-2);opacity:0}
.fx-bits .ic{width:14px;height:14px;font-size:14px;color:#2FA36B}
.fx-dance{position:relative;isolation:isolate}
.fx-dance::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:inherit;padding:2px;opacity:0;transition:opacity .3s;
  background:linear-gradient(120deg,#ff5fa2,#ffb400,#3ccf91,#4f8cff,#b46bff,#ff5fa2);background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.fx-paint .fx-bits i{width:8px;height:8px;border-radius:50%;background:#ff5fa2;top:50%}
.fx-paint .fx-bits i:nth-child(2){background:#ffb400;--dx:22px;--dy:-14px}
.fx-paint .fx-bits i:nth-child(3){background:#4f8cff;--dx:-20px;--dy:-10px}
.fx-robot .fx-bits i{font-family:ui-monospace,Consolas,monospace;font-size:.8rem;color:#2FA36B}
.fx-chess .fx-bits i{font-size:1.35rem;top:auto;bottom:-2px;left:auto;right:-14px}
@media (prefers-reduced-motion:no-preference){
  /* dnipro dance: іконка танцює, ноти, веселкова рамка */
  .fx-dance:is(:hover,:focus-within)::before{opacity:1;animation:dance-border 2.4s linear infinite}
  .fx-dance:hover{border-color:transparent}
  .fx-dance:is(:hover,:focus-within) .ico{animation:dance-ico .5s ease-in-out infinite alternate}
  :is(.fx-dance,.fx-sing):is(:hover,:focus-within) .fx-bits i{animation:fx-note 1.5s ease-out infinite}
  :is(.fx-dance,.fx-sing):is(:hover,:focus-within) .fx-bits i:nth-child(2){animation-delay:.5s;--dx:18px}
  :is(.fx-dance,.fx-sing):is(:hover,:focus-within) .fx-bits i:nth-child(3){animation-delay:1s;--dx:-16px}
  /* футбол: м'яч котиться */
  .fx-kick:is(:hover,:focus-within) .ico .ic{animation:fx-kick 1.1s ease-in-out infinite}
  /* волейбол: м'яч стрибає і крутиться */
  .fx-volley:is(:hover,:focus-within) .ico .ic{animation:fx-volley .8s cubic-bezier(.3,0,.4,1) infinite}
  /* вокал: хвилі звуку і ноти */
  .fx-sing:is(:hover,:focus-within) .ico{animation:fx-sing 1.2s ease-out infinite}
  /* малювання: палітра хитається, бризки */
  .fx-paint:is(:hover,:focus-within) .ico .ic{animation:fx-wobble .7s ease-in-out infinite alternate}
  .fx-paint:is(:hover,:focus-within) .fx-bits i{animation:fx-splash 1.2s ease-out infinite}
  .fx-paint:is(:hover,:focus-within) .fx-bits i:nth-child(2){animation-delay:.4s}
  .fx-paint:is(:hover,:focus-within) .fx-bits i:nth-child(3){animation-delay:.8s}
  /* роботи: глюк і нулі-одиниці */
  .fx-robot:is(:hover,:focus-within) .ico .ic{animation:fx-glitch .9s steps(1) infinite}
  .fx-robot:is(:hover,:focus-within) .fx-bits i{animation:fx-note 1.2s linear infinite}
  .fx-robot:is(:hover,:focus-within) .fx-bits i:nth-child(2){animation-delay:.4s;--dx:16px}
  .fx-robot:is(:hover,:focus-within) .fx-bits i:nth-child(3){animation-delay:.8s;--dx:-14px}
  /* екологи: падає листя */
  .fx-eco:is(:hover,:focus-within) .fx-bits i{animation:fx-leaf 1.8s ease-in-out infinite}
  .fx-eco:is(:hover,:focus-within) .fx-bits i:nth-child(2){animation-delay:.6s;--dx:-20px}
  .fx-eco:is(:hover,:focus-within) .fx-bits i:nth-child(3){animation-delay:1.2s;--dx:14px}
  /* шахи: кінь ходить буквою "Г" */
  .fx-chess:is(:hover,:focus-within) .fx-bits i{animation:fx-knight 1.6s ease-in-out infinite}
}
@keyframes dance-ico{from{transform:rotate(-14deg) translateY(0) scale(1.06)}to{transform:rotate(14deg) translateY(-5px) scale(1.06)}}
@keyframes dance-border{to{background-position:300% 0}}
@keyframes fx-note{0%{opacity:0;transform:translate(-50%,0) scale(.6)}20%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,4px)),-38px) rotate(18deg) scale(1.1)}}
@keyframes fx-kick{0%,100%{transform:translateX(-6px) rotate(0)}50%{transform:translateX(6px) rotate(300deg)}}
@keyframes fx-volley{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(180deg)}90%{transform:translateY(0) rotate(340deg) scale(1.1,.9)}}
@keyframes fx-sing{0%{box-shadow:0 0 0 0 rgba(79,140,255,.45)}100%{box-shadow:0 0 0 14px rgba(79,140,255,0)}}
@keyframes fx-wobble{from{transform:rotate(-12deg)}to{transform:rotate(12deg)}}
@keyframes fx-splash{0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}25%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,-6px) * 1.6),calc(-50% + var(--dy,-24px) * 1.6)) scale(1.2)}}
@keyframes fx-glitch{0%{transform:none}20%{transform:translate(2px,-1px)}40%{transform:translate(-2px,1px) scaleX(-1)}60%{transform:none;opacity:.6}80%{transform:translate(1px,1px);opacity:1}}
@keyframes fx-leaf{0%{opacity:0;transform:translate(-50%,-14px) rotate(-30deg)}20%{opacity:1}
  50%{transform:translate(calc(-50% + var(--dx,10px)),18px) rotate(25deg)}100%{opacity:0;transform:translate(calc(-50% - var(--dx,10px) / 2),48px) rotate(-20deg)}}
@keyframes fx-knight{0%{opacity:0;transform:translate(0,0)}15%{opacity:1}45%{transform:translate(0,-28px)}75%{transform:translate(14px,-28px)}90%{opacity:1}100%{opacity:0;transform:translate(14px,-28px)}}

/* 20. профтест (proforientation.html) */
.pf{max-width:820px;margin:0 auto;outline:none}
.pf.swap>*{animation:rise .35s var(--ease) both}
.pf-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(1.1rem,3vw,1.75rem);margin-bottom:1rem;box-shadow:var(--sh1)}
.pf h2{font-family:var(--serif);font-size:clamp(1.4rem,3.5vw,1.8rem);line-height:1.2;margin:0 0 .6rem;outline:none}
.pf h3{font-family:var(--serif);font-size:1.3rem;margin:0 0 .9rem}
.pf h4{font-family:var(--serif);font-size:1.15rem;margin:0 0 .4rem}
.pf p{margin:0 0 .75rem}
.pf-small{font-size:.92rem;color:var(--muted)}
.pf-btns{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.25rem}
.pf .btn{min-height:48px}
/* вступ */
.pf-facts{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.6rem}
.pf-facts li{display:flex;gap:.7rem;align-items:flex-start;background:var(--paper);border-radius:var(--r-m);padding:.75rem .9rem}
.pf-facts .ic{flex:none;margin-top:.1rem;color:var(--navy)}
.pf-prev{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;background:var(--sky);border-radius:var(--r-m);padding:.9rem 1rem;margin-bottom:1.25rem}
.pf-prev>.ic{color:var(--navy)}
.pf-prev small{display:block;color:var(--muted)}
.pf-prev-btns{display:flex;flex-wrap:wrap;gap:.5rem;margin-left:auto}
@media (max-width:560px){.pf-prev-btns{width:100%;margin-left:0}.pf-prev-btns .btn{flex:1 1 140px}}
/* шапка екрана і прогрес */
.pf-part{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--navy-2);margin-bottom:.35rem}
.pf-progress{margin-top:1rem}
.pf-bar{height:10px;border-radius:999px;background:var(--sky);overflow:hidden}
.pf-bar i{display:block;height:100%;width:0;background:var(--fill);border-radius:inherit;transition:width .3s var(--ease)}
.pf-step{margin:.45rem 0 0!important;font-size:.88rem;color:var(--muted)}
/* твердження та шкала */
.pf-qs{display:grid;gap:.75rem}
.pf-q{margin:0;min-width:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:1rem clamp(.9rem,3vw,1.4rem) .85rem}
.pf-q.missing{border-color:var(--sun);box-shadow:0 0 0 3px rgba(244,180,0,.35)}
.pf-q legend{float:left;width:100%;display:flex;gap:.6rem;align-items:flex-start;font-weight:600;font-size:1.05rem;margin-bottom:.85rem;padding:0}
.pf-q legend+*{clear:both}
.pf-num{flex:none;display:grid;place-items:center;min-width:1.9rem;height:1.9rem;border-radius:8px;background:var(--sky);color:var(--navy);font-size:.8rem;font-weight:700}
.pf-scale{display:flex;justify-content:space-between;gap:.4rem;max-width:420px;margin:0 auto}
.pf-opt{position:relative;flex:1;display:flex;justify-content:center;cursor:pointer}
.pf-opt input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.pf-dot{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:2px solid var(--line);background:var(--surface);
  font-weight:700;font-size:1.05rem;color:var(--ink-2);transition:background .15s,border-color .15s,color .15s,transform .15s}
.pf-opt:nth-child(1) .pf-dot,.pf-opt:nth-child(5) .pf-dot{width:56px;height:56px}
.pf-opt:hover .pf-dot{border-color:var(--navy-2)}
.pf-opt input:checked+.pf-dot{background:var(--fill);border-color:var(--fill);color:#fff;transform:scale(1.06)}
.pf-opt input:focus-visible+.pf-dot{outline:3px solid var(--sun);outline-offset:3px}
.pf-ends{display:flex;justify-content:space-between;max-width:440px;margin:.45rem auto 0;font-size:.8rem;color:var(--muted)}
.pf-warn{margin:.9rem 0 0!important;padding:.75rem 1rem;border-radius:var(--r-m);background:rgba(244,180,0,.16);border-left:4px solid var(--sun);font-weight:600}
.pf-nav{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:1.1rem;position:sticky;bottom:0;padding:.75rem 0;
  background:linear-gradient(transparent,var(--paper) 30%)}
.pf-nav [data-act="back"] .ic{transform:rotate(180deg)}
.pf-count{font-size:.88rem;color:var(--muted);text-align:center}
@media (max-width:420px){
  .pf-dot,.pf-opt:nth-child(1) .pf-dot,.pf-opt:nth-child(5) .pf-dot{width:46px;height:46px}
  .pf-nav .btn{padding:.8rem .9rem}
}
/* результат */
.pf-print-title{display:none}
.pf-date{color:var(--muted);margin-top:-.3rem!important}
.pf-res-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:1.25rem;align-items:center}
@media (max-width:720px){.pf-res-grid{grid-template-columns:1fr}}
.pf-radar{display:block;width:100%;max-width:400px;height:auto;margin:0 auto;overflow:visible}
.pf-grid{fill:none;stroke:var(--line);stroke-width:1}
.pf-axis{stroke:var(--line);stroke-width:1}
.pf-area{fill:var(--navy-2);fill-opacity:.2;stroke:var(--navy-2);stroke-width:2.5;stroke-linejoin:round}
.pf-pt{fill:var(--navy-2)}
.pf-lbl{fill:var(--ink);font-size:13px;font-weight:600;font-family:var(--sans)}
.pf-val{fill:var(--muted);font-weight:500;font-size:12px}
html.contrast .pf-area{fill:#000;fill-opacity:.12;stroke:#000;stroke-width:3}
html.contrast .pf-grid,html.contrast .pf-axis{stroke:#000;stroke-dasharray:3 3}
.pf-code{display:flex;align-items:baseline;gap:.75rem;margin-bottom:.5rem}
.pf-code span{font-weight:600;color:var(--muted)}
.pf-code b{font-family:var(--serif);font-size:2.4rem;letter-spacing:.02em;line-height:1;color:var(--navy)}
.pf-scores{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.3rem}
.pf-scores li{display:flex;align-items:baseline;gap:.45rem;padding:.4rem .6rem;border-radius:8px;font-size:.95rem}
.pf-scores li b{min-width:1.1rem;color:var(--navy)}
.pf-scores li small{color:var(--muted)}
.pf-scores li span{margin-left:auto;font-weight:600;font-variant-numeric:tabular-nums}
.pf-scores li.top{background:var(--sky);font-weight:600}
html.contrast .pf-scores li.top{outline:2px solid #000}
.pf-types{display:grid;gap:1rem}
.pf-type{position:relative;padding:1rem 1rem 1rem 4.2rem;border-radius:var(--r-m);background:var(--paper)}
.pf-letter{position:absolute;left:1rem;top:1rem;display:grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:12px;background:var(--fill);color:#fff;font-family:var(--serif);font-weight:700;font-size:1.25rem}
.pf-type h4 small{font-family:var(--sans);font-size:.85rem;font-weight:500;color:var(--muted)}
.pf-jobs-t{font-weight:600;margin:.4rem 0 .45rem!important}
.pf-jobs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.pf-jobs li{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.25rem .7rem;font-size:.9rem}
.pf-prof{border:2px solid var(--fill);border-radius:var(--r-m);padding:1rem 1.1rem;margin-bottom:.75rem}
.pf-prof.pf-alt{border-style:dashed;border-color:var(--line)}
.pf-tag{display:block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--navy-2);margin-bottom:.3rem}
.pf-why{font-size:.9rem;color:var(--muted);margin:0!important}
.pf-bars{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.pf-bar-row{display:grid;grid-template-columns:minmax(0,11.5rem) 1fr auto;align-items:center;gap:.75rem}
.pf-bar-name{font-size:.95rem}
.pf-bar-track{height:12px;border-radius:999px;background:var(--sky);overflow:hidden}
.pf-bar-track i{display:block;height:100%;min-width:6px;border-radius:inherit;background:var(--muted);opacity:.55}
.pf-bar-val{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.pf-bars li.top .pf-bar-name{font-weight:700}
.pf-bars li.top .pf-bar-track i{background:var(--fill);opacity:1}
html.contrast .pf-bar-track{border:1px solid #000}
.pf-tip{margin:.3rem 0 .2rem!important;font-size:.9rem;color:var(--ink-2)}
@media (max-width:560px){.pf-bar-row{grid-template-columns:1fr auto}.pf-bar-track{grid-column:1/-1;grid-row:2}}
.pf-next{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.pf-next li{display:flex;gap:.75rem;align-items:flex-start}
.pf-next li>.ic{flex:none;margin-top:.2rem;color:var(--navy)}
.pf-next p{margin:.2rem 0 0!important;color:var(--ink-2)}
.pf-disclaimer{margin-bottom:1rem!important}
.pf-img{margin-top:1rem;text-align:center}
.pf-img img{display:block;width:100%;max-width:420px;height:auto;margin:.5rem auto 0;border:1px solid var(--line);border-radius:var(--r-m);box-shadow:var(--sh1)}
@media print{
  .pf-sec .pf-btns,.pf-intro,.pf .pf-nav,.hero.t-hero,.bunny,.bunny-peek,.pf-img{display:none!important}
  .pf-sec{padding:0!important}
  .pf{max-width:none}
  .pf-print-title{display:block;font-size:9pt;color:#555;margin:0 0 .3rem!important}
  .pf-card{box-shadow:none!important;border:1px solid #bbb;padding:.6rem .8rem;margin-bottom:.5rem;break-inside:avoid}
  .pf-radar{max-width:250px}
  .pf-type{padding:.5rem .5rem .5rem 3.2rem;background:#fff!important;border:1px solid #ddd}
  .pf-letter{width:1.9rem;height:1.9rem;font-size:1rem;background:#333!important}
  .pf-jobs li{padding:.1rem .45rem;font-size:8.5pt}
  .pf-bar-track i{background:#333!important;opacity:1}
  .pf-bars li:not(.top) .pf-bar-track i{background:#999!important}
  .pf h3{font-size:12pt;margin-bottom:.4rem}
  .pf p,.pf-tip,.pf-next p{font-size:9.5pt}
}

/* 21. новини: вкладки "Новини" / "Життя ліцею" (js/news-tabs.js) */
.nt-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:560px;margin:0 0 1.25rem;padding:5px;
  background:var(--surface);border:1px solid var(--line);border-radius:999px;box-shadow:var(--sh1)}
.nt-tabs::before{content:"";position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--fill);
  transform:translateX(var(--x,0%));transition:transform .3s var(--ease)}
.nt-tabs [role="tab"]{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:46px;padding:.55rem .75rem;
  border:0;border-radius:999px;background:none;color:var(--ink);font:inherit;font-weight:600;font-size:1rem;white-space:nowrap;cursor:pointer;transition:color .25s}
.nt-tabs [role="tab"][aria-selected="true"]{color:#fff}
.nt-tabs [role="tab"]:focus-visible{outline:3px solid var(--sun);outline-offset:2px}
.nt-tabs .ic{width:1.1em;height:1.1em}
.nt-panel{outline:none}
.nt-lead{margin:0 0 1rem;color:var(--muted)}
.fb-alt{display:flex;align-items:center;gap:.5rem;margin:1.25rem 0 0;font-size:.95rem}
.fb-alt .ic{color:#1877F2}
/* дописи "Життя ліцею" */
.life-list{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));align-items:start}
.life-list>.empty-note,.life-list>.life-loading{grid-column:1/-1}
.life-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;box-shadow:var(--sh1);animation:rise .4s var(--ease) both;animation-delay:calc(var(--i,0) * 60ms)}
.life-ph{display:grid;gap:3px;background:var(--line)}
.life-ph .gal-item{position:relative;display:block;width:100%;padding:0;border:0;border-radius:0;aspect-ratio:4/3;overflow:hidden;cursor:zoom-in;background:var(--sky)}
.life-ph.n1 .gal-item{aspect-ratio:16/10}
.life-ph.n2,.life-ph.n4{grid-template-columns:1fr 1fr}
.life-ph:is(.n2,.n4) .gal-item{aspect-ratio:3/2}
.life-ph.n3{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
.life-ph.n3 .gal-item:first-child{grid-row:1/3;aspect-ratio:auto}

.life-more{position:absolute;inset:0;display:grid;place-items:center;background:rgba(10,20,50,.55);color:#fff;font-size:1.6rem;font-weight:700}
.life-body{padding:1.1rem 1.25rem 1.25rem}
.life-body h3{font-family:var(--serif);font-size:1.25rem;line-height:1.25;margin:.15rem 0 .5rem}
.life-body p{margin:0 0 .6rem;color:var(--ink-2)}
.life-body p:last-child{margin-bottom:0}
.life-date{font-size:.85rem;font-weight:600;color:var(--navy-2)}
.life-loading{display:flex;align-items:center;gap:.5rem;color:var(--muted);padding:1rem 0}
@media (prefers-reduced-motion:reduce){.life-card{animation:none}}
.sec-links{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
@media (max-width:640px){
  .nt-tabs{max-width:none}
  .nt-tabs [role="tab"]{font-size:.95rem;padding:.55rem .4rem}
}
@media (max-width:360px){.nt-tabs .ic{display:none}}
@media (prefers-reduced-motion:reduce){.nt-tabs::before{transition:none}}
@media print{.nt-tabs,.fb-alt{display:none!important}}

/* відео зверху картки, на всю ширину */
.life-vids .b-yts{display:grid;grid-template-columns:1fr;gap:3px;background:var(--line)}
.life-vids .yt,.life-vids .yt-frame{border-radius:0}
.life-vids .yt-t{display:none}
.life-vids+.life-ph{margin-top:3px}
.life-albums{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}

/* 22. перехід на профільне навчання (profile.html, js/profile-page.js) */
:root{--pr-c1:#1F3A78;--pr-c2:#F4B400;--pr-c3:#2E8B6E;--pr-c4:#D9534F;--pr-c5:#5B7FD6;--pr-c6:#8E5BB5;--pr-c7:#E08A2E}
html.dark{--pr-c1:#6F95F0;--pr-c2:#F4C542;--pr-c3:#4CC29A;--pr-c4:#FF7A70;--pr-c5:#A4BEFA;--pr-c6:#C39BE6;--pr-c7:#F2A65A}
html.contrast{--pr-c1:#000;--pr-c2:#555;--pr-c3:#222;--pr-c4:#777;--pr-c5:#333;--pr-c6:#666;--pr-c7:#444}
.pr-sec h2{max-width:28ch;margin-bottom:1.75rem}
.pr-kicker{margin:0 0 .4rem;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pr-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);padding:1.4rem 1.5rem;box-shadow:var(--sh1)}
.pr-card h3{font-size:1.12rem;margin-bottom:.6rem}
.pr-card p{margin:0;color:var(--ink-2)}
.pr-grid2,.pr-grid3,.pr-grid4{display:grid;gap:1.25rem}
.pr-grid2{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.pr-grid3{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.pr-grid4{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}
.pr-mid{align-items:center;margin-top:2rem}
.pr-mt{margin-top:1.25rem}
.pr-h3{font-size:1.25rem;margin:2.25rem 0 1rem}
.pr-note{margin:1.5rem 0 0;padding:1rem 1.2rem;border-left:4px solid var(--sun);background:var(--surface);border-radius:0 var(--r-s) var(--r-s) 0;color:var(--ink-2)}
.pr-src{margin:1rem 0 0;font-size:.85rem;color:var(--muted)}
.pr-card .pr-lead{font-weight:600;color:var(--ink);margin-bottom:.8rem}
.pr-check{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.pr-check li{display:flex;gap:.6rem;align-items:flex-start}
.pr-check .ic{color:var(--ok);margin-top:.15em}
.pr-plan .ic{color:var(--navy-2)}
.pr-dl{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.pr-dl li{display:grid;grid-template-columns:minmax(0,11rem) 1fr;gap:.25rem 1rem}
.pr-dl b{font-weight:600}.pr-dl span{color:var(--ink-2)}
@media (max-width:520px){.pr-dl li{grid-template-columns:1fr}}
.pr-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.pr-chips li{padding:.4rem .85rem;border-radius:999px;background:var(--sky);color:var(--navy);font-weight:500;font-size:.93rem}

/* засідання */
.pr-meet{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr));align-items:start}
.pr-meet-h{display:flex;gap:1rem;align-items:flex-start;margin-bottom:1rem}
.pr-meet-h time{font-size:.9rem;color:var(--muted);font-weight:600}
.pr-meet-h h3{margin:.1rem 0 .4rem}
.pr-badge{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:14px;background:var(--fill);color:#fff;font:700 1.5rem var(--serif)}
.pr-tag{display:inline-block;padding:.2rem .65rem;border-radius:999px;background:var(--sun);color:#2A1E00;font-size:.8rem;font-weight:600}
.pr-gal{list-style:none;margin:1.25rem 0 0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.pr-gal li>span{display:block;margin-top:.45rem;font-size:.9rem;color:var(--muted)}
.pr-gal .gal-item{aspect-ratio:4/3;border-radius:var(--r-m)}
.pr-gal[class*="meet"]{grid-template-columns:1fr}
.pr-gal[class*="meet"] .gal-item{aspect-ratio:16/10}

/* тест */
.pr-test-sec{padding:0 0 clamp(2.5rem,6vw,4rem)}
.pr-test{display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;padding:1.5rem 1.75rem;border-radius:var(--r-l);text-decoration:none;color:#fff;
  background:linear-gradient(120deg,#14274E,#1F3A78 60%,#2F5BC4);box-shadow:var(--sh2);transition:transform .25s var(--ease),box-shadow .25s}
.pr-test:hover{transform:translateY(-3px)}
.pr-test-txt{flex:1 1 300px;display:grid;gap:.25rem}
.pr-test-txt b{font:650 1.5rem var(--serif)}
.pr-test .pr-kicker{color:var(--sun);margin:0}
.pr-test-txt>span:last-child{color:#D5DEF2}
.pr-test-ico{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:var(--sun);color:#2A1E00;font-size:1.8rem}
.pr-test .btn{border-color:var(--sun);background:var(--sun);color:#2A1E00}
.pr-test .btn .ic{transition:transform .2s var(--ease)}
.pr-test:hover .btn,.pr-test .btn:hover{background:#FFC93C;border-color:#FFC93C;color:#2A1E00;box-shadow:0 6px 18px rgba(244,180,0,.35)}
.pr-test:hover .btn .ic{transform:translateX(3px)}
html.contrast .pr-test{background:#000}

/* таймлайн і дорожня карта */
.pr-time{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:1.5rem 1rem}
.pr-time li{position:relative;padding:1.4rem 0 0;border-top:4px solid var(--line)}
.pr-time li::before{content:"";position:absolute;top:-4px;left:0;height:4px;width:100%;background:var(--sun);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);transition-delay:calc(var(--i)*.18s)}
.pr-time li::after{content:"";position:absolute;top:-11px;left:0;width:18px;height:18px;border-radius:50%;background:var(--fill);border:3px solid var(--paper)}
.pr-time.in li::before{transform:none}
.pr-time b{display:block;font:650 1.3rem var(--serif);color:var(--navy)}
.pr-time span{color:var(--ink-2)}
.pr-road{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.pr-road li{display:grid;grid-template-columns:auto 9.5rem 11rem 1fr;align-items:center;gap:.5rem 1.1rem;padding:1rem 1.25rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m)}
.pr-road time{font-weight:600;color:var(--muted);font-size:.93rem}
.pr-road b{font-size:1.05rem}
.pr-road li>span:last-child{color:var(--ink-2)}
.pr-road li:last-child{border-color:var(--sun);box-shadow:0 0 0 2px var(--sun) inset}
.pr-step{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--sky);color:var(--navy);font-weight:700}
.pr-road li:last-child .pr-step{background:var(--sun);color:#2A1E00}
@media (max-width:760px){.pr-road li{grid-template-columns:auto 1fr}.pr-road li>b,.pr-road li>span:last-child{grid-column:2}}
.js .pr-road li{opacity:0;transform:translateX(-14px);transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(var(--i)*.08s)}
.js .pr-road.in li{opacity:1;transform:none}

/* цифри */
.pr-stats,.pr-big{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.pr-stats li,.pr-big li{padding:1.25rem 1.3rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh1)}
.pr-num{display:block;font:650 clamp(2rem,4.4vw,2.8rem)/1.1 var(--serif);color:var(--navy);font-variant-numeric:tabular-nums}
.pr-stats li>span,.pr-big li>span{display:block;margin-top:.35rem;color:var(--ink-2)}
.pr-big{margin-bottom:1.5rem}
.pr-big .pr-num{color:var(--navy-2)}
.pr-big li{border-top:5px solid var(--sun)}
.pr-stats3{margin-bottom:1.5rem}

/* діаграми */
.pr-chart{margin:0;padding:1.4rem 1.5rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh1)}
.pr-chart figcaption{font-weight:600;margin-bottom:1.1rem}
.pr-chart figcaption small{font-weight:400;color:var(--muted)}
.pr-donut-in{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.pr-donut svg{width:min(210px,100%);flex:none}
.pr-ring{fill:none;stroke:var(--sky);stroke-width:6}
.pr-arc{fill:none;stroke-width:6;stroke-dasharray:0 100;stroke-dashoffset:var(--off);transition:stroke-dasharray 1s var(--ease);transition-delay:var(--d)}
.pr-donut.in .pr-arc{stroke-dasharray:var(--len) calc(100 - var(--len))}
.pr-legend{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;flex:1 1 160px}
.pr-legend li{display:flex;align-items:center;gap:.6rem}
.pr-legend i{width:14px;height:14px;border-radius:4px;flex:none}
.pr-legend b{margin-left:auto;font-variant-numeric:tabular-nums}
.pr-bars ul{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.pr-bars li{display:grid;grid-template-columns:1fr auto;gap:.3rem .75rem;align-items:center}
.pr-bl{grid-column:1/-1;font-size:.93rem;color:var(--ink-2)}
.pr-bt{height:14px;border-radius:999px;background:var(--sky);overflow:hidden}
.pr-bt i{display:block;height:100%;width:var(--w);border-radius:inherit;transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease);transition-delay:var(--d)}
.pr-bars.in .pr-bt i{transform:none}
.pr-bars b{font-variant-numeric:tabular-nums;min-width:4.5ch;text-align:right}
html.contrast :is(.pr-chart,.pr-card,.pr-stats li,.pr-big li,.pr-road li,.pr-ch li){border:2px solid #000}

/* профілі, факти, виклики */
.pr-prof .ico{margin-bottom:.9rem;width:52px;height:52px}
.pr-prof h3{font-size:1.25rem}
.pr-card .pr-deep{margin-top:1rem;padding-top:.9rem;border-top:1px dashed var(--line);font-size:.93rem}
.pr-facts{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.pr-facts li{padding:1rem 1.2rem;border-radius:var(--r-m);background:var(--sky)}
.pr-facts b{display:block;font:650 1.4rem var(--serif);color:var(--navy)}
.pr-facts span{color:var(--ink-2)}
.pr-ch{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.pr-ch li{display:grid;grid-template-columns:auto 1fr 1fr;gap:1rem;align-items:center;padding:1rem 1.25rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m)}
.pr-ch small{display:block;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--bad)}
.pr-ch-s small{color:var(--ok)}
.pr-ch-s span{color:var(--ink-2)}
@media (max-width:700px){.pr-ch li{grid-template-columns:auto 1fr}.pr-ch-s{grid-column:2}}

/* swot */
.pr-swot{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.pr-sw{position:relative;border-top:6px solid var(--c)}
.pr-sw-s{--c:var(--pr-c3)}.pr-sw-w{--c:var(--pr-c4)}.pr-sw-o{--c:var(--pr-c5)}.pr-sw-t{--c:var(--pr-c7)}
.pr-sw-l{position:absolute;top:.9rem;right:1.2rem;font:700 2.4rem/1 var(--serif);color:var(--c);opacity:.35}
.pr-sw ul{margin:0;padding-left:1.15rem;display:grid;gap:.35rem;color:var(--ink-2)}
.pr-quote{margin:2rem 0 0;text-align:center;font:600 clamp(1.25rem,2.6vw,1.6rem) var(--serif);color:var(--navy)}

@media (prefers-reduced-motion:reduce){
  .pr-arc,.pr-bt i,.pr-time li::before,.js .pr-road li{transition:none!important}
}
@media print{
  .pr-arc{stroke-dasharray:var(--len) calc(100 - var(--len))!important}
  .pr-bt i,.pr-time li::before{transform:none!important}
  .js .pr-road li{opacity:1!important;transform:none!important}
  .pr-test-sec{display:none}
}

/* 23. тест на вибір профілю (profile-test.html, js/profile-test.js) і кнопки в блоці "Три кластери".
   основа - стилі профтесту (розділ 20, класи pf-*) */
/* блок "Три кластери": банер з повним тестом зверху, картки однакової висоти, кнопка внизу */
.pr-clusters .pr-prof{display:flex;flex-direction:column}
.pr-clusters .pr-deep{margin-bottom:1.1rem}
.pr-prof-btn{margin-top:auto;align-self:flex-start}
.pr-prof-btn .ic{transition:transform .2s var(--ease)}
.pr-prof-btn:hover .ic{transform:translateX(3px)}
@media (max-width:600px){.pr-prof-btn{align-self:stretch}}
.pr-banner{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 1.5rem;margin:0 0 1.25rem;padding:1.25rem 1.5rem;
  border-radius:var(--r-l);background:var(--fill);color:#fff;box-shadow:var(--sh1)}
.pr-banner b{display:block;font:650 1.3rem var(--serif)}
.pr-banner span{color:#D5DEF2}
.pr-banner-act{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.pr-banner .btn{border-color:var(--sun);background:var(--sun);color:#2A1E00}
.pr-banner .btn:hover{background:#FFC93C;border-color:#FFC93C}
.pr-banner-link{color:#fff;font-size:.9rem}
html.contrast .pr-banner{background:#000;border:2px solid #000}
@media (max-width:600px){.pr-banner{padding:1.1rem}.pr-banner-act,.pr-banner .btn{width:100%}}

/* крок 2 на результаті профтесту */
.pf-step2{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;border:2px solid var(--fill)}
.pf-step2>div{flex:1 1 280px}
.pf-step2 p{margin:0!important}

/* вступ, вибір класу, плани */
.pt-hint,.pt-remind{display:flex;gap:.6rem;align-items:flex-start;margin:1rem 0 0!important;padding:.75rem .9rem;border-radius:var(--r-m);background:var(--sky)}
.pt-hint .ic,.pt-remind .ic{flex:none;margin-top:.15rem;color:var(--navy)}
.pt-group legend small{font-weight:500;color:var(--muted);font-size:.85rem;margin-left:.3rem}
.pt-choices{display:grid;gap:.5rem}
.pt-row{grid-template-columns:repeat(3,1fr)}
.pt-choice{position:relative;display:flex;align-items:center;min-height:48px;padding:.6rem .9rem;border:2px solid var(--line);border-radius:var(--r-m);cursor:pointer;
  background:var(--surface);transition:border-color .15s,background .15s}
.pt-choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.pt-choice:hover{border-color:var(--navy-2)}
.pt-choice:has(input:checked){border-color:var(--fill);background:var(--sky);font-weight:600}
.pt-choice:has(input:focus-visible){outline:3px solid var(--sun);outline-offset:2px}
.pt-row .pt-choice{justify-content:center;padding-inline:.4rem;white-space:nowrap}
html.contrast .pt-choice:has(input:checked){outline:3px solid #000}
/* "не вивчаю" під шкалою */
.pf-na{position:relative;display:flex;justify-content:center;max-width:440px;margin:.6rem auto 0;cursor:pointer}
.pf-na input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pf-na span{padding:.35rem .9rem;border:1px dashed var(--line);border-radius:999px;font-size:.88rem;color:var(--muted)}
.pf-na input:checked+span{border-style:solid;border-color:var(--fill);background:var(--sky);color:var(--ink);font-weight:600}
.pf-na input:focus-visible+span{outline:3px solid var(--sun);outline-offset:2px}

/* завдання НМТ */
.pt-task-q{font-family:var(--sans)!important;font-size:1.1rem!important;font-weight:600;line-height:1.45!important}
.pt-task-img{display:block;max-width:100%;height:auto;margin:0 auto 1rem;border-radius:var(--r-s)}
.pt-opts{border:0;margin:0;padding:0;min-width:0;display:grid;gap:.5rem}
.pt-opt{position:relative;display:flex;gap:.75rem;align-items:center;min-height:48px;padding:.6rem .9rem;border:2px solid var(--line);border-radius:var(--r-m);cursor:pointer;background:var(--surface)}
.pt-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pt-opt b{flex:none;display:grid;place-items:center;width:2rem;height:2rem;border-radius:8px;background:var(--sky);color:var(--navy)}
.pt-opt:has(input:focus-visible){outline:3px solid var(--sun);outline-offset:2px}
.pt-opts:disabled .pt-opt{cursor:default}
.pt-opt.ok{border-color:var(--ok);background:rgba(30,123,69,.1)}
.pt-opt.ok b{background:var(--ok);color:#fff}
.pt-opt.bad{border-color:var(--bad);background:rgba(179,38,30,.08)}
.pt-opt.bad b{background:var(--bad);color:#fff}
.pt-expl p{margin:1rem 0 0!important;padding:.75rem .9rem;border-radius:var(--r-m);background:var(--paper)}
.pt-src{margin:.75rem 0 0!important;font-size:.8rem;color:var(--muted)}

/* результат */
.pt-clusters{display:grid;gap:.75rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.pt-cl{position:relative;display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;padding:1rem .75rem;border:2px solid var(--line);border-radius:var(--r-m)}
.pt-cl.top{border-color:var(--c);box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 22%,transparent)}
.pt-cl b{font-size:.95rem;line-height:1.25}
.pt-cl-tag{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--navy-2)}
.pt-ring{width:96px;height:96px;display:block}
.pt-ring-bg{fill:none;stroke:var(--sky);stroke-width:5}
.pt-ring-v{fill:none;stroke:var(--c,var(--fill));stroke-width:5;stroke-linecap:round}
.pt-ring text{fill:var(--ink);font:700 9px var(--sans)}
html.contrast .pt-ring-v{stroke:#000}
html.contrast .pt-cl.top{border-color:#000;box-shadow:none;outline:3px solid #000}
@media (max-width:560px){
  .pt-clusters{grid-template-columns:1fr}
  .pt-cl{flex-direction:row;text-align:left;gap:.75rem;padding:.7rem .9rem}
  .pt-cl b{flex:1}
  .pt-ring{width:64px;height:64px;order:3}
  .pt-cl-tag{position:absolute;top:.35rem;right:.75rem}
}
.pt-bars{margin-bottom:1rem}
.pt-bars .pf-bar-row{grid-template-columns:minmax(0,15rem) 1fr auto}
@media (max-width:560px){.pt-bars .pf-bar-row{grid-template-columns:1fr auto}}
.pt-best p{margin:.4rem 0 0!important}
.pt-kv{font-size:.95rem;color:var(--ink-2)}
.pt-also{margin:.5rem 0 0!important}
.pt-other{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem}
.pt-other p{margin:0!important;flex:1 1 260px}

/* тест кластера: розділи за предметами (js/cluster-quiz.js) */
.pt-grade-note{margin:.6rem 0 0!important}
.pt-secs{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.75rem}
.pt-sec-card{display:flex;align-items:center;gap:1rem;padding:1rem 1.1rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh1)}
.pt-sec-card>div{flex:1;min-width:0}
.pt-sec-card b{display:block;font-size:1.05rem}
.pt-sec-card small{display:block;color:var(--muted);font-size:.88rem}
.pt-sec-card.done{border-color:var(--ok)}
.pt-sec-card.done .ico{background:rgba(30,123,69,.12);color:var(--ok)}
@media (max-width:480px){.pt-sec-card{flex-wrap:wrap}.pt-sec-card .btn{flex:1 1 100%}}
.pt-task-q code,.pt-opt code{font-family:ui-monospace,Consolas,monospace;font-size:.92em}
.pt-task-q code{display:block;margin-top:.6rem;padding:.6rem .8rem;border-radius:var(--r-s);background:var(--paper);border:1px solid var(--line);font-weight:500;white-space:normal}

/* телефон: компактніше */
@media (max-width:480px){
  .pt-sec .wrap{width:calc(100% - 24px)}
  .pt .pf-card,.pt .pf-q{padding:16px}
  .pt .pf-btns .btn{flex:1 1 100%}
}
@media print{
  .pf-step2,.pt-other,.pt-hint{display:none!important}
  .pt-ring{width:70px;height:70px}
  .pt-cl{padding:.4rem;border:1px solid #bbb}
  .pt-bars .pf-bar-track i{background:#333!important;opacity:1}
}
/* профтест: необов'язковий клас на першому екрані */
.pf-grade{margin:1.25rem 0 0}
.pf-grade-row{grid-template-columns:repeat(auto-fit,minmax(96px,1fr))}
.pf-grade-row .pt-choice{justify-content:center;white-space:nowrap}