/* Осень · «Бумажная осень» — всё вырезано из цветной бумаги: слои с мягкими тенями, как в книжке-раскладушке.
   Палитра: кремовая бумага, тёмная слива, ржавчина, горчица, олива, хвойный. Заголовки — округлый Rubik.
   Боковая панель — сливовый картон с рваным краем; выбранный раздел — бумажная вкладка, выступающая за край;
   внизу панели — маленький бумажный пейзаж. «Вайб» — горчичный ярлычок, кнопки — ржавая бумага с торцом.
   Главная: за Машей бумажный пейзаж (холмы, деревья, облака, солнце, листья); Маша — наклейка с белой обводкой.
   Внутри: даты уроков — горчичные ярлычки, у блоков — цветные корешки, листы и записки приклеены скотчем.
   Пейзажи и листья добавляет bumaga.js; при загрузке главной слои один раз поднимаются по очереди. */
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@600;700;800&display=swap");

:root{
  --font-paper:"Rubik","Inter Tight",-apple-system,system-ui,sans-serif;
  --radius-md:10px; --radius-lg:14px;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .17 0 0 0 0 .1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --torn:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 120' preserveAspectRatio='none'%3E%3Cpath d='M12 0V120H5L7 114 4 108 6 101 3 95 6 88 4 81 7 75 3 69 5 62 2 56 5 50 3 43 6 37 4 30 7 24 4 18 6 11 3 6 5 0Z'/%3E%3C/svg%3E");
  --tape-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 26' preserveAspectRatio='none'%3E%3Cpath d='M2 0H108L106 4 109 8 106 13 109 18 106 22 108 26H2L4 22 1 18 4 13 1 8 4 4Z'/%3E%3C/svg%3E");
  --leaf-maple:/*leaf:maple*/url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cmask id='v'%3E%3Cpath d='M50 10L52.6 16.8Q53.7 19.6 55 19.2L57.9 18L58.5 24.3Q58.9 27.6 60 27.3L62 26.8L61.1 33Q60.3 39.1 65.8 36.1L71.3 33L71.1 35.4Q71.1 36.7 76.8 35.2L87.4 32.5L82.1 39.5Q79.2 43.2 80.8 44.4L83.6 46.6L78.7 50.6Q76 52.7 76.5 53.7L77.4 55.5L72 57.3Q66.6 59.1 69.3 62.7L72.1 66.2L69.8 66.9Q68.9 67.3 69.7 69.7L71.7 75.3L65 73Q61.3 71.8 60.1 72.1L57.9 72.7L54.7 68.3Q51.6 63.9 50.8 61.4L50.8 61.4Q50 59 49.3 61.4L49.3 61.4Q48.7 63.8 45.7 68.2L42.7 72.6L40.5 72.1Q39.3 71.8 35.7 73.1L29.1 75.5L31 69.9Q31.7 67.6 30.8 67.3L28.6 66.6L31.2 63.1Q33.8 59.5 28.4 57.8L23 56.2L23.9 54.4Q24.3 53.4 21.7 51.4L16.7 47.6L19.4 45.4Q20.9 44.1 18 40.5L12.6 33.8L23.1 36.2Q28.8 37.5 28.7 36.2L28.5 33.9L34 36.8Q39.5 39.7 38.5 33.6L37.5 27.6L39.5 28Q40.5 28.3 40.8 24.9L41.3 18.8L44.2 19.8Q45.4 20.3 46.8 17.2Z' fill='white'/%3E%3Cpath d='M50 57q1 16 7 30' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M50 55L50 14.5M50 55L83.2 35.1M50 55L16.5 35.6M50 55L69.1 72.8M50 55L31.2 73.1' fill='none' stroke='black' stroke-opacity='.5' stroke-width='1.3' stroke-linecap='round'/%3E%3C/mask%3E%3Crect width='100' height='100' mask='url(%23v)'/%3E%3C/svg%3E");
}
:root[data-theme="paper"]{
  --paper:#f6ead6; --surface:#fffaf0; --surface-sunk:#efe2cb;
  --line:rgba(75,35,55,.1); --line-strong:rgba(75,35,55,.22);
  --ink:#3d1c30; --ink-muted:#6f5462;
  --cobalt:#a9471f; --cobalt-ink:#8f3a17; --on-cobalt:#fff7ea; --cobalt-soft:#f6dcc9;
  --marker:#e0aa3e; --on-marker:#3d1c30;
  --ok:#4f7a2d; --ok-soft:#e3efd8; --bad:#b3263a; --bad-soft:#f8dde0;
  --glass:rgba(255,250,240,.9);
  --plum:#4a2337; --on-plum:#f6ead6; --plum-muted:#d9c3cd; --plum-hover:#582a41; --plum-tab:#fbf1e1;
  --edge:#fdf7ec; --sticker:#fffaf0;
  --btn-edge:#7e3315; --tag-edge:rgba(120,70,10,.45); --tape:rgba(224,170,62,.62);
  --paper-shadow:rgba(80,35,20,.3); --paper-shadow-soft:rgba(80,35,20,.16);
  --hill-1:#ebc06a; --hill-2:#c9572e; --hill-3:#8c8a45; --hill-4:#dca53c;
  --tree-1:#dca53c; --tree-2:#c4532c; --tree-3:#8c8a45; --tree-4:#e6b55a; --tree-5:#2f5d57; --trunk:#6b3f2a;
  --sun:#fbf1dc; --cloud:#fffaf0; --cut:rgba(255,248,232,.7); --hi:rgba(255,245,225,.2); --grain-scene:.55;
  --leaf-1:#c4532c; --leaf-2:#8c8a45; --leaf-3:#dca53c; --crease:rgba(255,240,220,.45);
  --grain-op:.32;
}
:root[data-theme="night"]{
  --paper:#1f1419; --surface:#2a1b22; --surface-sunk:#33222b;
  --line:rgba(255,225,205,.09); --line-strong:rgba(255,225,205,.2);
  --ink:#f4e6d4; --ink-muted:#c4adb7;
  --cobalt:#f08a5d; --cobalt-ink:#f5a27e; --on-cobalt:#1f0f17; --cobalt-soft:#40241f;
  --marker:#d9a03a; --on-marker:#1f0f17;
  --ok:#a5d27f; --ok-soft:#1d2e1b; --bad:#ff8a98; --bad-soft:#3d1a22;
  --glass:rgba(42,27,34,.9);
  --plum:#2b1420; --on-plum:#f4e6d4; --plum-muted:#c9adb9; --plum-hover:#3a1d2c; --plum-tab:#3d2a33;
  --edge:#3a2630; --sticker:#f4e6d4;
  --btn-edge:#a8532f; --tag-edge:rgba(0,0,0,.5); --tape:rgba(217,160,58,.42);
  --paper-shadow:rgba(0,0,0,.55); --paper-shadow-soft:rgba(0,0,0,.35);
  --hill-1:#6e5426; --hill-2:#6f2f1e; --hill-3:#454a2a; --hill-4:#7f5f23;
  --tree-1:#7f5f23; --tree-2:#6f2f1e; --tree-3:#454a2a; --tree-4:#8a6a2c; --tree-5:#1f3a37; --trunk:#3a2219;
  --sun:#efe3c4; --cloud:#3a2a32; --cut:rgba(255,230,210,.16); --hi:rgba(255,230,200,.06); --grain-scene:.35;
  --leaf-1:#b3532f; --leaf-2:#6d6e38; --leaf-3:#b9893a; --crease:rgba(255,230,200,.25);
  --grain-op:.5;
}

