/* ===================================================================
   AGI•GO — мобильный режим (ретро-смартфон S-стиль).
   Активен только при html.mobile. Десктоп не затрагивает.
   =================================================================== */

/* спрятать десктоп-хром */
html.mobile .menubar,
html.mobile .taskbar,
html.mobile .dropdown,
html.mobile .slogan,
html.mobile .mascot,
html.mobile .peeker,
html.mobile .crt-scanlines,
html.mobile .crt-flicker,
html.mobile .crt-vignette{ display:none !important; }

/* по умолчанию мобильные элементы скрыты (на десктопе) */
.m-statusbar, .m-widgets, .m-softkeys, .m-screen{ display:none; }
/* на телефоне Корзина не нужна (нет файлов/перемещений) */
html.mobile .icon[data-id="recycle"]{ display:none !important; }

/* лёгкий «старый экран»: виньетка + еле заметные строки развёртки.
   z-index НИЖЕ окон (2000) — эффект только на домашнем экране, приложения чистые */
html.mobile .m-screen{ position:fixed; inset:0; z-index:1500; pointer-events:none; display:block;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px),
    radial-gradient(125% 100% at 50% 42%, transparent 52%, rgba(0,0,12,.4) 100%);
  mix-blend-mode:multiply; opacity:.55; }

