:root{
    --white:#FFFFFF; --paper:#FCFCFA; --pearl:#F6F4EF; --pearl-2:#EFEBE2;
    --ink:#1A1814; --ink-soft:#6B6358; --ink-faint:#9C9486;
    --hair:#ECE7DD; --hair-2:#E3DCCD;
    /* v188: эталонные вертикальные зазоры мобильной вёрстки (S — короткий, L — длинный ≈ 2×S) */
    --gap-s:30px; --gap-l:60px;
    --gold:#B8862F; --gold-mid:#C9A24B; --gold-lt:#E8C77E; --gold-pale:#F2E3B8; --gold-deep:#8C641F;
    --string-red:#C46856;
    --grad-gold:linear-gradient(110deg,var(--gold-deep) 0%,var(--gold) 22%,var(--gold-mid) 42%,var(--gold-pale) 50%,var(--gold-mid) 58%,var(--gold) 78%,var(--gold-deep) 100%);
    /* «Течение» золотых полос (скорость ≈ ползунок 1.7 в песочнице) + мягкий подъём кнопок */
    --sheen-h:6.4s; --sheen-v:7.2s; --btn-lift:0 7px 16px -8px rgba(184,134,47,.42);
    --display:"Fraunces",Georgia,serif;
    --body:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
    --shadow-soft:0 30px 70px -42px rgba(26,24,20,.30);
    --shadow-gold:0 30px 70px -24px rgba(184,134,47,.55);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  /* убираем синюю подсветку тапа (Android) и лишнее выделение на интерактиве */
  *{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(0,0,0,0)}
  button,.mtile,.cf-card,.chip,.acc-head,.pill,summary,[role="button"],.ab-btn,.nav a,label{
     -webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
  button:focus,button:focus-visible{outline:none}
  input,textarea,[contenteditable]{-webkit-user-select:text;user-select:text}
  html{scroll-behavior:smooth}
  body{background:var(--paper);color:var(--ink);font-family:var(--body);font-weight:400;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  ::selection{background:var(--gold);color:#fff}
  a{color:inherit;text-decoration:none}
  img{display:block;max-width:100%}
  .wrap{max-width:1240px;margin:0 auto;padding:0 40px}

  /* ---- gold treatments ---- */
  .gold-text{background:var(--grad-gold);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
  .note-gold{margin-left:.15em;font-weight:600;font-size:1.12em;line-height:1;vertical-align:-.04em;background:var(--grad-gold);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold);animation:sheen 9s linear infinite}
  /* иконки инструментов в тексте: золотой мерцающий фон сквозь силуэт SVG (mask), размер ≈ заглавной буквы */
  .instr-ic{display:inline-block;width:.92em;height:.92em;vertical-align:-.12em;margin:0 .12em;
    background:var(--grad-gold);background-size:220% 100%;animation:sheen 9s linear infinite;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
    -webkit-mask-size:contain;mask-size:contain}
  .instr-guitar{-webkit-mask-image:url(/static/img/instr/guitar.svg);mask-image:url(/static/img/instr/guitar.svg)}
  .instr-piano{-webkit-mask-image:url(/static/img/instr/piano.svg);mask-image:url(/static/img/instr/piano.svg)}
  .instr-harp{-webkit-mask-image:url(/static/img/instr/harp.svg);mask-image:url(/static/img/instr/harp.svg)}
  .instr-gclef{-webkit-mask-image:url(/static/img/instr/gclef.svg);mask-image:url(/static/img/instr/gclef.svg)}
  .gold-text.sheen{animation:sheen 7s linear infinite}
  @keyframes sheen{to{background-position:183.3333% 0}}
  .rule-gold{height:1px;border:none;background:var(--grad-gold);background-size:220% 100%;animation:sheen 9s linear infinite;opacity:.85}

  .eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;display:inline-flex;align-items:center;gap:13px;
    background:var(--grad-gold);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
  .eyebrow::before{content:"";width:26px;height:1px;flex:none;background:var(--gold-mid)}

  .reveal{opacity:0;transform:translateY(30px);transition:opacity 1.05s cubic-bezier(.16,1,.3,1),transform 1.05s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

  .lede{font-family:var(--display);font-weight:300;font-size:clamp(30px,4.2vw,54px);line-height:1.05;letter-spacing:-.012em}
  .lede em{font-style:italic}

  /* ---------- header (v76 · чистое стекло) ---------- */
  header{position:fixed;inset:0 0 auto 0;z-index:70;transition:background .55s,border-color .55s,box-shadow .55s;
     background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.42));
     backdrop-filter:blur(22px) saturate(1.25);-webkit-backdrop-filter:blur(22px) saturate(1.25);
     border-bottom:1px solid rgba(255,255,255,.65);
     box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -3px 5px -2px rgba(255,255,255,.78),0 1px 0 rgba(184,134,47,.12),0 8px 24px -18px rgba(140,100,31,.2)}
  header.solid{background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.72));border-color:var(--hair);
     box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -3px 5px -2px rgba(255,255,255,.78),0 1px 0 rgba(184,134,47,.12)}
  /* бренд слева · меню по центру · действия справа */
  .bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px;padding-left:20px;padding-right:20px}
  .mark{justify-self:start;font-family:var(--display);font-size:18px;font-weight:400;letter-spacing:.01em;display:flex;align-items:center;gap:9px}
  .mark .amp{font-style:italic}
  .nav{justify-self:center;display:flex;align-items:center;gap:44px;font-size:16px;font-weight:500;--sp:0.85}
  .nav a{position:relative;display:inline-block;line-height:1.2;color:var(--ink-soft)}
  .nav a .t{display:inline-block;transition:transform .3s cubic-bezier(.22,1,.36,1),color .3s,letter-spacing .3s}
  .nav a:hover .t{transform:translateY(-9px);color:var(--gold);letter-spacing:.015em}
  /* музыкальная волна под пунктом (появляется при наведении) */
  .nav .wave-svg{position:absolute;left:50%;top:100%;margin-top:-13px;transform:translateX(-50%);overflow:visible;opacity:0;transition:opacity .28s ease;pointer-events:none}
  .nav a:hover .wave-svg{opacity:1}
  .nav .wave{fill:none;stroke:url(#navgold);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
  .nav a:hover .wave-a{animation:navdraw calc(.62s*var(--sp)) cubic-bezier(.35,0,.2,1) forwards}
  .nav a:hover .wave-b{animation:navdraw calc(.68s*var(--sp)) cubic-bezier(.35,0,.2,1) calc(.1s*var(--sp)) forwards}
  .nav .note,.nav .beam{transform-box:fill-box;transform-origin:center;opacity:0}
  .nav .note ellipse{fill:var(--gold)}
  .nav .note .stem,.nav .note .flag{stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;fill:none}
  .nav .beam{stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;fill:none}
  .nav a:hover .note{animation:navpop calc(.4s*var(--sp)) cubic-bezier(.2,.7,.3,1.5) both;animation-delay:calc(var(--nd)*var(--sp))}
  .nav a:hover .beam{animation:navpop calc(.42s*var(--sp)) cubic-bezier(.2,.7,.3,1.4) both;animation-delay:calc(var(--nd)*var(--sp))}
  @keyframes navdraw{to{stroke-dashoffset:0}}
  @keyframes navpop{0%{opacity:0;transform:scale(.25) translateY(2px)}62%{opacity:1;transform:scale(1.14)}100%{opacity:1;transform:scale(1)}}
  .sound{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--hair-2);border-radius:40px;padding:9px 16px;display:inline-flex;gap:9px;align-items:center;cursor:pointer;background:rgba(255,255,255,.5);color:var(--ink-soft);transition:.3s}
  .sound:hover{border-color:var(--gold-mid);color:var(--ink)}
  .sound .led{width:6px;height:6px;border-radius:50%;background:var(--ink-faint);opacity:.5;transition:.3s}
  .sound.on{color:var(--ink);border-color:var(--gold-mid)}
  .sound.on .led{opacity:1;background:var(--gold-mid);box-shadow:0 0 0 3px rgba(184,134,47,.18)}
  @media(max-width:880px){.nav{display:none}}
  /* v109 — узкие экраны: бренд и кнопки перестают наезжать друг на друга */
  @media(max-width:600px){
    .wrap{padding:0 26px}
    .bar{grid-template-columns:1fr auto;height:64px;padding-left:16px;padding-right:16px}
    .mark{font-size:15px;gap:6px;white-space:nowrap}
    .hdr-actions{gap:8px}
    .sound{padding:8px 12px;font-size:9.5px;letter-spacing:.14em;gap:7px}
  }

  /* ---------- hero ---------- */
  .hero{position:relative;min-height:100svh;overflow:hidden;background:radial-gradient(130% 100% at 22% 0%, var(--white) 0%, var(--paper) 60%)}
  #heroStrings{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;touch-action:pan-y}
  .hero-inner{position:relative;z-index:3;display:flex;flex-direction:column;min-height:100svh;
    padding:clamp(120px,26vh,300px) 0 clamp(40px,7vh,88px);pointer-events:none}
  /* имена — правый край строго по сетке (.wrap), длинные имена уходят влево */
  .hero-block{width:100%;text-align:right}
  .hero-block .eyebrow{pointer-events:auto;justify-content:flex-end;font-size:clamp(12px,1.2vw,14.5px);letter-spacing:.28em;
    opacity:0;transform:translateY(10px);transition:opacity 1s ease .15s,transform 1s cubic-bezier(.16,1,.3,1) .15s}
  .hero.ready .hero-block .eyebrow{opacity:1;transform:none}
  .hero-names{margin-top:clamp(14px,2vh,22px)}
  .hn .nm{font-family:var(--display);font-weight:300;line-height:1.02;letter-spacing:-.016em;color:var(--ink);
    font-size:clamp(42px,5.5vw,84px);white-space:nowrap;opacity:0;transform:translateY(22px);
    transition:opacity 1.1s cubic-bezier(.16,1,.3,1),transform 1.1s cubic-bezier(.16,1,.3,1)}
  .hn .nm em{font-style:normal}
  .hero-names .hn:first-child .nm{transition-delay:.30s}
  .hero-names .hn:last-child .nm{transition-delay:.52s}
  .hero.ready .hn .nm{opacity:1;transform:none}
  .hn .sub{font-size:clamp(11px,1.15vw,13.5px);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);
    margin-top:8px;opacity:0;transition:opacity 1s ease .6s}
  .hero-names .hn:last-child .sub{transition-delay:.78s}
  .hero.ready .hn .sub{opacity:1}
  .hn .sub em{font-style:normal}
  /* золотой амперсанд между именами */
  .hero-amp{font-family:var(--display);font-style:italic;font-weight:300;line-height:.85;
    font-size:clamp(30px,3.6vw,56px);margin:clamp(4px,0.8vh,12px) 0;padding-right:.12em;
    opacity:0;transition:opacity 1s ease .42s}
  .hero.ready .hero-amp{opacity:1}
  /* низ hero: тэглайн строго по центру экрана + подсказка scroll справа */
  .hero-foot{margin-top:auto;position:relative;display:flex;align-items:flex-end;justify-content:center;min-height:78px}
  .hero-tagline{text-align:center;max-width:38ch;margin:0 auto;pointer-events:auto;
    font-family:var(--display);font-style:italic;font-weight:300;line-height:1.32;
    font-size:clamp(14px,1.55vw,19px);letter-spacing:.005em;
    background:var(--grad-gold);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    opacity:0;transition:opacity 1s ease .85s}
  .hero.ready .hero-tagline{opacity:1}
  .hero-scroll{position:absolute;right:0;bottom:0;flex:none;display:inline-flex;flex-direction:column;align-items:center;gap:9px;pointer-events:auto;
    padding:13px 20px 11px;border:1px solid var(--hair-2);border-radius:999px;background:rgba(255,255,255,.55);
    color:var(--ink-soft);opacity:0;transition:opacity 1s ease 1s,border-color .3s,box-shadow .3s}
  .hero.ready .hero-scroll{opacity:1}
  .hero-scroll:hover{border-color:var(--gold-lt);box-shadow:var(--btn-lift)}
  .hero-scroll .t{font-size:10.5px;letter-spacing:.32em;text-transform:uppercase}
  .hero-scroll .chevs{display:flex;flex-direction:column;align-items:center;height:16px}
  .hero-scroll .chev{width:8px;height:8px;border-right:1.6px solid var(--gold);border-bottom:1.6px solid var(--gold);
    transform:rotate(45deg);margin-top:-3px;animation:chev 1.6s ease-in-out infinite}
  .hero-scroll .chev:nth-child(2){animation-delay:.16s}
  .hero-scroll .chev:nth-child(3){animation-delay:.32s}
  @keyframes chev{0%,100%{opacity:.2;transform:rotate(45deg) translate(-1.5px,-1.5px)}50%{opacity:1;transform:rotate(45deg) translate(1.5px,1.5px)}}
  /* подсказка интерактива — только мобильная, гаснет после первого щипка */
  .hero-touch{display:none}
  /* золотистая панель под именами — только мобильная (десктоп: .hero-foot) */
  .hero-mpanel{display:none}
  /* ── мобильный hero (v111): компактно, бегущая строка влезает в первый экран ─
     имена + инструменты — по правому краю (как на десктопе),
     «камерная музыкальная студия» и тэглайн — по центру */
  @media(max-width:760px){
    /* hero опущен под шапку: струны видны по всей ширине, не режутся хедером */
    .hero{padding-top:33px;min-height:calc(74svh + 33px)}
    #heroStrings{top:33px;height:calc(100% - 33px)}
    .hero-inner{min-height:74svh}
    .hero-inner{padding:clamp(140px,23svh,250px) 13px 0}
    .hero-block{display:flex;flex-direction:column;align-items:stretch;width:100%}
    .hero-names{order:1;margin-top:0;width:100%;text-align:right}
    /* кикер над панелью не нужен — заголовок ушёл в градиентную панель */
    .hero-block .eyebrow{display:none}
    /* имена ужаты, чтобы длинное имя целиком влезало в паддинг .wrap */
    .hn .nm{font-size:clamp(27px,7.9vw,46px);white-space:nowrap}
    .hn .sub{margin-top:6px;font-size:clamp(9.5px,2.5vw,11.5px);letter-spacing:.16em}
    .hero-amp{font-size:clamp(22px,5.8vw,35px);padding-right:.1em;margin:4px 0;text-align:right}
    /* старый foot (tagline + круглый scroll) на мобиле не показываем */
    .hero-foot{display:none}
    /* ── карточка-панель под именами (в стиле .footzone: скруглённый верх,
       мягкий градиент), тянется до бегущей строки ──────────────────────────── */
    .hero-mpanel{order:3;position:relative;display:flex;align-items:flex-end;justify-content:center;gap:12px;
      margin-top:auto;padding:clamp(30px,5vh,48px) 14px clamp(22px,3.6vh,32px);
      pointer-events:auto;text-decoration:none;
      background:linear-gradient(180deg,rgba(251,244,228,0) 0%,rgba(246,234,210,.5) 48%,rgba(241,226,194,.62) 100%);
      border-radius:34px 34px 0 0;
      /* во всю ширину hero, поверх .wrap-паддинга; низ уходит под бегущую строку */
      margin-left:-13px;margin-right:-13px;margin-bottom:0}
    /* мягкий белый блик по верхней кромке — как у .footzone::before */
    .hero-mpanel::before{content:"";position:absolute;left:0;right:0;top:0;height:90px;pointer-events:none;
      border-radius:34px 34px 0 0;background:linear-gradient(180deg,rgba(255,255,255,.4),rgba(255,255,255,0))}
    .hmp-body{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
      gap:12px;flex:0 1 auto;min-width:0;max-width:calc(100% - 74px)}
    .hmp-title{font-family:var(--display);font-weight:400;line-height:1.22;margin-bottom:4px;
      font-size:clamp(12.5px,3.4vw,15.5px);letter-spacing:.16em;text-transform:uppercase}
    .hmp-div{display:none}
    .hmp-tag{font-family:var(--display);font-style:italic;color:var(--ink-soft);
      font-size:clamp(13px,3.7vw,16px);line-height:1.5;max-width:28ch}
    /* стрелки прижаты к низу панели, на уровне последней строки тэглайна */
    .hmp-ar{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;gap:3px;
      margin-bottom:2px}
    /* стрелки: только вертикальное мерцание, без бокового сдвига */
    .hmp-ar .chev{width:8px;height:8px;border-right:1.7px solid var(--gold);border-bottom:1.7px solid var(--gold);
      transform:rotate(45deg);animation:heroSideArrow 1.6s ease-in-out infinite}
    .hmp-ar .chev:nth-child(2){animation-delay:.2s}
    @keyframes heroSideArrow{0%,100%{opacity:.22}50%{opacity:1}}
    .ticker{padding:12px 0}
    .ticker-track{font-size:clamp(15px,4.4vw,19px);gap:30px}
    .ticker-track span{gap:30px}
    /* подсказка — две строки по правому краю; два состояния: струны / звук */
    .hero-touch{display:block;position:absolute;top:96px;right:13px;z-index:4;pointer-events:none;
      color:var(--ink-faint);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
      opacity:0;transition:opacity .7s ease 1.4s}
    .hero.ready .hero-touch{opacity:.75}
    .hero-touch .ht{display:none;flex-direction:column;align-items:flex-end;gap:5px}
    .hero-touch[data-hint="strings"] .ht-str{display:flex}
    .hero-touch[data-hint="sound"] .ht-snd{display:flex}
    .hero-touch .l2{display:inline-flex;align-items:center;gap:9px}
    .hero-touch .chevs{display:inline-flex;align-items:center;gap:3px}
    .hero-touch .chev{width:7px;height:7px;flex:none;transform:rotate(45deg);
      border-left:1.6px solid var(--gold-mid);border-bottom:1.6px solid var(--gold-mid);
      animation:touchNudge 1.6s ease-in-out infinite}
    .hero-touch .chev:nth-child(2){animation-delay:.16s}
    .hero-touch .chev:nth-child(1){animation-delay:.32s}
    @keyframes touchNudge{0%,100%{opacity:.2;transform:rotate(45deg) translate(1.5px,-1.5px)}
      50%{opacity:1;transform:rotate(45deg) translate(-1.5px,1.5px)}}
    /* вариант «звук» — стрелки вверх-вправо, к тумблеру в шапке */
    .hero-touch .chevs.up .chev{border-left:0;border-bottom:0;
      border-top:1.6px solid var(--gold-mid);border-right:1.6px solid var(--gold-mid);
      transform:rotate(-45deg);animation:touchNudgeUp 1.6s ease-in-out infinite}
    .hero-touch .chevs.up .chev:nth-child(1){animation-delay:0s}
    .hero-touch .chevs.up .chev:nth-child(2){animation-delay:.16s}
    .hero-touch .chevs.up .chev:nth-child(3){animation-delay:.32s}
    @keyframes touchNudgeUp{0%,100%{opacity:.2}50%{opacity:1}}
  }
  @media(prefers-reduced-motion:reduce){.hero-touch .chev{animation:none!important;opacity:.6}}
  @media(prefers-reduced-motion:reduce){.hero-scroll .chev{animation:none;opacity:.6}}
  /* edit-режим: без декоративных анимаций — они мешают правке */
  body.edit-mode .why .rl-head .wave-svg,body.edit-mode .reg .rl-head .wave-svg{display:none}
  body.edit-mode .why .rl-head .d,body.edit-mode .reg .rl-head .d,
  body.edit-mode .why .rl-head,body.edit-mode .reg .rl-head{transform:none!important;letter-spacing:normal}
  body.edit-mode .why .rl-head .y,body.edit-mode .reg .rl-head .rq,
  body.edit-mode .fab-book::before,body.edit-mode .fab-book::after{animation:none}
  body.edit-mode .hero-scroll .chev,body.edit-mode .gcue-top .chev{animation:none}
  /* rich-поле в правке: фиксированная высота со скроллом, а не бесконечное растягивание */
  body.edit-mode [data-field-key][data-rich="1"].ie-editing,
  body.edit-mode .rl-more [data-field-key]:focus{max-height:170px;overflow-y:auto;display:block}
  /* v171. В режиме правки ВСЕ пункты раскрыты и не сворачиваются: раньше клик
     для установки курсора закрывал аккордеон и печатать было невозможно.
     `overflow:visible` тут же давал наложение длинного текста на соседние
     пункты — заменено на фиксированную высоту поля со скроллом. */
  body.edit-mode .reg .rl-more,body.edit-mode .why .rl-more{
    max-height:none;opacity:1;overflow:visible;padding-bottom:18px}
  body.edit-mode .reg .rl-head .ind,body.edit-mode .why .rl-head .ind{opacity:.25}
  body.edit-mode .rl-more [data-field-key]{display:block;
    max-height:calc(10 * 1.62em);overflow-y:auto;overscroll-behavior:contain}
  /* v174. Эффекты пользовательского режима (затухание + шевроны) в правке
     мешали: после сохранения поле открывалось «как у посетителя». Гасим их
     жёстко — в edit-mode поле всегда обычное, независимо от .scrolly. */
  body.edit-mode .rl-more > div{-webkit-mask-image:none !important;mask-image:none !important}
  body.edit-mode .rl-cue{display:none !important}
  /* нота в правке — обычный серый символ того же размера; переливаться
     начинает только у посетителя, чтобы правка не «прыгала» по цвету */
  body.edit-mode .note-gold{background:none;-webkit-text-fill-color:currentColor;
    color:var(--ink-soft);animation:none}
  /* edit-режим: имена и инструменты hero доступны для клика/правки */
  body.edit-mode .hn .nm,body.edit-mode .hn .sub,body.edit-mode .hero-amp{pointer-events:auto;cursor:text}
  .hero-hint{display:flex;flex-direction:column;align-items:center;gap:9px;margin-top:30px;opacity:0;transition:opacity 1s ease 1.2s;pointer-events:none}
  .hero.ready .hero-hint{opacity:.7}
  .hero-hint .t{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft)}
  .hero-hint .rail{width:1px;height:38px;background:var(--hair-2);position:relative;overflow:hidden}
  .hero-hint .rail::after{content:"";position:absolute;top:-45%;left:0;width:100%;height:42%;background:var(--gold-mid);animation:drop 2.6s cubic-bezier(.7,0,.3,1) infinite}
  @keyframes drop{0%{top:-45%}60%,100%{top:120%}}

  /* ---------- ticker ---------- */
  .ticker{border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:18px 0;overflow:hidden;white-space:nowrap;background:var(--white)}
  .ticker-track{display:inline-flex;gap:44px;animation:slide 44s linear infinite;font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(17px,2.2vw,25px);color:var(--ink)}
  .ticker-track span{display:inline-flex;align-items:center;gap:44px}
  /* значок между фразами — SVG через mask + золотой перелив (fill/stroke иконки не важны) */
  .ticker-track i.ti-icon,.ti-icon{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.16em;
    background:var(--grad-gold);background-size:220% 100%;animation:sheen 9s linear infinite;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;
    -webkit-mask-size:contain;mask-size:contain}
  @keyframes slide{to{transform:translateX(-50%)}}
  @media(prefers-reduced-motion:reduce){.ticker-track{animation:none}.rule-gold,.gold-text.sheen{animation:none}}

  /* ---------- intro person ---------- */
  .intro{padding:140px 0 90px}
  .intro-grid{display:grid;grid-template-columns:.62fr 1fr;gap:70px;align-items:start}
  .intro-grid.mirror{grid-template-columns:1fr .62fr}
  .intro-grid.mirror .pcol{order:2}
  .intro .portrait{max-width:400px;width:100%;justify-self:center}
  .portrait{position:relative;aspect-ratio:4/5}
  .portrait .img{position:absolute;inset:0;border-radius:16px;overflow:hidden;background:linear-gradient(155deg,var(--white),var(--pearl) 60%,var(--pearl-2));box-shadow:var(--shadow-soft)}
  .portrait.sq .img{border-radius:16px}
  .portrait .img .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--ink-faint);font-size:11px;letter-spacing:.2em;text-transform:uppercase;text-align:center}
  .portrait .ring{position:absolute;inset:14px;border:1px solid var(--gold-mid);opacity:.45;pointer-events:none;border-radius:inherit}
  .portrait .tag{position:absolute;z-index:7;left:-18px;bottom:40px;background:var(--white);color:var(--ink);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;padding:11px 18px;border-radius:40px;border:1px solid var(--hair-2);box-shadow:0 14px 30px -18px rgba(26,24,20,.4)}
  .portrait .tag b{font-weight:600}

  .intro h2{font-family:var(--display);font-weight:300;font-size:clamp(32px,4.2vw,56px);line-height:1.04;letter-spacing:-.012em;margin:18px 0 22px}
  .intro h2 em{font-style:italic}
  .intro p{color:var(--ink-soft);font-size:16.5px;max-width:50ch;margin-bottom:15px}
  @media(max-width:880px){
    .intro{padding:96px 0 64px}
    .intro-grid,.intro-grid.mirror{grid-template-columns:1fr;gap:46px}
    .intro-grid.mirror .pcol{order:0}
  }

  /* деко-клавиатура скрыта на десктопе */
  .kbd-deco{display:none}
  .gtr-deco{display:none}

  /* ── мобильное оформление блока преподавателя (Ольга) ────────────────────── */
  /* слой-ловушка тапов виден только на мобиле */
  .pcol.portrait .tap-catch{display:none}
  /* обёртка золотистой зоны — только мобайл; на десктопе прозрачна для layout */
  .tq-zone{display:contents}
  @media(max-width:760px){
    /* обратный градиент от бегущей строки вниз (тусклее hero).
       Держим в пределах экрана: во всю ширину секции, но БЕЗ выхода за край
       (никаких отрицательных left/right — они давали горизонтальный скролл). */
    #olgaRegion{position:relative}
    #olga.intro{position:relative}
    /* равные зазоры вокруг линии: клавиатура→линия = линия→фото Дориэля */
    .guitar-sec{padding-bottom:0}
    #olga.intro::before{content:"";position:absolute;left:0;right:0;top:0;height:180px;
      pointer-events:none;z-index:0;
      background:linear-gradient(180deg,rgba(241,226,194,.22) 0%,rgba(246,234,210,.10) 45%,rgba(246,234,210,0) 100%)}
    #olga.intro > *{position:relative;z-index:1}
    /* Дориэль (mirror): фото СПРАВА, гриф выходит за левый край экрана */
    /* justify-self:stretch ОБЯЗАТЕЛЕН: базовое `.intro .portrait{justify-self:center}`
       (вне медиа) ужимало .pcol до ширины содержимого и центрировало его в колонке
       грид-сетки — из-за этого flex-end внутри не давал никакого эффекта. */
    #doriel.intro .pcol.portrait{justify-self:stretch;width:100%;
      justify-content:flex-end;padding-left:0;padding-right:12px}
    #doriel.intro .pcol-inner{justify-content:flex-end}
    #doriel.intro .portrait-box{width:72vw}
    #doriel.intro .portrait-box .tag{left:auto;right:-6px}
    /* ── гриф (v165): SVG из ГРИФф_заливка.dxf, голова + 4 лада ──────────────
       height:100%;width:auto → верх и низ рисунка совпадают с фото ровно,
       translateX(-50%) уводит половину за левый край, как в макете.
       pointer-events:none — тапы ловит общий .tap-catch блока. */
    #doriel.intro .gtr-deco{display:block;position:absolute;left:0;top:0;bottom:0;
      width:auto;z-index:1;pointer-events:none;transform:translateX(-30%);
      opacity:.6;transition:opacity .5s}
    #doriel.intro .gtr-svg{height:100%;width:auto;display:block}
    /* заливка на 15% тусклее исходной #EBD9AF (десатурация к своей же яркости) */
    .g-fill{fill:#E8D9B5}
    /* накладка грифа темнее головы — как чёрные клавиши у фортепиано, но мягче */
    .g-fret{fill:#C4AC7C}
    /* stroke БЕЗ vector-effect: 9 — это единицы viewBox (~1px на экране).
       С non-scaling-stroke было 9 экранных px → голова выглядела раздутой. */
    .g-ol{fill:none;stroke:var(--gold-mid);stroke-width:9;stroke-linejoin:round;opacity:.5}
    .intro .pcol.portrait.open .gtr-deco{opacity:.85}
    /* волна по ладам: JS вешает .flash по колонкам сверху вниз */
    .g-fret.flash{animation:fretFlash .42s ease-out}
    @keyframes fretFlash{0%{fill:#C4AC7C}30%{fill:#FBE6A6}100%{fill:#C4AC7C}}
    /* .pcol сам по себе .portrait (aspect 4/5) — на мобиле сбрасываем, он станет
       обычным рядом: фото-бокс + клавиатура (ПЕРЕНОС ИЗ ПЕСОЧНИЦЫ 1:1) */
    .intro .pcol.portrait{position:relative;aspect-ratio:auto;max-width:none;width:auto;
      display:flex;align-items:stretch;justify-content:flex-start;padding-left:6px;z-index:1}
    /* единый прозрачный слой-ловушка тапов поверх всего блока: любой тап (фото/
       плашка/клавиатура) обрабатывается одинаково, до внутренностей не доходит */
    .intro .pcol.portrait .tap-catch{display:block;position:absolute;inset:0;z-index:20;cursor:pointer}
    /* кнопки загрузки/удаления фото — поверх слоя-ловушки, чтобы редактор работал */
    .intro .pcol.portrait .ph-tools{z-index:21}
    .intro .pcol-inner{display:flex;align-items:stretch;gap:0;width:100%;min-width:0}
    /* фото-бокс = .photo из песочницы: несёт пропорцию, scale идёт на НЁМ самом */
    .portrait-box{position:relative;width:72vw;aspect-ratio:4/5;flex:none;z-index:2;
      border-radius:16px;transform-origin:center center;cursor:pointer;
      transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s}
    .portrait-box .img{position:absolute;inset:0;border-radius:16px;overflow:hidden;
      background:linear-gradient(155deg,var(--white),var(--pearl) 60%,var(--pearl-2));
      box-shadow:var(--shadow-soft)}
    .portrait-box .ring{position:absolute;inset:14px;border:1px solid var(--gold-mid);
      opacity:.45;pointer-events:none;border-radius:9px;transition:inset .55s,opacity .55s}
    .portrait-box .tag{left:-6px;bottom:36px;font-size:9.5px;padding:10px 15px;transition:opacity .4s}
    .kbd-gap{display:none}
    /* клавиатура = .kbd из песочницы: flex-остаток, растянут по высоте ряда (=фото) */
    .kbd-deco{display:block;position:relative;flex:none;width:22vw;align-self:stretch;
      color:var(--gold);opacity:.6;transition:opacity .5s;cursor:pointer;
      -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px);
      mask-image:linear-gradient(90deg,transparent 0,#000 14px)}
    /* v171: свой композит-слой + will-change — иначе Safari перерастрирует SVG
       на каждом кадре вспышки и клавиатура «дрожит» по горизонтали. */
    /* v172: НЕ поднимаем SVG в отдельный слой (translateZ) — слой обрезается по
       границам элемента и съедал верхнюю обводку первой клавиши. Дрожание
       лечит will-change:fill, которая слой не создаёт. Плюс viewBox сдвинут
       на -0.5, чтобы полуобводка по краю не упиралась в границу вьюпорта. */
    /* Слой (translateZ) нужен, иначе Safari перерисовывает SVG и клавиатура
       дрожит. В v172 я его убрал из-за срезанной верхней обводки — но причина
       была в viewBox: теперь он расширен до -0.5/309, обводка внутри границ,
       и слой её больше не режет. */
    .kbd-svg{position:absolute;inset:0;width:100%;height:100%;display:block;
      transform:translateZ(0);backface-visibility:hidden}
    .kbd-black rect,.kbd-white rect{will-change:fill}
    .kbd-white rect{fill:#FBF7EE;stroke:var(--gold-mid);stroke-width:.5;
      vector-effect:non-scaling-stroke}
    .kbd-black rect{fill:var(--gold-deep)}
    /* раскрытие (из песочницы): scale на самом фото-боксе от центра + золотая тень */
    .intro .pcol.portrait.open .portrait-box{transform:scale(1.06);
      box-shadow:var(--shadow-gold);z-index:8}
    .intro .pcol.portrait.open .portrait-box .ring{inset:10px;opacity:.7}
    .intro .pcol.portrait.open .portrait-box .tag{opacity:0}
    .intro .pcol.portrait.open .kbd-deco{opacity:.51}
    /* мерцание чёрных клавиш при активации (JS ставит .flash по очереди) */
    .kbd-black rect.flash{animation:keyFlash .34s ease-out}
    @keyframes keyFlash{0%{fill:var(--gold-deep)}40%{fill:var(--gold-lt)}100%{fill:var(--gold-deep)}}
    /* имя (eyebrow) — крупный мерцающий золотой заголовок по центру */
    .intro .pcol + div{text-align:center}
    .intro .pcol + div > .eyebrow{display:inline-block;justify-content:center;
      font-family:var(--display);font-weight:400;text-transform:uppercase;
      font-size:clamp(25px,7.4vw,36px);letter-spacing:.06em;line-height:1.1;
      background:var(--grad-gold);background-size:220% 100%;-webkit-background-clip:text;
      background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
      animation:sheen 9s linear infinite}
    .intro .pcol + div > .eyebrow::before{display:none}
    .intro h2{text-align:center}
    .intro p{margin-left:auto;margin-right:auto}
    /* ── текстовый блок преподавателя на мобиле (лаконичнее десктопа) ────────
       конвенция вида: 2-й+ абзацы body = только десктоп (см. handoff data-view) */
    .teacher-copy{text-align:center}
    /* заголовок-«цитата»: размер как «камерная муз студия» в hero, дефис слева.
       Отбит равными отступами сверху/снизу — стоит по центру между именем и текстом. */
    .intro .tq-heading{text-align:left;font-size:clamp(18px,5vw,23px);line-height:1.3;
      padding-left:24px;position:relative;margin:12px 0 22px;text-wrap:balance;letter-spacing:0;
      font-weight:400}
    .intro .tq-heading::before{content:"—";position:absolute;left:0;top:0;color:var(--gold);
      font-style:normal}
    /* на мобиле показываем ТОЛЬКО первый абзац body (остальное — десктоп) */
    .teacher-body{text-align:left}
    .teacher-body > p:not(:first-of-type),
    .teacher-body > *[data-view="desktop"]{display:none}
    /* золотистая зона: охватывает заголовок+текст, начинается у фразы про
       удовольствие и ЗАКАНЧИВАЕТСЯ ВНИЗУ закруглением + линией (завершает блок) */
    .tq-zone{display:block;position:relative;margin-top:2px;padding:6px 20px 30px;
      margin-left:-6px;margin-right:-6px;
      background:linear-gradient(180deg,rgba(251,247,238,0) 0%,rgba(246,234,210,.4) 30%,rgba(241,226,194,.5) 100%);
      border-radius:0}
    /* мягкий блик по нижней кромке (зеркально низу) */
    .tq-zone::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;
      pointer-events:none;border-radius:0;
      background:linear-gradient(0deg,rgba(255,255,255,.35),rgba(255,255,255,0))}
    .tq-zone > *{position:relative;z-index:1}
    .teacher-body{margin-top:14px}
    .teacher-body p{font-size:clamp(15px,4vw,17px);line-height:1.6;color:var(--ink-soft)}
    /* золотая нотка в конце текста (в стилистике золотых акцентов сайта) */
    .note-gold{margin-left:.15em;font-weight:600;font-size:1.12em;line-height:1;vertical-align:-.04em;
      background:var(--grad-gold);background-size:220% 100%;-webkit-background-clip:text;
      background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold);
      animation:sheen 9s linear infinite}
    /* ── регалии-аккордеон сразу под золотистой зоной ───────────────────────
       Обёртка ОСТАЁТСЯ в потоке (никаких отрицательных margin — они давали
       горизонтальный скролл, грабля №3). За края экрана уходят только линии:
       absolute-псевдоэлементы с left/right = calc(50% - 50vw). Правый край
       упирается ровно в край viewport → overflow невозможен. */
    .teacher-copy .reg.reg-inline{--regin:14px;position:relative;
      margin:0;padding:0;text-align:left}
    .teacher-copy .reg.reg-inline .reglist{border-top:none}
    /* верхняя линия аккордеона = она же линия под текстовым блоком */
    .teacher-copy .reg.reg-inline::before,
    .teacher-copy .reg.reg-inline .reglist li::after{content:"";position:absolute;
      left:calc(50% - 50vw);right:calc(50% - 50vw);height:1px;
      background:var(--grad-gold);background-size:220% 100%;
      animation:sheen 9s linear infinite;opacity:.7;pointer-events:none}
    .teacher-copy .reg.reg-inline::before{top:0}
    .teacher-copy .reg.reg-inline .reglist li{position:relative;border-bottom:none}
    .teacher-copy .reg.reg-inline .reglist li::after{bottom:0}
    /* --regin = сдвиг текста .tq-zone относительно колонки (padding 20 − margin 6),
       чтобы ромб и плюс встали ровно под текст абзаца выше */
    .teacher-copy .reg.reg-inline .rl-head{gap:0;
      padding:15px var(--regin) 17px}
    .teacher-copy .reg.reg-inline .rl-head .d{font-size:clamp(15px,4.2vw,18px)}
    .teacher-copy .reg.reg-inline .rl-head .rq{margin-right:13px}
    /* текст раскрытого пункта: под заголовок (ромб 11 + зазор 13) + доп. отступ */
    .teacher-copy .reg.reg-inline .rl-more{padding-left:calc(var(--regin) + 40px);
      padding-right:var(--regin)}
    .teacher-copy .reg.reg-inline .rl-more div{font-size:clamp(14px,3.7vw,16px)}
  }

  /* ---------- OLGA keyboard dock + scroll zone ---------- */
  .kbzone{position:relative;min-height:102vh}
  .kbzone .heading{position:sticky;top:96px;text-align:center;padding-top:6px;z-index:2}

  /* info card lives on the page, centred between the heading and the keys */
  .kb-stage{position:sticky;top:36vh;z-index:1}
  .kb-info{position:relative;text-align:left;max-width:760px;margin:0 auto;border:1px solid var(--hair);border-radius:16px;
     background:rgba(255,255,255,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:26px 36px 28px;overflow:hidden;
     box-shadow:0 34px 64px -42px rgba(26,24,20,.4);opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.16,1,.3,1)}
  .kb-info::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-gold);background-size:100% 220%;animation:sheenV 9s linear infinite}
  .kb-info .pi{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600}
  .kb-info h3{font-family:var(--display);font-weight:400;font-size:clamp(23px,2.8vw,32px);margin:7px 0 8px;line-height:1.05}
  .kb-info p{color:var(--ink-soft);font-size:15.5px;max-width:70ch;margin:0}
  .kb-info .fade{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
  .kb-info .fade.show{opacity:1;transform:none}
  .kb-info-m{display:none}

  .kb-cue{display:flex;justify-content:space-between;align-items:center;gap:20px;
     background:rgba(252,252,250,.0);padding:0 14px 12px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}
  .kb-cue b{color:var(--gold);font-weight:700}
  .kb-cue .cue-press,.kb-cue .cue-scroll{display:inline-flex;align-items:center;gap:9px}
  .kb-cue .cue-scroll b{animation:bob 1.5s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

  .kb-fallback{display:none;flex-wrap:wrap;gap:10px;justify-content:center;max-width:680px;margin:26px auto 0}
  /* мобильный интерактив клавиатуры — только мобайл */
  .kbm{display:none}
  /* мобильный интерактив струн — только мобайл */
  .gsm{display:none}
  /* тонкая разделительная линия с закруглением между секциями (без градиента) */
  .sec-sep{display:none}
  .fretwrap .gsm-hint{display:none}
  @media(max-width:760px){
    /* v169: линия как у подвала — во всю ширину, но с загибом краёв вниз.
       Приём тот же, что в .footzone: border-top + border-radius на блоке;
       боковых границ нет, поэтому видна только верхняя дуга. Скругление
       принципиально не работает на «обрезанной» линии — нужен полный блок. */
    /* v170: width:auto + обе отрицательные margin — ровно 100vw при любой ширине
       родителя. С `width:100vw` + обеими margin набор был переопределён (правая
       margin игнорируется при over-constrained) и линия не доходила до края. */
    .sec-sep{display:block;height:20px;width:auto;
      margin:44px calc(50% - 50vw) 0;
      border-top:1px solid rgba(184,134,47,.45);border-radius:19px 19px 0 0;
      background:none}
    /* Ореол — ОДИН слой на весь стык. Раньше их было два (свой у .sec-sep и свой
       у секции), между ними получалась ступенька: сверху уже прозрачно, снизу
       снова .09 — это и читалось как белое поле над фото. */
    #doriel.intro{position:relative;padding-top:30px}
    #doriel.intro::before{content:"";position:absolute;left:0;right:0;top:-20px;height:210px;
      pointer-events:none;z-index:0;
      background:linear-gradient(180deg,rgba(241,226,194,.16) 0%,rgba(246,234,210,.07) 45%,rgba(246,234,210,0) 100%)}
    #doriel.intro > *{position:relative;z-index:1}
  }
  @keyframes kbmHintPulse{0%,100%{opacity:.4}50%{opacity:.9}}
  .kb-fallback button{font-size:12px;letter-spacing:.04em;border:1px solid var(--hair-2);background:var(--white);border-radius:40px;padding:11px 16px;cursor:pointer;color:var(--ink)}
  .kb-fallback button.active{border-color:var(--gold-mid);color:var(--gold)}

  .kb-dock{position:fixed;left:0;right:0;bottom:0;z-index:45;transform:translateY(120%);opacity:0;pointer-events:none;will-change:transform,opacity}
  .kb-dock.show{pointer-events:auto}
  .kb-dock::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:120px;background:linear-gradient(rgba(252,252,250,0),var(--paper));pointer-events:none}
  .kb-dock-inner{max-width:1040px;margin:0 auto;padding:0 36px}
  @keyframes sheenV{to{background-position:0 183.3333%}}
  .keyboard{display:flex;height:226px;position:relative;border-radius:6px 6px 4px 4px;box-shadow:0 -24px 50px -40px rgba(26,24,20,.35)}
  .keyboard .felt{position:absolute;left:0;right:0;top:0;height:6px;z-index:4;background:var(--grad-gold);background-size:220% 100%;animation:sheen 8s linear infinite}
  .wkey{flex:1;background:linear-gradient(var(--white),#F7F3EA);border:1px solid var(--hair-2);border-top:none;border-radius:0 0 7px 7px;cursor:pointer;position:relative;display:flex;align-items:flex-end;justify-content:center;padding-bottom:14px;transition:transform .12s ease,background .25s;text-align:center}
  .wkey .kl{font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-soft);max-width:88%;line-height:1.28;pointer-events:none}
  .wkey:hover{background:linear-gradient(#fff,#FBF6EC)}
  .wkey.active{background:linear-gradient(#FFFBF1,#F8EFD6)}
  .wkey.active .kl{color:var(--gold);font-weight:600}
  .wkey.active::after{content:"";position:absolute;top:0;left:16%;right:16%;height:3px;background:var(--grad-gold);background-size:220% 100%;animation:sheen 6s linear infinite}
  .wkey.down{transform:scaleY(.975);transform-origin:top}
  .bkey{position:absolute;top:6px;width:8.4%;height:60%;background:linear-gradient(#39322a,#181410);border-radius:0 0 5px 5px;z-index:5;cursor:pointer;box-shadow:0 6px 10px -3px rgba(0,0,0,.5),inset 0 -3px 4px rgba(255,255,255,.06);transition:transform .1s ease}
  .bkey.down{transform:scaleY(.94);transform-origin:top}
  @media(max-width:880px){.keyboard{height:180px}.wkey .kl{font-size:8px}}
  @media(max-width:600px){
    .kb-dock{display:none}
    .kbzone{min-height:0;padding-bottom:30px}
    .kbzone .heading{position:static;top:auto}
    .kb-stage{display:none}
    .kb-info-m{display:none}
    .kb-fallback{display:none !important}
    /* ── мобильный интерактив клавиатуры (перенос из песочницы, v144) ──────── */
    .kbm{display:block;margin-top:22px;padding:0 16px}
    .kbm-card{position:relative;
      background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,252,245,.62));
      backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1);
      border:1px solid rgba(184,134,47,.55);border-radius:18px;padding:22px 20px;
      box-shadow:0 18px 50px -30px rgba(140,100,31,.4),inset 0 1px 0 rgba(255,255,255,.7);
      /* жёсткая высота под ~4 строки — клавиши под карточкой не прыгают.
         overflow на детях (не на карточке — обрезал бы хвостик) */
      height:200px;transition:opacity .5s ease}
    .kbm-card > *{overflow:hidden}
    .kbm-card .pi{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin-bottom:10px}
    .kbm-card h3{font-family:var(--display);font-weight:400;font-size:clamp(20px,5.4vw,26px);margin-bottom:10px;color:var(--ink)}
    .kbm-card p{font-size:15px;line-height:1.55;color:var(--ink-soft)}
    .kbm-card.swap{opacity:0}
    /* хвост-язычок — то же стекло с золотой обводкой (видны только 2 внешние грани) */
    .kbm-card::after{content:"";position:absolute;bottom:-11px;width:22px;height:22px;z-index:1;
      background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,252,245,.6));
      backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1);
      border-right:1px solid rgba(184,134,47,.55);border-bottom:1px solid rgba(184,134,47,.55);
      transform:rotate(45deg);left:var(--beak,40px);transition:left .32s cubic-bezier(.16,1,.3,1)}
    /* перекрываем золотую линию нижней грани карточки ровно под язычком */
    .kbm-card::before{content:"";position:absolute;bottom:-1px;height:3px;width:26px;z-index:2;
      left:calc(var(--beak,40px) - 2px);background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,252,245,.82));
      transition:left .32s cubic-bezier(.16,1,.3,1);pointer-events:none}
    /* вдвое больше зазор между карточкой и клавишами */
    .kbm-keys{position:relative;margin-top:22px;height:190px;user-select:none;touch-action:manipulation}
    .kbm-whites{display:flex;height:100%;gap:2px}
    .kbm-white{position:relative;flex:1;background:linear-gradient(180deg,#FFFDF9,#F4EFE4);
      border:1px solid #E4DCC9;border-radius:0 0 7px 7px;cursor:pointer;
      box-shadow:inset 0 -6px 10px -8px rgba(140,100,31,.3);transition:background .15s,transform .05s}
    .kbm-white:active{transform:translateY(1px)}
    .kbm-white.sel{background:linear-gradient(180deg,#FFF7E4,#F6E7C0);
      box-shadow:inset 0 -10px 16px -8px rgba(184,134,47,.55),0 0 0 1px var(--gold-mid)}
    .kbm-blacks{position:absolute;top:0;left:0;right:0;height:62%;pointer-events:none}
    .kbm-black{position:absolute;width:26px;height:100%;transform:translateX(-50%);
      background:linear-gradient(180deg,#2A2620,#4A4034);border-radius:0 0 5px 5px;
      box-shadow:0 5px 8px -3px rgba(0,0,0,.5);cursor:pointer;pointer-events:auto;transition:transform .05s,filter .1s}
    .kbm-black:active{transform:translateX(-50%) translateY(1px)}
    .kbm-black.flash{filter:brightness(1.7)}
    .kbm-hint{position:absolute;left:50%;top:66%;transform:translateX(-50%);
      color:var(--ink-soft);font-size:15px;letter-spacing:.02em;pointer-events:none;text-align:center;
      white-space:nowrap;padding:7px 16px;border-radius:20px;
      background:rgba(255,253,249,.82);
      box-shadow:0 2px 10px -4px rgba(140,100,31,.25);
      animation:kbmHintPulse 1.8s ease-in-out infinite}
    .kbm-keys.touched .kbm-hint{opacity:.05;animation:none;transition:opacity .5s}

    /* ── мобильный интерактив струн Дориэля ──────────────────────────────────
       струны — ДЕСКТОПНЫЙ canvas (как было), карточка — моя .gsm-card с хвостиком */
    .guitar-sec .gseam{display:none}
    .guitar-sec .gtext .eyebrow{display:none}
    .guitar-sec .gcue-top{display:none}
    /* прячем только десктопный popup — его заменяет .gsm-card */
    .guitar-sec .guitar-stage .gpop{display:none}
    /* stage — колонка: карточка сверху, canvas-струны снизу */
    .guitar-sec{padding-top:0;margin-top:-18px}
    .guitar-sec .gtext{margin-top:0}
    .guitar-stage{display:flex;flex-direction:column;margin-top:8px !important;
      width:100% !important;margin-left:0 !important;margin-right:0 !important}
    .gsm{display:block;order:1;padding:0 16px}
    .guitar-stage .fretwrap{order:2;position:relative;width:100vw;
      margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);height:270px;margin-top:22px}
    /* подсказка «коснись струны» — как на клавиатуре */
    .fretwrap .gsm-hint{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
      color:var(--ink-soft);font-size:15px;letter-spacing:.02em;pointer-events:none;text-align:center;
      white-space:nowrap;padding:7px 16px;border-radius:20px;background:rgba(255,253,249,.82);
      box-shadow:0 2px 10px -4px rgba(140,100,31,.25);animation:kbmHintPulse 1.8s ease-in-out infinite;z-index:3}
    .fretwrap.touched .gsm-hint{opacity:.05;animation:none;transition:opacity .5s}
    .guitar-stage .edit-list{order:3}
    .gsm-card{position:relative;
      background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,252,245,.62));
      backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1);
      border:1px solid rgba(184,134,47,.55);border-radius:18px;padding:22px 20px;
      box-shadow:0 18px 50px -30px rgba(140,100,31,.4),inset 0 1px 0 rgba(255,255,255,.7);
      /* жёсткая высота — струны под карточкой не прыгают при 2 vs 3 строках текста.
         overflow НЕ hidden (обрезал бы хвостик снизу); текст режем на .gsm-card p */
      height:184px;transition:opacity .5s ease}
    .gsm-card > *{overflow:hidden}
    .gsm-card.swap{opacity:0}
    .gsm-card .pi{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;margin-bottom:10px}
    .gsm-card h3{font-family:var(--display);font-weight:400;font-size:clamp(20px,5.4vw,26px);margin-bottom:10px;color:var(--ink)}
    .gsm-card p{font-size:15px;line-height:1.55;color:var(--ink-soft)}
    /* хвостик карточки — ползёт к выбранной струне (canvas) */
    .gsm-card::after{content:"";position:absolute;bottom:-11px;width:22px;height:22px;z-index:1;
      background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,252,245,.6));
      backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1);
      border-right:1px solid rgba(184,134,47,.55);border-bottom:1px solid rgba(184,134,47,.55);
      transform:rotate(45deg);left:var(--beak,40px);transition:left .32s cubic-bezier(.16,1,.3,1)}
    .gsm-card::before{content:"";position:absolute;bottom:-1px;height:3px;width:26px;z-index:2;
      left:calc(var(--beak,40px) - 2px);background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,252,245,.82));
      transition:left .32s cubic-bezier(.16,1,.3,1);pointer-events:none}
  }

  /* ---------- DORIEL guitar (schematic fragment + popup) ---------- */
  .guitar-sec{padding:40px 0 40px;position:relative}
  /* мягкий верхний разделитель на всю ширину, тающий в фон */
  .sdiv{width:100vw;margin-left:calc(50% - 50vw);height:140px;position:relative;pointer-events:none;margin-top:88px;margin-bottom:-46px}
  @media(max-width:880px){.sdiv{display:none}}
  .sdiv::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;
    border-top:1px solid rgba(184,134,47,.5);border-radius:34px 34px 0 0;
    background:linear-gradient(180deg,rgba(184,134,47,.07) 0%,rgba(184,134,47,0) 60%);
    -webkit-mask:linear-gradient(180deg,#000,#000 14%,transparent 90%);mask:linear-gradient(180deg,#000,#000 14%,transparent 90%)}
  .gseam{margin-bottom:84px}
  .gtext{max-width:760px;margin:0 auto;text-align:center}
  .gtext h2{font-family:var(--display);font-weight:300;font-size:clamp(32px,4.2vw,56px);line-height:1.04;letter-spacing:-.012em;margin:18px 0 18px}
  .gtext h2 em{font-style:italic}
  .gtext p{color:var(--ink-soft);font-size:16.5px;max-width:54ch;margin:0 auto}

  .guitar-stage{margin-top:20px;position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
  /* золотая подсказка над струнами со стрелками */
  .gcue-top{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:30px}
  .gcue-top .gc-label{font-family:var(--display);font-style:italic;font-weight:400;font-size:clamp(16px,1.9vw,23px);letter-spacing:.01em}
  .gcue-top .gc-arrow{display:inline-flex;flex-direction:column;align-items:center;height:15px}
  .gcue-top .chev{width:8px;height:8px;border-right:1.7px solid var(--gold);border-bottom:1.7px solid var(--gold);
    transform:rotate(45deg);margin-top:-3px;animation:chev 1.6s ease-in-out infinite}
  .gcue-top .gc-arrow .chev:nth-child(2){animation-delay:.18s}
  @media(prefers-reduced-motion:reduce){.gcue-top .chev{animation:none;opacity:.6}}
  .fretwrap{position:relative;width:100%;height:clamp(340px,44vw,500px);opacity:0;transition:opacity .2s}
  #guitarStrings{position:absolute;inset:0;width:100%;height:100%;cursor:pointer;touch-action:pan-y}
  /* hint card sits in the empty area on the left, where strings have dissolved */
  .gcue{position:absolute;left:40px;top:50%;transform:translateY(-50%);max-width:300px;z-index:5;pointer-events:none;
     background:rgba(255,255,255,.6);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border:1px solid var(--hair);border-radius:16px;padding:24px 28px}
  .gcue .pi{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;margin-bottom:9px}
  .gcue p{font-size:16px;color:var(--ink-soft);line-height:1.55;margin:0}
  .gpop{position:absolute;left:0;top:0;width:min(92vw,500px);transform:translate(-50%,-116%) translateY(10px);
     background:#FFFFFF;border:1px solid var(--hair-2);border-radius:18px;padding:30px 38px 32px;
     box-shadow:0 44px 80px -30px rgba(26,24,20,.66);opacity:0;pointer-events:none;transition:opacity .35s ease,transform .5s cubic-bezier(.16,1,.3,1);z-index:7}
  .gpop.show{opacity:1;transform:translate(-50%,-116%)}
  .gpop::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:18px 0 0 18px;background:var(--grad-gold);background-size:100% 200%;animation:flowV var(--sheen-v) linear infinite}
  .gpop::after{content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);width:18px;height:18px;background:#FFFFFF;border-right:1px solid var(--hair-2);border-bottom:1px solid var(--hair-2);rotate:45deg}
  .gpop .pi{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
  .gpop h3{font-family:var(--display);font-weight:400;font-size:clamp(28px,3.4vw,38px);margin:9px 0 11px;line-height:1.06}
  .gpop p{color:var(--ink-soft);font-size:17px;line-height:1.55;margin:0}
  .glabel{text-align:center;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-mid);margin-top:16px}

  /* ---------- regalia (accordion) ---------- */
  .reg{padding:120px 0}
  .reg .reg-grid{max-width:1080px;margin:0 auto}
  .reg-grid{display:grid;grid-template-columns:.78fr 1fr;gap:72px;align-items:start}
  .reg-grid.mirror{grid-template-columns:1fr .78fr}
  .reg .portrait{max-width:400px;width:100%;justify-self:start}
  .reg-grid.mirror .portrait{justify-self:end}
  .reg-grid.mirror .pcol{order:2}
  .reg h2{font-family:var(--display);font-weight:300;font-size:clamp(28px,3.6vw,46px);line-height:1.06;margin:16px 0 22px}
  .reg h2 em{font-style:italic}
  .reglist{list-style:none;border-top:1px solid var(--hair)}
  .reglist li{border-bottom:1px solid var(--hair)}
  .rl-head{display:flex;gap:20px;align-items:baseline;padding:18px 2px;cursor:pointer}
  .rl-head .y{font-family:var(--display);font-style:italic;font-size:15px;min-width:64px;flex:none;
     background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
  .rl-head .d{color:var(--ink);font-size:16px;flex:1}
  .rl-head .ind{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--hair-2);position:relative;transition:.35s;align-self:center}
  .rl-head .ind::before,.rl-head .ind::after{content:"";position:absolute;background:var(--gold);transition:.35s}
  .rl-head .ind::before{left:5px;right:5px;top:50%;height:1.5px;transform:translateY(-50%)}
  .rl-head .ind::after{top:5px;bottom:5px;left:50%;width:1.5px;transform:translateX(-50%)}
  li.open .rl-head .ind{border-color:var(--gold-mid);background:#FFFBF1}
  li.open .rl-head .ind::after{transform:translateX(-50%) scaleY(0)}
  .rl-more{max-height:0;overflow:hidden;opacity:0;color:var(--ink-soft);font-size:15px;padding-top:10px;transition:max-height .55s cubic-bezier(.16,1,.3,1),opacity .4s,padding .4s}
  .rl-more p{margin:0 0 0 84px;max-width:46ch}
  li.open .rl-more{max-height:30em;opacity:1;padding-bottom:18px}
  /* v171: длинный текст больше не обрезается — 15 строк и скролл внутри. */
  .rl-more > div{max-height:calc(15 * 1.62em);overflow-y:auto;overscroll-behavior:contain}
  /* .scrolly вешает accordion.js, если текст реально длиннее видимой части */
  .rl-more.scrolly{position:relative}
  /* затухание захватывает и предпоследнюю строку — иначе, если внизу пустой
     отступ абзаца, эффекта почти не видно */
  .rl-more.scrolly > div{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 4.4em),transparent);
    mask-image:linear-gradient(180deg,#000 calc(100% - 4.4em),transparent)}
  .rl-more.scrolly.at-end > div{-webkit-mask-image:none;mask-image:none}
  /* Шевроны 1:1 с подсказкой «коснись струны»: три отдельных элемента с
     разной фазой анимации chev — box-shadow-копии так не умеют. Разметку
     создаёт accordion.js. */
  .rl-cue{position:absolute;left:26px;display:inline-flex;flex-direction:column;
    align-items:center;pointer-events:none;transition:opacity .35s}
  .rl-cue .chev{width:8px;height:8px;border-right:1.7px solid var(--gold);
    border-bottom:1.7px solid var(--gold);transform:rotate(45deg);margin-top:-3px;
    animation:chev 1.6s ease-in-out infinite}
  .rl-cue .chev:nth-child(2){animation-delay:.18s}
  .rl-cue .chev:nth-child(3){animation-delay:.36s}
  .rl-cue.bot{bottom:20px}
  .rl-cue.mid{top:44%;opacity:.6}
  .rl-more.mid-done .rl-cue.mid{opacity:0}
  .rl-more.at-end .rl-cue.bot{opacity:0}
  .rl-more:not(.scrolly) .rl-cue{display:none}
  @media(prefers-reduced-motion:reduce){.rl-cue .chev{animation:none;opacity:.6}}
  .stats{display:flex;gap:44px;margin-top:32px;flex-wrap:wrap}
  .stats .n{font-family:var(--display);font-weight:300;font-size:44px;line-height:1}
  .stats .l{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin-top:8px}
  @media(max-width:880px){.reg{padding:80px 0}.reg-grid,.reg-grid.mirror{grid-template-columns:1fr;gap:42px}.reg-grid.mirror .pcol{order:0}.reg .portrait,.reg-grid.mirror .portrait{justify-self:center}.rl-more p{margin-left:0}}

  /* v162 — регалии встроены в блок педагога (отдельных секций больше нет).
     Обёртка сохраняет класс .reg, чтобы весь набор .reg-стилей (волна, ромб,
     hover, edit-mode) работал без дублирования. */
  .reg.reg-inline{padding:0;margin-top:34px}
  .reg.reg-inline .reglist{margin:0}
  /* раздел «10 причин заниматься музыкой» */
  .why{padding:104px 0}
  .why-head{max-width:760px}
  .why-sub{color:var(--ink-soft);margin-top:12px;font-size:16px;line-height:1.55;max-width:54ch}
  .why-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 60px;margin-top:44px}
  .why-col{border-top:1px solid var(--hair)}
  .why .rl-head{gap:22px;padding:17px 2px 21px;align-items:center}
  .why .rl-head .y{color:var(--gold);font-family:var(--display);font-style:italic;font-size:18px;min-width:42px;
    animation:ynum 4.5s ease-in-out infinite}
  @keyframes ynum{0%,64%,100%{opacity:.42;text-shadow:none}10%{opacity:1;text-shadow:0 0 16px rgba(201,162,75,.55)}}
  @media(prefers-reduced-motion:reduce){.why .rl-head .y{animation:none;opacity:1}}
  .why .rl-head .d{font-family:var(--display);font-weight:400;font-size:clamp(17px,1.7vw,21px);color:var(--ink);line-height:1.18}
  .why .rl-more p{margin:0 0 0 64px;max-width:42ch;line-height:1.55}
  .why li.open .rl-more{max-height:240px}
  .why-note{margin-top:34px;color:var(--ink-faint);font-size:13px;font-style:italic}
  @media(max-width:880px){.why{padding:72px 0}.why-grid{grid-template-columns:1fr;gap:0}.why .rl-more p{margin-left:64px}}
  /* плавающая кнопка записи — тот же «золотой стеклянный» стиль, что и у кнопок сайта */
  .fab-book{position:fixed;right:26px;top:72%;z-index:70;display:inline-flex;align-items:center;justify-content:center;gap:10px;
    padding:14px 24px;border-radius:999px;font-weight:600;font-size:14px;letter-spacing:.01em;
    cursor:pointer;text-decoration:none;white-space:nowrap;
    transition:--shine .4s ease,transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1),
      padding .42s cubic-bezier(.16,1,.3,1),right .42s cubic-bezier(.16,1,.3,1)}
  .fab-book .fab-ic{flex:none;font-size:21px;line-height:1;color:var(--gold-deep)}
  .fab-book .fab-label{max-width:240px;overflow:hidden;transition:max-width .45s cubic-bezier(.16,1,.3,1),opacity .3s}
  /* свёрнутое состояние — круглая, стиль и мерцание те же */
  .fab-book.mini{padding:14px;right:18px}
  .fab-book.mini .fab-label{max-width:0;opacity:0}
  .fab-book.mini:hover{padding:14px 24px}
  .fab-book.mini:hover .fab-label{max-width:240px;opacity:1}
  @media(max-width:700px){.fab-book{right:14px;bottom:18px;top:auto;padding:12px 20px}.fab-book.mini{padding:12px;right:14px}}
  /* золотой подвал: контакты + карта + footer */
  .footzone{position:relative;margin-top:78px;padding-top:1px;
    background:linear-gradient(180deg,#FBF4E4 0%,#F6EAD2 42%,#F1E2C2 100%);
    border-top:1px solid rgba(184,134,47,.45);border-radius:19px 19px 0 0}
  .footzone::before{content:"";position:absolute;left:0;right:0;top:0;height:120px;pointer-events:none;border-radius:19px 19px 0 0;
    background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0))}
  .contacts{padding:64px 0 40px;position:relative}
  .ct-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
  .ct-list{margin:26px 0 0;display:grid;gap:2px}
  .ct-row{display:grid;grid-template-columns:104px 1fr;gap:14px;align-items:baseline;padding:13px 0;border-top:1px solid var(--hair)}
  .ct-row dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
  .ct-row dd{margin:0;font-size:15.5px;color:var(--ink);line-height:1.45}
  body:not(.edit-mode) .ct-row dd[data-copy]{cursor:pointer;position:relative;display:inline-block;
    border-bottom:1px dashed rgba(184,134,47,.35);transition:color .25s,border-color .25s}
  body:not(.edit-mode) .ct-row dd[data-copy]:hover{color:var(--gold-deep);border-color:var(--gold-mid)}
  .ct-row dd.copied::after{content:"скопировано";position:absolute;left:0;top:calc(100% + 6px);
    font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);
    background:rgba(255,251,240,.96);border:1px solid var(--gold-lt);border-radius:7px;padding:3px 8px;white-space:nowrap;
    animation:bfade .3s ease}
  .ct-msgs{display:flex;gap:14px;margin-top:24px;flex-wrap:wrap}
  .ct-handles{display:none}
  body.edit-mode .ct-handles{display:grid;gap:7px;margin-top:16px;padding:12px 14px;border:1px dashed var(--gold-mid);border-radius:12px;background:rgba(255,251,240,.6)}
  body.edit-mode .ct-handles div{display:flex;gap:10px;align-items:baseline;font-size:13.5px}
  body.edit-mode .ct-handles i{font-style:normal;min-width:78px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
  body.edit-mode .ct-handles span{color:var(--ink);min-width:220px;min-height:34px;display:inline-block;
    padding:7px 12px;border:1px solid var(--hair-2);border-radius:9px;background:#fff;cursor:text;line-height:1.3}
  body.edit-mode .ct-handles span:empty::before{content:"— укажите";color:var(--ink-faint)}
  body.edit-mode .ct-handles div{margin-bottom:8px}
  body.edit-mode .ct-list dd{min-height:32px;padding:6px 10px;border:1px dashed var(--gold-mid);border-radius:9px;background:rgba(255,255,255,.7)}
  body.edit-mode .ct-list dd:empty::before{content:"— укажите";color:var(--ink-faint)}
  body.edit-mode .ct-map::after{content:"Карта строится по полю «Адрес» слева";position:absolute;left:0;right:0;top:0;
    padding:9px 12px;font-size:12px;text-align:center;color:var(--gold-deep);background:rgba(255,251,240,.94);
    border-bottom:1px solid var(--gold-mid);box-shadow:none;border-radius:18px 18px 0 0}
  .ct-msg{width:46px;height:46px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
    border:1px solid var(--hair-2);background:rgba(255,255,255,.7);color:var(--ink-soft);text-decoration:none;
    transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s,color .3s,box-shadow .3s,background .3s}
  .ct-msg svg{width:21px;height:21px;fill:currentColor;display:block}
  .ct-msg:hover{transform:translateY(-3px);box-shadow:var(--btn-lift);background:#fff}
  .ct-msg.tg:hover{color:#2AABEE;border-color:#2AABEE}
  .ct-msg.wa:hover{color:#25D366;border-color:#25D366}
  .ct-msg.mx:hover{color:#6E4BF6;border-color:#6E4BF6}
  .ct-map{position:relative;width:100%;max-width:520px;margin-left:auto;border-radius:18px;overflow:hidden;
    border:1px solid var(--hair-2);box-shadow:var(--shadow-soft);background:var(--pearl);aspect-ratio:4/3}
  .ct-map::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:18px;
    box-shadow:inset 0 0 0 1px rgba(184,134,47,.22)}
  .ct-map iframe{width:100%;height:100%;border:0;display:block}
  @media(max-width:880px){.contacts{padding:44px 0 24px}.ct-grid{grid-template-columns:1fr;gap:30px}.ct-map{margin:0 auto;max-width:100%}}
  /* интерактив наведения (10 причин + регалии): приподнимание, золото, ноты */
  .why .rl-head,.reg .rl-head{position:relative;transition:transform .3s cubic-bezier(.22,1,.36,1)}
  .why li.wave-off .rl-head .wave-svg,.reg li.wave-off .rl-head .wave-svg{opacity:0}
  .why li.wave-off .rl-head,.reg li.wave-off .rl-head{transform:none}
  .why li.wave-off .rl-head .d,.reg li.wave-off .rl-head .d{transform:none;color:var(--ink);letter-spacing:normal}
  .why:not(.no-hover) .rl-head:hover,.reg:not(.no-hover) .rl-head:hover{transform:translateY(-3px)}
  .why .rl-head .d,.reg .rl-head .d{position:relative;display:inline-block;
    transition:transform .3s cubic-bezier(.22,1,.36,1),color .3s,letter-spacing .3s}
  .why:not(.no-hover) .rl-head:hover .d,.why li.open .rl-head .d,
  .reg:not(.no-hover) .rl-head:hover .d,.reg li.open .rl-head .d{transform:translateY(-9px);color:var(--gold);letter-spacing:.012em}
  .why .rl-head .wave-svg,.reg .rl-head .wave-svg{position:absolute;overflow:visible;opacity:0;
    transition:opacity .28s ease;pointer-events:none;margin-top:-9px}
  .why:not(.no-hover) .rl-head:hover .wave-svg,.why li.open .rl-head .wave-svg,
  .reg:not(.no-hover) .rl-head:hover .wave-svg,.reg li.open .rl-head .wave-svg{opacity:1}
  .why .rl-head .wave,.reg .rl-head .wave{fill:none;stroke:url(#navgold);stroke-width:1.6;stroke-linecap:round;
    stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .62s cubic-bezier(.35,0,.2,1)}
  .why .rl-head .wave-b,.reg .rl-head .wave-b{transition-delay:.08s}
  .why:not(.no-hover) .rl-head:hover .wave,.why li.open .rl-head .wave,
  .reg:not(.no-hover) .rl-head:hover .wave,.reg li.open .rl-head .wave{stroke-dashoffset:0}
  .why .rl-head .note,.why .rl-head .beam,.reg .rl-head .note,.reg .rl-head .beam{
    transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(.25) translateY(2px);
    transition:opacity .34s ease,transform .4s cubic-bezier(.2,.7,.3,1.5);transition-delay:var(--nd)}
  .why .rl-head .note ellipse,.reg .rl-head .note ellipse{fill:var(--gold)}
  .why .rl-head .note .stem,.why .rl-head .note .flag,
  .reg .rl-head .note .stem,.reg .rl-head .note .flag{stroke:var(--gold);stroke-width:1.5;stroke-linecap:round;fill:none}
  .why .rl-head .beam,.reg .rl-head .beam{stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;fill:none}
  .why:not(.no-hover) .rl-head:hover .note,.why:not(.no-hover) .rl-head:hover .beam,
  .why li.open .rl-head .note,.why li.open .rl-head .beam,
  .reg:not(.no-hover) .rl-head:hover .note,.reg:not(.no-hover) .rl-head:hover .beam,
  .reg li.open .rl-head .note,.reg li.open .rl-head .beam{opacity:1;transform:scale(1) translateY(0)}
  /* регалии: заголовки-разделы вместо годов */
  .reg .rl-head{gap:0;padding:17px 2px 21px;align-items:center}
  .reg .rl-head .d{font-family:var(--display);font-weight:400;font-size:clamp(17px,1.75vw,21px);color:var(--ink);line-height:1.2;margin-right:auto}
  .reg .rl-head .rq{flex:none;width:11px;height:11px;margin-right:15px;border-radius:2px;transform:rotate(45deg);
    background:var(--grad-gold);background-size:220% 100%;box-shadow:0 0 0 1px rgba(184,134,47,.25) inset;
    animation:ynum 4.5s ease-in-out infinite}
  @media(prefers-reduced-motion:reduce){.reg .rl-head .rq{animation:none;opacity:1}}
  .reg .rl-more div{margin:0;max-width:60ch;line-height:1.6;color:var(--ink-soft)}
  .reg li.open .rl-more{max-height:420px}
  @media(prefers-reduced-motion:reduce){.why .rl-head:hover,.reg .rl-head:hover{transform:none}.why .rl-head .wave,.reg .rl-head .wave,.why .rl-head .note,.reg .rl-head .note{transition:none}}

  /* ---------- place ---------- */
  .place{padding:120px 0}
  .place-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
  .place .lede{margin:16px 0 20px}
  .place p{color:var(--ink-soft);font-size:16.5px;max-width:50ch;margin-bottom:15px}
  .place-card{aspect-ratio:5/4;border-radius:12px;position:relative;overflow:hidden;background:linear-gradient(150deg,var(--white),var(--pearl) 55%,var(--pearl-2));box-shadow:var(--shadow-soft)}
  .place-card .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;text-align:center}
  .place-card .b{position:absolute;inset:16px;border:1px solid var(--gold-mid);opacity:.4;border-radius:7px}
  /* фирменная заглушка фото (бежево-золотая карточка) */
  .ph-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .ph-tools{display:none}
  body.edit-mode .ph-tools{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;gap:8px;justify-content:center;
    padding:12px;background:linear-gradient(0deg,rgba(26,24,20,.72),rgba(26,24,20,0))}
  .ph-btn{font-family:var(--body);font-size:12.5px;font-weight:600;letter-spacing:.02em;cursor:pointer;
    padding:9px 14px;border-radius:999px;border:1px solid var(--gold-lt);background:rgba(255,255,255,.94);
    color:var(--gold-deep);transition:transform .25s,box-shadow .25s}
  .ph-btn:hover{transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(0,0,0,.4)}
  .ph-btn.ph-del{border-color:rgba(196,104,86,.7);color:#A8442F}
  .portrait .img{overflow:hidden}
  .portrait .img::after,.place-card::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;
    border:1px solid rgba(184,134,47,.55);border-radius:inherit;transition:border-color .5s}
  .portrait .img:hover::after,.place-card:hover::after{border-color:rgba(184,134,47,.85)}
  .brand-card{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
    padding:26px;text-align:center;overflow:hidden;
    background:linear-gradient(158deg,#FCF7EC 0%,#F4E8CE 52%,#EAD9B0 100%)}
  .brand-card::before{content:"";position:absolute;inset:14px;border:1px solid var(--gold-mid);opacity:.55;border-radius:8px;pointer-events:none}
  .brand-card::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(70% 55% at 50% 34%, rgba(255,255,255,.5), rgba(255,255,255,0) 70%)}
  .brand-card .bc-kicker{position:relative;z-index:1;font-size:11px;letter-spacing:.36em;text-transform:uppercase;font-weight:600;color:var(--gold-deep)}
  .brand-card .bc-name{position:relative;z-index:1;font-family:var(--display);font-weight:300;line-height:1.12;color:var(--ink);
    font-size:clamp(19px,2vw,27px);max-width:86%}
  .brand-card .bc-name em{font-style:italic;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
  .brand-card .bc-orn{position:relative;z-index:1;width:46px;height:1px;background:var(--grad-gold);opacity:.8}
  .cf-empty{position:relative;aspect-ratio:3/4;max-width:300px;margin:0 auto;border-radius:12px;overflow:hidden;box-shadow:var(--shadow-soft)}
  .place-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
  .place-list span{font-size:12px;letter-spacing:.04em;border:1px solid var(--hair-2);border-radius:40px;padding:9px 16px;color:var(--ink);background:var(--white)}
  @media(max-width:880px){.place{padding:80px 0}.place-grid{grid-template-columns:1fr;gap:42px}}

  /* ---------- diplomas (dual coverflow) ---------- */
  .dips{padding:0 0 110px}
  .dip-head{margin-bottom:48px}
  .dip-duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .cf-title{font-size:12px;letter-spacing:.24em;text-transform:uppercase;font-weight:600;text-align:center;margin-bottom:18px;
     background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
  .cf{position:relative}
  .cf-stage{position:relative;height:clamp(320px,32vw,420px);perspective:1700px;transform-style:preserve-3d;touch-action:pan-y;overflow:visible}
  .cf-card{position:absolute;left:50%;top:50%;height:clamp(253px,28vw,373px);width:clamp(180px,19vw,250px);transform:translate(-50%,-50%);
     transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .55s;transform-origin:center center;cursor:pointer;
     will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;
     background:var(--white);border:1px solid var(--hair-2);border-radius:13px;box-shadow:0 36px 64px -34px rgba(26,24,20,.55);overflow:hidden}
  /* Ширину по ориентации фото получает только центральная (активная) карточка —
     формат А4 (верт 210:297, гориз 297:210). Ширину меняем без анимации (иначе
     reflow тормозит) — карточка «приезжает» через transform, формат встаёт сразу. */
  .cf-card.active.is-portrait{width:clamp(179px,19.8vw,264px)}    /* A4 верт 210:297 */
  .cf-card.active.is-landscape{width:clamp(358px,39.6vw,527px)}   /* A4 гориз 297:210 */
  .cf-card.active.is-square{width:clamp(253px,28vw,373px)}
  .cf-card.active{box-shadow:0 50px 84px -30px rgba(184,134,47,.5)}
  .cf-fr{position:absolute;inset:0}
  .cf-ph{position:absolute;inset:0;border:1px solid var(--gold-mid);border-radius:5px;display:flex;flex-direction:column;gap:9px;align-items:center;justify-content:center;text-align:center;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);padding:18px}
  .cf-ph span{font-size:11px;letter-spacing:.18em;
     background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
  .cf-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:22px}
  .cf-arrow{width:44px;height:44px;border-radius:50%;border:1px solid var(--hair-2);background:var(--white);cursor:pointer;color:var(--ink-soft);font-size:17px;display:flex;align-items:center;justify-content:center;transition:.3s}
  .cf-arrow:hover{border-color:var(--gold-mid);color:var(--gold);transform:translateY(-2px)}
  .cf-dots{display:flex;gap:8px;align-items:center}
  .cf-dot{width:8px;height:8px;border-radius:50%;border:none;padding:0;background:var(--hair-2);cursor:pointer;transition:.3s}
  .cf-dot.on{background:var(--gold-mid);transform:scale(1.3)}
  @media(max-width:760px){.dip-duo{grid-template-columns:1fr;gap:48px}}

  /* ---------- life gallery: адаптивная мозаика-тетрис (v19) ---------- */
  .life{padding:0 0 120px}
  .life-head{margin-bottom:40px}
  /* колонки по ширине экрана; grid-auto-flow:dense — плотная упаковка «тетрисом» */
  .life-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));
     grid-auto-rows:72px;grid-auto-flow:dense;gap:10px}
  .mtile{position:relative;border-radius:14px;overflow:hidden;background:linear-gradient(150deg,var(--white),var(--pearl) 55%,var(--pearl-2));
     box-shadow:var(--shadow-soft);cursor:zoom-in;
     transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s}
  /* золотистая рамка поверх фото (чтобы фото не сливалось с фоном сайта);
     при наведении становится чуть толще */
  .mtile::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
     border:1.5px solid var(--gold-mid);box-shadow:inset 0 0 0 1px rgba(184,134,47,.12);
     transition:border-color .4s,border-width .4s}
  .mtile:hover::after{border-width:2.5px;border-color:var(--gold);}
  .mtile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
     transition:transform .6s cubic-bezier(.16,1,.3,1)}
  /* видео в миниатюре: первый кадр = превью, играет по наведению/тапу */
  .mtile-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:#000;
     transition:transform .6s cubic-bezier(.16,1,.3,1)}
  .mtile:hover .mtile-video{transform:scale(1.07)}
  /* кнопка «на весь экран» — уголок видео-плитки */
  .mtile-full{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border:none;border-radius:9px;
     background:rgba(26,24,20,.62);color:#fff;font-size:17px;line-height:1;cursor:pointer;z-index:15;
     display:flex;align-items:center;justify-content:center;transition:background .2s,transform .2s;backdrop-filter:blur(3px)}
  .mtile-full:hover{background:rgba(26,24,20,.85);transform:scale(1.08)}
  body.edit-mode .mtile-full{display:none}
  /* маркер «видео» — play на матовом белом стекле с лёгким золотым отливом,
     вокруг мягкий круглый золотой glow (не квадрат) */
  .mtile.is-video::before{content:"▶";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
     z-index:6;width:38px;height:38px;border-radius:50%;padding-left:3px;
     display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--gold-deep);
     background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.72),rgba(255,255,255,.34));
     -webkit-backdrop-filter:blur(8px) saturate(1.15);backdrop-filter:blur(8px) saturate(1.15);
     border:1px solid rgba(232,199,126,.65);
     box-shadow:0 5px 18px rgba(184,134,47,.30),0 0 26px 4px rgba(184,134,47,.20),inset 0 1px 2px rgba(255,255,255,.6);
     pointer-events:none;transition:opacity .3s,transform .3s}
  .mtile.is-video:hover::before{transform:translate(-50%,-50%) scale(1.06)}
  .mtile.is-video.is-playing::before{opacity:0}
  .mtile-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--ink-faint);
     font-size:11px;letter-spacing:.18em;text-transform:uppercase}
  /* span по формату (юнит ≈ квадрат; object-fit:cover скрывает мелкие расхождения) */
  .mtile.square   {grid-column:span 2;grid-row:span 2}
  .mtile.vert-34  {grid-column:span 2;grid-row:span 3}
  .mtile.vert-916 {grid-column:span 2;grid-row:span 4}
  .mtile.land-43  {grid-column:span 3;grid-row:span 2}
  .mtile.land-169 {grid-column:span 4;grid-row:span 2}
  /* ручное увеличение (акцентная плитка) — множим span */
  .mtile.is-big.square   {grid-column:span 3;grid-row:span 3}
  .mtile.is-big.vert-34  {grid-column:span 3;grid-row:span 4}
  .mtile.is-big.vert-916 {grid-column:span 3;grid-row:span 5}
  .mtile.is-big.land-43  {grid-column:span 5;grid-row:span 3}
  .mtile.is-big.land-169 {grid-column:span 6;grid-row:span 3}
  /* hover: подъём + золотистая тень + зум фото */
  .mtile:hover{transform:translateY(-6px);box-shadow:0 46px 80px -38px rgba(184,134,47,.5),0 20px 44px -30px rgba(26,24,20,.4);z-index:2}
  .mtile:hover .mtile-img{transform:scale(1.07)}
  @media(max-width:880px){
    .life-grid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr));grid-auto-rows:56px;gap:8px}
    .mtile.land-169{grid-column:span 4}
  }
  /* Мобильная галерея (v213): justified-ряды. grid→flex, точные ширины/высоты
     проставляет gallery.js; ниже — CSS-fallback (высота 96 + аспект из класса),
     чтобы до JS выглядело аккуратно и компактно. */
  @media(max-width:760px){
    /* инсет галереи задаём через #life (id перебивает .wrap 26px гарантированно);
       ~вдвое меньше текста. Гэп между фото 4, фолбэк-высота = TARGET(100). */
    #life{padding-left:0;padding-right:0}
    #life .life-head{padding-left:12px;padding-right:12px}
    #life .life-grid{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-start;
      grid-template-columns:none;grid-auto-rows:auto;padding-left:12px;padding-right:12px}
    .mtile{height:100px;width:auto}
    .mtile.square   {aspect-ratio:1/1}
    .mtile.vert-34  {aspect-ratio:3/4}
    .mtile.vert-916 {aspect-ratio:9/16}
    .mtile.land-43  {aspect-ratio:4/3}
    .mtile.land-169 {aspect-ratio:16/9}
    .mtile.is-video {aspect-ratio:1/1}          /* до метаданных; JS уточнит */
    .mtile:hover{transform:none}                /* без подъёма на тач-экране */
    /* касание для скролла не должно триггерить hover-вид — только тап открывает */
    .mtile:hover .mtile-img,.mtile:hover .mtile-video{transform:none}
    .mtile:hover::after{border-width:1px;border-color:var(--gold-mid)}
    .mtile.is-video:hover::before{transform:translate(-50%,-50%)}
    .life-add{height:100px;aspect-ratio:1/1;width:auto;flex:0 0 auto}
    .mtile-del,.mtile-size{width:26px;height:26px;top:6px}
    .mtile-del{right:6px}.mtile-size{left:6px}
    .mtile-full{display:none}   /* на мобиле клик по видео сразу открывает полный экран */
  }

  /* ---------- contact form ---------- */
  .book{padding:120px 0}
  .book-grid{display:grid;grid-template-columns:.8fr 1fr;gap:66px;align-items:start}
  .book h2{font-family:var(--display);font-weight:300;font-size:clamp(32px,4.4vw,58px);line-height:1.04;margin:16px 0 18px}
  .book h2 em{font-style:italic}
  .book p{color:var(--ink-soft);font-size:16.5px;max-width:40ch}
  .form{display:grid;gap:16px}
  .field{display:grid;gap:7px}
  .field label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
  .field input,.field textarea{font-family:var(--body);font-size:16px;color:var(--ink);background:var(--white);border:1px solid var(--hair-2);border-radius:9px;padding:14px 16px;width:100%;transition:border-color .3s,box-shadow .3s}
  .field input:focus,.field textarea:focus{outline:none;border-color:var(--gold-mid);box-shadow:0 0 0 3px rgba(184,134,47,.12)}
  .field textarea{resize:vertical;min-height:96px}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .seg{display:flex;gap:8px;flex-wrap:wrap}
  .seg button{font-size:13px;border:1px solid var(--hair-2);background:var(--white);border-radius:40px;padding:11px 17px;cursor:pointer;color:var(--ink-soft);transition:.25s}
  .seg button.on{border-color:var(--gold-mid);color:var(--gold);background:#FFFBF1}
  .seg button:hover{transform:translateY(-2px);box-shadow:var(--btn-lift)}
  .seg button:active{transform:translateY(0) scale(.97);box-shadow:none}
  .submit{margin-top:6px;justify-self:start;display:inline-flex;align-items:center;gap:12px;font-size:15px;font-weight:500;padding:16px 32px;border-radius:48px;border:none;cursor:pointer;color:#fff;position:relative;overflow:hidden;background:var(--grad-gold);background-size:220% 100%;animation:sheen 7s linear infinite;box-shadow:0 16px 34px -18px rgba(184,134,47,.7);transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
  .submit:hover{transform:translateY(-3px);box-shadow:0 22px 44px -18px rgba(184,134,47,.85)}
  .form-done{display:none;border:1px solid var(--hair-2);border-radius:12px;background:var(--white);padding:34px 36px;box-shadow:var(--shadow-soft)}
  .form-done.show{display:block}
  .form-done h3{font-family:var(--display);font-weight:400;font-size:28px;margin-bottom:8px}
  .form-done p{color:var(--ink-soft);font-size:16px}
  @media(max-width:880px){.book{padding:80px 0}.book-grid{grid-template-columns:1fr;gap:42px}.row2{grid-template-columns:1fr}}

  /* ---------- footer ---------- */
  .foot{padding:10px 0 42px;border-top:none;position:relative}
  .footzone .foot .rule-gold{display:none}
  .footzone .foot{background:transparent}
  .footzone .foot .meta a{color:var(--ink-soft)}
  .footzone .foot .meta a:hover{color:var(--gold-deep)}
  .book-quick{display:flex;align-items:center;gap:9px;margin-top:14px;color:var(--ink);font-size:15.5px}
  .bq-ok{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;
    font-size:12px;color:#fff;background:var(--grad-gold);background-size:220% 100%;box-shadow:0 4px 10px -5px rgba(184,134,47,.8)}
  .book p.book-alt{margin-top:15px;font-family:var(--display);font-style:italic;font-weight:300;font-size:14px;color:#B7B0A4;letter-spacing:.01em;max-width:44ch}
  .book p.book-alt.reveal.in{opacity:1}
  .invite .ttl{font-family:var(--display);font-size:clamp(19px,2vw,24px);font-weight:400;color:var(--ink)}
  .foot-row{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
  .foot .names{display:flex;gap:30px;flex-wrap:wrap;font-size:14px;color:var(--ink-soft)}
  .foot b{color:var(--ink);font-weight:600}
  .foot .meta{font-size:13px;color:var(--ink-faint);display:flex;gap:24px;flex-wrap:wrap;align-items:center}
  .foot .meta a{transition:color .3s}
  .foot .meta a:hover{color:var(--gold)}
  @media(max-width:680px){.foot-row{flex-direction:column;align-items:flex-start;gap:16px}}

  /* ---- interactive photos: zoom + shadow + lift on hover ---- */
  .portrait .img,.place-card{transition:transform .6s cubic-bezier(.16,1,.3,1),box-shadow .6s}
  .portrait .img{transform-origin:center bottom}
  .portrait .img:hover,.place-card:hover{transform:translateY(-8px) scale(1.02);
    box-shadow:0 40px 80px -40px rgba(184,134,47,.55),0 12px 30px -18px rgba(140,100,31,.35);z-index:2}
  .place-card{cursor:pointer}

  :focus-visible{outline:2px solid var(--gold-mid);outline-offset:3px;border-radius:3px}

/* ============================================================
   Ф1 (v4) — форма записи: TG/WA-кнопки, honeypot, окно «спасибо».
   Палитра/шрифты — токены v9. Без @media(hover:hover) (планшет).
   ============================================================ */

/* honeypot — спрятать от людей, оставить ботам */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ряд: основная кнопка + круглые TG/WA */
.cta-row{display:flex;align-items:center;gap:14px;margin-top:18px;flex-wrap:wrap;justify-content:flex-start}
/* кнопка по своему контенту (примерно до середины ряда), иконки сразу следом */
.cta-row .submit{margin-top:0;flex:0 1 auto;min-width:260px}

/* круглые иконки-кнопки связи */
.btn-icon{
  flex:0 0 auto;width:54px;height:54px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--gold-deep);background:var(--white);
  border:1.5px solid var(--gold-lt);
  box-shadow:0 10px 26px -16px rgba(140,100,31,.55);
  transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,border-color .25s,background .25s,color .25s;
  -webkit-tap-highlight-color:transparent;text-decoration:none;cursor:pointer;
}
.btn-icon svg{display:block;width:22px;height:22px}
.btn-icon:hover{
  transform:translateY(-2px) scale(1.05);
  border-color:var(--gold);background:var(--gold-pale);color:var(--gold-deep);
  box-shadow:0 16px 30px -14px rgba(140,100,31,.6);
}
.btn-icon:active{transform:translateY(0) scale(.98)}
.btn-icon:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.submit.loading{opacity:.6;pointer-events:none}

/* окно «Заявка отправлена» — плавное появление */
.form-done{
  position:relative;display:none;text-align:center;
  padding:40px 30px 34px;border-radius:22px;
  background:linear-gradient(180deg,var(--white),var(--pearl));
  border:1px solid var(--hair-2);box-shadow:var(--shadow-soft);
}
.form-done.show{
  display:block;
  animation:doneIn .5s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes doneIn{
  from{opacity:0;transform:translateY(14px) scale(.97)}
  to{opacity:1;transform:none}
}
.form-done h3{font-family:var(--display);font-weight:400;font-size:26px;color:var(--ink);margin:6px 0 8px}
.form-done p{color:var(--ink-soft);font-size:15.5px;line-height:1.55;max-width:36ch;margin:0 auto}

/* золотая «галочка» */
.done-check{
  width:62px;height:62px;margin:0 auto 14px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:30px;color:var(--white);
  background:var(--grad-gold);background-size:200% 100%;
  box-shadow:0 14px 30px -12px rgba(140,100,31,.55);
  animation:checkPop .55s .12s cubic-bezier(.2,.8,.2,1.2) both;
}
@keyframes checkPop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}

/* «Отправить ещё заявку» */
.done-again{
  margin-top:22px;padding:12px 26px;border-radius:999px;cursor:pointer;
  font-family:var(--body);font-size:14.5px;font-weight:500;letter-spacing:.01em;
  color:var(--gold-deep);background:transparent;border:1.5px solid var(--gold-lt);
  transition:background .25s,border-color .25s,transform .2s;
}
.done-again:hover{background:var(--gold-pale);border-color:var(--gold);transform:translateY(-1px)}
.done-again:active{transform:translateY(0)}
.done-again:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* крестик закрытия */
.done-close{
  position:absolute;top:12px;right:14px;width:34px;height:34px;border-radius:50%;
  border:0;background:transparent;color:var(--ink-faint);font-size:24px;line-height:1;
  cursor:pointer;transition:color .2s,background .2s;
}
.done-close:hover{color:var(--ink);background:var(--pearl-2)}
.done-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

@media (max-width:600px){
  .cta-row{gap:10px}
  .cta-row .submit{flex:1 1 100%;min-width:0}
  .btn-icon{width:50px;height:50px}
}

@media (prefers-reduced-motion:reduce){
  .form-done.show,.done-check{animation:none}
  /* золотые полосы «Течение» и «дыхание» полоски урока — замираем */
  .board .felt,.month-felt,.invite::before,.bp-felt,.cab-felt,
  .sched-sheet::before,.gpop::before,.lesson.mine:hover::after{animation:none}
  /* подъём кнопок без движения */
  .colleague-btn:hover,.navwk button:hover,.navwk .today:hover,.btn-mini:not(.gold):hover,
  .btn-mini.gold:hover,.invite-cta:hover,.bd-ticket:hover{transform:none;box-shadow:none}
}

/* ============================================================
   Ф2 (v7) — admin_bar, формы входа/пароля, базовый edit-mode.
   ============================================================ */
.admin-bar{position:fixed;top:0;left:0;right:0;z-index:2000;background:var(--ink);color:var(--paper);
  font-family:var(--body);font-size:13.5px;box-shadow:0 6px 20px -10px rgba(0,0,0,.5)}
.admin-bar .ab-inner{max-width:1280px;margin:0 auto;padding:9px 22px;display:flex;align-items:center;gap:16px}
.ab-brand{white-space:nowrap}
.ab-brand b{color:var(--gold-lt);font-weight:600}
.ab-hint{color:var(--ink-faint);font-size:12.5px;flex:1 1 auto}
.ab-actions{display:flex;align-items:center;gap:8px}
.ab-btn{appearance:none;border:1px solid rgba(232,199,126,.4);background:transparent;color:var(--paper);
  font:inherit;padding:6px 14px;border-radius:999px;cursor:pointer;text-decoration:none;
  transition:background .2s,border-color .2s,color .2s}
.ab-btn:hover{background:rgba(232,199,126,.14);border-color:var(--gold-lt)}
.ab-edit.on{background:var(--gold);border-color:var(--gold);color:#1A1814;font-weight:600}
.ab-logout{border-color:rgba(196,104,86,.5)}
.ab-logout:hover{background:rgba(196,104,86,.18)}
/* сдвигаем фикс-шапку сайта ниже, чтобы не перекрывалась admin-баром */
body.has-admin-bar header#hdr{top:42px}
body.has-admin-bar{scroll-padding-top:108px}

/* формы входа/пароля */
.form-err{background:rgba(196,104,86,.10);border:1px solid rgba(196,104,86,.4);color:#8a3a2c;
  padding:11px 15px;border-radius:12px;margin-bottom:16px;font-size:14.5px}
.form-ok{background:var(--gold-pale);border:1px solid var(--gold-lt);color:var(--gold-deep);
  padding:11px 15px;border-radius:12px;margin-bottom:16px;font-size:14.5px}

/* edit-mode: подсветка редактируемых полей (используется с v8) */
body.edit-mode [data-field-key]{outline:1.5px dashed rgba(184,134,47,.5);outline-offset:3px;
  border-radius:4px;cursor:text;transition:outline-color .2s}
body.edit-mode [data-field-key]:hover{outline-color:var(--gold)}

/* ── Ф2 v8: inline-редактор (тулбар, состояния полей) ── */
[data-field-key].ie-active{outline:2px solid var(--gold)!important;outline-offset:3px;
  border-radius:4px}
[data-field-key].ie-saved{outline:2px solid #4a9d5b!important;outline-offset:3px;transition:outline-color .3s}
[data-field-key].ie-error{outline:2px solid var(--string-red)!important;outline-offset:3px}

.ie-toolbar{position:absolute;z-index:2200;display:none;gap:2px;padding:4px;
  background:var(--ink);border-radius:10px;box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
.ie-toolbar.show{display:flex}
.ie-toolbar button{width:34px;height:32px;border:0;border-radius:7px;cursor:pointer;
  background:transparent;color:var(--paper);font-family:var(--body);font-size:15px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .15s}
.ie-toolbar button:hover{background:rgba(232,199,126,.2)}
.ie-grip{display:inline-flex;align-items:center;justify-content:center;width:26px;height:32px;cursor:grab;touch-action:none;
  color:rgba(255,255,255,.55);font-size:15px;user-select:none}
.ie-toolbar.ie-dragging{cursor:grabbing}
body.ie-drag-lock{overflow:hidden;touch-action:none;overscroll-behavior:none}
body.ie-drag-lock *{touch-action:none}
.ie-toolbar.ie-dragging .ie-grip{cursor:grabbing}
.ie-toolbar button[data-cmd="gold"]{color:var(--gold-lt)}

/* В edit-mode декоративный hero-canvas не перехватывает клики по тексту (FR-EDIT-5) */
body.edit-mode #heroStrings{pointer-events:none}

/* Ф2 v9: строка о стоимости/продолжительности занятий */
.place-lesson{margin-top:18px;color:var(--ink-soft);font-size:15px;font-style:italic;
  padding-left:14px;border-left:2px solid var(--gold-lt)}

/* ── Ф2 v10: структурный редактор коллекций (контролы add/move/delete) ── */
body:not(.edit-mode) .ie-cc,
body:not(.edit-mode) .ie-add{display:none!important}
body.edit-mode [data-collection-item]{position:relative}
.ie-cc{position:absolute;top:6px;right:6px;z-index:60;display:flex;gap:3px;
  background:rgba(26,24,20,.92);padding:3px;border-radius:8px}
/* у регалий индикатор раскрытия справа — уводим контролы в правый жёлоб */
.reglist .ie-cc{top:50%;right:-8px;transform:translate(100%,-50%)}
.ie-cc button{width:26px;height:26px;border:0;border-radius:6px;cursor:pointer;
  background:transparent;color:var(--paper);font-size:14px;line-height:1;
  display:flex;align-items:center;justify-content:center;transition:background .15s}
.ie-cc button:hover{background:rgba(232,199,126,.25)}
.ie-cc .ie-del{color:#e8a08f}
.ie-cc .ie-del:hover{background:rgba(196,104,86,.3)}
.ie-add{display:inline-flex;align-items:center;gap:6px;margin:14px 0 6px;
  padding:9px 18px;border-radius:999px;cursor:pointer;
  font-family:var(--body);font-size:14px;font-weight:500;
  color:var(--gold-deep);background:var(--gold-pale);border:1.5px dashed var(--gold);
  transition:background .2s,transform .15s}
.ie-add:hover{background:var(--gold-lt);transform:translateY(-1px)}

/* ── Ф2 v11: модалка подтверждения в стиле сайта ── */
.kz-modal-ov{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;
  background:rgba(26,24,20,.5);opacity:0;transition:opacity .2s;padding:20px}
.kz-modal-ov.show{opacity:1}
.kz-modal{background:linear-gradient(180deg,var(--white),var(--pearl));border:1px solid var(--hair-2);
  border-radius:20px;box-shadow:var(--shadow-soft);max-width:420px;width:100%;padding:28px 28px 22px;
  transform:translateY(12px) scale(.97);transition:transform .22s cubic-bezier(.2,.75,.25,1)}
.kz-modal-ov.show .kz-modal{transform:none}
.kz-modal-body{font-family:var(--display);font-size:19px;color:var(--ink);line-height:1.4;margin-bottom:22px}
.kz-modal-actions{display:flex;gap:10px;justify-content:flex-end}
.kz-mbtn{font-family:var(--body);font-size:14.5px;font-weight:500;padding:10px 22px;border-radius:999px;
  cursor:pointer;border:1.5px solid var(--gold-lt);background:transparent;color:var(--gold-deep);
  transition:background .2s,border-color .2s,transform .15s}
.kz-mbtn:hover{background:var(--gold-pale);transform:translateY(-1px)}
.kz-ok{background:var(--gold);border-color:var(--gold);color:#1A1814}
.kz-ok:hover{background:var(--gold-mid)}
.kz-ok.kz-danger{background:var(--string-red);border-color:var(--string-red);color:#fff}
.kz-ok.kz-danger:hover{background:#b3543f}
.kz-mbtn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ── Ф2 v11: крестик очистки даты + сворачивание пустой даты ── */
.ie-yclear{position:absolute;top:-9px;left:-9px;z-index:61;width:22px;height:22px;border-radius:50%;
  border:0;cursor:pointer;background:var(--string-red);color:#fff;font-size:14px;line-height:1;
  display:none;align-items:center;justify-content:center;box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
body.edit-mode .reglist [data-collection-item]:hover .ie-yclear{display:flex}
/* пустая дата: на публике скрыта, в режиме правки — плейсхолдер, чтобы вписать заново */
.rl-head .y:empty{display:none}
body.edit-mode .rl-head .y:empty{display:inline-flex;min-width:52px;min-height:22px}
body.edit-mode .rl-head .y:empty::before{content:'+ дата';color:var(--ink-faint);font-style:italic;font-size:13px}

/* ── Ф2 v12: служебные списки правки направлений/дипломов (edit-mode) ── */
.edit-list{display:none}
body.edit-mode .edit-list{display:block;margin:26px auto 8px;max-width:900px;padding:18px 18px 6px;
  background:var(--pearl);border:1px solid var(--hair-2);border-radius:16px}
.el-head{font-family:var(--body);font-weight:600;color:var(--gold-deep);margin-bottom:12px;font-size:13.5px;
  letter-spacing:.02em}
.el-card{position:relative;background:var(--white);border:1px solid var(--hair);border-radius:12px;
  padding:12px 40px 12px 14px;margin-bottom:10px}
.el-card .pi{font-size:12px;margin-bottom:4px}
.el-title{font-family:var(--display);font-size:18px;color:var(--ink);margin-bottom:4px}
.el-text{font-size:14px;color:var(--ink-soft);line-height:1.5}

/* ── Ф2 v13: в режиме правки прячем интерактив, показываем только блоки ── */
body.edit-mode #kbDock,
body.edit-mode .kb-stage,
body.edit-mode .kb-info-m,
body.edit-mode .kb-fallback,
body.edit-mode #fretwrap,
body.edit-mode .gcue{display:none!important}
/* v15: дипломы (.cf) видны в edit-mode — там крестики удаления и кнопка добавления */
/* подсказка вместо интерактива */
body.edit-mode [data-editlist]::before{content:"Клавиши и струны показаны после выхода из режима правки — здесь правьте содержимое блоков.";
  display:block;color:var(--ink-faint);font-size:12.5px;font-style:italic;margin:-4px 0 12px}

/* ── v15: фото дипломов (cover, формат подстраивается под фото) ── */
.cf-card .cf-fr img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.cf-card .cf-ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--pearl),var(--pearl-2))}
.cf-card .cf-ph span{color:var(--ink-faint);font-size:13px;letter-spacing:.04em;text-transform:uppercase}

/* крестик удаления — только на активной карточке в edit-mode */
.cf-del{display:none;position:absolute;top:10px;right:10px;width:28px;height:28px;border:none;border-radius:50%;
  background:#b04040;color:#fff;font-size:18px;line-height:1;cursor:pointer;z-index:50;
  box-shadow:0 4px 12px rgba(26,24,20,.35);align-items:center;justify-content:center}
body.edit-mode .cf-card.active .cf-del{display:inline-flex}

/* «★ Основной» — только на активной карточке в edit-mode; ставит диплом первым */
.cf-first{display:none;position:absolute;top:10px;left:10px;height:28px;padding:0 12px;border:none;border-radius:14px;
  background:linear-gradient(135deg,#c9a24a,#b8862f);color:#fff;font-size:12px;font-weight:600;letter-spacing:.02em;
  line-height:28px;cursor:pointer;z-index:50;box-shadow:0 4px 12px rgba(26,24,20,.35);white-space:nowrap}
body.edit-mode .cf-card.active .cf-first{display:inline-block}

/* кнопка «+ Добавить фото» — видна только в edit-mode, в стиле сайта */
.dip-edit{display:none;justify-content:center;margin-top:18px}
body.edit-mode .dip-edit{display:flex}
.dip-add{display:inline-flex;align-items:center;gap:6px;padding:11px 26px;cursor:pointer;
  font-family:var(--body);font-size:13.5px;font-weight:600;letter-spacing:.02em;
  color:var(--gold-deep);background:var(--gold-lt);border:1px dashed var(--gold-mid);border-radius:10px;
  transition:background .2s,transform .2s}
.dip-add:hover{background:var(--gold-lt);transform:translateY(-1px)}

/* ── v19: галерея-мозаика — edit-контролы (крестик, размер, добавить) ── */
/* крестик удаления + кнопка размера — видны только в edit-mode */
.mtile-del,.mtile-size{display:none;position:absolute;width:30px;height:30px;border:none;border-radius:50%;
  cursor:pointer;font-size:17px;line-height:1;z-index:20;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(26,24,20,.35);transition:background .2s,transform .2s}
.mtile-del{top:9px;right:9px;background:#b04040;color:#fff}
.mtile-del:hover{background:#933636;transform:scale(1.06)}
.mtile-size{top:9px;left:9px;background:rgba(255,255,255,.92);color:var(--gold-deep);font-size:15px}
.mtile-size:hover{background:#fff;transform:scale(1.06)}
body.edit-mode .mtile-del,body.edit-mode .mtile-size{display:inline-flex}
body.edit-mode .mtile{cursor:default}
body:not(.edit-mode) .mtile.is-empty{display:none}   /* пустые плитки скрыты для гостей */
.mtile.is-uploading{opacity:.55;pointer-events:none}

/* кнопка «+ Добавить фото» — как в дипломах, видна в edit-mode; занимает 2×2 юнита */
.life-add{display:none;grid-column:span 2;grid-row:span 2;align-items:center;justify-content:center}
body.edit-mode .life-add{display:flex}
.mtile-add-btn{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:14px;cursor:pointer;font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.02em;
  color:var(--gold-deep);background:var(--gold-lt);border:1px dashed var(--gold-mid);border-radius:14px;
  transition:background .2s}
.mtile-add-btn:hover{background:var(--gold-lt);filter:brightness(.98)}
body.edit-mode .life-empty-hint{display:none}

/* ── Лайтбокс галереи ── */
.lb{position:fixed;inset:0;z-index:3000;display:flex;align-items:center;justify-content:center;
  background:rgba(26,24,20,.92);backdrop-filter:blur(4px);opacity:0;visibility:hidden;
  transition:opacity .32s,visibility .32s}
.lb.is-open{opacity:1;visibility:visible}
.lb-img,.lb-video{max-width:92vw;max-height:88vh;border-radius:14px;
  box-shadow:0 24px 70px rgba(0,0,0,.5);border:1px solid var(--gold-mid);
  transform-origin:center center;will-change:transform}
.lb-video{background:#000}
.lb-close,.lb-prev,.lb-next{z-index:4}
.lb-spin{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;z-index:3;
  border-radius:50%;border:3px solid rgba(232,199,126,.25);border-top-color:var(--gold-mid);
  opacity:0;visibility:hidden;transition:opacity .2s;animation:lb-spin .8s linear infinite}
.lb.is-loading .lb-spin{opacity:1;visibility:visible}
@keyframes lb-spin{to{transform:rotate(360deg)}}
.lb-close{position:absolute;top:22px;right:26px;width:46px;height:46px;border-radius:50%;border:none;
  background:rgba(255,255,255,.14);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.lb-close:hover{background:rgba(255,255,255,.26)}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;border:none;
  background:rgba(255,255,255,.14);color:#fff;font-size:30px;line-height:1;cursor:pointer}
.lb-nav:hover{background:rgba(255,255,255,.26)}
.lb-prev{left:20px}.lb-next{right:20px}
@media(max-width:760px){.lb-nav{width:44px;height:44px;font-size:24px}.lb-prev{left:8px}.lb-next{right:8px}}


/* ── прогресс-оверлей загрузки (KZUpload) ── */
.kz-upload{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;
  background:rgba(26,24,20,.55);backdrop-filter:blur(3px)}
.kz-upload.is-open{display:flex}
.kz-upload__box{background:var(--white);border-radius:16px;padding:26px 30px;min-width:260px;text-align:center;
  box-shadow:0 30px 70px -20px rgba(26,24,20,.6)}
.kz-upload__label{font-family:var(--body);font-size:14px;color:var(--ink);margin-bottom:14px}
.kz-upload__track{height:8px;border-radius:6px;background:var(--pearl-2);overflow:hidden}
.kz-upload__bar{height:100%;width:0;background:var(--grad-gold);transition:width .2s}
.kz-upload__pct{margin-top:10px;font-size:12.5px;color:var(--gold-deep);font-weight:600}

/* ═══ Расписание (B1): недельная + месячная сетка ═══════════════════════════ */
.sched{padding:120px 0 80px;max-width:1240px}
.sched-hd{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sched-tools{display:flex;gap:10px;flex-wrap:wrap}   /* без wrap кнопки распирали страницу на телефоне */
.viewseg{display:inline-flex;border:1px solid var(--hair-2);border-radius:40px;overflow:hidden;background:var(--white)}
.viewseg button{font-size:12.5px;font-family:var(--body);border:none;background:transparent;padding:10px 15px;cursor:pointer;color:var(--ink-soft);transition:.25s}
.viewseg button.on{color:var(--gold);background:#FFFBF1}
.sched-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0 4px;flex-wrap:wrap}
.sched-head h1{font-family:var(--display);font-weight:300;font-size:clamp(26px,3.4vw,40px);line-height:1.05;margin:0}
.sched-head h1 em{font-style:italic}
.sched-sub{color:var(--ink-soft);font-size:14px;margin-bottom:16px}
.navwk{display:flex;align-items:center;gap:8px}
.navwk button{width:42px;height:42px;border-radius:50%;border:1px solid var(--hair-2);background:var(--white);cursor:pointer;color:var(--ink-soft);font-size:17px;display:flex;align-items:center;justify-content:center;transition:.3s}
.navwk button:active{transform:scale(.95);border-color:var(--gold-mid);color:var(--gold)}
.navwk .today{width:auto;border-radius:40px;padding:0 18px;font-size:13px}
.legend{display:flex;gap:16px;flex-wrap:wrap;padding:2px 0 18px;font-size:12px;color:var(--ink-soft)}
.legend .lg{display:inline-flex;align-items:center;gap:7px}
.legend .sw{width:16px;height:16px;border-radius:5px;flex:none;border:1px solid var(--hair-2)}
.sw.free{background:var(--white)}
.sw.mine{background:#FFFBF1;border-color:var(--gold-mid);box-shadow:inset 3px 0 0 var(--gold)}
.sw.other{background:repeating-linear-gradient(45deg,#F3F1EC,#F3F1EC 5px,#ECE9E1 5px,#ECE9E1 10px)}
.sw.closed{background:#F4F2ED}

.board-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--hair);border-radius:16px;background:var(--white);box-shadow:var(--shadow-soft)}

/* ─ Мобильная версия кабинета (v55): всё влезает в экран, скроллится только сетка ─ */
@media(max-width:640px){
  .sched{padding:96px 0 56px}
  .sched-hd{gap:12px}
  .sched-tools{width:100%;gap:7px}
  .sched-tools .viewseg,.sched-tools .colleague-btn{flex:1 1 auto;min-width:0}
  .sched-tools .viewseg{justify-content:center}
  .viewseg button,.colleague-btn{font-size:12px;padding:9px 12px;white-space:nowrap}
  /* дата недели и навигация — на ОДНОЙ линии (не переносим nav вниз) */
  .sched-head{gap:8px;padding:10px 0 6px;flex-wrap:nowrap;align-items:center}
  .sched-head h1{font-size:clamp(19px,5.4vw,27px);flex:1 1 auto;min-width:0}
  .navwk{width:auto;flex:none;justify-content:flex-end;gap:6px}
  .navwk button{width:36px;height:36px;font-size:15px}
  .navwk .today{padding:0 12px;font-size:12px}
  .sched-sub{font-size:12.5px;margin-bottom:12px}
  /* «Рабочее окно 10:00–21:00 …» на мобилке в кабинете — лишний шум, прячем */
  .sched[data-cabinet="1"] .sched-sub{display:none}
  .legend{gap:10px;font-size:11px;padding:2px 0 14px}
  .legend .sw{width:14px;height:14px}
  /* горизонтально едет ТОЛЬКО доска, а не вся страница */
  .board{min-width:760px}
}
.board{min-width:920px;display:grid;grid-template-columns:64px repeat(7,1fr)}
.board .felt{grid-column:1/-1;height:4px;background:var(--grad-gold);background-size:200% 100%;animation:flowH var(--sheen-h) linear infinite}
.dhead{padding:14px 8px 12px;text-align:center;border-bottom:1px solid var(--hair);border-left:1px solid var(--hair)}
.dhead.corner{border-left:none}
.dhead .dow{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.dhead .dnum{font-family:var(--display);font-size:20px;margin-top:3px;line-height:1}
.dhead.is-today{background:#FFFBF1}
.dhead.is-today .dnum{color:var(--gold)}
.dhead .cnt{font-size:10px;color:var(--ink-faint);margin-top:4px}
.tcol{border-right:1px solid var(--hair);background:linear-gradient(var(--white),#FDFCF9)}
.tlabel{height:58px;display:flex;align-items:flex-start;justify-content:flex-end;padding:6px 8px 0;font-size:11px;color:var(--ink-faint)}
.cell{height:58px;border-bottom:1px solid var(--hair);border-left:1px solid var(--hair);padding:5px;position:relative}
.cell.free{cursor:default}
.cell.free-other{background:#FDFCFA}
.lesson{height:100%;border-radius:9px;padding:7px 9px;display:flex;flex-direction:column;justify-content:center;gap:1px;border:1px solid var(--hair-2);background:var(--white);overflow:hidden}
.lesson .nm{font-size:12.5px;font-weight:500;color:var(--ink);line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lesson .meta{font-size:10.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lesson.mine{position:relative;background:#FFFBF1;border-color:var(--gold-mid);box-shadow:inset 3px 0 0 var(--gold)}
/* маленькая золотая полоска слева статична; при наведении — светлеет по центру и «дышит» */
.lesson.mine::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;z-index:3;opacity:0;
  background:linear-gradient(180deg,var(--gold-deep) 0%,var(--gold) 26%,var(--gold-pale) 50%,var(--gold) 74%,var(--gold-deep) 100%);
  transition:opacity .3s}
.lesson.mine:hover::after{opacity:1;animation:breatheV 2.6s ease-in-out infinite}
@keyframes breatheV{0%,100%{filter:brightness(1)}50%{filter:brightness(1.4) saturate(1.08)}}
/* бесшовный цикл блика: сдвиг ровно на 1 плитку (200% при background-size 200%) — без рывка */
@keyframes flowH{to{background-position:200% 0}}
@keyframes flowV{to{background-position:0 200%}}
.lesson.other{background:repeating-linear-gradient(45deg,#F5F3EE,#F5F3EE 6px,#EEEBE3 6px,#EEEBE3 12px);border-color:var(--hair-2);opacity:.72}
.lesson.other .nm{color:var(--ink-faint);font-weight:400;font-style:italic}
.lesson.other .meta{color:var(--ink-faint)}
.cell.closed{background:#F4F2ED}
.brk{grid-column:1/-1;border-bottom:1px solid var(--hair);display:flex;align-items:center;gap:10px;padding:6px 14px;background:linear-gradient(#FBF6EC,#F6EFDF);color:var(--ink-soft)}
.brk .lbl{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:600}
.brk .tm{font-size:10.5px;color:var(--ink-faint)}
.brk::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold-mid);opacity:.5;flex:none}
.gaprow{grid-column:1/-1;height:9px;background:repeating-linear-gradient(90deg,transparent,transparent 7px,var(--hair) 7px,var(--hair) 8px);opacity:.5}

.monthwrap{border:1px solid var(--hair);border-radius:16px;background:var(--white);box-shadow:var(--shadow-soft);overflow:hidden}
.month-felt{height:4px;background:var(--grad-gold);background-size:200% 100%;animation:flowH var(--sheen-h) linear infinite}
.month-dows{display:grid;grid-template-columns:repeat(7,1fr);border-bottom:1px solid var(--hair)}
.month-dows div{padding:11px 8px;text-align:center;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft)}
.month{display:grid;grid-template-columns:repeat(7,1fr)}
.mcell{min-height:116px;border-left:1px solid var(--hair);border-bottom:1px solid var(--hair);padding:8px;cursor:pointer;display:flex;flex-direction:column;gap:4px;transition:background .2s}
.mcell:nth-child(7n+1){border-left:none}
.mcell:active{background:#FBF8F1}
.mcell.out{background:#FCFBF8;cursor:default}
.mcell.out .mdate{color:var(--hair-2)}
.mcell.today{background:#FFFBF1}
.mcell.today .mdate{color:var(--gold);font-weight:600}
.mdate{font-family:var(--display);font-size:16px;line-height:1}
.mrow{font-size:10.5px;line-height:1.25;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:2px 5px;border-radius:5px;background:#FFFBF1;border-left:2px solid var(--gold)}
.mrow b{font-weight:500;color:var(--ink-faint);margin-right:4px;font-variant-numeric:tabular-nums}
.mmore{font-size:10px;color:var(--ink-faint);padding:1px 5px}
.mother{margin-top:auto;font-size:9.5px;color:var(--ink-faint);display:flex;align-items:center;gap:5px}
.mother i{width:5px;height:5px;border-radius:50%;background:#5E7C8B;opacity:.5;flex:none}
@media(max-width:720px){.mcell{min-height:88px;padding:6px 5px}.mrow:not(.keep){display:none}}

.sched-note{margin-top:18px;font-size:12.5px;color:var(--ink-faint);text-align:center}

/* модалка дня */
.sched-ov{position:fixed;inset:0;background:rgba(26,24,20,.34);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:22px;z-index:200}
.sched-ov.show{display:flex}
.sched-sheet{width:100%;max-width:460px;max-height:calc(100vh - 44px);max-height:calc(100dvh - 44px);display:flex;flex-direction:column;background:var(--white);border:1px solid var(--hair-2);border-radius:18px;box-shadow:0 40px 80px -30px rgba(26,24,20,.55);overflow:hidden;position:relative}
.sched-sheet::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad-gold);background-size:100% 200%;animation:flowV var(--sheen-v) linear infinite;z-index:2}
.ss-in{padding:26px 26px 24px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;min-height:0;flex:1 1 auto}
/* Блокировка скролла фона, когда открыта любая модалка (kz-noscroll вешается из JS). */
html.kz-noscroll,body.kz-noscroll{overflow:hidden!important}
.ss-in .kx{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px}
.ss-in h3{font-family:var(--display);font-weight:400;font-size:24px;margin-bottom:3px}
.ss-in .when{color:var(--ink-soft);font-size:13px;margin-bottom:16px}
.ss-close{position:absolute;top:14px;right:16px;width:32px;height:32px;border-radius:50%;border:1px solid var(--hair-2);background:var(--white);cursor:pointer;color:var(--ink-soft);font-size:18px;display:flex;align-items:center;justify-content:center;z-index:1}
.daylist{max-height:56vh;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;gap:6px}
.dl-slot{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--hair);border-radius:10px;background:#fff}
.dl-slot .dl-t{font-size:12px;color:var(--ink-soft);font-variant-numeric:tabular-nums;flex:none;width:104px}
.dl-slot .dl-b{font-size:13.5px;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dl-slot.mine{border-color:var(--gold-mid);background:#FFFBF1}
.dl-slot.other{background:repeating-linear-gradient(45deg,#F5F3EE,#F5F3EE 6px,#EEEBE3 6px,#EEEBE3 12px);opacity:.75}
.dl-slot.other .dl-b{color:var(--ink-faint);font-style:italic}
.dl-slot.freeslot .dl-b{color:var(--ink-faint)}
.dl-meal{display:flex;align-items:center;gap:9px;padding:7px 12px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.dl-meal::before,.dl-meal::after{content:"";height:1px;background:var(--hair);flex:1}

/* ═══ Мастер записи на пробный (B2) ════════════════════════════════════════ */
.invite{display:none}
.bp-in > .bk-title{font-family:var(--display);font-size:clamp(19px,2vw,25px);font-weight:400;color:var(--ink);
  margin:2px 0 20px;padding-bottom:16px;border-bottom:1px solid var(--hair)}
.invite::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--grad-gold);background-size:200% 100%;animation:flowH var(--sheen-h) linear infinite}
.invite .ttl{font-family:var(--display);font-size:21px;font-weight:400;margin-bottom:6px}
.invite .txt{font-size:14px;color:var(--ink-soft);margin-bottom:18px;max-width:46ch}
.invite-cta{display:inline-flex;align-items:center;gap:11px;font-size:15px;font-weight:500;padding:14px 26px;border-radius:48px;border:none;cursor:pointer;color:#fff;background:var(--grad-gold);background-size:220% 100%;box-shadow:0 16px 34px -18px rgba(184,134,47,.7);transition:transform .3s}
.invite-cta:active{transform:translateY(1px)}
.invite-cta .ar{transition:transform .3s}
.invite.open .invite-cta .ar{transform:rotate(90deg)}

.booker{margin-bottom:18px}
.booker-panel{border:1px solid var(--hair);border-radius:16px;background:var(--white);box-shadow:var(--shadow-soft);overflow:hidden}
.bp-felt{height:4px;background:var(--grad-gold);background-size:200% 100%;animation:flowH var(--sheen-h) linear infinite}
.bp-in{padding:24px 26px 28px}
.bsteps{display:flex;gap:8px;margin-bottom:22px;flex-wrap:wrap;align-items:center}
.bst{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.bst .d{width:22px;height:22px;border-radius:50%;border:1px solid var(--hair-2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--ink-soft);transition:.3s}
.bst.on{color:var(--gold)}
.bst.on .d{border-color:var(--gold-mid);background:#F5E8C4;color:var(--gold-deep)}
.bst.done .d{background:linear-gradient(180deg,#F2E4BB,#E9D6A2);border:1px solid var(--gold-mid);color:var(--gold-deep);box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -2px 4px rgba(120,88,28,.18)}
.bsep{flex:1;min-width:12px;height:1px;background:var(--hair)}
.bpane{display:none;animation:bfade .4s cubic-bezier(.16,1,.3,1)}
.bpane.on{display:block}
@keyframes bfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bnav{display:flex;justify-content:space-between;gap:12px;margin-top:22px}
.bghost{font-family:var(--body);font-size:15px;border:1px solid var(--hair-2);background:var(--white);border-radius:48px;padding:16px 26px;cursor:pointer;color:var(--ink-soft);transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s,border-color .25s,color .25s}
.bghost:hover{border-color:var(--gold-mid);color:var(--gold);transform:translateY(-2px);box-shadow:var(--btn-lift)}
.bghost:active{transform:translateY(0) scale(.97);box-shadow:none}
.bpane .seg button .sub{font-size:11px;color:var(--ink-faint);margin-left:5px}
.bpane .seg button.on .sub{color:var(--gold-mid)}
.bsumm{background:#FBF8F1;border:1px solid var(--hair-2);border-radius:11px;padding:13px 15px;font-size:13.5px;color:var(--ink-soft);margin-bottom:18px;display:flex;flex-wrap:wrap;gap:6px 16px}
.bsumm b{color:var(--ink);font-weight:500}
.bsumm .none{color:var(--ink-faint)}
.bwk{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.bwk .lbl{font-family:var(--display);font-size:17px}
.bwk .arr{display:flex;gap:8px}
.bwk button{width:36px;height:36px;border-radius:50%;border:1px solid var(--hair-2);background:var(--white);cursor:pointer;color:var(--ink-soft);font-size:16px;display:flex;align-items:center;justify-content:center}
.bwk button:active{border-color:var(--gold-mid);color:var(--gold)}
.bdays{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-bottom:15px}
.bday{border:1px solid var(--hair-2);background:var(--white);border-radius:11px;padding:9px 3px;cursor:pointer;text-align:center;transition:.25s}
.bday .dw{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.bday .dn{font-family:var(--display);font-size:17px;margin-top:3px;line-height:1}
.bday .fr{font-size:9px;color:var(--ink-faint);margin-top:3px}
.bday.on{border-color:var(--gold-mid);background:#FFFBF1}
.bday:not(.off):hover{border-color:var(--gold-mid);transform:translateY(-2px);box-shadow:var(--btn-lift)}
.bday.on .dn{color:var(--gold)}
.bday.off{opacity:.4;cursor:default}
.bday:not(.off):active{transform:scale(.97)}
.bslots-lbl{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:11px}
.bslots{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:9px}
.bslot{border:1px solid var(--hair-2);background:var(--white);border-radius:10px;padding:12px 4px;cursor:pointer;text-align:center;font-size:14px;transition:.2s;font-variant-numeric:tabular-nums}
.bslot.on{border-color:var(--gold-mid);background:#FFFBF1;color:var(--gold);font-weight:500}
.bslot:hover{border-color:var(--gold-mid);transform:translateY(-2px);box-shadow:var(--btn-lift)}
/* отступ поля «Комментарий» от строки имени/телефона (шаг контактов) */
.bpane .row2 + .field{margin-top:16px}
/* воздух между группами (Педагог / Инструмент / Для кого) */
.bpane > .field + .field,.bpane .bpane-groups .field + .field{margin-top:18px}
.bpane > .field > label,.bpane .seg + label{display:block;margin-bottom:9px}
.bpane .row2 .field + .field{margin-top:0}
.bpane .row2 .field label{display:block;margin-bottom:7px}
/* «Назад» — та же высота, что у кнопки действия */
.bnav .bghost{padding:16px 26px;font-size:15px;line-height:1.2;border-radius:48px;align-self:stretch;display:inline-flex;align-items:center}
.bnav{display:flex;align-items:center;justify-content:space-between;gap:14px}
.bnav .submit{margin-top:0}
.bslot:active{transform:scale(.97)}
.bslot-empty{grid-column:1/-1;padding:18px;text-align:center;color:var(--ink-faint);font-size:13px}
.bpane .opt{text-transform:none;letter-spacing:0;color:var(--ink-faint)}
.bdone{display:none;text-align:center;padding:6px 4px}
#booker.booked .bsteps,#booker.booked .bpane,#booker.booked .bk-title{display:none}
#booker.booked .bdone{display:block;animation:bfade .45s cubic-bezier(.16,1,.3,1)}
/* при принятой заявке верхняя invite-карточка скрывается — остаётся только .bdone */
#invite.booked-hide{display:none}
.bd-seal{width:52px;height:52px;border-radius:50%;border:1px solid var(--gold-mid);display:flex;align-items:center;justify-content:center;margin:6px auto 15px;color:var(--gold);font-size:25px;background:#FFFBF1}
.bdone h3{font-family:var(--display);font-weight:400;font-size:24px;margin-bottom:8px}
.bd-lead{color:var(--ink-soft);font-size:14.5px;margin-bottom:18px;max-width:40ch;margin-left:auto;margin-right:auto}
.bd-card{background:#FBF8F1;border:1px solid var(--hair-2);border-radius:12px;padding:15px 18px;margin-bottom:20px;display:inline-block}
.bd-card .l1{font-family:var(--display);font-size:18px}
.bd-card .l2{font-size:13px;color:var(--ink-soft);margin-top:4px}

/* заявки в сетке админа (B2): бейдж и статусы */
.lesson.held{background:#fff;border:1px dashed var(--gold-mid);box-shadow:inset 3px 0 0 var(--gold-lt)}
.lesson.held .nm{color:var(--gold-deep)}
.slot-badge{position:absolute;top:3px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--grad-gold);color:#fff;font-size:10px;font-weight:600;display:flex;align-items:center;justify-content:center;line-height:1}
.dl-slot.held{border-color:var(--gold-mid);border-style:dashed;background:#FFFBF1}
.lead-card{border:1px solid var(--hair);border-radius:11px;padding:13px 15px;margin-bottom:10px}
.lead-card.orphaned{border-color:#E0B3A9;background:#FBF1EE}
.lead-card .ln{font-weight:500;font-size:14.5px}
.lead-card .lc{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
.lead-card .lkind{font-size:11.5px;color:var(--gold);margin-top:3px;letter-spacing:.02em}
.lead-card .lst{font-size:11px;letter-spacing:.04em;margin-top:6px;display:inline-block;padding:2px 9px;border-radius:40px;border:1px solid var(--hair-2);color:var(--ink-soft)}
.lead-card .lst.orphaned{color:#C46856;border-color:#E0B3A9}
.lead-acts{display:flex;gap:8px;margin-top:10px}
.btn-mini{font-family:var(--body);font-size:12.5px;border:1px solid var(--hair-2);background:var(--white);border-radius:40px;padding:8px 15px;cursor:pointer;color:var(--ink);transition:.25s}
.btn-mini:active{transform:scale(.97)}
.btn-mini.gold{border:none;color:#fff;background:var(--grad-gold);background-size:220% 100%}
.slot-badge.dim{background:#B8AE9A;opacity:.85}

/* ═══ Личный кабинет: кнопка в шапке + модалка входа ═══════════════════════ */
.hdr-actions{justify-self:end;display:flex;align-items:center;gap:14px}
.cab-link{font-family:var(--body);font-size:13px;font-weight:500;border:1px solid var(--hair-2);background:var(--white);border-radius:40px;padding:9px 16px;cursor:pointer;color:var(--ink);transition:.25s}
.cab-link:active{transform:scale(.97)}
.cab-link:hover{border-color:var(--gold-mid);color:var(--gold)}
@media(max-width:680px){.cab-link{padding:8px 13px;font-size:12px}}
@media(max-width:600px){.cab-link{white-space:nowrap;font-size:11px;padding:8px 12px}}

.cab-ov{position:fixed;inset:0;background:rgba(26,24,20,.42);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:22px;z-index:300}
.cab-ov.show{display:flex}
.cab-modal{width:100%;max-width:400px;background:var(--white);border:1px solid var(--hair-2);border-radius:20px;box-shadow:0 44px 90px -34px rgba(26,24,20,.6);overflow:hidden;position:relative;animation:cabpop .4s cubic-bezier(.16,1,.3,1)}
@keyframes cabpop{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.cab-felt{height:4px;background:var(--grad-gold);background-size:200% 100%;animation:flowH var(--sheen-h) linear infinite}
.cab-x{position:absolute;top:14px;right:16px;width:32px;height:32px;border-radius:50%;border:1px solid var(--hair-2);background:var(--white);cursor:pointer;color:var(--ink-soft);font-size:18px;display:flex;align-items:center;justify-content:center}
.cab-in{padding:30px 30px 26px}
.cab-in h3{font-family:var(--display);font-weight:400;font-size:26px;margin:10px 0 6px}
.cab-sub{color:var(--ink-soft);font-size:14px;margin-bottom:20px}
.cab-in .field{margin-bottom:15px}
.cab-in .field label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);display:block;margin-bottom:7px}
.cab-submit{width:100%;margin-top:6px;justify-content:center}
.cab-err{color:#C46856;font-size:13px;min-height:18px;margin:2px 0 4px}
.cab-note{margin-top:16px;font-size:12px;color:var(--ink-faint);line-height:1.5;text-align:center}

/* оболочка личного кабинета педагога */
.cab-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 0 4px;flex-wrap:wrap}
.cab-who{display:flex;align-items:center;gap:12px}
.cab-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(180deg,#FEFCF6,#F7F0E1);border:1px solid var(--gold-mid);color:var(--gold-deep);box-shadow:inset 0 1px 1px rgba(255,255,255,.8),inset 0 -2px 4px rgba(120,88,28,.15);font-family:var(--display);font-size:17px;display:flex;align-items:center;justify-content:center}
.cab-nm{font-size:15px;font-weight:500;line-height:1.1}
.cab-role{font-size:11.5px;color:var(--ink-faint)}
.cab-logout-form{margin:0}
.cab-logout{font-family:var(--body);font-size:12.5px;color:var(--ink-soft);border:1px solid var(--hair-2);background:var(--white);border-radius:40px;padding:9px 16px;cursor:pointer;transition:.25s}
.cab-logout:active{transform:scale(.97)}
.colleague-btn{font-family:var(--body);font-size:12.5px;padding:10px 15px;color:var(--ink-soft);cursor:pointer}
.colleague-btn.on{color:var(--gold);background:#FFFBF1;border-color:var(--gold-mid)}
.sched[data-cabinet="1"]{padding-top:12px}

/* ═══ Шапка личного кабинета (чистая, своя) ════════════════════════════════ */
.cab-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.9);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--hair)}
.cab-bar{display:flex;align-items:center;justify-content:space-between;height:68px;padding-left:20px;padding-right:20px}
.cab-userbox{display:flex;align-items:center;gap:12px}
.cab-avatar{width:42px;height:42px;border-radius:50%;border:1px solid var(--gold-mid);background:linear-gradient(180deg,#FEFCF6,#F7F0E1);color:var(--gold-deep);box-shadow:inset 0 1px 1px rgba(255,255,255,.8),inset 0 -2px 4px rgba(120,88,28,.15);font-family:var(--display);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;padding:0;transition:transform .25s,box-shadow .25s}
.cab-avatar:active{transform:scale(.95)}
.cab-avatar:hover{box-shadow:0 0 0 3px rgba(184,134,47,.18)}
.cab-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.cab-userinfo{line-height:1.15}
.cab-nm{font-size:14.5px;font-weight:500}
.cab-role{font-size:11.5px;color:var(--ink-faint)}
.cab-logout-form{margin:0}
.cab-logout{font-family:var(--body);font-size:12.5px;color:var(--ink-soft);border:1px solid var(--hair-2);background:var(--white);border-radius:40px;padding:9px 16px;cursor:pointer;transition:.25s}
.cab-logout:active{transform:scale(.97)}
.cab-logout:hover{border-color:var(--gold-mid);color:var(--gold)}
@media(max-width:560px){.cab-userinfo{display:none}}
/* Мобильная шапка ЛК: небольшие отступы по краям, название слева,
   аккаунт+«Выйти» справа; аватарка ровно в размер кнопки «Выйти». */
@media(max-width:640px){
  .cab-header .cab-bar{padding-left:16px;padding-right:16px;height:60px}
  .wrap.sched{padding-left:16px;padding-right:16px}
  .cab-userbox{gap:10px}
  .cab-avatar{width:40px;height:40px}
  .cab-logout{height:40px;padding:0 16px;display:inline-flex;align-items:center;font-size:13px}
}

/* модалка профиля */
.prof-avatar-row{display:flex;align-items:center;gap:16px;margin:18px 0 6px}
.prof-avatar{width:72px;height:72px;border-radius:50%;border:1px solid var(--gold-mid);background:linear-gradient(180deg,#FEFCF6,#F7F0E1);color:var(--gold-deep);box-shadow:inset 0 1px 1px rgba(255,255,255,.8),inset 0 -2px 4px rgba(120,88,28,.15);font-family:var(--display);font-size:30px;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:none}
.prof-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.prof-photo-btn{display:inline-flex;align-items:center;font-size:13.5px;font-weight:500;border:1px solid var(--hair-2);background:var(--white);border-radius:40px;padding:10px 18px;cursor:pointer;color:var(--ink);transition:.25s}
.prof-photo-btn:hover{border-color:var(--gold-mid);color:var(--gold)}
.prof-photo-btn:active{transform:scale(.97)}
.prof-hint{font-size:11.5px;color:var(--ink-faint);margin-top:6px}
.prof-divider{height:1px;background:var(--hair);margin:20px 0 16px}
.prof-sub{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:14px}
.prof-ok{color:var(--gold);font-size:13px;min-height:16px;margin:2px 0 6px}

/* ═══ Быстрая заявка — сворачиваемый доп-блок (v30) ════════════════════════ */
.quickzone{margin-top:8px}
.quick-toggle{display:inline-flex;align-items:center;gap:10px;font-family:var(--body);font-size:14px;color:var(--ink-soft);border:1px solid var(--hair-2);background:var(--white);border-radius:44px;padding:12px 22px;cursor:pointer;transition:.25s}
.quick-toggle:hover{border-color:var(--gold-mid);color:var(--gold)}
.quick-toggle:active{transform:scale(.98)}
.quick-toggle .qar{transition:transform .35s;font-size:12px}
.quick-toggle.open .qar{transform:rotate(90deg)}
.quick-toggle .qhint{font-size:12px;color:var(--ink-faint)}
.quickwrap{max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.16,1,.3,1)}
.quickwrap.open{max-height:1200px;margin:16px -16px 0;padding:0 16px 22px}

/* ═══ Памятка-приглашение в подтверждении (B3) ════════════════════════════ */
.bd-actions{display:flex;flex-direction:column;gap:10px;max-width:320px;margin:20px auto 0}
.bd-ticket{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--body);font-size:15px;font-weight:500;padding:15px 22px;border-radius:44px;border:none;cursor:pointer;color:#fff;background:var(--grad-gold);background-size:220% 100%;box-shadow:0 14px 30px -16px rgba(184,134,47,.7);transition:transform .25s}
.bd-ticket:active{transform:translateY(1px)}
.bd-tk-ic{font-size:16px}
.bd-tg{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--body);font-size:14.5px;padding:13px 22px;border-radius:44px;border:1px solid var(--hair-2);background:var(--white);cursor:pointer;color:var(--ink);text-decoration:none;transition:.25s}
.bd-tg:hover{border-color:var(--gold-mid);color:var(--gold)}
.bd-tg:active{transform:scale(.98)}
.bd-fine{margin-top:16px;font-size:12px;color:var(--ink-faint);line-height:1.5;max-width:38ch;margin-left:auto;margin-right:auto}

/* B6.3 — интерактив/hover (у Дориэля планшет с мышью → без @media hover:hover) */
#sched .cell{transition:box-shadow .15s}
#sched .cell[data-hd]:hover,#sched .cell[data-edit]:hover{box-shadow:inset 0 0 0 2px var(--gold-mid);cursor:pointer;border-radius:6px}
#sched .mcell:hover{box-shadow:inset 0 0 0 2px var(--gold-mid)}
.viewseg button{transition:.2s}
.viewseg button:hover{color:var(--gold);background:#FFF9EC}
.navwk button:hover,.navwk .today:hover{border-color:var(--gold-mid);color:var(--gold)}
.colleague-btn:hover{color:var(--gold);background:#FFF9EC}
/* красивый hover навигации/меню: лёгкий подъём + мягкая золотая тень (планшет с мышью) */
.colleague-btn,.navwk button,.navwk .today,.btn-mini{transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s,color .25s,border-color .25s,background .25s}
.colleague-btn:hover,.navwk button:hover,.navwk .today:hover,.btn-mini:not(.gold):hover{transform:translateY(-2px);box-shadow:var(--btn-lift)}
.colleague-btn:active,.navwk button:active,.navwk .today:active,.btn-mini:not(.gold):active{transform:translateY(0) scale(.97);box-shadow:none}
.ss-in .dl-slot.dl-click{cursor:pointer;transition:box-shadow .15s,border-color .15s}
.ss-in .dl-slot.dl-click:hover{border-color:var(--gold-mid);box-shadow:inset 0 0 0 1px var(--gold-mid)}
.btn-mini{transition:.2s}
.btn-mini:hover{border-color:var(--gold-mid)}
.btn-mini.gold{transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s,filter .2s}
.btn-mini.gold:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(184,134,47,.75)}
.btn-mini.gold:active{transform:translateY(0) scale(.97);box-shadow:0 8px 16px -12px rgba(184,134,47,.55)}
/* золотые CTA в приглашении/подтверждении — тоже приподнимаются с тенью */
.invite-cta{transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s,filter .2s}
.invite-cta:hover{transform:translateY(-2px);box-shadow:0 22px 44px -18px rgba(184,134,47,.85);filter:brightness(1.03)}
.invite-cta:active{transform:translateY(0) scale(.98)}
.bd-ticket{transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .22s,filter .2s}
.bd-ticket:hover{transform:translateY(-2px);box-shadow:0 20px 40px -18px rgba(184,134,47,.8);filter:brightness(1.03)}
.bd-ticket:active{transform:translateY(0) scale(.98);box-shadow:0 10px 22px -14px rgba(184,134,47,.6)}

/* ── C1: мобильная сетка, прошедшие дни, счётчики месяца ── */
/* прошедшие дни — приглушённо, но занятия остаются видны (сколько было) */
.cell.past{background:#FAF9F6}
.cell.past .lesson{opacity:.5;filter:grayscale(.25)}
.cell.past.free,.cell.past.closed,.cell.past.free-other{opacity:.5}
.mcell.past{background:#FAF9F6}
.mcell.past .mrow,.mcell.past .mcounts,.mcell.past .mother,.mcell.past .mmore{opacity:.55}

/* компактные счётчики месяца — по умолчанию скрыты, показываются в мобилке */
.mcounts{display:none;flex-wrap:wrap;gap:5px;margin-top:2px}
.mcounts .mc{font-size:11px;padding:2px 8px;border-radius:20px;border:1px solid var(--hair-2);color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums}
.mcounts .mc.rec{color:var(--gold);border-color:var(--gold-mid);background:#FFFBF1}
.mcounts .mc.held{color:#C46856;border-color:#E0B3A9;background:#FBF1EE}

@media(max-width:720px){
  /* липкая колонка времени слева — ориентир при горизонтальном скролле, приглушённо */
  .board{min-width:680px}
  .tcol{position:sticky;left:0;z-index:6;background:rgba(253,252,249,.82);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-right:1px solid var(--hair-2)}
  .tcol .tlabel{color:var(--ink-faint)}
  .dhead.corner{position:sticky;left:0;z-index:8;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  /* месяц: имена → компактные счётчики */
  .mcell .mrow,.mcell .mmore{display:none}
  .mcell .mcounts{display:flex}
  .mcell .mother{font-size:9.5px}
}


/* ═══ Золотое стекло (v70) — тон «кремово-золотой мягкий», кромка = ОРБИТА ════════
   Всё без правки разметки. Грань + золотой кант + центральный блик при наведении —
   в ФОНЕ кнопки (градиентная рамка + @property-альфа). Оба псевдоэлемента свободны
   под два бегунка по контуру (offset-path): диаметрально напротив, постоянная
   линейная скорость — на широких кнопках без «разгона» и волны. */
@property --shine { syntax:'<number>'; inherits:false; initial-value:0; }

.btn-mini.gold,.submit,.invite-cta,.bd-ticket,.fab-book{
  --dur:7.5s;
  position:relative;isolation:isolate;overflow:visible;
  border:1.6px solid transparent;color:var(--ink);text-shadow:none;
  background:
    radial-gradient(72% 130% at 50% 45%, rgba(236,205,140,var(--shine)), transparent 72%) padding-box,
    linear-gradient(180deg,#FEFCF6,#F7F0E1) padding-box,
    linear-gradient(180deg,var(--gold-mid),var(--gold)) border-box;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.9),
    inset 0 -3px 5px rgba(120,88,28,.2),
    inset 2px 0 3px -1px rgba(150,110,40,.14),
    inset -2px 0 3px -1px rgba(150,110,40,.14),
    0 4px 12px -8px rgba(140,100,31,.34);
  transition:--shine .4s ease,transform .45s cubic-bezier(.22,1,.36,1),box-shadow .45s cubic-bezier(.22,1,.36,1);
}
/* два бегунка-орбита по контуру */
.btn-mini.gold::before,.btn-mini.gold::after,
.submit::before,.submit::after,
.invite-cta::before,.invite-cta::after,
.bd-ticket::before,.bd-ticket::after,
.fab-book::before,.fab-book::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:52px;height:7px;border-radius:7px;
  background:radial-gradient(closest-side,rgba(255,255,255,.98),rgba(255,244,214,.55) 55%,transparent);
  filter:blur(1.4px);mix-blend-mode:screen;
  offset-path:inset(0 round 999px);offset-rotate:auto;offset-anchor:50% 50%;
  animation:agOrbit var(--dur) linear infinite;
}
.btn-mini.gold::after,.submit::after,.invite-cta::after,.bd-ticket::after,.fab-book::after{animation-delay:calc(var(--dur) / -2)}
@keyframes agOrbit{from{offset-distance:0%}to{offset-distance:100%}}
/* мини-кнопки — бегунок чуть короче */
.btn-mini.gold::before,.btn-mini.gold::after{width:40px;height:6px}
/* свёрнутая круглая FAB: бегунок длиннее её периметра → на тёмном фоне читается
   полосами. Гасим орбиту в mini, при раскрытии возвращаем. */
.fab-book.mini::before,.fab-book.mini::after{opacity:0;animation:none}
.fab-book.mini:hover::before,.fab-book.mini:hover::after{opacity:1;animation:agOrbit var(--dur) linear infinite}
.fab-book.mini:hover::after{animation-delay:calc(var(--dur) / -2)}

.btn-mini.gold:hover,.submit:hover,.invite-cta:hover,.bd-ticket:hover,.fab-book:hover{
  transform:translateY(-3px);animation:agShineBreath 2.6s ease-in-out infinite;box-shadow:
    inset 0 2px 2px rgba(255,255,255,.9),inset 0 -3px 5px rgba(120,88,28,.2),
    inset 2px 0 3px -1px rgba(150,110,40,.14),inset -2px 0 3px -1px rgba(150,110,40,.14),
    0 7px 16px -9px rgba(140,100,31,.42);
}
@keyframes agShineBreath{0%,100%{--shine:.34}50%{--shine:.62}}

/* подсказки формы записи: мгновенная зелёная обводка нужных кнопок + подсказка */
.bflash > button,.bflash .bday:not(.off),.bflash .bslot,.bflash input,.bflash textarea,
button.bflash,input.bflash,textarea.bflash{animation:bflashEdge 1.15s cubic-bezier(.22,1,.36,1) 1}
@keyframes bflashEdge{
  0%{box-shadow:0 0 0 0 rgba(74,168,96,0)}
  20%{border-color:#4AA860;box-shadow:0 0 0 1px rgba(74,168,96,.55)}
  62%{border-color:#4AA860;box-shadow:0 0 0 1px rgba(74,168,96,.35)}
  100%{box-shadow:0 0 0 0 rgba(74,168,96,0)}
}
.bhint{max-height:0;overflow:hidden;opacity:0;text-align:right;font-size:12.5px;color:var(--gold-deep);
  transition:opacity .3s ease,max-height .3s ease,margin .3s ease}
.bhint.on{opacity:1;max-height:30px;margin:0 0 8px}
/* кнопка «Дальше» в ожидании — полностью выключена: без перелива, свечения и hover */
.submit.wait{background:#EFE9DC;border-color:#DFD5BF;color:#A79B84;box-shadow:none;cursor:default;
  animation:none;transform:none;filter:none;--shine:0}
.submit.wait::before,.submit.wait::after{display:none}
.submit.wait:hover{transform:none;animation:none;box-shadow:none;filter:none;background:#EFE9DC}
.submit.wait:active{transform:none}
/* мелкая строка про политику под кнопкой */
.bpolicy{margin-top:12px;text-align:right;font-size:11.5px;color:var(--ink-faint);line-height:1.45}
.bpolicy a{color:var(--ink-faint);text-decoration:underline;text-underline-offset:2px}
.bpolicy a:hover{color:var(--gold-deep)}
@media(prefers-reduced-motion:reduce){
  .bflash > button,.bflash .bday:not(.off),.bflash .bslot,button.bflash,input.bflash{animation:none;border-color:#4AA860}
}
/* fab: геометрия поверх «золотого стекла» (иначе position:relative прибивает кнопку к потоку) */
.fab-book{position:fixed;right:26px;top:72%;z-index:70;isolation:auto}
.fab-book.mini{right:18px}
@media(max-width:700px){.fab-book{right:14px;bottom:18px;top:auto}.fab-book.mini{right:14px}}
.btn-mini.gold:active,.submit:active,.invite-cta:active,.bd-ticket:active,.fab-book:active{transform:translateY(0) scale(.98)}

/* disabled — тихое матовое золото, без бегунков/подъёма */
.btn-mini.gold:disabled,.btn-mini.gold[disabled],.submit:disabled,.submit[disabled]{
  background:#E7D6AE;color:#8C7A50;box-shadow:none;transform:none;border-color:#D8C393;
}
.btn-mini.gold:disabled::before,.btn-mini.gold:disabled::after,
.btn-mini.gold[disabled]::before,.btn-mini.gold[disabled]::after,
.submit:disabled::before,.submit:disabled::after,
.submit[disabled]::before,.submit[disabled]::after{display:none}

@media (prefers-reduced-motion:reduce){
  .btn-mini.gold::before,.btn-mini.gold::after,.submit::before,.submit::after,
  .invite-cta::before,.invite-cta::after,.bd-ticket::before,.bd-ticket::after,
  .fab-book::before,.fab-book::after{animation:none;opacity:.5}
  .btn-mini.gold:hover,.submit:hover,.invite-cta:hover,.bd-ticket:hover,.fab-book:hover{transform:none;animation:none}
}
/* fallback: нет offset-path — статичное золото без бегунков */
@supports not (offset-path:inset(0 round 10px)){
  .btn-mini.gold::before,.btn-mini.gold::after,.submit::before,.submit::after,
  .invite-cta::before,.invite-cta::after,.bd-ticket::before,.bd-ticket::after{display:none}
}
li.open .rl-more{cursor:pointer}


/* ── v171 ─────────────────────────────────────────────────────────────────
   Глобальная страховка от горизонтального выноса: `clip` (в отличие от
   `hidden`) не создаёт скролл-контейнер и не ломает position:sticky.
   Из-за стороннего выноса фон подвала не доходил до правого края. */
html,body{overflow-x:clip}

@media(max-width:760px){
  /* боковые отступы в подвале — текст и карта по сетке остальных секций */
  /* у .foot внутри свой .wrap с паддингом — второй давал двойной отступ */
  .footzone .contacts{padding-left:26px;padding-right:26px}
  .footzone .ct-map{width:100%;max-width:100%}
}


/* ── v175: мобильные заголовки секций (пп. 3–6) ───────────────────────────
   Один общий вид: крупный золотой мерцающий заголовок по центру, как имена
   педагогов, но на пару шагов мельче. Лишние подзаголовки убираются CSS-ом,
   а не из шаблона — тексты редактируемые и лежат в БД. */
@media(max-width:760px){
  .dips .dip-head,.life .life-head,.why .why-head{text-align:center}
  .dips .dip-head > .eyebrow,
  .life .life-head > .eyebrow,
  .why .why-head > .lede,
  .book .book-grid > div > .eyebrow{
    display:inline-block;font-family:var(--display);font-weight:400;
    text-transform:uppercase;font-size:clamp(21px,6.2vw,30px);
    letter-spacing:.05em;line-height:1.14;color:transparent;
    background:var(--grad-gold);background-size:220% 100%;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    animation:sheen 9s linear infinite}
  .dips .dip-head > .eyebrow::before,
  .life .life-head > .eyebrow::before,
  .book .book-grid > div > .eyebrow::before{display:none}
  /* .lede у «10 причин» содержит <em class="gold-text"> — своя заливка мешала бы */
  .why .why-head > .lede .gold-text{-webkit-text-fill-color:inherit;background:none;color:inherit}

  /* убранные подзаголовки */
  .dips .dip-head > .lede{display:none}
  .life .life-head > .lede{display:none}
  .why .why-head > .eyebrow{display:none}
  .book .book-grid > div > h2{display:none}

  .dips .dip-head{margin-bottom:26px}
  .life .life-head{margin-bottom:24px}
  .why .why-head{margin-bottom:20px}
  .why .why-sub{margin-left:auto;margin-right:auto;text-align:center}
  .book .book-grid > div > .eyebrow{margin-bottom:14px}

  /* подписи каруселей — ближе к своему блоку */
  .cf-title{margin-bottom:6px}
  .dip-duo > div + div{margin-top:26px}

  /* ── «10 причин»: отступы 1:1 с регалиями ──────────────────────────────
     линии от края до края, цифра и «плюс» отбиты внутрь на --regin */
  .why .why-col{--regin:14px;border-top:none}
  .why .why-col .rl-head{gap:0;padding:15px var(--regin) 17px}
  .why .why-col .rl-head .y{min-width:0;margin-right:15px}
  .why .why-col .rl-more{padding-left:calc(var(--regin) + 40px);padding-right:var(--regin)}
  .why .why-col .rl-more p{margin-left:0}
  /* вторая колонка начиналась со своей верхней границы — под 5-м пунктом
     получалась двойная линия */
  .why-grid .why-col + .why-col{border-top:none}

  /* запись на занятие — та же сетка полей, что и у остальных секций */
  .book .book-grid{gap:26px}
  .book .book-grid > div > p{margin-left:0;margin-right:0}
}


/* ── v176 ─────────────────────────────────────────────────────────────────
   ПРИЧИНА пропавших боковых отступов: у секций стоит `padding:120px 0`
   (шорткат!), и он затирает горизонтальный padding, заданный на `.wrap`.
   Возвращаем его явно — правило в конце файла, поэтому выигрывает. */
@media(max-width:760px){
  .dips,.life,.why,.book,.place{padding-left:26px;padding-right:26px}
  /* блок записи просил поменьше полей, чем секции с текстом */
  .book{padding-left:16px;padding-right:16px}

  /* разделители секций: та же линия, что перед блоком Дориэля.
     .flip — зеркальная (загиб краёв вверх), закрывает блок снизу. */
  .sec-sep.glow{background:linear-gradient(180deg,rgba(241,226,194,.16),rgba(246,234,210,0))}
  .sec-sep.flip{border-top:none;border-bottom:1px solid rgba(184,134,47,.45);
    border-radius:0 0 19px 19px}
  .sec-sep.flip.glow{background:linear-gradient(0deg,rgba(241,226,194,.16),rgba(246,234,210,0))}
  /* воздух вокруг: не прилипать к струнам сверху и к заголовку снизу */
  .sec-sep{margin-top:52px}
  /* закрывающая линия дипломов — на том же расстоянии от стрелок карусели,
     что и заголовок «Наша жизнь» под ней */
  .sec-sep.flip{margin-top:26px}
  .dips{padding-top:30px;padding-bottom:0}
  .life{padding-top:30px}
  .why{padding-top:30px}

  /* ── «10 причин»: линии во всю ширину, содержимое отбито как в регалиях ──
     Секции вернули горизонтальный padding (26px), и границы у li оказались
     обрезаны по нему. Рисуем их псевдоэлементами с выносом до края экрана —
     тот же приём, что в .reg-inline. */
  .why .why-col{border-top:none}
  .why .why-col li{position:relative;border-bottom:none}
  .why .why-col li::after{content:"";position:absolute;bottom:0;height:1px;
    left:calc(50% - 50vw);right:calc(50% - 50vw);
    background:var(--hair);pointer-events:none}

  /* сноска под «10 причин» */
  .why-note{padding-left:2px;padding-right:2px;text-align:left}

  /* запись на занятие */
  .book .book-grid > div > .eyebrow{display:block;text-align:center;width:100%}
  .book .booker,.book .booker-panel{max-width:100%}
  .book p{max-width:none}
}

/* v176 — подвал: линия под картой и подпись автора */
.foot-rule{height:1px;width:auto;background:var(--grad-gold);background-size:220% 100%;
  animation:sheen 9s linear infinite;opacity:.55;
  margin:0 calc(50% - 50vw) 26px}
.foot-sign{margin-top:22px;text-align:center;font-size:12.5px;color:var(--ink-faint);
  letter-spacing:.04em}
.foot-sign a{color:var(--gold-deep);text-decoration:none;border-bottom:1px solid rgba(184,134,47,.4)}
.foot-sign a:hover{color:var(--gold)}
@media(max-width:760px){
  .foot-rule{margin-bottom:20px}
  .foot-sign{margin-top:18px}
}

/* ── v178 ─────────────────────────────────────────────────────────────── */
@media(max-width:760px){
  /* линия перед «10 причин» — чуть ниже (только она, остальные не трогаем) */
  .sec-sep:has(+ .why){margin-top:64px}

  /* список «10 причин»: отступ от края экрана вдвое меньше (40 → 20px).
     Секции нужен свой padding 26px под заголовок, поэтому вытягиваем
     наружу сам список, а не меняем padding секции. */
  .why .why-col{margin-left:-6px;margin-right:-6px}
  .why .why-col .rl-head{padding-left:0;padding-right:0}
  .why .why-col .rl-more{padding-left:40px;padding-right:0}

  /* первый шаг записи: единственная кнопка — по центру
     (в .bnav space-between с пустым <span> прижимал её вправо) */
  .booker .bnav{justify-content:center}
  .booker .bnav > span:empty{display:none}
}


/* ── v179: подвал — единый ритм строк, подпись отдельным блоком ────────── */
/* v182: единый шаг между ВСЕМИ строками подвала и выравнивание по левому краю.
   Баг v181: у .names стоит `display:flex;gap:30px` (строки 1018) — на мобиле
   имена переносились и получали 30px gap, поверх которых ложился мой
   margin-top:14px. Итого 44px против 14px у остальных строк. */
.foot{--foot-step:14px}
.foot .foot-row{display:block}
.foot .names{display:flex;flex-direction:column;gap:var(--foot-step)}
.foot .names div + div{margin-top:0}
.foot .names div,.foot .meta a,.foot .meta span{line-height:1.45}
.foot .meta{display:flex;flex-wrap:wrap;align-items:baseline;
  gap:var(--foot-step) 22px;margin-top:var(--foot-step)}
.foot .meta span{flex-basis:100%}
.foot-sign{margin-top:42px;text-align:left}
@media(max-width:760px){
  .foot{padding-bottom:34px}
}


/* ── v180: мобильное меню-клавиатура ──────────────────────────────────────
   Шеврон повёрнут на 45°, поэтому «вправо на экране» в его локальных осях —
   это (a, -a). translate(x,x) дал бы вертикальную волну. */
@keyframes chevH{0%,100%{opacity:.25;transform:rotate(45deg) translate(-1.6px,1.6px)}
  50%{opacity:1;transform:rotate(45deg) translate(1.6px,-1.6px)}}

.burger{display:none}
.kmenu,.kscrim{display:none}

@media(max-width:760px){
  /* кабинет уезжает в меню; кнопка остаётся в DOM — на неё кликает menu.js,
     чтобы не дублировать логику модалки входа */
  .cab-link{display:none}

  .burger{position:relative;display:grid;place-items:center;width:44px;height:44px;
    border:none;background:none;cursor:pointer;z-index:95;padding:0}
  /* Иконка — CSS-маска из /static/img/menu-icon.svg поверх --grad-gold.
     Так перелив идёт ТОЙ ЖЕ анимацией sheen, что у заголовков и имён;
     SMIL-градиент внутри SVG (v180) шёл рывками и не совпадал по фазе. */
  .burger .ic-mask{display:block;width:27px;height:27px;
    background:var(--grad-gold);background-size:220% 100%;background-position:0 0;
    animation:sheen 9s linear infinite;
    -webkit-mask:url("/static/img/menu-icon.svg") no-repeat center/contain;
    mask:url("/static/img/menu-icon.svg") no-repeat center/contain}
  .burger .chevs{display:none;gap:2px}
  .burger .chevs i{width:8px;height:8px;border-top:2px solid var(--gold);
    border-right:2px solid var(--gold);transform:rotate(45deg);
    animation:chevH 1.6s ease-in-out infinite}
  .burger .chevs i:nth-child(2){animation-delay:.18s}
  .burger .chevs i:nth-child(3){animation-delay:.36s}
  body.kmenu-open .burger .ic-mask{display:none}
  body.kmenu-open .burger .chevs{display:flex}
  /* шапка остаётся над панелью и подложкой — кнопки должны работать */
  body.kmenu-open #hdr{z-index:96}
  body.kmenu-open #hdr .bar{position:relative;z-index:1}

  .kscrim{display:block;position:fixed;inset:0;z-index:70;
    background:rgba(26,24,20,.16);
    backdrop-filter:blur(7px) saturate(.92);-webkit-backdrop-filter:blur(7px) saturate(.92);
    opacity:0;pointer-events:none;transition:opacity .42s}
  body.kmenu-open .kscrim{opacity:1;pointer-events:auto}

  .kmenu{display:block;position:fixed;top:0;right:0;bottom:0;z-index:80;width:75%;
    padding:64px 0 14px;transform:translateX(101%);
    transition:transform .5s cubic-bezier(.16,1,.3,1);will-change:transform}
  body.kmenu-open .kmenu{transform:translateX(0)}
  .kmenu-keys{position:relative;height:100%}

  .kmenu .wkey{position:absolute;left:0;right:0;display:flex;align-items:center;
    justify-content:flex-start;text-align:left;padding:0 0 0 20px;cursor:pointer;border:1px solid var(--hair);border-right:none;
    border-radius:13px 0 0 13px;
    background:linear-gradient(90deg,#FBF7EE 0%,#FBF7EE 55%,#F3EDE0 100%);
    box-shadow:0 3px 9px -6px rgba(140,100,31,.5);
    transition:transform .16s cubic-bezier(.22,1,.36,1),background .28s,box-shadow .16s;
    transform-origin:right center}
  .kmenu .wkey .lbl{font-family:var(--display);font-weight:400;text-transform:uppercase;
    font-size:clamp(15px,4.1vw,18px);letter-spacing:.05em;line-height:1.16;
    display:block;max-width:calc(100% - 34px);text-align:left;
    background:var(--grad-gold);background-size:220% 100%;background-position:0 0;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    color:transparent;animation:sheen 9s linear infinite}
  .kmenu .wkey.down{transform:scaleX(.972) translateX(5px);
    background:linear-gradient(90deg,#FDF3DC 0%,#F7E7C2 70%,#EFDCAE 100%);
    box-shadow:0 2px 6px -5px rgba(140,100,31,.8)}
  .kmenu .wkey.is-lk{background:linear-gradient(90deg,#FBF3DE 0%,#F7ECD2 60%,#F0E0B8 100%);
    border-color:var(--gold-mid)}

  .kmenu .bkey{position:absolute;right:0;width:51.1%;border-radius:8px 0 0 8px;
    background:linear-gradient(90deg,#3B372C,#2A2721);cursor:pointer;border:none;
    box-shadow:0 6px 14px -10px rgba(0,0,0,.85);z-index:3;padding:0;
    transition:background .16s,transform .16s}
  .kmenu .bkey.down{background:linear-gradient(90deg,#C9A24B,#8A6520);transform:translateX(4px)}
}

/* ── v182 ─────────────────────────────────────────────────────────────── */

/* десктоп: интерактив Ольги приподнят над нижним краем, зазоры выровнены
   (заголовок sticky 96→88, карточка 36vh→30vh, клавиатура bottom 0→28px) */
@media(min-width:761px){
  .kbzone .heading{top:88px}
  .kb-stage{top:30vh}
  .kb-dock{bottom:28px}
  .kb-dock::before{height:96px}
}

/* мобилка: панель записи — матовое стекло, как карточка над клавиатурой Ольги */
@media(max-width:760px){
  .book .booker-panel{
    background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,252,245,.62));
    backdrop-filter:blur(8px) saturate(1.1);-webkit-backdrop-filter:blur(8px) saturate(1.1);
    border:1px solid rgba(184,134,47,.55);border-radius:18px;
    box-shadow:0 18px 50px -30px rgba(140,100,31,.4),inset 0 1px 0 rgba(255,255,255,.7)}
}

/* ── v183: десктоп — разделители, шапка блока струн, градиент у бегущей строки ── */
@media(min-width:761px){
  /* «Интерактив» на десктопе не показываем — поле остаётся редактируемым,
     просто скрыто (текст лежит в БД, из шаблона его убирать нельзя) */
  .guitar-sec .gtext > .eyebrow{display:none}
  .guitar-sec .gtext > h2{margin-top:0}
  /* старый разделитель секции больше не нужен — его роль играет .sec-sep */
  .guitar-sec .gseam{display:none}

  /* тот же приём, что на мобиле: border-top + радиус на полноширинном блоке,
     видна только верхняя дуга. .flip — зеркально, закрывает блок снизу. */
  .sec-sep{display:block;height:22px;width:auto;
    margin:56px calc(50% - 50vw) 0;
    border-top:1px solid rgba(184,134,47,.45);border-radius:22px 22px 0 0;
    background:none}
  .sec-sep.glow{background:linear-gradient(180deg,rgba(241,226,194,.14),rgba(246,234,210,0))}
  .sec-sep.flip{border-top:none;border-bottom:1px solid rgba(184,134,47,.45);
    border-radius:0 0 22px 22px;margin-top:26px}
  .sec-sep.flip.glow{background:linear-gradient(0deg,rgba(241,226,194,.14),rgba(246,234,210,0))}
  /* без лишнего воздуха: секция после линии начинается сразу */
  .sec-sep + .intro,.sec-sep + .dips,.sec-sep + .why,
  .sec-sep + .place,.sec-sep + .life,.sec-sep + .book{padding-top:26px}
  .dips{padding-bottom:0}

  /* Бегущая строка. У .ticker стоит overflow:hidden (нужен для marquee),
     поэтому псевдоэлементы за его границами обрезались — градиенты вешаем
     на обёртку .ticker-wrap. */
  .ticker-wrap{position:relative}
  .ticker-wrap::before,.ticker-wrap::after{content:"";position:absolute;left:0;right:0;
    height:64px;pointer-events:none;z-index:2}
  .ticker-wrap::before{bottom:100%;
    background:linear-gradient(0deg,rgba(241,226,194,.34),rgba(246,234,210,0))}
  .ticker-wrap::after{top:100%;
    background:linear-gradient(180deg,rgba(241,226,194,.34),rgba(246,234,210,0))}
}


/* ── v184: десктоп ───────────────────────────────────────────────────────── */
@media(min-width:761px){
  /* золотой ореол под линией у блока Дориэля — раньше был только на мобиле */
  #doriel.intro{position:relative}
  #doriel.intro::before{content:"";position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);top:-22px;height:230px;
    pointer-events:none;z-index:0;
    background:linear-gradient(180deg,rgba(241,226,194,.16) 0%,rgba(246,234,210,.07) 45%,rgba(246,234,210,0) 100%)}
  #doriel.intro > *{position:relative;z-index:1}

  /* блок струн: заголовок в одну строку и компактнее до аккордеона/струн */
  .guitar-sec .gtext > h2{font-size:clamp(30px,3.4vw,44px);line-height:1.1;
    max-width:none;white-space:nowrap}
  .guitar-sec{padding-top:22px}
  .guitar-sec .gtext{margin-bottom:14px}
  .guitar-sec .gcue-top{margin-top:10px;margin-bottom:10px}

  /* имена педагогов — крупнее и с переливом, как на мобиле */
  .intro .eyebrow{font-size:18px}
  .intro h2{font-size:clamp(30px,3.4vw,44px)}
  .intro .pcol + div > .eyebrow{
    background:var(--grad-gold);background-size:220% 100%;background-position:0 0;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    color:transparent;animation:sheen 9s linear infinite}
  .intro .pcol + div > .eyebrow::before{background:var(--grad-gold);background-size:220% 100%;
    animation:sheen 9s linear infinite}

  /* заголовки секций — как на мобиле: крупный золотой, лишняя строка убрана */
  .dips .dip-head,.life .life-head{text-align:center}
  .dips .dip-head > .lede{display:none}
  .life .life-head > .lede{display:none}
  .why .why-head > .eyebrow{display:none}
  .dips .dip-head > .eyebrow,
  .life .life-head > .eyebrow{
    display:inline-block;font-family:var(--display);font-weight:400;
    text-transform:uppercase;font-size:clamp(21px,2.4vw,32px);
    letter-spacing:.04em;line-height:1.12;color:transparent;
    background:var(--grad-gold);background-size:220% 100%;background-position:0 0;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    animation:sheen 9s linear infinite}
  .dips .dip-head > .eyebrow::before,
  .life .life-head > .eyebrow::before{display:none}
}

/* ── v186: десктоп — типографика, отступы записи, подвал ─────────────────── */
@media(min-width:761px){
  /* 5. «10 причин…» — в один размер с заголовком блока струн */
  .why .why-head > .lede{font-size:clamp(30px,3.4vw,44px)}

  /* 6. запись: колонки стартуют с одной линии, секция центрируется
     между разделительными линиями (был прижат к верхней) */
  .book .book-grid{align-items:start}
  .sec-sep + .book{padding-top:96px}
  .book{padding-bottom:96px}

  /* 7. подвал: имена слева, служебные ссылки и подпись — справа */
  .foot .foot-row{display:flex;justify-content:space-between;align-items:flex-start;gap:48px}
  .foot .names{gap:10px}
  .foot .meta{flex-direction:column;align-items:flex-end;text-align:right;
    gap:10px;margin-top:0}
  .foot .meta span{flex-basis:auto}
  .foot .meta a[href="#book"]{display:none}
  .foot-sign{margin-top:10px;text-align:right}
}





/* ── v189: мобилка — ритм S/L, точечный фикс двойных зазоров ───────────────
   Модель зазора между секциями:
   • со РАЗДЕЛИТЕЛЕМ (.sec-sep): пользователь мерит «линия → заголовок» =
     padding-top нижней секции. Его и задаём. Верхний зазор (контент→линия =
     padding-bottom верхней + margin-top линии) НЕ трогаем — он ок на скринах.
   • БЕЗ разделителя (Дориэль → guitar-sec идут подряд): складывались
     padding-bottom Дориэля (64) + padding-top гитары → удвоение. Тут
     обнуляем низ Дориэля и задаём padding-top гитары = L.                 */
@media(max-width:760px){
  /* Дориэль → «Уроки классической гитары» = L (разделителя НЕТ) */
  #doriel.intro{padding-bottom:0}
  .guitar-sec{padding-top:var(--gap-l);padding-bottom:0;margin-top:0}
  .guitar-sec .gtext{margin-top:0;margin-bottom:0}
  .guitar-sec .gtext > h2{margin-top:0}

  /* линия → «Дипломы и награды» = S */
  .dips{padding-top:var(--gap-s);padding-bottom:0}
  /* Дипломы: заголовок → «Наши дипломы» = 40px, «Наши дипломы» → фото = S */
  /* заголовок→«Наши дипломы» и «Наши дипломы»→фото заданы в v190 через #dips (S) */

  /* линия → «Наша жизнь» = L */
  .life{padding-top:var(--gap-l);padding-bottom:0}
  .life .life-head{margin-bottom:var(--gap-s)}

  /* линия → «10 причин» = S; текст → аккордеон = S; низ (пункт→сноска, сноска→линия) = S */
  .why{padding-top:var(--gap-s);padding-bottom:var(--gap-s)}
  .why .why-head{margin-bottom:0}
  .why .why-grid{margin-top:var(--gap-s)}
  .why .why-note{margin-top:var(--gap-s)}
  .why .why-col:first-child li:first-child::before{content:"";position:absolute;
    top:0;height:1px;left:calc(50% - 50vw);right:calc(50% - 50vw);
    background:var(--hair);pointer-events:none}

  /* линия → «Запись на занятия» = L */
  .book{padding-top:var(--gap-l);padding-bottom:0}
  /* Запись (скрин 2): заголовок → текст = S, текст → «Это займёт» = S,
     «Это займёт» → модалка = S */
  .book .book-grid{display:flex;flex-direction:column}
  .book .book-grid > div:first-child{display:contents}
  .book .book-grid > div > .eyebrow{display:block;text-align:center;width:100%;
    margin-bottom:var(--gap-s)}
  .book .book-grid > div > h2{margin-top:0;margin-bottom:var(--gap-s)}
  .book .book-grid > div > p{margin-top:0;margin-bottom:0}
  .book .book-quick{margin-top:var(--gap-s)}
  .book .book-grid > div:last-child{order:8;width:100%;margin-top:var(--gap-s)}
  /* модалка → «Либо свяжитесь» = S, по центру экрана */
  .book .book-alt{order:9;margin-top:var(--gap-s);margin-bottom:0;
    text-align:center;align-self:center;max-width:100%;margin-left:0;margin-right:0}

  /* «Либо свяжитесь» → линия подвала = L; линия → «Контакты» = S */
  .footzone{margin-top:var(--gap-l)}
  .footzone .contacts{padding-top:var(--gap-s)}
}


/* ── v190: мобилка — точная доводка S/L через id (перебивает весь каскад) ──
   Причины остаточных багов v189:
   • .cf-nav (фото→стрелки карусели) = 22px и .dip-duo gap (между каруселями)
     = 48px я не трогал;
   • часть правок перебивалась .class-правилами той же специфичности.
   Здесь задаём через #id (спец. 1-x-x) — выигрывает гарантированно.
   Решение по дипломам обновлено: заголовок→«Наши дипломы» теперь S (не 40). */
@media(max-width:760px){
  /* ДИПЛОМЫ (скрины 3,1) */
  #dips{padding-top:var(--gap-s)}                 /* линия → «Дипломы и награды» = S */
  #dips .dip-head{margin-bottom:var(--gap-s)}     /* заголовок → «Наши дипломы» = S */
  #dips .cf-title{margin-top:0;margin-bottom:var(--gap-s)} /* «Наши дипломы» → фото = S */
  #dips .cf-nav{margin-top:var(--gap-s)}          /* фото → стрелки = S */
  #dips .dip-duo{gap:var(--gap-l)}                /* стрелки 1-й → заголовок 2-й = L */

  /* 10 ПРИЧИН (скрины 4,2) */
  #reasons{padding-top:var(--gap-s);padding-bottom:var(--gap-s)} /* линия→заголовок=S; сноска→линия=S */

  /* ЗАПИСЬ (скрин 2): заголовок(eyebrow)→текст = S; «Это займёт»→модалка = S.
     h2 на мобиле скрыт, реальный заголовок — .eyebrow. */
  #book .book-grid > div > .eyebrow{margin-bottom:var(--gap-s)}
  #book .book-grid > div:last-child{margin-top:var(--gap-s)}
}


/* ── v191: мобилка — компенсация «тела дуги» и пустоты coverflow ───────────
   ГЛАВНЫЙ баг v189/190: разделитель .sec-sep — дуга height:20px; видимая
   золотая линия на её ВЕРХУ (border-top), а 20px тела с glow висят НИЖЕ линии
   и складывались с padding-top секции. Итого «линия→заголовок» = 20 + 30 = 50
   вместо S. В v188 padding-top был 0 → зазор = только тело (~выглядел как S).
   Фикс: у обычных (не flip) дуг убираем вклад тела отрицательным margin-bottom,
   тогда «линия→заголовок» = ровно padding-top секции (#dips/#reasons = S).

   Дипломы: карточка в .cf-stage центрирована по вертикали, сверху/снизу ~30px
   пустоты → «Наши дипломы»→фото и фото→стрелки получали +30. Убираем пустоту,
   выравнивая высоту .cf-stage к высоте карточки. */
@media(max-width:760px){
  /* тело обычной дуги (перед dips и why) больше не занимает вертикаль */
  .sec-sep.glow:not(.flip){margin-bottom:-20px}

  /* coverflow: высота сцены = высоте карточки, вертикальная пустота убрана */
  #dips .cf-stage{height:clamp(253px,28vw,373px)}
}


/* ── v192: мобилка — ручная попиксельная подгонка зазоров по скринам ───────
   Общие S/L дают близкий результат, но из-за множества слоёв кое-где мимо.
   Здесь фиксируем итоговые px точечно (через #id — перебивает всё). */
@media(max-width:760px){
  /* ДИПЛОМЫ (скрин 1) */
  #dips{padding-top:40px}              /* линия→«Дипломы и награды»  30 +10 */
  #dips .cf-nav{margin-top:35px}       /* фото→стрелки               30 +5  */
  #dips .dip-duo{gap:35px}             /* стрелки→«Дипломы учеников» 60 −25 */

  /* 10 ПРИЧИН (скрины 2,3) */
  #reasons{padding-bottom:0}           /* сноска→линия               30 −30 */
  #reasons .why-sub{margin-top:17px}   /* «10 причин»→текст          12 +5  */

  /* ЗАПИСЬ (скрин 2) */
  #book .book-grid > div > .eyebrow{margin-bottom:5px}   /* «Запись»→текст      30 −25 */
  #book .book-quick{margin-top:25px}                     /* текст→«Это займёт»  30 −5  */
  #book .book-grid > div:last-child{margin-top:10px}     /* «Это займёт»→модалка 30 −20 */
}


/* ── v193: мобилка — довод записи (учёт gap:26px у .book-grid) ─────────────
   .book .book-grid на мобиле flex-column с унаследованным gap:26px (стр.1892),
   который складывается с margin-top элементов. Подгонка от текущего вида: −N
   применяем к самим margin, gap оставляем (пользователь мерил вместе с ним). */
@media(max-width:760px){
  #book .book-quick{margin-top:-5px}                  /* текст→«Это займёт»   −30 */
  #book .book-grid > div:last-child{margin-top:5px}   /* «Это займёт»→модалка −5  */
  #book .book-alt{margin-top:10px}                    /* модалка→«Либо…»      −20 */
}


/* ── v194: десктоп — доводка отступов (10 причин, наша жизнь, подвал) ──────
   Все правила для min-width:761px. */
@media(min-width:761px){
  /* 1. «Наша жизнь» линия→заголовок = как в «10 причин».
     Перед .life стоит flip-дуга (тело выше линии, не добавляется), перед .why
     обычная (тело +22px ниже линии). Оба padding-top:26 → why=48, life=26.
     Выравниваем life к 48 (26 + 22 «тела» обычной дуги). */
  #life{padding-top:48px}

  /* 2. низ «10 причин» — вдвое меньше поля (padding-bottom 104 → 52) */
  #reasons{padding-bottom:52px}

  /* 3. подвал: верх карты и заголовок «Контакты» на одной линии
     (было align-items:center — блоки центрировались по вертикали) */
  .ct-grid{align-items:start}
}


/* ── v195: редактор бегущей строки — кнопка, модалка, пикер значка ─────────── */
.ticker-wrap{position:relative}
/* кнопка появляется только в edit-mode (JS снимает hidden) */
.ticker-edit{position:absolute;top:6px;right:12px;z-index:6;display:none;align-items:center;gap:6px;
  font-family:var(--body);font-size:12px;letter-spacing:.03em;color:var(--gold-deep);
  background:rgba(255,251,240,.94);border:1px solid var(--gold-mid);border-radius:40px;
  padding:6px 14px;cursor:pointer;transition:background .2s,box-shadow .2s}
body.edit-mode .ticker-edit{display:inline-flex}
.ticker-edit:hover{background:#fff;box-shadow:var(--btn-lift)}

/* оверлей + диалог */
.tk-modal{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;
  padding:8vh 16px 16px;background:rgba(26,24,20,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.tk-modal.open{display:flex}
.tk-dialog{width:100%;max-width:560px;max-height:84vh;display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--hair-2);border-radius:18px;overflow:hidden;
  box-shadow:0 40px 90px -40px rgba(26,24,20,.6)}
.tk-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;
  border-bottom:1px solid var(--hair)}
.tk-head h3{font-family:var(--display);font-weight:400;font-size:21px;color:var(--ink)}
.tk-close{width:34px;height:34px;border-radius:50%;border:1px solid var(--hair-2);background:var(--white);
  font-size:20px;line-height:1;color:var(--ink-soft);cursor:pointer;transition:.2s}
.tk-close:hover{border-color:var(--gold-mid);color:var(--gold)}
.tk-list{overflow-y:auto;padding:14px 18px;display:flex;flex-direction:column;gap:10px}
.tk-row{display:flex;align-items:center;gap:8px}
.tk-drag{color:var(--ink-faint);font-size:14px;user-select:none;letter-spacing:-2px}
.tk-text{flex:1;min-width:0;font-family:var(--body);font-size:15px;color:var(--ink);
  border:1px solid var(--hair-2);border-radius:9px;padding:10px 12px;background:var(--white);
  transition:border-color .25s,box-shadow .25s}
.tk-text:focus{outline:none;border-color:var(--gold-mid);box-shadow:0 0 0 3px rgba(184,134,47,.12)}
.tk-icon-btn,.tk-up,.tk-down,.tk-del{width:36px;height:36px;flex:none;border-radius:9px;
  border:1px solid var(--hair-2);background:var(--white);cursor:pointer;color:var(--ink-soft);
  display:inline-flex;align-items:center;justify-content:center;font-size:15px;transition:.2s}
.tk-icon-btn{font-size:18px}
.tk-icon-btn .ti-icon{width:20px;height:20px}
.tk-up:hover,.tk-down:hover,.tk-icon-btn:hover{border-color:var(--gold-mid);color:var(--gold)}
.tk-del:hover{border-color:var(--string-red);color:var(--string-red)}
.tk-foot{padding:14px 18px;border-top:1px solid var(--hair);display:flex;gap:10px;align-items:center}
.tk-add{flex:1;font-family:var(--body);font-size:14px;color:var(--gold-deep);
  border:1px dashed var(--gold-mid);border-radius:10px;padding:12px;background:rgba(255,251,240,.5);
  cursor:pointer;transition:.2s}
.tk-add:hover{background:rgba(255,251,240,.9);box-shadow:var(--btn-lift)}
.tk-save{flex:none;font-family:var(--body);font-size:14px;font-weight:600;color:#fff;
  border:1px solid var(--gold-deep);border-radius:10px;padding:12px 22px;cursor:pointer;
  background:var(--grad-gold);background-size:220% 100%;animation:sheen 9s linear infinite;
  transition:box-shadow .2s,opacity .2s}
.tk-save:hover{box-shadow:var(--btn-lift)}
.tk-save:disabled{opacity:.6;cursor:default;animation:none}

/* пикер значка — плавающая сетка кнопок */
.tk-picker{position:fixed;z-index:210;display:grid;grid-template-columns:repeat(4,40px);gap:6px;
  padding:10px;background:var(--paper);border:1px solid var(--hair-2);border-radius:14px;
  box-shadow:0 24px 60px -28px rgba(26,24,20,.5)}
.tk-picker[hidden]{display:none}
.tk-pick{width:40px;height:40px;border-radius:9px;border:1px solid var(--hair-2);background:var(--white);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:.2s}
.tk-pick .ti-icon{width:22px;height:22px}
.tk-pick:hover{border-color:var(--gold-mid);transform:translateY(-2px);box-shadow:var(--btn-lift)}
.tk-pick.on{border-color:var(--gold-mid);background:#FFFBF1}


/* ── v201: редактор звуков — кнопки у инструментов + модалка ──────────────── */
.snd-edit{position:absolute;z-index:7;display:none;align-items:center;gap:6px;
  font-family:var(--body);font-size:12px;letter-spacing:.03em;color:var(--gold-deep);
  background:rgba(255,251,240,.94);border:1px solid var(--gold-mid);border-radius:40px;
  padding:7px 15px;cursor:pointer;transition:background .2s,box-shadow .2s}
body.edit-mode .snd-edit{display:inline-flex}
.snd-edit:hover{background:#fff;box-shadow:var(--btn-lift)}
/* позиционирование у каждого инструмента */
#hero .snd-edit{top:170px;right:24px;z-index:8}
body.edit-mode #hero .snd-edit{display:inline-flex}
/* кнопки в списках правки (edit-list виден только в edit-mode) — заметный блок */
.el-snd{display:flex;width:fit-content;margin:18px auto 4px;position:static}
.edit-list .el-snd{display:flex}

/* модалка звуков — фикс. размер, скролл строк */
.snd-dialog{max-width:600px;height:80vh;max-height:80vh}
.snd-list{flex:1;overflow-y:auto;padding:12px 18px;display:flex;flex-direction:column;gap:2px}
.snd-row{display:flex;align-items:center;gap:10px;padding:9px 8px;border-bottom:1px solid var(--hair)}
.snd-name{flex:none;width:130px;font-family:var(--body);font-size:14px;color:var(--ink)}
.snd-status{flex:1;font-size:12.5px;letter-spacing:.02em}
.snd-status.gen{color:var(--ink-faint);font-style:italic}
.snd-status.has{color:var(--gold-deep)}
.snd-status.off{color:var(--string-red)}
.snd-actions{flex:none;display:inline-flex;gap:6px}
.snd-actions button{font-family:var(--body);font-size:12px;border-radius:8px;padding:6px 10px;
  border:1px solid var(--hair-2);background:var(--white);color:var(--ink-soft);cursor:pointer;transition:.2s}
.snd-up:hover{border-color:var(--gold-mid);color:var(--gold)}
.snd-del:hover:not([disabled]){border-color:var(--string-red);color:var(--string-red)}
.snd-del[disabled]{opacity:.4;cursor:default}
.snd-tgl.on{border-color:var(--gold-mid);color:var(--gold-deep)}
.snd-tgl:not(.on){background:#F6EFE6;color:var(--ink-faint)}
.snd-group{padding:6px 0}
.snd-gtitle{font-family:var(--display);font-size:15px;color:var(--ink);margin:8px 8px 4px;
  padding-top:8px;border-top:1px solid var(--hair-2)}
.snd-group:first-child .snd-gtitle{border-top:none;padding-top:0}
.snd-group .snd-row{border-bottom:none;padding:5px 8px}
.snd-group .snd-name{width:150px;color:var(--ink-soft);font-size:13px}
.snd-foot{justify-content:center}
.snd-hint{font-size:12px;color:var(--ink-faint)}
@media(max-width:760px){
  .snd-name{width:96px;font-size:13px}
  .snd-actions button{padding:6px 8px;font-size:11px}
  .snd-dialog{height:86vh;max-height:86vh}
}


/* ── v208: политика конфиденциальности — типографика + плашка загрузки ────── */
.privacy-page .pp-body{color:var(--ink);line-height:1.7}
.pp-body h1{font-family:var(--display);font-weight:300;font-size:clamp(30px,4vw,50px);
  line-height:1.1;margin:8px 0 6px;color:transparent;
  background:var(--grad-gold);background-size:220% 100%;background-position:0 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:sheen 9s linear infinite}
.pp-body .pp-sub{color:var(--ink-faint);font-size:14px;letter-spacing:.02em;margin:0 0 30px}
.pp-body h2{font-family:var(--display);font-weight:400;font-size:clamp(19px,2.2vw,26px);
  margin:34px 0 12px;color:var(--gold-deep)}
.pp-body p{margin:0 0 15px;color:var(--ink-soft);font-size:16px}
.pp-body ul{margin:0 0 15px;padding-left:22px}
.pp-body li{margin:6px 0;color:var(--ink-soft);font-size:16px}
.pp-body strong{color:var(--ink);font-weight:600}

.pp-editbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:34px;
  padding:16px 18px;border:1px dashed var(--gold-mid);border-radius:14px;background:rgba(255,251,240,.6)}
.pp-editbar-txt{flex:1;min-width:220px;font-size:13px;color:var(--ink-soft);line-height:1.5}
.pp-upload{flex:none;font-family:var(--body);font-size:13.5px;font-weight:600;color:var(--gold-deep);
  background:var(--gold-lt);border:1px dashed var(--gold-mid);border-radius:10px;padding:11px 20px;
  cursor:pointer;transition:.2s}
.pp-upload:hover{box-shadow:var(--btn-lift)}
.pp-upload:disabled{opacity:.6;cursor:default}
.pp-status{flex-basis:100%;font-size:12.5px;color:var(--ink-faint)}
.pp-status.ok{color:var(--gold-deep)}
.pp-status.err{color:var(--string-red)}

/* ═══ Бэкап / восстановление (v210) ══════════════════════════════════════ */
.kzbk-ov{position:fixed;inset:0;z-index:3000;display:none;align-items:flex-start;justify-content:center;
  background:rgba(26,24,20,.5);opacity:0;transition:opacity .2s;padding:20px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.kzbk-ov.show{display:flex;opacity:1}
.kzbk{position:relative;background:linear-gradient(180deg,var(--white),var(--pearl));border:1px solid var(--hair-2);
  border-radius:20px;box-shadow:var(--shadow-soft);max-width:460px;width:100%;padding:28px 28px 24px;margin:6vh auto;
  transform:translateY(12px) scale(.97);transition:transform .22s cubic-bezier(.2,.75,.25,1)}
.kzbk-ov.show .kzbk{transform:none}
.kzbk-x{position:absolute;top:14px;right:16px;width:34px;height:34px;border:0;background:transparent;cursor:pointer;
  font-size:26px;line-height:1;color:var(--ink-faint);border-radius:50%;transition:background .2s,color .2s}
.kzbk-x:hover{background:var(--pearl-2);color:var(--ink)}
.kzbk-title{font-family:var(--display);font-weight:400;font-size:27px;color:var(--ink);letter-spacing:-.01em;margin:0 0 4px}
.kzbk-sub{font-size:13.5px;color:var(--ink-soft);line-height:1.5;margin:0 0 6px}
.kzbk-sec{border:1px solid var(--hair);border-radius:14px;padding:16px;margin-top:14px;background:rgba(255,255,255,.5)}
.kzbk-sec__head{display:flex;gap:12px;align-items:flex-start;margin-bottom:12px}
.kzbk-sec__ic{font-size:20px;line-height:1.2;color:var(--gold);flex:none}
.kzbk-sec__title{font-family:var(--display);font-size:19px;color:var(--ink)}
.kzbk-sec__hint{font-size:12.5px;color:var(--ink-soft);margin-top:2px;line-height:1.45}
.kzbk-btn{display:block;width:100%;text-align:center;padding:11px 18px;margin-top:10px;
  border:1.5px solid var(--gold-lt);border-radius:999px;background:transparent;color:var(--gold-deep);
  font-family:var(--body);font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;
  transition:background .2s,border-color .2s,transform .15s,opacity .2s}
.kzbk-btn:hover{background:var(--gold-pale);transform:translateY(-1px)}
.kzbk-btn:active{transform:scale(.99)}
.kzbk-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;background:transparent}
.kzbk-btn--primary{background:var(--gold);border-color:var(--gold);color:#1A1814}
.kzbk-btn--primary:hover{background:var(--gold-mid)}
.kzbk-btn--go{background:var(--gold);border-color:var(--gold);color:#1A1814}
.kzbk-btn--go:hover:not(:disabled){background:var(--gold-mid)}
.kzbk-btn--go:disabled{background:transparent;border-color:var(--hair-2);color:var(--ink-faint);opacity:1}
.kzbk-note{font-size:12.5px;color:var(--ink-soft);margin-top:10px;text-align:center;line-height:1.5}
.kzbk-note--ok{color:var(--gold-deep);font-weight:500}
.kzbk-prog{margin-top:12px}
.kzbk-prog__track{height:8px;background:var(--pearl-2);border:1px solid var(--hair-2);border-radius:100px;overflow:hidden}
.kzbk-prog__fill{height:100%;width:0;background:var(--grad-gold);background-size:220% 100%;transition:width .2s ease}
.kzbk-prog__label{font-size:12px;color:var(--ink-soft);margin-top:6px;text-align:center}
.kzbk-steps{list-style:none;margin:12px 0 0;padding:0}
.kzbk-step{font-size:13.5px;padding:4px 0}
.kzbk-step--ok{color:var(--gold-deep)}
.kzbk-step--fail{color:var(--string-red)}
.kzbk-preview{margin-top:12px;border:1px solid var(--hair-2);border-radius:12px;padding:12px 14px;background:var(--pearl)}
.kzbk-preview__title{font-size:11px;color:var(--ink-faint);margin-bottom:8px;text-transform:uppercase;letter-spacing:.09em}
.kzbk-preview__row{display:flex;justify-content:space-between;font-size:14px;padding:2px 0}
.kzbk-preview__row span{color:var(--ink-soft)}
.kzbk-preview__row b{color:var(--ink)}
.kzbk-preview__meta{font-size:12px;color:var(--ink-soft);margin-top:10px;padding-top:8px;border-top:1px solid var(--hair-2)}
.kzbk-preview__warn{font-size:12.5px;color:var(--gold-deep);margin-top:8px}
.kzbk-err{margin-top:12px;font-size:13.5px;color:var(--string-red);background:rgba(179,84,63,.07);
  border:1px solid rgba(179,84,63,.25);border-radius:12px;padding:10px 14px}
.kzbk-err ul{margin:6px 0 0;padding-left:18px}
@media(max-width:760px){
  .kzbk{padding:22px 20px 20px;margin:4vh auto;border-radius:16px}
  .kzbk-title{font-size:24px}
}

/* ═══════════ РАЗДЕЛ «СТОИМОСТЬ ЗАНЯТИЙ» (v230) ═══════════ */
.price-sec{margin:0 auto;padding:0}
.price{position:relative;border-radius:16px;overflow:hidden;
  background:linear-gradient(158deg,rgba(255,255,255,.72),rgba(246,244,239,.55) 40%,rgba(242,227,184,.30));
  border:1px solid rgba(184,134,47,.28);
  box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(10px) saturate(1.05);backdrop-filter:blur(10px) saturate(1.05)}
.price::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(184,134,47,.10) 0%,rgba(184,134,47,0) 34%)}
.price::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:16px 16px 0 0;pointer-events:none;
  background:var(--grad-gold);background-size:220% 100%;animation:sheen 9s linear infinite}
.price-in{position:relative;padding:38px 40px 34px}
.price-title{font-family:var(--display);font-weight:400;font-size:clamp(26px,3.4vw,38px);line-height:1.05;text-align:center;letter-spacing:-.01em;margin:0 0 4px;animation:sheen 9s linear infinite}
.price-sub{text-align:center;color:var(--ink-soft);font-size:14px;margin:0 auto 26px;max-width:56ch}

.pr-grid{display:grid;grid-template-columns:1.15fr .8fr 1.05fr 1.6fr;border-top:1px solid rgba(184,134,47,.22);border-bottom:1px solid rgba(184,134,47,.22)}
.pr-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--gold-deep);
  padding:14px 18px 12px;border-bottom:1px solid rgba(184,134,47,.22)}
.pr-h:not(:first-child),.pr-form,.pr-qty,.pr-price{border-left:1px solid rgba(184,134,47,.13)}
.pr-dir{grid-row:span 2;align-self:center;padding:20px 18px;
  font-family:var(--display);font-weight:400;font-size:21px;color:var(--ink);line-height:1.5}
.pr-form{grid-row:span 2;display:flex;align-items:center;justify-content:flex-start;padding:20px 18px}
.pr-form .badge{font-size:12.5px;letter-spacing:.03em;color:var(--gold-deep);border:1px solid rgba(184,134,47,.35);
  border-radius:999px;padding:6px 14px;background:rgba(255,255,255,.55)}
.pr-qty,.pr-price{padding:16px 18px;display:flex;align-items:center}
.pr-qty.top,.pr-price.top{border-bottom:1px solid rgba(184,134,47,.14)}
.split{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:14px;width:100%}
.split .slash{font-family:var(--display);font-weight:300;font-size:26px;color:var(--gold-mid);line-height:1;text-align:center;opacity:.8}
.pr-qty .half{font-weight:500;color:var(--ink);font-size:15px}
.pr-price .sum{font-family:var(--display);font-weight:400;font-size:22px;color:var(--ink);line-height:1;white-space:nowrap}
.pr-price .per{color:var(--ink-soft);font-size:12.5px;margin-top:5px}
.pr-price .per em{font-style:normal;color:var(--gold-deep)}
.pr-qty.bot .one{font-weight:500;color:var(--ink);font-size:15px}
.pr-qty.bot .one small{display:block;color:var(--ink-faint);font-weight:400;font-size:12px}
.price-note{margin-top:18px;text-align:center;color:var(--ink-soft);font-size:14.5px;line-height:1.7;max-width:66ch;margin-left:auto;margin-right:auto}
.price-note em{font-style:italic;color:var(--ink)}
.price-note b{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--gold);font-weight:600}

.pr-scroll-wrap{position:relative}
.pr-scrollcue{display:none;align-items:center;justify-content:center;gap:9px;
  position:absolute;left:0;right:0;bottom:0;padding:20px 0 9px;transition:opacity .25s linear;pointer-events:none;
  background:linear-gradient(180deg,rgba(250,249,246,0),rgba(250,249,246,.94) 60%)}
.pr-scrollcue .w{font-family:var(--display);font-style:italic;font-size:15px;color:var(--gold-deep);letter-spacing:.02em}
.pr-scrollcue .chev{width:9px;height:9px;border-right:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(-45deg);animation:chevX 1.4s ease-in-out infinite}
.pr-scrollcue .chev:nth-child(3){animation-delay:.16s}
.pr-scrollcue .chev:nth-child(4){animation-delay:.32s}
@keyframes chevX{0%,100%{opacity:.22;transform:rotate(-45deg) translate(-2.5px,-2.5px)}50%{opacity:1;transform:rotate(-45deg) translate(2.5px,2.5px)}}

/* десктоп-специфика */
@media(min-width:761px){
  .price-sec{padding-top:70px}
}
/* мобилка: та же таблица со скроллом вбок */
@media(max-width:760px){
  .price-sec{padding:56px 13px 0}
  .price-in{padding:26px 0 22px}
  .price-title,.price-sub{padding:0 18px}
  .price-title{font-size:26px}
  .pr-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .pr-scroll::-webkit-scrollbar{display:none}
  .pr-grid{min-width:680px;width:max-content;grid-template-columns:minmax(172px,1.15fr) .8fr 1.05fr 1.6fr}
  .pr-dir{white-space:nowrap}
  .price-note{padding-left:18px;padding-right:18px}
  .pr-scrollcue{display:flex}
}

/* ═══════════ COOKIE-ПЛАШКА (v242) ═══════════ */
.ck-banner{position:fixed;left:0;right:0;bottom:0;z-index:400;display:flex;justify-content:center;
  padding:16px;pointer-events:none;opacity:0;transform:translateY(16px);transition:opacity .32s ease,transform .32s ease}
.ck-banner.show{opacity:1;transform:none}
.ck-inner{pointer-events:auto;max-width:560px;width:100%;padding:20px 22px;
  background:rgba(255,255,255,.68);-webkit-backdrop-filter:blur(18px) saturate(1.1);backdrop-filter:blur(18px) saturate(1.1);
  border:1px solid rgba(184,134,47,.24);border-radius:18px;box-shadow:0 24px 60px -24px rgba(26,24,20,.45),inset 0 1px 0 rgba(255,255,255,.7)}
.ck-text{margin:0 0 14px;font-size:14px;line-height:1.62;color:var(--ink-soft)}
.ck-text a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.ck-accept{display:block;width:100%;padding:13px 16px;border-radius:999px;cursor:pointer;
  font-family:var(--body);font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--ink);
  background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(246,244,239,.8));
  border:1.5px solid rgba(184,134,47,.55);
  box-shadow:0 12px 26px -14px rgba(184,134,47,.5),inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s}
.ck-accept:hover{border-color:rgba(184,134,47,.8);box-shadow:0 16px 30px -14px rgba(184,134,47,.6);transform:translateY(-1px)}
@media(max-width:760px){
  .ck-banner{padding:12px}
  .ck-inner{padding:18px 18px 16px;border-radius:16px}
  .ck-text{font-size:13.5px}
}