/* бумажное зерно под всем сайтом */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--grain);opacity:var(--grain-op);mix-blend-mode:multiply}
:root[data-theme="night"] body::before{mix-blend-mode:screen;opacity:.06}

/* шрифт заголовков — округлый Rubik */
.land h1,.cab-h,.allhead h1,.cab-h3,.rs-h,.dl-h,.review h3,.sch-day,.lblock .lb-t,.hwbox .tname,.cp-next-d,.side-mark,.rs-big b,.pstat b,.rs-tile b,.tdate b{
  font-family:var(--font-paper);letter-spacing:-.02em}
.land h1{font-weight:800;color:var(--ink)}

/* «Воздух» с зашитыми цветами → цвета варианта */
:root .btn:not(.ghost):not(.danger){color:var(--on-cobalt)}
:root .dl-box{background:var(--surface)}

/* кнопки — ржавая бумага с торцом снизу; нажатие «вдавливает» её */
.btn:not(.ghost):not(.danger){box-shadow:0 3px 0 var(--btn-edge),0 10px 18px -10px var(--paper-shadow);transition:transform .14s cubic-bezier(.23,1,.32,1),box-shadow .14s ease}
.btn:not(.ghost):not(.danger):active{transform:translateY(2px);box-shadow:0 1px 0 var(--btn-edge),0 4px 10px -6px var(--paper-shadow)}
.btn.ghost,.acct,.theme-tog,.season-tog,.burger,.ava{background:var(--surface);box-shadow:0 2px 0 var(--line-strong),0 8px 16px -10px var(--paper-shadow);backdrop-filter:none;-webkit-backdrop-filter:none}

