/* Dynamic theme skin.
   This layer deliberately changes only paint and motion. The original DOM,
   dimensions and placement remain owned by the production application CSS. */

html[data-mdz-theme="underwater"] body{
  background:
    radial-gradient(120% 68% at 50% -8%,rgba(88,218,255,.33),transparent 58%),
    radial-gradient(80% 44% at 50% 100%,rgba(3,112,159,.22),transparent 74%),
    linear-gradient(180deg,#0a4968 0%,#053552 44%,#03172a 100%);
  color:#eef9ff;
}

html[data-mdz-theme="underwater"] body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(116deg,transparent 0 15%,rgba(50,215,244,.16) 15.3% 15.8%,transparent 16.1% 100%),
    linear-gradient(64deg,transparent 0 15%,rgba(50,215,244,.16) 15.3% 15.8%,transparent 16.1% 100%),
    repeating-radial-gradient(ellipse at 50% -8%,transparent 0 44px,rgba(190,243,255,.045) 47px,transparent 52px);
  opacity:.72;
}

html[data-mdz-theme="underwater"] .app{
  position:relative;
  z-index:2;
}

html[data-mdz-theme="underwater"] :is(
  .hero,.streak,.reward,.blk,.stat-c,.tcard,.row-item,.ava-row,
  .sub-status,.pay-box,.sect,.next-ban,.faq-ban,.lock-ban,.quota-done,
  .narrow,#tgLoginBox,.toggle,.week-row,.chart,.ringrow,.hist-row
){
  border-color:rgba(105,213,255,.20);
  background:linear-gradient(145deg,rgba(7,42,69,.86),rgba(3,20,39,.82));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 14px 34px rgba(0,8,24,.18);
}

html[data-mdz-theme="underwater"] .hero{
  background:
    radial-gradient(100% 90% at 88% 0,rgba(78,215,255,.17),transparent 64%),
    linear-gradient(145deg,rgba(9,55,84,.89),rgba(3,22,43,.84));
}

/* Максим 07.08: между «тренировок за месяц» и «объёмом за месяц» должен
   просвечивать фон интерфейса. Раньше обе карточки лежали на ОДНОЙ стеклянной
   подложке .motiv, и в зазоре была видна она, а не сцена. Подложку убираем,
   каждая карточка становится самостоятельной — как остальные блоки. */
html[data-mdz-theme="underwater"] .motiv{
  border:0;
  background:none;
  box-shadow:none;
  overflow:visible;
}

html[data-mdz-theme="underwater"] .toggle{
  border-color:transparent!important;
  background:rgba(3,23,42,.68)!important;
  box-shadow:none!important;
}

html[data-mdz-theme="underwater"] :is(.daily-cta,.btn-grad,.btn-start,#saveGoals,.first-cta){
  background:linear-gradient(105deg,#0ba8df 0%,#4ce6ec 48%,#0ba8df 100%);
  background-size:220% 100%;
  color:#fff;
  border-color:rgba(143,245,255,.46);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.50),0 12px 28px rgba(0,170,220,.25);
  animation:mdzSkinCurrent 7s ease-in-out infinite;
}

html[data-mdz-theme="underwater"] .daily-cta::before,
html[data-mdz-theme="underwater"] .daily-cta::after{
  display:none;
}

html[data-mdz-theme="underwater"] :is(.pchip,.toggle>div){
  border-color:rgba(102,199,239,.18);
  background:rgba(3,23,42,.68);
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,color .18s ease;
}

html[data-mdz-theme="underwater"] :is(.pchip.on,.toggle>div.on){
  border-color:rgba(98,235,255,.58);
  background:linear-gradient(135deg,#25c8ec,#62e9ee);
  color:#03243a;
  box-shadow:0 8px 22px rgba(0,190,231,.20),inset 0 1px 0 rgba(255,255,255,.45);
}

html[data-mdz-theme="underwater"] .tabbar{
  z-index:6;
  border-color:rgba(105,207,247,.20);
  background:rgba(3,22,42,.90);
  box-shadow:0 -10px 32px rgba(0,8,24,.22),inset 0 1px 0 rgba(255,255,255,.06);
}

html[data-mdz-theme="underwater"] .tab.on{
  color:#52e5ff;
  text-shadow:0 0 18px rgba(52,215,255,.36);
}

html[data-mdz-theme="underwater"] :is(.sheet,.mdz-theme-picker){
  border-color:rgba(101,210,250,.26);
  background:linear-gradient(180deg,rgba(7,39,65,.985),rgba(2,16,32,.99));
  box-shadow:0 -28px 80px rgba(0,6,20,.58),inset 0 1px 0 rgba(255,255,255,.08);
}

html[data-mdz-theme="underwater"] .row-item .ic{
  border-color:rgba(102,221,255,.22);
  background:linear-gradient(145deg,rgba(13,107,150,.52),rgba(4,45,75,.70));
  color:#63e9ff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 7px 18px rgba(0,141,198,.13);
}

html[data-mdz-theme="underwater"] .row-item .ic svg{
  stroke:currentColor;
  filter:drop-shadow(0 0 6px rgba(75,225,255,.24));
}

html[data-mdz-theme="underwater"] .row-item .ic .mdz-ic-fill{
  fill:rgba(53,211,244,.15);
}

html[data-mdz-theme="underwater"] :is(.prog>i,.rw-bar>i,.bar>i){
  background:linear-gradient(90deg,#08a9e0,#64edf0,#08a9e0);
  background-size:200% 100%;
  box-shadow:0 0 14px rgba(52,224,255,.38);
  animation:mdzSkinCurrent 6s linear infinite;
}

html[data-mdz-theme="underwater"] .view.on{
  animation:mdzSkinReveal .24s ease both;
}

@keyframes mdzSkinCurrent{
  0%,100%{background-position:0 50%}
  50%{background-position:100% 50%}
}

@keyframes mdzSkinReveal{
  from{opacity:.72}
  to{opacity:1}
}

@media (hover:none),(pointer:coarse){
  html[data-mdz-theme="underwater"] :is(
    .hero,.streak,.reward,.blk,.stat-c,.tcard,.row-item,.ava-row,
    .sub-status,.pay-box,.sect,.next-ban,.faq-ban,.lock-ban,.quota-done,
    .narrow,#tgLoginBox,.toggle,.week-row,.chart,.ringrow,.hist-row,.tabbar
  ){
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }
}

@media (prefers-reduced-motion:reduce){
  html[data-mdz-theme="underwater"] :is(.daily-cta,.btn-grad,.btn-start,#saveGoals,.first-cta,.prog>i,.rw-bar>i,.bar>i,.view.on){
    animation:none!important;
  }
}