/* фон-обои телефона — свои живые боке-обои (НЕ как на вебе) */
html.mobile .desktop::after{ display:none; }
html.mobile .desktop::before{ display:none; }
html.mobile .desktop{
  background:
    url("../assets/img/m-wall.svg") center center / cover no-repeat,
    linear-gradient(160deg,#0a2456 0%, #124a8e 46%, #0e6a6a 100%) !important;
  /* background-attachment:fixed глючит на iOS Safari с cover — фон и так не скроллится (скроллятся .icons) */
}

/* ---------- СТАТУС-БАР (глянцевый) ---------- */
html.mobile .m-statusbar{
  position:fixed; top:0; left:0; right:0; z-index:4200; display:flex; align-items:center; gap:8px;
  min-height:28px; padding:env(safe-area-inset-top,0px) 12px 0;
  background:linear-gradient(180deg, rgba(28,46,82,.92), rgba(10,22,46,.92));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 4px rgba(0,0,0,.35);
  color:#eaf2ff; font-size:12px; font-family:Tahoma,"Segoe UI",sans-serif;
}
.m-net{ font-weight:800; letter-spacing:.4px; }
.m-spacer{ flex:1; }
.m-sig{ display:inline-flex; align-items:flex-end; gap:1.5px; height:11px; }
.m-sig i{ width:2.5px; background:#9fdcff; border-radius:1px; }
.m-sig i:nth-child(1){ height:3px; } .m-sig i:nth-child(2){ height:5px; }
.m-sig i:nth-child(3){ height:7px; } .m-sig i:nth-child(4){ height:9px; } .m-sig i:nth-child(5){ height:11px; }
.m-time{ font-variant-numeric:tabular-nums; font-weight:bold; }
.m-batt{ width:22px; height:11px; border:1px solid #cfe2ff; border-radius:2px; position:relative; padding:1px; }
.m-batt::after{ content:""; position:absolute; right:-3px; top:3px; width:2px; height:5px; background:#cfe2ff; border-radius:0 1px 1px 0; }
.m-batt b{ display:block; width:80%; height:100%; background:#7CFFB0; border-radius:1px; }

/* ---------- ВИДЖЕТЫ (часы + дата + профиль) ---------- */
html.mobile .m-widgets{
  position:fixed; top:calc(env(safe-area-inset-top,0px) + 34px); left:0; right:0; z-index:3;
  display:flex; gap:9px; padding:0 12px;
}
.m-w{ border-radius:11px; color:#eaf4ff;
  background:linear-gradient(180deg, rgba(22,34,58,.88), rgba(8,16,32,.92));
  border:1px solid rgba(150,185,235,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -2px 6px rgba(0,0,0,.35), 0 3px 9px rgba(0,0,0,.45); }
.m-w-clock{ flex:1.3; display:flex; align-items:center; justify-content:center; padding:8px; }
.m-w-clock b{ font-size:42px; font-weight:800; letter-spacing:1px; line-height:1;
  color:#dfeeff; text-shadow:0 1px 6px rgba(0,0,0,.6); font-variant-numeric:tabular-nums; }
.m-w-col{ flex:1; display:flex; flex-direction:column; gap:6px; }
.m-w-date{ flex:1; display:flex; align-items:center; padding:6px 12px; font-weight:bold; font-size:13px; }
.m-w-prof{ flex:1; display:flex; align-items:center; padding:6px 12px; font-size:12px; color:#9fd0ff; }
html.mobile.has-win .m-widgets{ display:none; }

/* ---------- МЕНЮ ПРИЛОЖЕНИЙ (старый стиль: картинка + подпись, 3 в ряд) ---------- */
html.mobile .icons{
  position:fixed; left:0 !important; right:auto !important; width:100vw !important;
  top:calc(env(safe-area-inset-top,0px) + 120px);
  bottom:calc(env(safe-area-inset-bottom,0px) + 52px);
  display:flex !important; flex-direction:row !important; flex-wrap:wrap; align-content:flex-start;
  justify-content:center; gap:6px 0; padding:14px 6px; overflow-y:auto; max-height:none;
  -webkit-overflow-scrolling:touch; z-index:1000;
}
html.mobile .icon{
  position:static !important; left:auto !important; top:auto !important;
  flex:0 0 33.33% !important; max-width:33.33%; min-width:0; box-sizing:border-box;
  padding:10px 4px; border:none; background:none; gap:7px; border-radius:10px;
}
html.mobile .icon:active{ background:rgba(120,180,255,.32); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4); }
/* просто картинка-эмодзи (без квадратной плитки), с лёгкой тенью «как иконка» */
html.mobile .icon__img{
  width:auto; height:auto; font-size:46px; line-height:1; background:none; border-radius:0;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.55));
}
html.mobile .icon__label{ font-size:12px; line-height:1.15; color:#fff; font-weight:600;
  text-shadow:0 1px 3px rgba(0,0,0,.85); overflow-wrap:anywhere; max-width:100%; }

/* ---------- СОФТ-КЛАВИШИ (глянцевые) ---------- */
html.mobile .m-softkeys{
  position:fixed; bottom:0; left:0; right:0; z-index:4200; display:flex; align-items:stretch;
  height:calc(44px + env(safe-area-inset-bottom,0px)); padding-bottom:env(safe-area-inset-bottom,0px);
  background:linear-gradient(180deg, rgba(28,46,82,.95), rgba(8,18,40,.97));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 -1px 5px rgba(0,0,0,.4);
}
.m-sk{ flex:1; border:none; background:none; color:#eaf2ff; font-size:15px; font-weight:bold;
  text-shadow:0 1px 3px rgba(0,0,0,.6); }
.m-sk-l{ text-align:left; padding-left:20px; }
.m-sk-r{ text-align:right; padding-right:20px; }
/* центральная клавиша-«пилюля» (домой) — как select-key на Nokia */
.m-sk-mid{ width:64px; margin:7px 4px; border-radius:14px; border:1px solid rgba(160,195,245,.45);
  display:flex; align-items:center; justify-content:center; padding:0; background:
  linear-gradient(180deg, rgba(96,128,186,.85), rgba(30,48,88,.95));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 -2px 4px rgba(0,0,0,.35), 0 2px 5px rgba(0,0,0,.4); }
.m-sk-mid i{ width:22px; height:13px; border:2px solid #cfe0ff; border-radius:4px; display:block;
  box-shadow:0 1px 2px rgba(0,0,0,.4); }
.m-sk-mid:active{ filter:brightness(1.25); }
.m-sk.m-dim{ opacity:.4; }
.m-sk:active{ background:rgba(255,255,255,.14); }

/* ---------- ПРИЛОЖЕНИЯ (нативный полноэкранный вид, выезд справа) ---------- */
html.mobile #windows{ position:fixed; inset:0 !important; z-index:2000; }
html.mobile .win{
  position:fixed !important; left:0 !important; right:0 !important;
  top:calc(env(safe-area-inset-top,0px) + 28px) !important;
  bottom:calc(44px + env(safe-area-inset-bottom,0px)) !important;
  width:auto !important; height:auto !important;
  border-radius:0; border:none; box-shadow:-8px 0 24px rgba(0,0,0,.35);
  animation:mPush .24s cubic-bezier(.2,.8,.2,1);
}
@keyframes mPush{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }
html.mobile .win.closing{ animation:mPushOut .11s ease-in forwards !important; }  /* короче 120мс удаления в os.js */
@keyframes mPushOut{ to{ transform:translateX(14%); opacity:0; } }
html.mobile .win.min{ display:none; }

/* нативная шапка: «‹» слева + заголовок */
html.mobile .win__title{ position:relative; border-radius:0; height:48px; padding:0 12px; gap:4px;
  background:linear-gradient(180deg,#4a90f2 0%,#2f6bd6 48%,#2560cc 52%,#1c52bf 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.2), 0 2px 7px rgba(0,0,0,.3); }
html.mobile .win__title::after{ display:none; }
html.mobile .win__title-ico{ font-size:19px; }
html.mobile .win__title-txt{ font-size:16px; font-weight:bold; }
html.mobile .win__btns{ order:-1; margin-right:4px; }
html.mobile .win__btn--min, html.mobile .win__btn--max, html.mobile .win__resize{ display:none !important; }
html.mobile .win__btn--close{ width:auto; min-width:34px; height:34px; padding:0 6px;
  border:none; background:none; box-shadow:none; color:#fff; font-size:0; }
html.mobile .win__btn--close::before{ content:"‹"; font-size:32px; line-height:1; font-weight:bold;
  text-shadow:0 1px 2px rgba(0,0,0,.4); }
html.mobile .win__btn--close:active{ opacity:.6; }
html.mobile .win__body{ font-size:15px; -webkit-overflow-scrolling:touch; }
html.mobile .win__body h2{ font-size:19px; }

/* развёрнутые в полноэкранном окне сетки/детали услуг */
html.mobile .folder__bar{ display:none; }   /* убрать «Мой компьютер ›» — это десктопное */
html.mobile .folder__grid{ grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); padding-top:14px; }
html.mobile .svc__stage{ height:170px; }
/* «нативнее»: крупнее тапы внутри приложений */
html.mobile .btn{ padding:11px 18px; font-size:14px; }
html.mobile .fitem{ padding:12px 6px; }
html.mobile .cart__row{ padding:12px 14px; }
html.mobile .social-card{ padding:18px; }
html.mobile .win__body ul{ padding-left:18px; }

/* ---------- ЗАСТАВКА (мобильная) ---------- */
html.mobile .boot{ font-size:13px; }
html.mobile .splash__logo{ font-size:46px; }

/* ---------- РАДИО как нижняя шторка ---------- */
html.mobile .radio{
  position:fixed !important; left:0 !important; right:0 !important;
  bottom:calc(44px + env(safe-area-inset-bottom,0px)) !important; top:auto !important;
  width:auto !important; border-radius:16px 16px 0 0; z-index:3000;
  box-shadow:0 -6px 22px rgba(0,0,0,.4);
}
html.mobile .radio.collapsed{ width:auto !important; }
html.mobile .radio__disp{ margin:8px 12px; }

/* ---------- МЕНЮ «Опции» (нижний лист) ---------- */
.m-sheet-ov{ position:fixed; inset:0; z-index:8500; background:rgba(0,0,20,.45); display:flex; align-items:flex-end; }
.m-sheet{ width:100%; background:#f3f3f5; border-radius:16px 16px 0 0; max-height:76vh; overflow-y:auto;
  animation:mSheetUp .2s ease-out; padding-bottom:calc(8px + env(safe-area-inset-bottom,0px)); }
@keyframes mSheetUp{ from{ transform:translateY(100%); } to{ transform:none; } }
.m-sheet-bar{ position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:10px;
  padding:9px 14px; font-weight:bold; color:#fff; background:linear-gradient(180deg,#2f6bd6,#1c52bf); }
.m-sheet-q{ flex:1; min-width:0; border:none; border-radius:16px; padding:7px 12px; font-size:13px;
  background:rgba(255,255,255,.92); color:#111; outline:none; }
.m-sheet-item{ display:flex; align-items:center; gap:13px; width:100%; padding:14px 16px;
  border:none; background:none; font-size:15px; color:#111; text-align:left; border-bottom:1px solid #e4e4e8; }
.m-sheet-item:active{ background:#dce6f6; }
.m-sheet-ico{ width:26px; text-align:center; font-size:20px; }
.m-sheet-head{ padding:9px 16px 5px; font-size:11px; font-weight:bold; letter-spacing:.5px;
  text-transform:uppercase; color:#6a7384; background:#ececf0; }
.m-sheet-foot{ padding:12px 16px calc(4px + env(safe-area-inset-bottom,0px)); font-size:10.5px;
  color:#888; line-height:1.5; text-align:center; }

/* ---------- мелочи поверх софт-клавиш ---------- */
html.mobile .toast{ bottom:calc(54px + env(safe-area-inset-bottom,0px)); }
html.mobile .privacy-bar{ bottom:calc(50px + env(safe-area-inset-bottom,0px)); max-width:94vw; }
html.mobile .traypop{ display:none !important; }

/* ---------- игровой пад (тетрис) — виден и на десктопе, но компактный ---------- */
.gpad{ display:flex; gap:8px; justify-content:center; margin-top:8px; }
.gpad__b{ width:46px; height:40px; border:1px solid #2e57b8; border-radius:8px; font-size:18px;
  background:linear-gradient(180deg,#fdfefe,#cfe0fa); color:#0a2a6a; }
.gpad__b:active{ transform:translateY(1px); filter:brightness(.96); }

/* ===================================================================
   ✨ S60 NATIVE PASS — мобилка как самостоятельная ОС 2000-х,
   а не портированный Windows. Всё keyed на html.mobile.
   =================================================================== */

/* --- шапка приложений: тёмное глянцевое стекло в тон статус-бара (вместо XP-синей) --- */
html.mobile .win__title{
  background:linear-gradient(180deg, rgba(64,92,148,.98) 0%, rgba(34,52,92,.98) 46%,
                                     rgba(20,34,64,.98) 54%, rgba(10,20,42,.98) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32), inset 0 -1px 0 rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.4);
}
html.mobile .win{ background:#eef1f7; }

/* --- ПАПКИ → S60-СПИСКИ: строки во всю ширину, стрелка ›, синяя полоса выделения --- */
html.mobile .win__body:has(> .folder){ padding:0; }
html.mobile .folder__grid{
  display:flex !important; flex-direction:column; gap:0; padding:0 !important; background:#f7f9fd;
}
html.mobile .fitem{
  display:grid !important; grid-template-columns:46px 1fr 20px; column-gap:12px;
  align-items:center; width:100%; padding:12px 14px !important; text-align:left;
  border:none; border-radius:0; border-bottom:1px solid rgba(20,40,90,.10);
  background:linear-gradient(180deg,#ffffff,#f2f5fb);
}
html.mobile .fitem__ico{ grid-row:1/3; font-size:30px; text-align:center; }
html.mobile .fitem__name{ grid-column:2; font-size:15px; font-weight:600; color:#122a66; }
html.mobile .fitem__price{ grid-column:2; font-size:12.5px; }
html.mobile .fitem::after{
  content:"›"; grid-column:3; grid-row:1/3; font-size:24px; line-height:1;
  color:#9fb2d4; font-weight:bold; text-align:center;
}
/* классическая S60-полоса выделения при тапе */
html.mobile .fitem:active{
  background:linear-gradient(180deg,#5b9df5 0%,#2f6bd6 50%,#1c52bf 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
}
html.mobile .fitem:active .fitem__name,
html.mobile .fitem:active .fitem__price,
html.mobile .fitem:active::after{ color:#fff; }
html.mobile .fitem:active .fitem__name b{ color:#ffd7d7 !important; }

/* --- страница услуги: аккуратный плавающий экшен-бар (не грубый тёмный кусок) --- */
html.mobile .svc__price-bar{
  position:sticky; bottom:10px; margin:12px 10px 10px; border-radius:16px;
  background:linear-gradient(180deg, rgba(52,76,122,.96) 0%, rgba(24,40,74,.96) 55%, rgba(14,26,52,.97) 100%);
  border:1px solid rgba(150,185,235,.35); border-top-color:rgba(210,230,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 6px 18px rgba(0,10,40,.45);
  padding:10px 14px; gap:12px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
html.mobile .svc__price{ color:#eaf4ff; font-size:19px; white-space:nowrap; }
html.mobile .svc__price small{ color:#9fb8e8; }
html.mobile .svc__act{ flex:1; display:flex; }
html.mobile .svc__price-bar .btn{
  flex:1; text-align:center; font-size:15px; padding:12px 16px; border-radius:11px;
  text-decoration:none; border:none; color:#fff; font-weight:bold;
  background:linear-gradient(180deg,#63b46f 0%,#2f8f43 48%,#1d7a2e 52%,#156323 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 -2px 4px rgba(0,0,0,.25), 0 3px 8px rgba(0,0,0,.35);
}
html.mobile .svc__price-bar .btn:active{ filter:brightness(.92); transform:translateY(1px); }
/* услуга «по согласованию»: без дублирующей подписи слева — одна широкая кнопка */
html.mobile .svc__price-bar--noprice .svc__price{ display:none; }

/* --- hero-картинки услуг: не обрезать по вертикали, аккуратная сцена --- */
html.mobile .svc__stage{ height:auto; min-height:150px; padding:14px 0 0; }
html.mobile .svc__hero{ height:auto; max-height:230px; max-width:82%; }

/* --- Соцсети на телефоне не нужны (контакты уйдут в «Телефон») --- */
html.mobile .icon[data-id="socials"]{ display:none !important; }

/* --- корзина: крупные тач-мишени, CTA колонкой во всю ширину --- */
html.mobile .cart__qty button{ width:34px; height:34px; font-size:17px; border-radius:8px; }
html.mobile .cart__del{ font-size:19px; padding:8px; }
html.mobile .cart__cta{ flex-direction:column; }
html.mobile .cart__cta .btn{ width:100%; box-sizing:border-box; text-align:center; padding:13px 16px; font-size:15px; border-radius:10px; }

/* --- лист «Опции» → тёмное глянцевое S60-меню (вместо светлого iOS-листа) --- */
html.mobile .m-sheet{
  background:linear-gradient(180deg, rgba(30,44,76,.97), rgba(12,22,44,.98));
  border-top:1px solid rgba(150,185,235,.35);
  box-shadow:0 -8px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18);
}
html.mobile .m-sheet-bar{
  background:linear-gradient(180deg, rgba(64,92,148,.98), rgba(20,34,64,.98));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
}
html.mobile .m-sheet-item{ color:#eaf2ff; border-bottom:1px solid rgba(150,185,235,.14); }
html.mobile .m-sheet-item:active{
  background:linear-gradient(180deg,#5b9df5,#1c52bf); color:#fff;
}
html.mobile .m-sheet-head{ background:rgba(8,16,34,.6); color:#8fa8d8; }
html.mobile .m-sheet-foot{ color:#7288b0; }

/* --- десктопные интеракции, которым не место на телефоне --- */
html.mobile .ctxmenu{ display:none !important; }        /* XP-контекстменю по Android-долгому тапу */
html.mobile #snk{ touch-action:none; }                  /* свайп змейки не должен скроллить окно */
html.mobile .lb-nav{ display:none !important; }         /* стрелки лайтбокса → листание свайпом */
html.mobile .lb-close{ width:46px; height:46px; font-size:24px; }

/* --- бейдж корзины в статус-баре --- */
.m-cart{ display:inline-flex; align-items:center; gap:3px; border:none; padding:1px 7px;
  border-radius:9px; font-size:12px; color:#fff; font-weight:bold;
  background:linear-gradient(180deg,#4fae57,#1d7a2e);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 1px 3px rgba(0,0,0,.4); }
.m-cart b{ font-size:12px; }
.m-note{ color:#9fdcff; font-size:13px; font-weight:bold; animation:mNote 1.6s ease-in-out infinite; }
@keyframes mNote{ 50%{ opacity:.45; } }

/* ================= ПРИЛОЖЕНИЕ «ТЕЛЕФОН» ================= */
.win__body:has(> .phone), .win__body:has(> .music){ padding:0; }
.phone{ position:relative; display:flex; flex-direction:column; height:100%; background:#f2f5fb; }
.ph-tabs{ display:flex; flex:0 0 auto; gap:8px; padding:8px 10px;
  background:linear-gradient(180deg, rgba(56,80,128,.97), rgba(22,36,66,.97));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 2px 6px rgba(0,0,0,.3); }
.ph-tab{ flex:1; border:1px solid rgba(150,185,235,.35); border-radius:10px;
  background:linear-gradient(180deg, rgba(44,64,104,.7), rgba(18,30,58,.8));
  color:#a9bde0; font-size:14px; font-weight:bold; padding:10px 6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15); }
.ph-tab.active{ color:#fff; border-color:rgba(190,220,255,.7);
  background:linear-gradient(180deg,#5b9df5 0%,#2f6bd6 48%,#1c52bf 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 2px 8px rgba(30,90,200,.5);
  text-shadow:0 1px 2px rgba(0,0,0,.4); }
.ph-ava{ width:64px; height:64px; }
.ph-pane{ flex:1; overflow-y:auto; display:flex; flex-direction:column; }
.ph-search{ margin:10px 12px 4px; padding:9px 13px; border:1px solid #c3cfe4; border-radius:18px;
  font-size:14px; background:#fff; outline:none; }
.ph-note{ padding:10px 16px 0; font-size:12.5px; color:#7a88a5; }
.ph-contact{ display:flex; align-items:center; gap:13px; padding:14px 16px 10px; }
.ph-ava{ width:54px; height:54px; border-radius:12px; object-fit:cover;
  border:1px solid rgba(20,40,90,.2); box-shadow:0 2px 6px rgba(0,0,0,.2); }
.ph-cinfo{ display:flex; flex-direction:column; gap:2px; }
.ph-cinfo b{ font-size:16px; color:#122a66; }
.ph-cinfo span{ font-size:12.5px; color:#7a88a5; }
.ph-row{ display:grid; grid-template-columns:34px 1fr 18px; align-items:center; gap:10px;
  width:100%; padding:13px 16px; border:none; text-align:left; font-size:15px; color:#122a66;
  background:linear-gradient(180deg,#ffffff,#f2f5fb); border-bottom:1px solid rgba(20,40,90,.1);
  text-decoration:none; }
.ph-row .ic{ font-size:21px; text-align:center; }
.ph-chev{ color:#9fb2d4; font-size:22px; font-weight:bold; text-align:center; }
.ph-row:active{ background:linear-gradient(180deg,#5b9df5,#1c52bf); color:#fff; }
.ph-row:active .ph-chev{ color:#fff; }
/* дайлер */
.ph-pane[data-p="d"]{ background:linear-gradient(180deg,#16213c,#0a1226); }
.ph-num{ flex:0 0 auto; min-height:52px; display:flex; align-items:center; justify-content:center;
  color:#eaf4ff; font-size:30px; font-weight:bold; letter-spacing:2px; font-variant-numeric:tabular-nums;
  padding:12px 14px 4px; word-break:break-all; text-align:center; }
.ph-pad{ flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:9px; padding:8px 18px; align-content:center; }
.ph-key{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  min-height:56px; border:1px solid rgba(150,185,235,.3); border-radius:13px; color:#eaf4ff;
  background:linear-gradient(180deg, rgba(64,92,148,.85), rgba(22,38,72,.9));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 2px 5px rgba(0,0,0,.35); }
.ph-key b{ font-size:21px; line-height:1; }
.ph-key small{ font-size:9.5px; color:#9fb8e8; letter-spacing:1px; text-transform:uppercase; }
.ph-key:active{ background:linear-gradient(180deg,#5b9df5,#1c52bf); transform:translateY(1px); }
.ph-callrow{ flex:0 0 auto; display:flex; align-items:center; justify-content:center; gap:22px; padding:8px 0 16px; }
.ph-call{ width:64px; height:64px; border-radius:50%; border:none; font-size:26px; color:#fff;
  background:linear-gradient(180deg,#63c06f 0%,#2f9f43 48%,#1d8a2e 52%,#136a22 100%);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.4), 0 4px 12px rgba(0,0,0,.45); }
.ph-call:active{ filter:brightness(.9); transform:translateY(1px); }
.ph-del{ width:46px; height:46px; border-radius:50%; border:1px solid rgba(150,185,235,.3);
  background:rgba(30,46,84,.8); color:#c9d9f5; font-size:18px; }
/* экран вызова */
.ph-calling{ position:absolute; inset:0; z-index:5; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; text-align:center; padding:20px;
  background:radial-gradient(120% 100% at 50% 0%, #24406e 0%, #0a1226 70%); color:#eaf4ff; }
.ph-cava{ width:96px; height:96px; border-radius:22px; overflow:hidden; font-size:52px;
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.1);
  border:1px solid rgba(150,185,235,.35); box-shadow:0 6px 20px rgba(0,0,0,.5); }
.ph-cava img{ width:100%; height:100%; object-fit:cover; }
.ph-cname{ font-size:20px; font-weight:bold; }
.ph-cstat{ font-size:14px; color:#9fb8e8; line-height:1.5; animation:mNote 1.4s ease-in-out infinite; }
.ph-cstat small{ font-size:12.5px; color:#8aa0c8; }
.ph-hang{ margin-top:6px; padding:12px 26px; border:none; border-radius:24px; color:#fff; font-size:15px; font-weight:bold;
  background:linear-gradient(180deg,#e0645a 0%,#c23a30 50%,#a52a20 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 3px 10px rgba(0,0,0,.4); }

/* ================= ПРИЛОЖЕНИЕ «МУЗЫКА» ================= */
.music{ display:flex; flex-direction:column; align-items:center; gap:10px; height:100%;
  padding:22px 18px 16px; background:radial-gradient(130% 90% at 50% 0%, #21395f 0%, #0a1226 72%); }
.mu-cover{ position:relative; width:min(62vw,230px); aspect-ratio:1; border-radius:20px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:linear-gradient(150deg,#2b4d8f 0%,#153064 55%,#0c1c40 100%);
  border:1px solid rgba(150,185,235,.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 10px 30px rgba(0,0,0,.55); }
.mu-cover::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(255,255,255,.28) 0%, transparent 38%); }   /* глянцевый блик */
.mu-logo{ position:absolute; bottom:12px; font-size:14px; font-weight:800; letter-spacing:2px; color:rgba(220,235,255,.8);
  text-shadow:0 1px 4px rgba(0,0,0,.6); }
.mu-eq{ display:flex; align-items:flex-end; gap:7px; height:84px; }
.mu-eq i{ width:11px; height:12px; background:linear-gradient(180deg,#8fd8ff,#2f8fd6); border-radius:3px; }
.mu-cover.playing .mu-eq i{ animation:muEq .9s ease-in-out infinite; }
.mu-cover.playing .mu-eq i:nth-child(2){ animation-duration:.62s; }
.mu-cover.playing .mu-eq i:nth-child(3){ animation-duration:1.05s; }
.mu-cover.playing .mu-eq i:nth-child(4){ animation-duration:.5s; }
.mu-cover.playing .mu-eq i:nth-child(5){ animation-duration:.8s; }
.mu-cover.playing .mu-eq i:nth-child(6){ animation-duration:.66s; }
.mu-cover.playing .mu-eq i:nth-child(7){ animation-duration:.95s; }
@keyframes muEq{ 0%,100%{ height:12px; } 50%{ height:78px; } }
.mu-track{ font-size:17px; font-weight:bold; color:#eaf4ff; text-align:center; margin-top:4px; }
.mu-idx{ font-size:12.5px; color:#8aa0c8; }
.mu-ctrl{ display:flex; align-items:center; justify-content:center; gap:20px; margin-top:8px; }
.mu-btn{ width:56px; height:56px; border-radius:50%; border:1px solid rgba(150,185,235,.35);
  display:flex; align-items:center; justify-content:center; padding:0; line-height:1; font-size:19px; color:#eaf4ff;
  background:linear-gradient(180deg, rgba(70,100,160,.9), rgba(24,42,80,.95));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 4px 10px rgba(0,0,0,.4); }
.mu-btn--big{ width:74px; height:74px; font-size:27px;
  background:linear-gradient(180deg,#5b9df5 0%,#2f6bd6 48%,#1c52bf 100%); }
.mu-btn:active{ filter:brightness(.88); transform:translateY(1px); }
.mu-volrow{ display:flex; align-items:center; gap:10px; width:82%; margin-top:10px; color:#8aa0c8; font-size:14px; }
.mu-vol{ flex:1; accent-color:#5b9df5; }
.mu-hint{ margin-top:auto; font-size:11.5px; color:#66799f; text-align:center; }

/* ================= ХАБ «ИГРЫ» как S60-меню ================= */
html.mobile .special-list .btn{
  display:flex; align-items:center; width:100%; box-sizing:border-box; text-align:left;
  margin:0 0 -1px; padding:15px 16px; font-size:15px; border-radius:0;
  border:none; border-bottom:1px solid rgba(20,40,90,.1); color:#122a66;
  background:linear-gradient(180deg,#ffffff,#f2f5fb); box-shadow:none;
}
html.mobile .special-list .btn:active{
  background:linear-gradient(180deg,#5b9df5,#1c52bf); color:#fff;
}
html.mobile .win__body:has(> .special-list){ padding:0; }
html.mobile .special-list h2{ padding:14px 16px 0; }
html.mobile .special-list p{ padding:0 16px; }
html.mobile .special-list > div[style]{ margin:6px 12px 10px !important; }

/* ================= POWER SAVER (чёрный экран с ползающими часами) ================= */
.m-saver{ position:fixed; inset:0; z-index:9500; background:#000; display:flex; }
.m-saver__clock{ position:absolute; color:#cfd8e8; text-align:center; transition:top 2s ease, left 2s ease; }
.m-saver__clock b{ display:block; font-size:44px; font-weight:800; letter-spacing:2px; font-variant-numeric:tabular-nums; }
.m-saver__clock span{ font-size:13px; color:#6a7890; }
.m-saver__note{ position:absolute; bottom:26px; left:0; right:0; text-align:center; color:#3a4558; font-size:11px; }

/* ================= МОНЕТКА — мобильный полиш ================= */
html.mobile .win__body:has(> .surprise){ padding:0; }
html.mobile .surprise{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  height:100%; padding:20px 18px; text-align:center;
  background:radial-gradient(130% 90% at 50% 0%, #21395f 0%, #0a1226 72%); color:#eaf4ff;
}
html.mobile .surprise h2{ color:#eaf4ff; }
html.mobile .surprise p{ color:#9fb8e8; }
/* ⚠️ filter на .coin запрещён: он схлопывает preserve-3d и ломает backface-visibility (виден зеркальный «Орёл») */
html.mobile .coin{ width:170px; height:170px; }
html.mobile .coin-stage{ filter:drop-shadow(0 12px 24px rgba(0,0,0,.55)); }
html.mobile .coin__face{ font-size:56px; }
html.mobile .surprise__result{ font-size:17px; color:#eaf4ff; min-height:26px; }

/* ===================================================================
   🖤 S60 DARK THEME — перекраска по реальным скриншотам Nokia 5800/N8:
   чёрный фон, бирюзовое выделение, серые кнопки-плашки.
   Каскад ниже перекрывает прежний сине-стеклянный вид.
   =================================================================== */
:root{
  --s60-teal:#2ad4e0; --s60-teal-hi:#8ff2f8; --s60-teal-dk:#0f8f9c;
  --s60-key1:#4a4a4a; --s60-key2:#232323; --s60-line:rgba(255,255,255,.09);
}

/* --- статус-бар: тонкий чёрный --- */
html.mobile .m-statusbar{
  background:linear-gradient(180deg,#161616,#000);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 1px 3px rgba(0,0,0,.6);
}
.m-sig i{ background:var(--s60-teal); }
.m-batt b{ background:var(--s60-teal); }
.m-note{ color:var(--s60-teal-hi); }
.m-cart{ background:linear-gradient(180deg,#35e0ea,#0f8f9c); color:#00252a; }

/* --- виджеты домашнего экрана --- */
.m-w{ background:linear-gradient(180deg, rgba(20,22,24,.82), rgba(0,0,0,.9));
  border:1px solid rgba(140,235,245,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 3px 9px rgba(0,0,0,.5); }
.m-w-clock b{ color:#eafcff; }
.m-w-prof{ color:var(--s60-teal); }

/* --- иконки меню: цветные на чёрном, бирюзовая рамка выделения --- */
html.mobile .icon:active{
  background:rgba(42,212,224,.16);
  box-shadow:inset 0 0 0 2px var(--s60-teal); border-radius:12px;
}

/* --- софт-клавиши: две серые «плашки», как на 5800 --- */
html.mobile .m-softkeys{ background:#000; box-shadow:none; gap:6px; padding:0 6px env(safe-area-inset-bottom,0px); }
.m-sk{
  margin:7px 0; border-radius:8px 8px 3px 3px; font-size:14.5px;
  border:1px solid #555; border-bottom-color:#222; color:#f2f2f2;
  background:linear-gradient(180deg,#585858 0%,#3a3a3a 46%,#262626 54%,#161616 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 2px 4px rgba(0,0,0,.5);
}
.m-sk-l{ text-align:center; padding-left:0; }
.m-sk-r{ text-align:center; padding-right:0; }
.m-sk:active{ background:linear-gradient(180deg,#2ad4e0,#0f8f9c); color:#00252a; }
.m-sk-mid{ border-color:#555; background:linear-gradient(180deg,#585858,#161616);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25), 0 2px 4px rgba(0,0,0,.5); }
.m-sk-mid i{ border-color:#ddd; }
.m-sk-mid:active{ background:linear-gradient(180deg,#2ad4e0,#0f8f9c); }

/* --- шапка приложений: чёрная тонкая полоса, «✕» слева (как на 5800) --- */
html.mobile .win__title{
  height:42px; background:linear-gradient(180deg,#1c1c1c,#050505);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 1px 4px rgba(0,0,0,.6);
}
html.mobile .win__title-txt{ font-size:15.5px; }
html.mobile .win__btn--close::before{ content:"✕"; font-size:19px; font-weight:normal; }
html.mobile .win{ background:#000; box-shadow:none; }

/* --- анимация открытия: короткий S60-зум вместо iOS-слайда --- */
@keyframes mZoom{ from{ transform:scale(.86); opacity:0; } to{ transform:scale(1); opacity:1; } }
html.mobile .win{ animation:mZoom .16s ease-out; }
@keyframes mZoomOut{ to{ transform:scale(.9); opacity:0; } }
html.mobile .win.closing{ animation:mZoomOut .11s ease-in forwards !important; }

/* --- окна-СПИСКИ: чёрный фон, белый текст, бирюзовое выделение --- */
html.mobile .win__body{ background:#000; color:#eee; }
html.mobile .win__body h2{ color:#fff; }
html.mobile .win__body h3{ color:var(--s60-teal-hi); }
html.mobile .win__body a{ color:var(--s60-teal); }
html.mobile .folder__grid{ background:#000; }
html.mobile .fitem{ background:#000; border-bottom:1px solid var(--s60-line); }
html.mobile .fitem__name{ color:#f2f2f2; }
html.mobile .fitem__price{ color:var(--s60-teal); }
html.mobile .fitem::after{ color:#666; }
html.mobile .fitem:active{
  background:linear-gradient(180deg,#3fe3ec 0%,#17b7c4 100%); box-shadow:none;
}
html.mobile .fitem:active .fitem__name, html.mobile .fitem:active::after{ color:#00252a; }
html.mobile .fitem:active .fitem__price{ color:#003a40; }

/* --- контент услуг/документов = «браузер»: остаётся светлым для читаемости --- */
html.mobile .win__body:has(.svc__pad){ background:#fff; color:#111; }
html.mobile .win__body:has(.svc__pad) h2{ color:#0a2a6a; }
html.mobile .win__body:has(.svc__pad) h3{ color:#13338a; }
html.mobile .win__body:has(.svc__pad) a{ color:#0a4ae0; }

/* --- прайс-бар: чёрное стекло + бирюзовая CTA --- */
html.mobile .svc__price-bar{
  background:linear-gradient(180deg, rgba(40,40,40,.96), rgba(8,8,8,.97));
  border:1px solid #4a4a4a; border-top-color:#666;
}
html.mobile .svc__price{ color:#fff; }
html.mobile .svc__price small{ color:#9adfe6; }
html.mobile .svc__price-bar .btn{
  background:linear-gradient(180deg,#49e6ef 0%,#1cc0cc 48%,#0f8f9c 100%);
  color:#00252a !important; text-shadow:none;   /* !important — перебить синий текст .btn--tg */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 4px rgba(0,0,0,.2), 0 3px 8px rgba(0,0,0,.4);
}

/* --- корзина: тёмная --- */
html.mobile .win__body:has(> .cart){ padding:0; background:#000; }
html.mobile .cart__row{ border-bottom:1px solid var(--s60-line); }
html.mobile .cart__row .name{ color:#f2f2f2; }
html.mobile .cart__row .price{ color:var(--s60-teal); }
html.mobile .cart__qty button{ background:#2a2a2a; border-color:#555; color:#eee; }
html.mobile .cart__empty{ color:#999; }
html.mobile .cart__foot{ background:#0d0d0d; border-top:1px solid #333; }
html.mobile .cart__line{ color:#ddd; }
html.mobile .cart__line.total{ color:#fff; border-top-color:#333; }
html.mobile .cart__line .disc{ color:var(--s60-teal); }
html.mobile .cart__cta .btn{
  background:linear-gradient(180deg,#49e6ef,#0f8f9c); color:#00252a; border:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 3px 8px rgba(0,0,0,.4); }
html.mobile .cart__cta #cartClear{ background:linear-gradient(180deg,#585858,#161616); color:#eee; border:1px solid #555; }

/* --- лист «Опции»: тёмно-серый попап S60 --- */
html.mobile .m-sheet{
  background:linear-gradient(180deg,#2e2e2e,#0c0c0c);
  border-top:1px solid #5a5a5a;
  box-shadow:0 -8px 30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.12);
}
html.mobile .m-sheet-bar{ background:linear-gradient(180deg,#1c1c1c,#050505);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12); }
html.mobile .m-sheet-item{ color:#f2f2f2; border-bottom:1px solid var(--s60-line); }
html.mobile .m-sheet-item:active{ background:linear-gradient(180deg,#3fe3ec,#17b7c4); color:#00252a; }
html.mobile .m-sheet-head{ background:#000; color:#7de6ee; }
html.mobile .m-sheet-foot{ color:#888; }

/* --- ТЕЛЕФОН: тёмный, серые клавиши как на 5800 --- */
.phone{ background:#000; }
.ph-tabs{ background:linear-gradient(180deg,#1c1c1c,#050505); box-shadow:inset 0 1px 0 rgba(255,255,255,.1); }
.ph-tab{ border:1px solid #555; border-bottom-color:#222; color:#ccc;
  background:linear-gradient(180deg,#4a4a4a,#1c1c1c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2); }
.ph-tab.active{ border-color:#7de6ee; color:#00252a;
  background:linear-gradient(180deg,#49e6ef,#17b7c4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5); text-shadow:none; }
.ph-search{ background:#1a1a1a; border-color:#444; color:#eee; }
.ph-search::placeholder{ color:#777; }
.ph-note{ color:#8aa; }
.ph-cinfo b{ color:#fff; }
.ph-cinfo span{ color:#9adfe6; }
.ph-row{ background:#000; color:#f2f2f2; border-bottom:1px solid var(--s60-line); }
.ph-row:active{ background:linear-gradient(180deg,#3fe3ec,#17b7c4); color:#00252a; }
.ph-row:active .ph-chev{ color:#00252a; }
.ph-pane[data-p="d"]{ background:#000; }
.ph-num{ color:#fff; }
.ph-key{ border:1px solid #555; border-bottom-color:#1a1a1a; color:#fff;
  background:linear-gradient(180deg,#4e4e4e 0%,#2e2e2e 46%,#1c1c1c 54%,#101010 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 4px rgba(0,0,0,.5); border-radius:9px; }
.ph-key small{ color:#9adfe6; }
.ph-key:active{ background:linear-gradient(180deg,#3fe3ec,#17b7c4); }
.ph-key:active b, .ph-key:active small{ color:#00252a; }
.ph-del{ background:#1c1c1c; border-color:#555; }
.ph-calling{ background:radial-gradient(120% 100% at 50% 0%, #163035 0%, #000 70%); }
.ph-cava{ border-color:rgba(140,235,245,.4); background:rgba(255,255,255,.06); }

/* --- МУЗЫКА: Now Playing как на 5800 --- */
.music{ background:#000; padding:14px 0 0; gap:0; }
.mu-head{ display:flex; align-items:center; width:100%; padding:0 16px 8px; color:#9adfe6; font-size:12.5px; }
.mu-head b{ margin-left:auto; color:#fff; font-weight:600; }
.mu-cover{ width:min(58vw,220px); border-radius:6px;
  background:linear-gradient(150deg,#123c44 0%,#071e24 60%,#02090b 100%);
  border:1px solid rgba(140,235,245,.35); }
.mu-eq i{ background:linear-gradient(180deg,var(--s60-teal-hi),var(--s60-teal-dk)); }
.mu-logo{ color:rgba(160,240,248,.85); }
.mu-track{ color:#fff; margin-top:14px; }
.mu-idx{ color:#9adfe6; }
/* прогресс-строка со временем */
.mu-progress{ width:86%; margin-top:12px; }
.mu-ptimes{ display:flex; justify-content:space-between; color:#9adfe6; font-size:12px;
  font-variant-numeric:tabular-nums; margin-bottom:4px; }
.mu-pbar{ height:4px; border-radius:2px; background:#222; overflow:hidden; }
.mu-pbar i{ display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--s60-teal-dk),var(--s60-teal-hi)); transition:width 1s linear; }
/* три широкие прямоугольные кнопки в ряд — как на скрине Now playing */
.mu-ctrl{ width:calc(100% - 12px); gap:6px; margin-top:16px; }
.mu-btn, .mu-btn--big{
  flex:1; width:auto; height:52px; border-radius:8px 8px 3px 3px; font-size:20px; color:#fff;
  border:1px solid #555; border-bottom-color:#1a1a1a;
  background:linear-gradient(180deg,#4e4e4e 0%,#2e2e2e 46%,#1c1c1c 54%,#101010 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 4px rgba(0,0,0,.5);
}
.mu-btn--big{ font-size:24px; }
.mu-btn:active{ background:linear-gradient(180deg,#3fe3ec,#17b7c4); color:#00252a; filter:none; }
.mu-volrow{ color:#9adfe6; }
.mu-vol{ accent-color:var(--s60-teal); }
.mu-hint{ color:#5f7d82; padding-bottom:12px; }

/* --- ИГРЫ: сетка иконок на чёрном (как меню приложений) --- */
.g-note{ margin:10px 12px; padding:9px 12px; border-radius:8px; font-size:12.5px;
  background:#101a1c; border:1px solid rgba(140,235,245,.3); color:#bfeef2; }
.g-note--won{ background:#0d1f14; border-color:rgba(120,230,150,.35); color:#b9edc8; }
.g-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:4px; padding:10px 8px; }
.g-app{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 4px;
  border:none; background:none; border-radius:12px; }
.g-app .gi{ font-size:44px; line-height:1; filter:drop-shadow(0 2px 3px rgba(0,0,0,.6)); }
.g-app .gl{ font-size:12px; color:#f2f2f2; }
.g-app:active{ background:rgba(42,212,224,.16); box-shadow:inset 0 0 0 2px var(--s60-teal); }

/* --- монетка: перекраска под тему --- */
html.mobile .surprise{ background:radial-gradient(130% 90% at 50% 0%, #163035 0%, #000 72%); }
html.mobile .surprise p{ color:#9adfe6; }

/* --- power saver и прочее уже чёрные — ок --- */
html.mobile .m-w-date{ color:#dfeeff; }

/* ================= «ЗАПУСК ПРИЛОЖЕНИЯ»: сплеш как у Java-мидлетов ================= */
.m-appsplash{ position:absolute; inset:0; z-index:60; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:12px; background:#000; transition:opacity .2s; }
.m-appsplash.out{ opacity:0; }
.m-appsplash__ico{ font-size:64px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)); animation:mSpIco .5s ease-out; }
@keyframes mSpIco{ from{ transform:scale(.6); opacity:0; } }
.m-appsplash__name{ color:#fff; font-size:17px; font-weight:bold; }
.m-appsplash__bar{ width:120px; height:4px; border-radius:2px; background:#1c1c1c; overflow:hidden; }
.m-appsplash__bar i{ display:block; height:100%; width:40%; border-radius:2px;
  background:linear-gradient(90deg,var(--s60-teal-dk),var(--s60-teal-hi));
  animation:mSpBar .62s ease-in forwards; }
@keyframes mSpBar{ from{ width:8%; } to{ width:100%; } }

/* ================= ПЛЕЕР: рисованные глифы + обложки станций + свайп ================= */
.mu-g{ width:26px; height:26px; fill:#fff; display:block; }
.mu-btn--big .mu-g{ width:30px; height:30px; }
.mu-btn:active .mu-g{ fill:#00252a; }
/* play/pause переключаются классом is-playing на .music */
.music .mu-g-pause{ display:none; }
.music.is-playing .mu-g-pause{ display:block; }
.music.is-playing .mu-g-play{ display:none; }
/* свои обложки станций (8 палитр) */
.mu-c0{ background:linear-gradient(150deg,#123c44 0%,#071e24 60%,#02090b 100%); }
.mu-c1{ background:linear-gradient(150deg,#3a1d4e 0%,#1b0d2e 60%,#08030f 100%); }
.mu-c2{ background:linear-gradient(150deg,#4e2a12 0%,#2b1406 60%,#0e0501 100%); }
.mu-c3{ background:linear-gradient(150deg,#123f22 0%,#07200f 60%,#020a04 100%); }
.mu-c4{ background:linear-gradient(150deg,#4a1420 0%,#280910 60%,#0d0204 100%); }
.mu-c5{ background:linear-gradient(150deg,#14284e 0%,#0a142e 60%,#03060f 100%); }
.mu-c6{ background:linear-gradient(150deg,#4a3a10 0%,#281f06 60%,#0d0a01 100%); }
.mu-c7{ background:linear-gradient(150deg,#3c1240 0%,#1f0822 60%,#0a020b 100%); }
.mu-c1 .mu-eq i{ background:linear-gradient(180deg,#d9a9ff,#7b3fd6); }
.mu-c2 .mu-eq i{ background:linear-gradient(180deg,#ffcf8f,#d67e1c); }
.mu-c3 .mu-eq i{ background:linear-gradient(180deg,#9fffb8,#2fae54); }
.mu-c4 .mu-eq i{ background:linear-gradient(180deg,#ff9fae,#d63a55); }
.mu-c5 .mu-eq i{ background:linear-gradient(180deg,#9fc4ff,#3a6fd6); }
.mu-c6 .mu-eq i{ background:linear-gradient(180deg,#ffe89f,#d6a51c); }
.mu-c7 .mu-eq i{ background:linear-gradient(180deg,#f2a9ff,#b83fd6); }
/* анимация смены станции свайпом */
@keyframes muSlideL{ 0%{ transform:translateX(0); opacity:1; } 45%{ transform:translateX(-46px); opacity:0; }
  55%{ transform:translateX(46px); opacity:0; } 100%{ transform:translateX(0); opacity:1; } }
@keyframes muSlideR{ 0%{ transform:translateX(0); opacity:1; } 45%{ transform:translateX(46px); opacity:0; }
  55%{ transform:translateX(-46px); opacity:0; } 100%{ transform:translateX(0); opacity:1; } }
.mu-cover.mu-sl{ animation:muSlideL .3s ease; }
.mu-cover.mu-sr{ animation:muSlideR .3s ease; }
.mu-cover{ touch-action:pan-y; }

/* ================= ИГРЫ: тёмные полноэкранные, как Java-игры ================= */
html.mobile .win__body:has(#snk), html.mobile .win__body:has(#ttr), html.mobile .win__body:has(.mine){
  background:#000; color:#ddd; }
html.mobile .win__body:has(#snk) b, html.mobile .win__body:has(#ttr) b{ color:#fff; }
html.mobile #snkInfo, html.mobile #ttrInfo{ color:var(--s60-teal) !important; }
html.mobile .minehead{ color:#ddd; }
html.mobile .gpad__b{ border:1px solid #555; border-bottom-color:#1a1a1a; color:#fff;
  background:linear-gradient(180deg,#4e4e4e,#101010);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 2px 4px rgba(0,0,0,.5); width:56px; height:46px; border-radius:9px; }
html.mobile .gpad__b:active{ background:linear-gradient(180deg,#3fe3ec,#17b7c4); color:#00252a; }
.m-svgic{ width:52px; height:52px; display:block; filter:drop-shadow(0 3px 4px rgba(0,0,0,.55)); }

/* ================= «ПРОФИЛЬ» — карточка контакта S60 ================= */
.win__body:has(> .prof){ padding:0; }
.prof{ display:flex; flex-direction:column; height:100%; background:#000; }
.prof__head{ position:relative; display:flex; align-items:flex-end; gap:14px; padding:16px 16px 12px;
  background:radial-gradient(120% 130% at 30% 0%, #17444d 0%, #061518 55%, #000 100%);
  border-bottom:1px solid rgba(140,235,245,.25); }
.prof__photo{ height:150px; width:auto; filter:drop-shadow(0 6px 14px rgba(0,0,0,.6)); }
.prof__id{ display:flex; flex-direction:column; gap:4px; padding-bottom:10px; }
.prof__id b{ color:#fff; font-size:19px; }
.prof__id span{ color:#9adfe6; font-size:13px; }
.prof__rows{ display:flex; flex-direction:column; }

/* ================= «УСЛУГИ» — витрина магазина эпохи ================= */
.win__body:has(> .store){ padding:0; }
.store{ display:flex; flex-direction:column; height:100%; background:#000; overflow-y:auto; }
.st-ban{ flex:0 0 auto; padding:10px 10px 0; }
.st-ban__track{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; border-radius:12px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.st-ban__track::-webkit-scrollbar{ display:none; }
.st-card{ position:relative; flex:0 0 100%; scroll-snap-align:center; height:172px;
  border:1px solid rgba(140,235,245,.3); border-radius:12px; overflow:hidden; padding:0;
  display:flex; align-items:flex-end; justify-content:center; }
.st-c0{ background:radial-gradient(120% 130% at 30% 0%, #17444d 0%, #071e24 60%, #02090b 100%); }
.st-c1{ background:radial-gradient(120% 130% at 30% 0%, #3a2a52 0%, #170f2e 60%, #08030f 100%); }
.st-c2{ background:radial-gradient(120% 130% at 30% 0%, #4a3114 0%, #241505 60%, #0e0501 100%); }
.st-c3{ background:radial-gradient(120% 130% at 30% 0%, #17434a 0%, #0a2b30 60%, #02090b 100%); }
.st-card img{ height:150px; width:auto; max-width:60%; object-fit:contain; margin-right:auto; margin-left:8px;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.55)); }
.st-card__t{ position:absolute; right:12px; top:0; bottom:0; width:52%; display:flex; flex-direction:column;
  justify-content:center; gap:6px; text-align:right; }
.st-card__t b{ color:#fff; font-size:16.5px; line-height:1.25; text-shadow:0 1px 4px rgba(0,0,0,.7); }
.st-card__t small{ color:var(--s60-teal); font-size:13px; font-weight:bold; }
.st-flag{ position:absolute; left:10px; top:10px; padding:2px 9px; border-radius:9px; font-size:10.5px; font-weight:bold;
  color:#00252a; background:linear-gradient(180deg,#5ff0f8,#17b0be);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 2px 5px rgba(0,0,0,.4); }
.st-dots{ display:flex; justify-content:center; gap:6px; padding:8px 0 2px; }
.st-dots i{ width:6px; height:6px; border-radius:50%; background:#333; transition:.2s; }
.st-dots i.on{ background:var(--s60-teal); width:16px; border-radius:3px; }
.st-cap{ padding:10px 16px 6px; font-size:12px; font-weight:bold; letter-spacing:1px;
  text-transform:uppercase; color:#7de6ee; }
.st-list{ display:flex; flex-direction:column; }

/* --- список услуг как в Ovi Store: название+категория, цена справа --- */
.st-item{ display:grid; grid-template-columns:46px 1fr auto 16px; column-gap:12px; align-items:center;
  width:100%; padding:12px 12px 12px 14px; text-align:left; border:none; border-radius:0;
  background:#000; border-bottom:1px solid var(--s60-line); }
.st-item__ico{ font-size:30px; text-align:center; filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
.st-item__mid{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.st-item__mid b{ color:#f2f2f2; font-size:14.5px; line-height:1.25; }
.st-item__mid small{ color:#8a8a8a; font-size:11.5px; }
.st-item__flag{ font-style:normal; color:#ff6a6a; font-size:11px; }
.st-item__price{ color:var(--s60-teal); font-weight:bold; font-size:12.5px; white-space:nowrap; text-align:right; }
.st-item__chev{ color:#666; font-size:20px; font-weight:bold; text-align:center; }
.st-item:active{ background:linear-gradient(180deg,#3fe3ec,#17b7c4); }
.st-item:active .st-item__mid b, .st-item:active .st-item__chev{ color:#00252a; }
.st-item:active .st-item__mid small, .st-item:active .st-item__price{ color:#003a40; }

/* ================= ЕДИНЫЙ СТИЛЬ СИСТЕМНЫХ ПОДСКАЗОК (вместо «вставных» плашек) ================= */
.s60-hint{ display:flex; align-items:center; gap:10px; padding:12px 16px;
  color:#8a9a9e; font-size:12.5px; line-height:1.45;
  background:none; border:none; border-top:1px solid var(--s60-line); }
.s60-hint i{ flex:0 0 auto; width:17px; height:17px; border-radius:50%; font-style:normal;
  display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:bold;
  color:#00252a; background:linear-gradient(180deg,#49e6ef,#0f8f9c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5); }
/* галерея: тот же системный вид */
html.mobile .gallery__hint{ display:flex; align-items:center; gap:10px; padding:10px 16px;
  color:#8a9a9e; font-size:12.5px; background:none; border:none; border-bottom:1px solid var(--s60-line); }

/* ================= ИГРЫ: цветные глянцевые плитки (превью Java-игр) ================= */
.g-grid{ grid-template-columns:repeat(2,1fr); gap:10px; padding:14px 12px 8px; }
.g-app{ position:relative; overflow:hidden; align-items:flex-start; gap:3px;
  padding:14px 14px 12px; border-radius:14px; border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 4px 10px rgba(0,0,0,.45); }
.g-app::after{ content:""; position:absolute; inset:0 0 55% 0;
  background:linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0)); }  /* глянец */
.g-p0{ background:radial-gradient(130% 120% at 20% 0%, #14502a 0%, #072712 60%, #020c05 100%); }
.g-p1{ background:radial-gradient(130% 120% at 20% 0%, #14304e 0%, #081a30 60%, #020710 100%); }
.g-p2{ background:radial-gradient(130% 120% at 20% 0%, #4e2a12 0%, #2b1406 60%, #0e0501 100%); }
.g-p3{ background:radial-gradient(130% 120% at 20% 0%, #4a3a10 0%, #281f06 60%, #0d0a01 100%); }
.g-p4{ background:radial-gradient(130% 120% at 20% 0%, #3a1d4e 0%, #1b0d2e 60%, #08030f 100%); }
.g-app .gi{ font-size:40px; filter:drop-shadow(0 3px 4px rgba(0,0,0,.6)); }
.g-app .gl{ font-size:14.5px; font-weight:bold; color:#fff; }
.g-app .gs{ font-size:11px; color:rgba(255,255,255,.55); }
.g-app:active{ box-shadow:inset 0 0 0 2px var(--s60-teal), 0 4px 10px rgba(0,0,0,.45); background-color:rgba(42,212,224,.1); }

/* ================= ПЛЕЕР: раскладка на весь экран (обложка крупнее, управление внизу) ================= */
.music{ justify-content:space-between; padding-bottom:18px; }
.mu-cover{ width:min(72vw,280px); }
.mu-eq{ height:104px; }
.mu-eq i{ width:13px; }
@keyframes muEq{ 0%,100%{ height:14px; } 50%{ height:96px; } }
.mu-ctrl{ margin-top:0; }
.mu-volrow{ margin-top:0; }

/* ================= форма заявки — тёмная тема ================= */
html.mobile .lead__sub{ color:#9adfe6; }
html.mobile .lead__l{ color:#7de6ee; }
html.mobile .lead__in{ background:#161616; border-color:#444; color:#eee; border-radius:9px; padding:12px 13px; font-size:15px; }
html.mobile .lead__in:focus{ border-color:var(--s60-teal); box-shadow:0 0 0 2px rgba(42,212,224,.2); }
html.mobile .lead__cart{ background:#0d1f14; border-color:rgba(120,230,150,.35); color:#b9edc8; }
html.mobile .lead__agree{ color:#9a9a9a; }
html.mobile .lead__agree a{ color:var(--s60-teal); }
html.mobile .lead__send{ border:none; border-radius:11px; padding:13px 16px; font-size:15px; color:#00252a; font-weight:bold;
  background:linear-gradient(180deg,#49e6ef 0%,#1cc0cc 48%,#0f8f9c 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 3px 8px rgba(0,0,0,.4); }
html.mobile .lead__note{ color:#66799f; }
html.mobile .lead__done{ color:#fff; }