/* кнопка осеннего режима: включена — листик закрашен ржавым */
.season-tog[aria-pressed="true"]{color:var(--cobalt)}
.season-tag{display:none}   /* в осеннем режиме подпись не нужна — она подсказывает, где включить осень */

/* карточки — листы бумаги, приподнятые над столом */
.tlist,.dl-list,.cp-list,.lblock>summary,.hwbox,.cp-next,.pstat,.rs-tile,.fitem,.creds,.cal,.cab.login,.panel:has(.qtext,.rs,.allitem){
  box-shadow:0 1px 0 var(--line-strong),0 12px 24px -16px var(--paper-shadow)}

/* блоки уроков: толстый цветной бумажный корешок; к углу второго блока заложен кленовый лист */
.lblock>summary{--spine-w:22px;position:relative;padding-left:52px;box-shadow:inset var(--spine-w) 0 0 var(--spine,var(--hill-4)),0 1px 0 var(--line-strong),0 12px 24px -16px var(--paper-shadow)}
/* в «Воздухе» наведение заменяет всю тень — корешок (он тоже тень) пропадал; оставляем его и чуть приподнимаем лист */
.lblock>summary:hover{box-shadow:inset var(--spine-w) 0 0 var(--spine,var(--hill-4)),0 1px 0 var(--line-strong),0 18px 30px -16px var(--paper-shadow)}
.lblock:nth-of-type(3n+2)>summary{--spine:var(--hill-2)}
.lblock:nth-of-type(3n+3)>summary{--spine:var(--hill-3)}
.lblock:nth-of-type(2)>summary::after{content:"";position:absolute;width:58px;height:58px;right:-16px;top:-22px;transform:rotate(18deg);pointer-events:none;
  background:var(--leaf-1);-webkit-mask:var(--leaf-maple) center/contain no-repeat;mask:var(--leaf-maple) center/contain no-repeat;
  filter:drop-shadow(0 4px 4px var(--paper-shadow))}
@media (max-width:520px){.lblock>summary{padding-left:40px;--spine-w:16px}
  .lblock:nth-of-type(2)>summary::after{width:44px;height:44px;right:-6px;top:-18px}}

