/* Комнатка: стиль «как в СОЮЗе» (Лёша 02.11) - матовое стекло местами, мягкий живой фон, плавное появление,
   мягкие кнопки, линейные значки вместо эмодзи (room-icons.js). Подключается ко всем страницам /me последним
   и только переопределяет - сами шаблоны не трогаем. Цвет Комнатки (роза Оли) сохраняем. */

/* 1. Фон: тёплый градиент с размытыми пятнами - чтобы стеклу было что показывать */
html:root{--card:rgba(255,255,255,.66);--card-2:rgba(253,243,238,.62);--border:rgba(231,219,224,.75);--ez:cubic-bezier(.22,.61,.36,1);--ez-out:cubic-bezier(.16,1,.3,1)}
html body{background:#faf6f4 !important;position:relative}
html body::before{content:"";position:fixed;inset:-10vmax;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38vmax 30vmax at 12% 8%,rgba(242,196,210,.55),transparent 70%),
    radial-gradient(34vmax 28vmax at 92% 18%,rgba(214,206,240,.5),transparent 70%),
    radial-gradient(40vmax 32vmax at 70% 95%,rgba(246,220,196,.5),transparent 70%),
    radial-gradient(30vmax 26vmax at 5% 85%,rgba(206,232,226,.45),transparent 70%);
  filter:blur(8px);animation:roomdrift 38s ease-in-out infinite alternate}
@keyframes roomdrift{to{transform:translate3d(2vmax,-1.5vmax,0) scale(1.04)}}

/* 2. Шапка - стекло, страница видна сквозь неё */
html body header{background:rgba(250,246,244,.55) !important;-webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8);border-bottom-color:rgba(231,219,224,.6) !important}

/* 3. Крупные блоки - матовое стекло с мягкой тенью */
html body .hero,html body .card,html body section.block,html body .block,html body .player-card,html body .result-hero,
html body .lesson-body,html body .lesson-transcript,html body .bk-card,html body .role-card,html body .quiz-q,html body .q-result,
html body .compose,html body .wrap > .box,html body .login-card,html body .box{
  background:rgba(255,255,255,.62) !important;-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  border:1px solid rgba(255,255,255,.7) !important;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 8px 28px rgba(122,74,92,.07) !important;border-radius:18px !important}
/* цветные полосы-переходы на главной - полупрозрачные, тоже стекло */
html body .shelf-entry,html body .continue-banner,html body a[class*="-entry"],html body a[class*="banner"],html body .edu-ccard,html body .edu-item,html body .bk{
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);border-color:rgba(255,255,255,.65) !important;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 6px 20px rgba(122,74,92,.06)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html body header{background:rgba(250,246,244,.95) !important}
  html body .hero,html body .card,html body section.block,html body .block{background:rgba(255,255,255,.94) !important}
}

/* 4. Движение «дороже»: мягкое появление каскадом, наведение - лёгкий подъём */
@keyframes roomin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
html body .container>*,html body main>*,html body .wrap>*{animation:roomin .42s var(--ez-out) both}
html body .container>*:nth-child(2),html body main>*:nth-child(2),html body .wrap>*:nth-child(2){animation-delay:.04s}
html body .container>*:nth-child(3),html body main>*:nth-child(3),html body .wrap>*:nth-child(3){animation-delay:.08s}
html body .container>*:nth-child(4),html body main>*:nth-child(4),html body .wrap>*:nth-child(4){animation-delay:.12s}
html body .container>*:nth-child(n+5),html body main>*:nth-child(n+5),html body .wrap>*:nth-child(n+5){animation-delay:.16s}
html body a,html body button{transition:background-color .2s var(--ez),border-color .2s var(--ez),box-shadow .25s var(--ez),transform .25s var(--ez),color .2s var(--ez),filter .15s}
@media (hover:hover){html body a[class]:hover:not(.brand){box-shadow:0 10px 26px rgba(122,74,92,.10)}}
@media (prefers-reduced-motion:reduce){html body::before,html body *{animation:none !important}}

/* 5. Мягкие кнопки (как SOFT_BTN в СОЮЗе): светлая роза с тонкой рамкой вместо тёмной заливки */
html body .btn:not(.on):not(.active),html body .btn-primary,html body button[type=submit],html body .edu-btn,html body .ln-btn,html body .pr-btn,html body .hero-edit{
  background:rgba(251,236,241,.85) !important;color:#a3486a !important;border:1px solid rgba(194,91,124,.38) !important;box-shadow:none !important;font-weight:600}
@media (hover:hover){html body .btn:not(.on):not(.active):hover,html body .btn-primary:hover,html body button[type=submit]:hover,html body .edu-btn:hover,html body .ln-btn:hover,html body .pr-btn:hover,html body .hero-edit:hover{
  background:rgba(247,222,231,.95) !important;border-color:rgba(194,91,124,.65) !important}}
html body input:not([type=checkbox]):not([type=radio]),html body textarea,html body select{background:rgba(255,255,255,.72) !important;border-color:rgba(231,219,224,.9) !important}
html body input:focus,html body textarea:focus{outline:none;border-color:rgba(194,91,124,.55) !important;box-shadow:0 0 0 4px rgba(194,91,124,.10) !important}

/* 6. Значки вместо эмодзи */
.ri{width:1.1em;height:1.1em;vertical-align:-.18em;flex:0 0 auto;display:inline-block}
.ri-w{display:contents}
.ri-w>.ri{margin-right:.32em}
.ri-w>.ri:last-child{margin-right:0}
.ri-solo{color:#c25b7c;display:inline-flex !important;align-items:center;justify-content:center}
.ri-solo .ri{margin:0;width:1em;height:1em;stroke-width:1.3}
/* крупные эмодзи-заглушки обложек становятся тонким значком в цвет */
html body [class*="cov-emo"],html body [class*="thumb"],html body [class*="-ico"],html body [class*="icon"]{color:#c25b7c}
/* пока значки не подставлены - не мигать эмодзи */
html:not(.ri-ready) body{opacity:0;animation:roomshow 0s 1.2s forwards}
@keyframes roomshow{to{opacity:1}}
html.ri-ready body{opacity:1;transition:opacity .18s var(--ez)}