/* даты уроков — горчичные бумажные ярлычки, чуть вразнобой */
.tdate{background:var(--marker);border-radius:6px;box-shadow:0 2px 0 var(--tag-edge),0 6px 10px -6px var(--paper-shadow);transform:rotate(-2deg)}
.tcard:nth-child(even) .tdate{transform:rotate(1.5deg)}
.tdate span{color:var(--on-marker);opacity:.72}
.tdate b{color:var(--on-marker);font-weight:700}
/* статусы: «проверено» — оливковым текстом с ✓, «ждёт проверки» — ржавый бумажный ярлык */
.st-ok{color:var(--ok);font-weight:600}
.st-wait{background:var(--cobalt);color:var(--on-cobalt);border-radius:99px;padding:4px 11px;box-shadow:0 2px 0 var(--btn-edge)}

/* дедлайны — записка на скотче; на широком экране — колонкой справа */
.dl-box{position:relative;padding:24px 20px 16px;border-radius:6px;box-shadow:0 1px 0 var(--line-strong),0 14px 26px -16px var(--paper-shadow);transform:rotate(.5deg)}
.dl-box .dl-list{box-shadow:none;background:transparent;border-radius:0}
.dl-box .dl-list>.dl{padding-left:0;padding-right:0}
.dl-box .dl-list>.dl+.dl::before{left:0}
/* в узкой записке срок — под названием, названия не обрезаются */
/* в записке срок — под названием, названия не обрезаются ни на каком экране */
.dl-box .dl{display:grid;gap:6px;justify-items:start}
.dl-box .dl-t b{white-space:normal}
@media (min-width:1240px){
  #llist{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:30px;align-items:start}
  #llist>.lblock,#llist>.empty{grid-column:1}
  #llist>.dl-box{grid-column:2;grid-row:1/span 30;margin-top:4px;position:sticky;top:24px}
}
/* полоска скотча сверху: записка, ДЗ в уроке, вход, лист задания и результата */
.dl-box::before,.hwbox::before,.panel:has(.qtext,.rs,.allitem)::before{content:"";position:absolute;top:-12px;left:50%;width:108px;height:26px;
  translate:-50% 0;rotate:-2.5deg;background:var(--tape);-webkit-mask:var(--tape-mask) 0 0/100% 100% no-repeat;mask:var(--tape-mask) 0 0/100% 100% no-repeat;pointer-events:none;z-index:1}
.hwbox,.cab.login,.panel:has(.qtext,.rs,.allitem){position:relative}
.hwbox::before{left:24%;rotate:3deg}

/* задание: номера — бумажные кружки, текущий — ржавый, отвеченные — горчичные */
.qn{box-shadow:0 2px 0 var(--line-strong)}
.qn.cur{box-shadow:0 2px 0 var(--btn-edge)}
.qn.done{background:var(--marker);color:var(--on-marker)}

/* боковая панель — сливовый картон с рваным краем */
.side{background:var(--plum);color:var(--on-plum);backdrop-filter:none;-webkit-backdrop-filter:none;border-right:0;box-shadow:6px 0 18px -10px var(--paper-shadow)}
.side::after{content:"";position:absolute;top:0;bottom:0;right:0;width:12px;pointer-events:none;z-index:1;background:var(--edge);
  -webkit-mask:var(--torn) 0 0/12px 120px repeat-y;mask:var(--torn) 0 0/12px 120px repeat-y}
.side-mark{font-size:22px;padding:2px 6px}
.side-mark,.side-mark .mv-mark{color:var(--on-plum)}
.side-nav button{color:var(--plum-muted)}
.side-nav button:hover{background:var(--plum-hover);color:var(--on-plum)}
.side-nav button[aria-current]{background:var(--plum-tab);color:var(--ink);box-shadow:0 2px 0 var(--tag-edge),0 8px 14px -8px var(--paper-shadow)}
:root .side-nav .ic-flap{fill:var(--plum)}
:root .side-nav button:hover .ic-flap{fill:var(--plum-hover)}
:root .side-nav button[aria-current] .ic-flap{fill:var(--plum-tab)}
.side-foot{color:var(--on-plum);font-family:var(--font-paper);font-weight:700}
.fb-q{color:var(--plum-muted)}
/* пейзаж внизу панели и лист у рваного края (bumaga.js) */
.pp-side{position:absolute;left:0;right:0;bottom:0;width:100%;height:96px;pointer-events:none;display:block}
.pp-side-leaf{display:none}
@media (min-height:760px){.side{padding-bottom:116px}}
@media (max-height:759px){.pp-side{display:none}}
/* на компьютере вкладка выбранного раздела выступает за рваный край, а у края лежит дубовый лист */
@media (min-width:1000px) and (min-height:760px){
  .side{overflow:visible}
  .side-nav button[aria-current]{position:relative;z-index:2;width:calc(100% + 30px);margin-right:-30px;border-radius:8px 4px 4px 8px}
  .pp-side-leaf{display:block;position:absolute;right:-24px;bottom:132px;width:54px;height:54px;z-index:2;pointer-events:none;filter:drop-shadow(0 5px 5px var(--paper-shadow))}
}

/* «Вайб» — горчичный бумажный ярлычок */
.mv-mark{display:inline-block;background:var(--marker);color:var(--on-marker);padding:0 .14em .04em;margin:0 .02em;border-radius:.08em;
  box-shadow:0 .06em 0 var(--tag-edge);transform:rotate(-2deg)}
.side-mark .mv-mark{color:var(--on-marker);position:relative}
/* на угол ярлычка «Вайб» в панели упал кленовый листок — чуть закрывает букву */
.side-mark .mv-mark::after{content:"";position:absolute;width:1.3em;height:1.3em;right:-.5em;top:-.62em;transform:rotate(28deg);pointer-events:none;
  background:var(--leaf-1);-webkit-mask:var(--leaf-maple) center/contain no-repeat;mask:var(--leaf-maple) center/contain no-repeat;
  filter:drop-shadow(0 2px 2px var(--paper-shadow))}
.land h1 .mv-mark{padding:.02em .16em .07em;transform:rotate(-1.5deg);box-shadow:0 .05em 0 var(--tag-edge),0 .3em .5em -.3em var(--paper-shadow)}
.mv-mark.draw{background-size:auto;animation:ppTag .55s cubic-bezier(.23,1,.32,1) .25s both}
@keyframes ppTag{from{opacity:0;transform:translateY(-.3em) rotate(-7deg) scale(1.08)}to{opacity:1;transform:rotate(-1.5deg)}}

/* главная: бумажный пейзаж во всю ширину за Машей, Маша — наклейка */
.wrap:has(.land){overflow-x:clip}
.land-copy,.land-hero{position:relative;z-index:1}
.land-go{min-width:220px}
.land-block{display:none}
.land-hero{margin-top:-6px}
.land-hero img#masha{border-radius:0;
  filter:drop-shadow(0 -4px 0 var(--sticker)) drop-shadow(0 4px 0 var(--sticker)) drop-shadow(4px 0 0 var(--sticker)) drop-shadow(-4px 0 0 var(--sticker)) drop-shadow(0 12px 14px var(--paper-shadow));
  animation:ppSticker .6s cubic-bezier(.23,1,.32,1) .55s both}
@keyframes ppSticker{from{opacity:0;transform:translateY(14px) rotate(-2deg) scale(1.04)}to{opacity:1;transform:none}}
.land-tag{left:auto;right:7%;bottom:4%;background:var(--surface);box-shadow:0 2px 0 var(--line-strong),0 8px 16px -10px var(--paper-shadow);backdrop-filter:none;-webkit-backdrop-filter:none;transform:rotate(-2deg)}

.pp-scene{position:fixed;left:0;right:0;bottom:0;height:min(54vh,470px);z-index:-1;pointer-events:none;display:block;width:100%;
  will-change:transform;transition:opacity .45s ease}
@media (min-width:1000px){.pp-scene{left:264px;width:auto}}
/* на рабочих экранах пейзаж приглушён: текст прямо на странице (заголовки, подписи) остаётся читаемым */
body:not(:has(.land,.cab.login)) .pp-scene{opacity:.4}
:root[data-theme="night"] body:not(:has(.land,.cab.login)) .pp-scene{opacity:.5}
.pp-scene .sh,.pp-side .sh{flood-color:var(--paper-shadow);flood-opacity:1}
:is(.pp-scene,.pp-side) .h1{fill:var(--hill-1)}:is(.pp-scene,.pp-side) .h2{fill:var(--hill-2)}:is(.pp-scene,.pp-side) .h3{fill:var(--hill-3)}:is(.pp-scene,.pp-side) .h4{fill:var(--hill-4)}
:is(.pp-scene,.pp-side) .t1{fill:var(--tree-1)}:is(.pp-scene,.pp-side) .t2{fill:var(--tree-2)}:is(.pp-scene,.pp-side) .t3{fill:var(--tree-3)}
:is(.pp-scene,.pp-side) .t4{fill:var(--tree-4)}:is(.pp-scene,.pp-side) .t5{fill:var(--tree-5)}
:is(.pp-scene,.pp-side) .tr{fill:var(--trunk)}.pp-scene .sun{fill:var(--sun)}.pp-scene .cl{fill:var(--cloud)}
:is(.pp-scene,.pp-side) .hi{fill:var(--hi)}
:is(.pp-scene,.pp-side) .cut{stroke:var(--cut);stroke-width:1.6;paint-order:stroke}
.pp-scene .gr{fill:url(#ppg);opacity:var(--grain-scene)}.pp-cloud .gr{display:none}.pp-side .gr{fill:url(#ppsg);opacity:var(--grain-scene)}
.pp-leaf .bl{stroke-width:2.6;stroke-linecap:round;fill:none}.pp-leaf .vn{stroke:var(--crease);stroke-width:1.4;stroke-linecap:round;fill:none}
.pp-leaf.l1{fill:var(--leaf-1);stroke:var(--leaf-1)}.pp-leaf.l2{fill:var(--leaf-2);stroke:var(--leaf-2)}.pp-leaf.l3{fill:var(--leaf-3);stroke:var(--leaf-3)}
.pp-front{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:visible}
.pp-front-leaf{position:absolute;display:block;height:auto;aspect-ratio:1;overflow:visible;filter:drop-shadow(0 6px 6px var(--paper-shadow))}

/* раскладушка: слои поднимаются от дальнего к ближнему, деревья вырастают, облака выплывают,
   листья подлетают, чуть покачиваются и замирают (всё движение листа < 5 с) */
.pp-scene g,.pp-front g{transform-box:fill-box}
.pp-rise{transform-origin:50% 100%;animation:ppRise .7s cubic-bezier(.23,1,.32,1) var(--d) both}
.pp-pop{transform-origin:50% 100%;animation:ppPop .6s cubic-bezier(.23,1,.32,1) var(--d) both}
.pp-cloud{animation:ppCloud 1s cubic-bezier(.23,1,.32,1) var(--d) both}
.pp-sun{transform-origin:50% 50%;animation:ppSun .9s cubic-bezier(.23,1,.32,1) .05s both}
.pp-fly{transform-origin:50% 50%;transform:rotate(var(--r));
  animation:ppFly 1.5s cubic-bezier(.23,1,.32,1) var(--d) both,ppSway 2.2s ease-in-out calc(var(--d) + 1.5s) 2 alternate}
@keyframes ppRise{from{opacity:0;transform:translateY(70px)}to{opacity:1;transform:translateY(0)}}
@keyframes ppPop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes ppCloud{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes ppSun{from{opacity:0;transform:translateY(40px) scale(.7)}to{opacity:1;transform:none}}
@keyframes ppFly{from{opacity:0;transform:translate(120px,-90px) rotate(calc(var(--r) + 140deg))}to{opacity:1;transform:translate(0,0) rotate(var(--r))}}
@keyframes ppSway{from{transform:translate(0,0) rotate(var(--r))}to{transform:translate(4px,-8px) rotate(calc(var(--r) + 8deg))}}
@media (max-width:699px){.pp-scene{height:min(40vh,330px)}}

/* ---- вход: лист бумаги на осеннем пейзаже, приклеенный скотчем по углам; Маша — наклейка с венком из листьев ---- */
.wrap:has(.cab.login){overflow-x:clip}
.cab.login{display:flow-root;position:relative;z-index:1;max-width:400px;margin:max(12vh,120px) auto 32px;padding:0 30px 26px;border-radius:8px;transform:rotate(-.6deg);
  box-shadow:0 1px 0 var(--line-strong),0 26px 40px -24px var(--paper-shadow)}
.cab.login::before,.cab.login::after{content:"";position:absolute;top:-10px;width:96px;height:26px;background:var(--tape);pointer-events:none;z-index:2;
  -webkit-mask:var(--tape-mask) 0 0/100% 100% no-repeat;mask:var(--tape-mask) 0 0/100% 100% no-repeat}
.cab.login::before{left:-26px;rotate:-38deg;top:4px}
.cab.login::after{right:-26px;rotate:36deg;top:2px}
.pp-ava{position:relative;width:132px;height:132px;margin:-66px auto 10px;animation:ppSticker .6s cubic-bezier(.23,1,.32,1) .45s both}
.pp-ava .login-ava{width:100%;height:100%;margin:0;border:5px solid var(--sticker);box-shadow:0 10px 18px -8px var(--paper-shadow)}
.pp-wreath{position:absolute;inset:0;pointer-events:none}
.pp-wreath .pp-front-leaf{z-index:-1}
.pp-wreath .pp-front-leaf:first-child{z-index:1}
.cab.login .cab-h{font-size:34px;margin-top:4px}
.cab.login .pp-hint{margin:6px 0 22px;color:var(--ink-muted)}
.cab.login .tin{background:var(--paper);border:1px solid var(--line-strong);box-shadow:inset 0 2px 3px var(--paper-shadow-soft)}
.cab.login .tin:focus{background:var(--surface);border-color:var(--cobalt);box-shadow:0 0 0 4px var(--cobalt-soft)}
.cab.login .btn{margin-top:10px}
@media (max-width:520px){.cab.login{margin-top:88px;padding:0 22px 22px;transform:none}.cab.login::before{left:-14px}.cab.login::after{right:-14px}
  .pp-ava{width:112px;height:112px;margin-top:-56px}}

/* обратная связь в панели: раскрытое окно — бумажная записка цвета вкладки, поле — вдавленная бумага */
.side .btn.ghost{background:var(--plum-tab);color:var(--cobalt);box-shadow:0 2px 0 var(--tag-edge),0 8px 14px -8px var(--paper-shadow)}
.fb-pop{background:var(--plum-tab);border-radius:10px;box-shadow:0 2px 0 var(--tag-edge),0 14px 24px -12px var(--paper-shadow)}
.fb-pop .lab{color:var(--ink);font-weight:600}
.fb-t{background:var(--paper);color:var(--ink);border:1px solid var(--line-strong);box-shadow:inset 0 2px 3px var(--paper-shadow-soft)}
.fb-t::placeholder{color:var(--ink-muted);opacity:1}

/* низкие экраны телефона: вход целиком помещается без прокрутки */
@media (max-width:520px) and (max-height:700px){.cab.login{margin-top:40px}.pp-ava{width:92px;height:92px;margin-top:-46px}.cab.login .cab-h{font-size:26px}
  .cab.login .pp-hint{font-size:14px;margin:2px 0 12px}}