/* ============================================================ Личный кабинет — стили (Фаза 1-2). Тема Anime. ВАЖНО: тема сайта агрессивно задаёт цвета (.night a:link{color:cyan}, .night button{background:#15485c} и т.п.), поэтому ключевые визуальные свойства форсируем !important — иначе перебивается. Иконки .fal уже объявлены в (main.tpl); догружаем нужные глифы. ============================================================ */ /* H1 — межстрочный интервал для многострочных заголовков */ h1{line-height:1.3!important} .lk .fa-user::before,.mls .fa-user::before{content:'\f007'} .lk .fa-lock::before{content:'\f023'} .lk .fa-bookmark::before{content:'\f02e'} .lk .fa-envelope::before{content:'\f0e0'} .lk .fa-comment::before{content:'\f075'} .lk .fa-bolt::before{content:'\f0e7'} .lk .fa-store::before{content:'\f54e'} .lk .fa-list::before{content:'\f03a'} .lk .fa-id-badge::before{content:'\f2c1'} .lk .fa-right-from-bracket::before{content:'\f2f5'} .lk .fa-gauge::before{content:'\f624'} .lk .fa-chevron-down::before,.mls .fa-chevron-down::before{content:'\f078'} /* ---------- токены ---------- */ .lk,.mls{ --acc:#c50725; --acc-h:#a50620; --panel:#ffffff; --panel-2:#f3f5f8; --hover:#eef1f5; --text:#182028; --muted:#727c88; --line:#e7eaee; --field:#f2f4f7; --field-line:#dfe3e8; --link:#c50725; --shadow:0 16px 40px rgba(18,28,42,.18); font-family:'GothamProRegular',sans-serif; } .night .lk,.night .mls{ --panel:#0f2a38; --panel-2:#13323f; --hover:rgba(255,255,255,.07); --text:#eaf2f7; --muted:#8fa8b8; --line:rgba(255,255,255,.09); --field:#0b222d; --field-line:rgba(255,255,255,.13); --link:#57c6e6; --shadow:0 18px 46px rgba(0,0,0,.55); } .lk{position:relative;display:inline-flex;align-items:center} /* ---------- триггер в шапке ---------- */ .lk-trigger{ display:inline-flex!important;align-items:center;gap:8px;height:40px;padding:0 16px; border:0!important;border-radius:22px!important;cursor:pointer;font-family:inherit; font-size:14px;font-weight:600;line-height:1;transition:background .15s,transform .04s; } .lk-trigger:active{transform:translateY(1px)} /* гость — CTA: красная в светлой теме, бирюзовая в тёмной (в тон ночной гамме) */ .lk--guest .lk-trigger{background:var(--acc)!important;color:#fff!important} .lk--guest .lk-trigger:hover{background:var(--acc-h)!important} .lk--guest .lk-trigger .fal{color:#fff!important;font-size:15px} .night .lk--guest .lk-trigger{background:#1f9cbf!important;color:#fff!important} .night .lk--guest .lk-trigger:hover{background:#17869f!important} /* залогинен — красная пилюля с аватаром (светлая тема); тёмная — нейтральная */ .lk--user .lk-trigger{background:var(--acc)!important;color:#fff!important;padding:4px 12px 4px 4px} .lk--user .lk-trigger:hover{background:var(--acc-h)!important} .lk--user .lk-trigger .fa-chevron-down{color:#fff!important} .night .lk--user .lk-trigger{background:var(--panel-2)!important;color:var(--text)!important} .night .lk--user .lk-trigger:hover{background:var(--hover)!important} .night .lk--user .lk-trigger .fa-chevron-down{color:var(--muted)!important} .lk-avatar{ width:32px;height:32px;flex:0 0 32px;border-radius:50%;display:inline-flex;align-items:center; justify-content:center;background:linear-gradient(135deg,var(--acc),#e5342f);color:#fff!important; font-size:15px;font-weight:700;overflow:hidden; } .lk-avatar .fal{color:#fff!important;font-size:15px} .lk-avatar img{width:100%;height:100%;object-fit:cover} .lk-avatar--lg{width:46px;height:46px;flex-basis:46px;font-size:20px} .lk-trigger .fa-chevron-down{color:var(--muted)!important;font-size:11px} /* ---------- панель дропдауна ---------- */ .lk-menu{ position:absolute;top:calc(100% + 12px);right:0;z-index:1200;width:304px;max-width:92vw;padding:8px; background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:16px; box-shadow:var(--shadow)!important;color:var(--text)!important;animation:lk-pop .16s ease; } .lk-menu[hidden]{display:none!important} @keyframes lk-pop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} .lk-menu::before{ content:'';position:absolute;top:-6px;right:24px;width:12px;height:12px; background:var(--panel);border-left:1px solid var(--line);border-top:1px solid var(--line); transform:rotate(45deg); } /* ---------- форма входа ---------- */ .lk-menu__head{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 12px} .lk-menu__title{font-weight:700;font-size:16px;color:var(--text)!important} .lk-menu__close{ width:30px;height:30px;border:0!important;border-radius:9px!important;background:var(--panel-2)!important; color:var(--muted)!important;font-size:18px;line-height:1;cursor:pointer; } .lk-menu__close:hover{background:var(--hover)!important;color:var(--acc)!important} .lk-auth{display:flex;flex-direction:column;gap:10px;padding:0 8px 8px} .lk-field{ display:flex;align-items:center;gap:10px;padding:0 14px;height:46px; background:var(--field)!important;border:1px solid var(--field-line)!important;border-radius:12px; } .lk-field:focus-within{border-color:var(--acc)!important} .lk-field .fal{color:var(--muted)!important;font-size:15px} .lk-field input{ flex:1;border:0!important;outline:0;background:transparent!important;color:var(--text)!important; font-size:14px;font-family:inherit;box-shadow:none!important;height:auto!important;padding:0!important; } .lk-field input::placeholder{color:var(--muted)!important;opacity:1} .lk-remember{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--muted)!important;cursor:pointer;padding:2px} .lk-remember input{width:16px;height:16px;accent-color:var(--acc)} .lk-btn{ height:48px;border:0!important;border-radius:12px!important;font-size:15px;font-weight:700; cursor:pointer;font-family:inherit;transition:background .15s,transform .04s; } .lk-btn:active{transform:translateY(1px)} .lk-btn--primary{background:var(--acc)!important;color:#fff!important} .lk-btn--primary:hover{background:var(--acc-h)!important} .lk-auth__foot{display:flex;justify-content:space-between;padding:12px 8px 4px;font-size:13px} .lk-auth__foot a,.lk-auth__foot a:link,.lk-auth__foot a:visited{ color:var(--muted)!important;font-weight:600!important;text-decoration:none; } .lk-auth__foot a:hover{color:var(--acc)!important} .lk-social{display:flex;gap:8px;padding:2px 8px 6px} .lk-social a{ flex:1;height:42px;display:flex;align-items:center;justify-content:center;gap:8px; background:var(--panel-2)!important;color:var(--text)!important;border-radius:12px; font-size:13px;font-weight:600;text-decoration:none; } .lk-social a:hover{background:var(--hover)!important} /* ---------- меню пользователя ---------- */ .lk-profile{ display:flex;align-items:center;gap:12px;padding:12px;border-radius:13px;text-decoration:none; background:var(--acc)!important;color:#fff!important;margin-bottom:6px; } .lk-profile:hover{background:var(--acc-h)!important} .lk-profile__name{font-weight:700;font-size:15px;line-height:1.25;color:#fff!important;display:block} .lk-profile__sub{font-size:12px;color:rgba(255,255,255,.82)!important} /* тёмная тема — нейтральная строка профиля */ .night .lk-profile{background:var(--panel-2)!important;color:var(--text)!important} .night .lk-profile:hover{background:var(--hover)!important} .night .lk-profile__name{color:var(--text)!important} .night .lk-profile__sub{color:var(--muted)!important} .lk-nav{display:flex;flex-direction:column;gap:2px} .lk-nav a,.lk-nav a:link,.lk-nav a:visited{ display:flex;align-items:center;gap:13px;padding:11px 12px;border-radius:11px;text-decoration:none!important; color:var(--text)!important;font-size:14px;font-weight:600!important;transition:background .12s; } .lk-nav a:hover{background:var(--hover)!important} .lk-nav .fal{width:20px;text-align:center;color:var(--muted)!important;font-size:16px;flex:0 0 20px} .lk-nav a:hover .fal{color:var(--acc)!important} .lk-count{ margin-left:auto;min-width:22px;height:20px;padding:0 7px;border-radius:10px;display:inline-flex; align-items:center;justify-content:center;background:var(--acc)!important;color:#fff!important; font-size:11px;font-weight:700; } .lk-soon{cursor:default;opacity:.85} .lk-soon:hover{background:transparent!important} .lk-soon,.lk-soon .fal{color:var(--muted)!important} .lk-soon em{ margin-left:auto;font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.05em; text-transform:uppercase;color:var(--muted)!important;background:var(--panel-2)!important; border-radius:6px;padding:3px 7px; } .lk-sep{height:1px;background:var(--line);margin:7px 4px;border:0} .lk-logout,.lk-logout:link,.lk-logout:visited{color:var(--acc)!important} .lk-logout .fal{color:var(--acc)!important} /* ---------- фокус ---------- */ .lk a:focus-visible,.lk button:focus-visible,.lk input:focus-visible, .mls button:focus-visible{outline:2px solid var(--acc);outline-offset:2px} @media (prefers-reduced-motion:reduce){.lk-menu{animation:none}.lk-trigger,.lk-btn{transition:none}} @media (max-width:520px){ /* На мобиле крепим меню под шапку (top), а не к низу экрана — внизу баннер рекламы перекрывал выпадающий блок. Высоту ограничиваем со скроллом, чтобы длинное меню пользователя не уползало обратно в зону баннера. */ .lk-menu{position:fixed;top:64px;bottom:auto;right:2vw;left:2vw;width:auto; max-height:calc(100vh - 78px);overflow-y:auto;-webkit-overflow-scrolling:touch} .lk-menu::before{display:none} } /* ============================================================ Мои Списки — кнопка «В список» на карточке (без грубых бордеров) ============================================================ */ .mls{position:relative;display:block;font-family:'GothamProRegular',sans-serif} .mls-trigger{ display:flex!important;align-items:center;gap:10px;width:100%;min-height:46px;padding:12px 16px; border:0!important;border-radius:10px!important;cursor:pointer;font-family:inherit; background:var(--panel-2)!important;color:var(--text)!important;font-size:14px;font-weight:600; box-shadow:inset 0 0 0 1px var(--line);transition:background .15s; } .mls-trigger:hover{background:var(--hover)!important} .mls--active .mls-trigger{box-shadow:none} .mls-dot{width:11px;height:11px;flex:0 0 11px;border-radius:50%;box-sizing:border-box} .mls:not(.mls--active) .mls-dot{background:transparent;box-shadow:inset 0 0 0 2px var(--muted)} .mls-label{flex:1;text-align:left;color:var(--text)!important} .mls-trigger .fa-chevron-down{color:var(--muted)!important;font-size:11px;transition:transform .18s} .mls:has(.mls-menu:not([hidden])) .fa-chevron-down{transform:rotate(180deg)} .mls-menu{ position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;padding:7px; background:var(--panel)!important;border:1px solid var(--line)!important;border-radius:13px; box-shadow:var(--shadow)!important;animation:lk-pop .16s ease; } .mls-menu[hidden]{display:none!important} .mls-opt{ display:flex!important;align-items:center;gap:12px;width:100%;padding:11px 11px;border:0!important; border-radius:9px!important;background:transparent!important;color:var(--text)!important; font-size:13.5px;font-weight:600;cursor:pointer;text-align:left;font-family:inherit;transition:background .12s; } .mls-opt:hover{background:var(--hover)!important} .mls-opt i{width:15px;height:15px;flex:0 0 15px;border-radius:4px;background:var(--c,#c9ccd1);box-shadow:0 1px 2px rgba(0,0,0,.2)} .mls-opt.is-active{color:var(--acc)!important;background:var(--hover)!important} .mls-opt.is-active::after{content:'\2713';margin-left:auto;font-weight:800;font-size:13px;color:var(--acc)!important} .mls-remove{margin-top:5px;padding-top:13px;border-top:1px solid var(--line);border-radius:0 0 9px 9px;color:var(--acc)!important} .mls-remove:hover{background:var(--hover)!important} .mls-remove i{display:none} /* тёмная тема: активный статус и «Убрать» — бирюзовые, в стиле темы */ .night .mls-opt.is-active,.night .mls-opt.is-active::after, .night .mls-remove,.night .mls-remove:hover{color:#57c6e6!important} .mls[data-status="0"] .mls-remove,.mls:not([data-status]) .mls-remove{display:none!important} @media (prefers-reduced-motion:reduce){.mls-menu{animation:none}.mls-trigger,.mls-opt,.fa-chevron-down{transition:none}} /* ============================================================ Мобильная шапка — компактная раскладка (≤600px). Было: логотип + поиск + «Войти» + тема + бургер в одну тесную строку, поиск сжат до «Поис…». Стало — две строки: строка 1: [логотип] ........... [Войти] [🌙] [☰] строка 2: [========= поиск во всю ширину =========] Элементы выровнены по 38px, равные отступы — «каждому своё место». ============================================================ */ @media (max-width:600px){ header{flex-wrap:wrap!important;align-items:center!important; row-gap:9px!important;column-gap:9px!important;margin-bottom:16px!important} /* логотип — фикс. размер, слева */ header .logo{flex:0 0 132px!important;width:132px!important;height:28px!important;order:1;margin:0!important} /* группу управления прижимаем вправо */ .lk{order:2;margin-left:auto!important} .lk--guest .lk-trigger{height:38px;padding:0 16px} .lk--user .lk-trigger{height:38px} /* переключатель темы: в светлой теме — КРАСНЫЙ квадрат с БЕЛОЙ луной, в тон бургеру (привычно и симметрично). Луна — inline-SVG (#fff), не зависит от цвета файла. В тёмной — бирюзовый квадрат с солнцем (правило .night ниже перебивает фон). */ .theme-toggle{order:3;flex:0 0 38px!important;width:38px!important;height:38px!important; border-radius:9px;background-color:#c50725!important;background-size:21px!important; background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='%23fff'%3E%3Cpath%20d='M3,11.985A9.811,9.811,0,0,0,12.569,22a9.528,9.528,0,0,0,8.309-5.059,1,1,0,0,0-.947-1.477l-.11.008c-.131.01-.263.02-.4.02a7.811,7.811,0,0,1-7.569-8.015,8.378,8.378,0,0,1,1.016-4A1,1,0,0,0,11.923,2,9.855,9.855,0,0,0,3,11.985Zm7.343-7.652a10.382,10.382,0,0,0-.488,3.144A9.89,9.89,0,0,0,18.137,17.4,7.4,7.4,0,0,1,12.569,20,7.811,7.811,0,0,1,5,11.985,7.992,7.992,0,0,1,10.343,4.333Z'/%3E%3C/svg%3E")!important} .theme-toggle:hover{background-color:#a50725!important} .night .theme-toggle{background-color:#15485c!important} /* бургер — тот же размер, крайний справа */ .mobile-menu-button{order:4;display:block!important; flex:0 0 38px!important;width:38px!important;height:38px!important; background-size:20px!important} /* поиск — отдельная строка во всю ширину */ .header__search{order:5;flex:1 0 100%!important;width:100%!important;max-width:100%!important;margin:0!important} .header__search input,.header__search input:focus{width:100%!important;height:42px!important;line-height:42px!important} .header__search button{height:42px!important} } /* ---------- Переключатель темы: чёткое inline-SVG солнце в тёмной теме ---------- */ .night .theme-toggle{ background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%3E%3Ccircle%20cx='12'%20cy='12'%20r='4'%20fill='%23fff'/%3E%3Cpath%20d='M12%202.5v2.2M12%2019.3v2.2M2.5%2012h2.2M19.3%2012h2.2M5.4%205.4l1.55%201.55M17.05%2017.05l1.55%201.55M18.6%205.4l-1.55%201.55M6.95%2017.05l-1.55%201.55'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'/%3E%3C/svg%3E")!important; background-size:21px!important;background-position:center!important;background-repeat:no-repeat!important; } /* ============================================================ МОБИЛЬНОЕ МЕНЮ-БУРГЕР → выезжающий справа drawer. JS сайта только тоглит .visible на .header__nav и .hide на .header__submenu — весь вид и поведение (аккордеоны, backdrop, блокировка прокрутки) заданы здесь + мини-скрипт в header.tpl. Иконки в меню (глифы FontAwesome) и служебные элементы drawer по умолчанию скрыты — включаются только на мобилке. ============================================================ */ .nav-drawer__bar,.nav-ico,.nav-home,.tg-label,.nav-backdrop{display:none} /* иконки меню — inline-SVG через CSS-маску (не зависят от набора глифов в шрифте; цвет задаётся background-color → легко перекрасить по теме) */ .header__nav .nav-ico::before{content:none!important} .header__nav .fa-house{--nvi:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2010.5%2012%203l9%207.5'/%3E%3Cpath%20d='M5%209.5V20h14V9.5'/%3E%3C/svg%3E")} .header__nav .fa-layer-group{--nvi:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%203%202%208l10%205%2010-5-10-5Z'/%3E%3Cpath%20d='M2%2013l10%205%2010-5'/%3E%3C/svg%3E")} .header__nav .fa-film{--nvi:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4'%20width='18'%20height='16'%20rx='2'/%3E%3Cpath%20d='M3%209h18M8%204v5M16%204v5'/%3E%3C/svg%3E")} .header__nav .fa-fire{--nvi:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8.5%2014.5A2.5%202.5%200%200%200%2011%2012c0-1.38-.5-2-1-3-1.07-2.14-.22-4.05%202-6%20.5%202.5%202%204.9%204%206.5%202%201.6%203%203.5%203%205.5a7%207%200%201%201-14%200c0-1.15.43-2.29%201-3a2.5%202.5%200%200%200%202.5%202.5Z'/%3E%3C/svg%3E")} .header__nav .fa-calendar{--nvi:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='16'%20rx='2'/%3E%3Cpath%20d='M3%209h18M8%203v4M16%203v4'/%3E%3C/svg%3E")} @media (max-width:1050px){ /* затемнение фона под drawer */ .nav-backdrop{display:block;position:fixed;inset:0;z-index:1400; background:rgba(6,12,20,.55);opacity:0;visibility:hidden; transition:opacity .28s ease,visibility .28s ease} .nav-backdrop.show{opacity:1;visibility:visible} html.nav-lock,html.nav-lock body{overflow:hidden!important} /* сам drawer */ .header__nav{display:block!important;position:fixed!important;top:0;right:0;left:auto;bottom:0; width:min(86vw,360px)!important;height:100%!important;max-height:100%!important;margin:0!important; padding:0 0 28px!important;background:#fff!important;color:#182028; box-shadow:-18px 0 55px rgba(0,0,0,.34); transform:translateX(105%);visibility:hidden!important; transition:transform .3s cubic-bezier(.22,.61,.36,1),visibility .3s; z-index:1500!important;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} .night .header__nav{background:#0f2a38!important;color:#eaf2f7} .header__nav.visible{transform:translateX(0)!important;visibility:visible!important;display:block!important} /* верхняя панель drawer с заголовком и крестиком */ .nav-drawer__bar{display:flex!important;align-items:center;justify-content:space-between; padding:15px 16px 15px 20px;position:sticky;top:0;z-index:3;background:inherit; border-bottom:1px solid #eceff3} .night .nav-drawer__bar{border-color:rgba(255,255,255,.09)} .nav-drawer__title{font-family:'GothamProRegular',sans-serif;font-weight:700;font-size:17px;color:#182028} .night .nav-drawer__title{color:#eaf2f7} .nav-drawer__x{width:38px;height:38px;flex:0 0 38px;border:0;border-radius:10px;cursor:pointer; background:#f2f4f7;color:#5b6672;font-size:23px;line-height:1;display:flex;align-items:center;justify-content:center} .nav-drawer__x:hover{background:#c50725;color:#fff} .night .nav-drawer__x{background:#13323f;color:#8fa8b8} /* контейнер списка — вертикальный, без старых плашек */ .header__nav>ul{display:block!important;flex-direction:column;gap:0!important;margin:0!important;padding:8px 0 0!important} .header__nav>ul>li{display:block!important;width:auto!important;margin:0!important;padding:0!important; background:transparent!important;border:0!important;color:inherit!important;position:relative} .night .header__nav>ul>li{background:transparent!important} .header__nav ul li.nav__close{display:none!important} /* строка верхнего уровня: ссылка / кнопка-аккордеон / онгоинги */ .header__nav>ul>li>a, .header__nav>ul>li>.header__submenu-button, .header__nav>ul>li>.header__submenu-button-ongoing>a{ display:flex!important;align-items:center;gap:14px;width:100%;box-sizing:border-box; padding:14px 20px!important;margin:0!important;border:0!important;border-radius:0!important; background:transparent!important;color:#182028!important;text-decoration:none!important; font-family:'GothamProRegular',sans-serif;font-size:15.5px;font-weight:600;line-height:1.2; text-transform:none!important;letter-spacing:0;cursor:pointer;position:relative} .header__nav>ul>li>.header__submenu-button-ongoing{display:block!important;background:transparent!important;padding:0!important} .night .header__nav>ul>li>a, .night .header__nav>ul>li>.header__submenu-button, .night .header__nav>ul>li>.header__submenu-button-ongoing>a{color:#eaf2f7!important} .header__nav>ul>li>a:hover, .header__nav>ul>li>.header__submenu-button:hover, .header__nav>ul>li>.header__submenu-button-ongoing>a:hover{background:#f5f7f9!important;color:#c50725!important} .night .header__nav>ul>li>a:hover, .night .header__nav>ul>li>.header__submenu-button:hover, .night .header__nav>ul>li>.header__submenu-button-ongoing>a:hover{background:rgba(255,255,255,.06)!important;color:#57c6e6!important} /* иконка слева (маска + цвет фоном) */ .nav-ico{display:inline-block!important;width:22px;height:20px;flex:0 0 22px; background-color:#c50725!important; -webkit-mask:var(--nvi) center/20px no-repeat;mask:var(--nvi) center/20px no-repeat} .night .nav-ico{background-color:#57c6e6!important} .nav-home{display:block!important} /* стрелка аккордеона (перекрываем старый play-буллет) */ .header__nav>ul>li>.header__submenu-button::before{ content:''!important;position:absolute!important;right:20px!important;top:50%!important;left:auto!important; width:10px!important;height:10px!important;border-right:2px solid #9aa4b0;border-bottom:2px solid #9aa4b0; background:none!important;filter:none!important;border-radius:1px; transform:translateY(-70%) rotate(45deg)!important;transition:transform .22s ease} .header__nav>ul>li:has(.header__submenu:not(.hide))>.header__submenu-button::before{ transform:translateY(-30%) rotate(225deg)!important} .header__nav>ul>li:has(.header__submenu:not(.hide))>.header__submenu-button{background:#f5f7f9!important;color:#c50725!important} .night .header__nav>ul>li:has(.header__submenu:not(.hide))>.header__submenu-button{background:rgba(255,255,255,.06)!important;color:#57c6e6!important} /* стрелка активной категории — в цвет темы */ .header__nav>ul>li:has(.header__submenu:not(.hide))>.header__submenu-button::before{border-color:#c50725!important} .night .header__nav>ul>li:has(.header__submenu:not(.hide))>.header__submenu-button::before{border-color:#57c6e6!important} /* подменю-аккордеон: 2 колонки chips */ .header__nav .header__submenu{display:none!important;position:static!important;width:auto!important; min-width:0!important;margin:0!important;padding:6px 12px 12px!important;box-shadow:none!important; border:0!important;border-radius:0!important;background:#f7f9fb!important; grid-template-columns:1fr 1fr;gap:2px} .night .header__nav .header__submenu{background:#0b222d!important} .header__nav .header__submenu:not(.hide){display:grid!important} .header__nav .header__submenu li{display:block!important;width:auto!important;margin:0!important;padding:0!important; background:transparent!important;border:0!important} .header__nav .header__submenu li::before{display:none!important} .header__nav .header__submenu li a{display:block!important;padding:10px 12px!important;border-radius:8px!important; font-family:'GothamProRegular',sans-serif;font-size:13px!important;font-weight:500!important; color:#5a6570!important;text-decoration:none!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .night .header__nav .header__submenu li a{color:#9fb4c2!important} .header__nav .header__submenu li a:hover{background:#e9edf1!important;color:#c50725!important} .night .header__nav .header__submenu li a:hover{background:rgba(255,255,255,.08)!important;color:#57c6e6!important} /* Telegram — как акцентная строка-кнопка внизу */ .header__nav>ul>li.telegram{display:block!important;float:none!important;width:auto!important; margin:14px 16px 0!important;padding:0!important;text-align:center} .header__nav>ul>li.telegram>a{display:flex!important;width:100%!important;box-sizing:border-box!important; align-items:center;justify-content:center;gap:10px; padding:13px 16px!important;border-radius:12px!important;background:#2AABEE!important; color:#fff!important;font-weight:700;font-size:14.5px;text-decoration:none!important} .header__nav>ul>li.telegram>a:hover{background:#1e97d4!important;color:#fff!important} .header__nav>ul>li.telegram img{width:22px!important;height:22px!important;filter:brightness(0) invert(1)} .tg-label{display:inline!important} } /* ============================================================ СТРАНИЦА «МОИ СПИСКИ» (Ф2.3) — /mylists.html Табы по статусам (клиентская фильтрация) + сетка карточек, визуально идентичная каталогу (.new-anime / .new-anime__link). ============================================================ */ .mlp-page{max-width:1420px;margin:0 auto;padding:0 0 20px} /* Тема оборачивает контент в .new-anime (flex, для сеток карточек). Внутри неё промежуточный flex-элемент растягивается по контенту нашей grid-сетки и ломает ширину (гориз. скролл). Гасим flex у обёртки — строго для страницы «Мои списки» (через :has(.mlp)). */ .new-anime:has(.mlp){display:block!important;justify-content:initial!important;flex-wrap:initial!important} .new-anime:has(.mlp)>*,.new-anime:has(.mlp) #dle-content{display:block!important;min-width:0!important;width:auto!important;max-width:100%!important} .mlp-page,.mlp,.mlp-grid{min-width:0!important;max-width:100%!important} .mlp-title{font-family:'GothamProRegular',sans-serif;font-weight:700;font-size:26px; color:#161c24!important;margin:26px 0 18px;line-height:1.3} .night .mlp-title{color:#eef5f9!important} .mlp{font-family:'GothamProRegular',sans-serif} /* табы */ .mlp-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px} .mlp-tab{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border:0!important; border-radius:11px!important;cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:600; line-height:1;background:#eef1f5!important;color:#3a444f!important;transition:background .15s,color .15s} .mlp-tab:hover{background:#e3e7ec!important} .mlp-tab i{width:10px;height:10px;flex:0 0 10px;border-radius:50%;background:var(--c,#c9ccd1)} .mlp-tab .mlp-c{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:18px; padding:0 6px;border-radius:9px;background:rgba(0,0,0,.09);font-size:11px;font-weight:700} .mlp-tab.is-active{background:#c50725!important;color:#fff!important} .mlp-tab.is-active .mlp-c{background:rgba(255,255,255,.25)} .mlp-tab.is-active i{box-shadow:0 0 0 2px rgba(255,255,255,.5)} .night .mlp-tab{background:#13323f!important;color:#c4d4de!important} .night .mlp-tab:hover{background:#184c5f!important} .night .mlp-tab .mlp-c{background:rgba(255,255,255,.12)} .night .mlp-tab.is-active{background:#1f9cbf!important;color:#fff!important} /* сетка + бейдж статуса на карточке */ .mlp-grid{margin-top:2px;display:grid!important;gap:16px;justify-content:initial!important; grid-template-columns:repeat(auto-fill,minmax(160px,1fr))} .mlp-grid .new-anime__link{min-width:0!important;max-width:none!important;width:auto!important;margin:0!important} /* Постер темы — position:absolute, а .new-anime__item в теме держит высоту фиксированным calc(). В нашей grid-сетке это давало высоту 0 → постеры вылезали и налезали друг на друга. Задаём пропорцию 218:300 и растягиваем постер внутрь (object-fit:cover) — карточки одинаковой высоты, без наложения. */ .mlp-grid .new-anime__item{position:relative!important;height:auto!important;aspect-ratio:218/300; overflow:hidden;border-radius:10px} .mlp-grid .new-anime__item img,.mlp-grid .kodik_poster{position:absolute!important;inset:0; width:100%!important;height:100%!important;object-fit:cover!important;border-radius:10px} .mlp-grid .new-anime__title{font-size:13.5px;text-align:center;margin-top:8px} @media (max-width:600px){ .mlp-grid{gap:12px;grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} } .mlp-badge{position:absolute;top:8px;left:8px;z-index:3;display:inline-flex;align-items:center; padding:4px 9px 4px 8px;border-radius:8px;background:rgba(14,20,28,.82);color:#fff; font-size:11px;font-weight:700;line-height:1;box-shadow:0 2px 7px rgba(0,0,0,.4);backdrop-filter:blur(2px)} .mlp-badge::before{content:'';width:8px;height:8px;flex:0 0 8px;margin-right:6px;border-radius:50%;background:var(--c,#c50725)} /* пусто / гость */ .mlp-empty{max-width:540px;margin:24px auto 8px;text-align:center;padding:36px 24px; background:#f7f9fb;border:1px solid #e7eaee;border-radius:18px} .night .mlp-empty{background:#0f2a38;border-color:rgba(255,255,255,.09)} .mlp-empty__ico{font-size:42px;line-height:1;margin-bottom:12px} .mlp-empty__t{font-size:18px;font-weight:700;color:#182028;margin-bottom:8px} .night .mlp-empty__t{color:#eaf2f7} .mlp-empty__s{font-size:14px;color:#6b7681;line-height:1.5} .night .mlp-empty__s{color:#9fb4c2} .mlp-empty__btn,.mlp-empty__btn:link,.mlp-empty__btn:visited{display:inline-block;margin-top:18px; padding:12px 24px;border-radius:12px;background:#c50725;color:#fff!important;font-weight:700; font-size:14px;text-decoration:none!important} .mlp-empty__btn:hover{background:#a50620} .night .mlp-empty__btn,.night .mlp-empty__btn:link{background:#1f9cbf} .night .mlp-empty__btn:hover{background:#17869f} @media (max-width:600px){ .mlp-title{font-size:21px;margin:18px 0 14px} /* табы — горизонтальный скролл в одну строку */ .mlp-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch; margin:0 -2px 18px;padding:0 2px 6px;scrollbar-width:none} .mlp-tabs::-webkit-scrollbar{display:none} .mlp-tab{flex:0 0 auto} } /* ============================================================ СТРАНИЦА «МОЙ ПРОФИЛЬ» (userinfo.tpl) — .lkp Просмотр (аватар+статы+разделы+данные) ↔ форма редактирования (загрузка аватара с устройства + поля). Тема-зависимо. ============================================================ */ .new-anime:has(.lkp){display:block!important;justify-content:initial!important;flex-wrap:initial!important} .new-anime:has(.lkp)>*,.new-anime:has(.lkp) #dle-content{display:block!important;min-width:0!important;width:auto!important;max-width:100%!important} .lkp-page,.lkp{min-width:0!important;max-width:100%!important} .lkp-page{max-width:920px;margin:0 auto;padding:0 0 30px;font-family:'GothamProRegular',sans-serif} .lkp{--acc:#c50725;--acc2:#1f9cbf} .lkp .fa-list::before{content:'\f03a'} .lkp .fa-bookmark::before{content:'\f02e'} .lkp .fa-envelope::before{content:'\f0e0'} .lkp .fa-comment::before{content:'\f075'} .lkp .fa-user::before{content:'\f007'} .lkp .fa-pen::before{content:'\f304'} /* шапка */ .lkp-head{display:flex;align-items:center;gap:20px;padding:22px;border-radius:18px;background:#f5f7f9;border:1px solid #e7eaee;margin:22px 0 16px} .night .lkp-head{background:#0f2a38;border-color:rgba(255,255,255,.09)} .lkp-ava{width:104px;height:104px;flex:0 0 104px;border-radius:50%;overflow:hidden;background:#e5e9ee;box-shadow:0 4px 14px rgba(0,0,0,.15)} .night .lkp-ava{background:#13323f} .lkp-ava img{width:100%;height:100%;object-fit:cover;display:block} .lkp-head__main{min-width:0} .lkp-name{font-size:26px;font-weight:700;color:#161c24!important;margin:0 0 8px;line-height:1.2} .night .lkp-name{color:#eef5f9!important} .lkp-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px} .lkp-group{padding:4px 11px;border-radius:8px;background:var(--acc)!important;color:#fff!important;font-size:12px;font-weight:700} .night .lkp-group{background:var(--acc2)!important} .lkp-online{color:#57bb8a!important;font-size:13px;font-weight:600} .lkp-offline{color:#8a95a1!important;font-size:13px;font-weight:600} .lkp-edit-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border:0!important;border-radius:11px!important;background:var(--acc)!important;color:#fff!important;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit} .lkp-edit-btn:hover{background:#a50620!important} .night .lkp-edit-btn{background:var(--acc2)!important} .night .lkp-edit-btn:hover{background:#17869f!important} .lkp-edit-btn .fal{font-size:13px} /* статистика */ .lkp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 16px} .lkp-stat{padding:16px 10px;border-radius:14px;background:#f5f7f9;border:1px solid #e7eaee;text-align:center} .night .lkp-stat{background:#0f2a38;border-color:rgba(255,255,255,.09)} .lkp-stat b{display:block;font-size:22px;color:#161c24!important;line-height:1;margin-bottom:5px} .lkp-stat--text b{font-size:14px;font-weight:700;line-height:1.3} .night .lkp-stat b{color:#eef5f9!important} .lkp-stat span{font-size:12px;color:#6b7681!important} .night .lkp-stat span{color:#9fb4c2!important} /* быстрые разделы */ .lkp-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 16px} .lkp-tile{display:flex;flex-direction:column;align-items:center;gap:9px;padding:18px 10px;border-radius:14px;background:#fff;border:1px solid #e7eaee;color:#182028!important;font-size:13px;font-weight:600;text-decoration:none!important;transition:border-color .15s,color .15s,transform .12s} .lkp-tile:hover{border-color:var(--acc);color:var(--acc)!important;transform:translateY(-2px)} .lkp-tile .fal{font-size:22px;color:var(--acc)!important} .night .lkp-tile{background:#0f2a38;border-color:rgba(255,255,255,.09);color:#eaf2f7!important} .night .lkp-tile:hover{border-color:var(--acc2);color:var(--acc2)!important} .night .lkp-tile .fal{color:var(--acc2)!important} /* просмотр ↔ форма */ .lkp-form{display:none} .lkp--editing .lkp-view{display:none} .lkp--editing .lkp-form{display:block} .lkp-about{padding:16px 18px;border-radius:14px;background:#f5f7f9;border:1px solid #e7eaee;margin-bottom:14px} .night .lkp-about{background:#0f2a38;border-color:rgba(255,255,255,.09)} .lkp-about__t{font-weight:700;font-size:12px;color:#6b7681!important;margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em} .lkp-about__c{color:#182028!important;font-size:14px;line-height:1.55} .night .lkp-about__c{color:#dbe7ee!important} .lkp-data{list-style:none;margin:0;padding:8px 18px;border-radius:14px;background:#f5f7f9;border:1px solid #e7eaee} .night .lkp-data{background:#0f2a38;border-color:rgba(255,255,255,.09)} .lkp-data li{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid #e7eaee;font-size:14px} .night .lkp-data li{border-color:rgba(255,255,255,.07)} .lkp-data li:last-child{border-bottom:0} .lkp-data li span:first-child{color:#6b7681!important} .night .lkp-data li span:first-child{color:#9fb4c2!important} .lkp-data li span:last-child{color:#182028!important;font-weight:600;text-align:right} .night .lkp-data li span:last-child{color:#eaf2f7!important} /* форма */ .lkp-form{margin-top:16px;padding:22px;border-radius:16px;background:#f5f7f9;border:1px solid #e7eaee} .night .lkp-form{background:#0f2a38;border-color:rgba(255,255,255,.09)} .lkp-form__title{font-size:17px;font-weight:700;color:#161c24!important;margin-bottom:18px} .night .lkp-form__title{color:#eef5f9!important} .lkp-avaedit{display:flex;align-items:center;gap:18px;padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid #e7eaee} .night .lkp-avaedit{border-color:rgba(255,255,255,.09)} .lkp-avaedit__img{width:88px;height:88px;flex:0 0 88px;border-radius:50%;object-fit:cover;background:#e5e9ee;box-shadow:0 3px 10px rgba(0,0,0,.15)} .night .lkp-avaedit__img{background:#13323f} .lkp-avaedit__ctl{min-width:0} .lkp-file{display:inline-block;cursor:pointer} .lkp-file input{position:absolute;width:1px;height:1px;opacity:0;clip:rect(0,0,0,0)} .lkp-file__btn{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border-radius:11px;background:var(--acc)!important;color:#fff!important;font-size:13.5px;font-weight:700} .lkp-file:hover .lkp-file__btn{background:#a50620!important} .night .lkp-file__btn{background:var(--acc2)!important} .night .lkp-file:hover .lkp-file__btn{background:#17869f!important} .lkp-file__btn .fal{font-size:13px} .lkp-del{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:13px;color:#6b7681!important;cursor:pointer} .night .lkp-del{color:#9fb4c2!important} .lkp-file__hint{margin-top:8px;font-size:12px;color:#8a95a1!important} .lkp-field{margin-bottom:14px} .lkp-field label{display:block;font-size:12.5px;font-weight:600;color:#6b7681!important;margin-bottom:6px} .night .lkp-field label{color:#9fb4c2!important} .lkp-field input,.lkp-field textarea{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:11px;border:1px solid #dfe3e8!important;background:#fff!important;color:#182028!important;font-size:14px;font-family:inherit} .lkp-field textarea{resize:vertical;min-height:70px;line-height:1.5} .lkp-field input:focus,.lkp-field textarea:focus{outline:0;border-color:var(--acc)!important} .night .lkp-field input,.night .lkp-field textarea{background:#0b222d!important;border-color:rgba(255,255,255,.13)!important;color:#eaf2f7!important} .night .lkp-field input:focus,.night .lkp-field textarea:focus{border-color:var(--acc2)!important} .lkp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .lkp-sep{height:1px;background:#e7eaee;margin:6px 0 16px;border:0} .night .lkp-sep{background:rgba(255,255,255,.09)} .lkp-checks{margin:6px 0 4px;display:flex;flex-direction:column;gap:10px;font-size:13.5px;color:#4a5560!important} .night .lkp-checks{color:#c4d4de!important} .lkp-checks input{margin-right:8px;accent-color:var(--acc)} .night .lkp-checks input{accent-color:var(--acc2)} .lkp-actions{display:flex;gap:12px;margin-top:20px;flex-wrap:wrap} .lkp-save{padding:13px 26px;border:0!important;border-radius:12px!important;background:var(--acc)!important;color:#fff!important;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit} .lkp-save:hover{background:#a50620!important} .night .lkp-save{background:var(--acc2)!important} .night .lkp-save:hover{background:#17869f!important} .lkp-cancel{padding:13px 22px;border:0!important;border-radius:12px!important;background:#e7eaee!important;color:#4a5560!important;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit} .lkp-cancel:hover{background:#dde1e6!important} .night .lkp-cancel{background:#13323f!important;color:#c4d4de!important} @media(max-width:600px){ .lkp-head{flex-direction:column;text-align:center;gap:14px;padding:20px 16px} .lkp-meta{justify-content:center} .lkp-stats{grid-template-columns:repeat(3,1fr);gap:8px} .lkp-stat{padding:13px 6px} .lkp-nav{grid-template-columns:repeat(2,1fr)} .lkp-grid2{grid-template-columns:1fr} .lkp-name{font-size:22px} .lkp-avaedit{flex-direction:column;text-align:center} } /* ============================================================ «Продолжить смотреть» — полка истории просмотра (Фаза 2.4) ============================================================ */ .whs{margin:0 0 26px} .whs-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 14px} .whs-title{font-size:20px;font-weight:800;color:#161c24!important;margin:0;line-height:1.2} .night .whs-title{color:#eef5f9!important} .whs-all{font-size:13px;font-weight:600;color:#c50725!important;flex:0 0 auto;text-decoration:none} .whs-all:hover{text-decoration:underline} .night .whs-all{color:#1f9cbf!important} .whs-row{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 12px; scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin} .whs-row::-webkit-scrollbar{height:8px} .whs-row::-webkit-scrollbar-thumb{background:rgba(0,0,0,.18);border-radius:8px} .night .whs-row::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2)} .whs-card{flex:0 0 148px;width:148px;scroll-snap-align:start;text-decoration:none;display:block} .whs-poster{position:relative;display:block;aspect-ratio:218/300;border-radius:12px;overflow:hidden; background:#e5e9ee;box-shadow:0 4px 14px rgba(0,0,0,.14)} .night .whs-poster{background:#13323f} .whs-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .whs-play{position:absolute;inset:0;margin:auto;width:46px;height:46px;border-radius:50%; background:rgba(18,20,26,.55);opacity:0;transition:opacity .18s ease;backdrop-filter:blur(2px)} .whs-play::after{content:"";position:absolute;top:50%;left:53%;transform:translate(-50%,-50%); border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent #fff} .whs-card:hover .whs-play{opacity:1} .whs-card:hover .whs-poster{box-shadow:0 8px 22px rgba(0,0,0,.22)} .whs-ep{position:absolute;left:7px;bottom:10px;padding:3px 8px;border-radius:7px; background:rgba(15,18,24,.82);color:#fff;font-size:11px;font-weight:700;line-height:1.2; max-width:calc(100% - 14px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .whs-bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.28)} .whs-bar i{display:block;height:100%;background:var(--acc,#c50725)} .night .whs-bar i{background:#1f9cbf} .whs-name{margin-top:9px;font-size:13px;font-weight:600;line-height:1.3;color:#2b333d!important; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .night .whs-name{color:#c3d2da!important} @media(max-width:520px){ .whs-title{font-size:18px} .whs-card{flex-basis:37vw;width:37vw} } /* «Продолжить просмотр» — своя кнопка над плеером (Kodik-кнопка cross-origin, CSS недоступен) */ .wh-resume{display:flex;align-items:center;gap:14px;width:100%;box-sizing:border-box; height:auto!important;min-height:0; margin:14px 0 20px;padding:14px 20px;border:0;outline:0;-webkit-appearance:none;appearance:none; cursor:pointer;text-align:left;font-family:inherit;line-height:normal; border-radius:14px;background:linear-gradient(135deg,#c50725,#e5342f);color:#fff; box-shadow:0 6px 18px rgba(197,7,37,.28);transition:transform .12s ease,box-shadow .18s ease,opacity .25s ease} .wh-resume:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(197,7,37,.34)} .wh-resume.is-done{opacity:0;transform:scale(.98);pointer-events:none} .wh-resume__ico{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.18);position:relative;overflow:hidden} .wh-resume__ico::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%); border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff} .wh-resume__txt{display:flex;flex-direction:column;line-height:1.25;min-width:0} .wh-resume__txt b{font-size:15px;font-weight:800;color:#fff!important} .wh-resume__txt span{font-size:12.5px;opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .wh-resume__go{flex:0 0 auto;margin-left:auto;width:9px;height:9px; border-top:2px solid rgba(255,255,255,.9);border-right:2px solid rgba(255,255,255,.9);transform:rotate(45deg)} .night .wh-resume{background:linear-gradient(135deg,#1f9cbf,#127e9d);box-shadow:0 6px 18px rgba(31,156,191,.3)} .night .wh-resume:hover{box-shadow:0 10px 26px rgba(31,156,191,.4)} @media(max-width:520px){ .wh-resume{padding:12px 16px;gap:11px;border-radius:12px;margin:12px 0 16px} .wh-resume__ico{flex-basis:34px;width:34px;height:34px} .wh-resume__txt b{font-size:14px} } /* CVH-плеер (веб-компонент ): по умолчанию раздувается по высоте (shadow `:host{height:100%}` без aspect-ratio → на мобилке огромные поля). Приводим к 16:9, как у Kodik-iframe. Kodik не затрагивается (у него нет video-player). */ .movie__player video-player, .movie__player .player-block, .movie__player .player{width:100%!important;height:auto!important} .movie__player video-player{display:block!important;aspect-ratio:16/9!important} /* reCAPTCHA-бейдж: тема прячет его как right:-186px при position:fixed — на мобилке fixed-элемент за правым краем даёт горизонтальный скролл вправо (overflow:hidden на body его НЕ обрезает). Прячем корректно; reCAPTCHA работает. */ .grecaptcha-badge{visibility:hidden!important} /* ============================================================ «Рё» — карточка валюты в профиле (Фаза 3.1) ============================================================ */ .enc{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap; margin:0 0 20px;padding:16px 20px;border-radius:16px; background:linear-gradient(135deg,#fff6e0,#ffe7ba);border:1px solid #f0d79a} .night .enc{background:linear-gradient(135deg,#241f12,#33280f);border-color:rgba(255,205,110,.22)} .enc[hidden]{display:none!important} .enc__main{display:flex;align-items:center;gap:14px;min-width:0} .enc__ico{flex:0 0 48px;width:48px;height:48px;border-radius:50%;position:relative; background:radial-gradient(circle at 35% 28%,#ffe79a,#f0b429 58%,#c8890f); box-shadow:inset 0 -3px 6px rgba(140,90,10,.4),0 3px 9px rgba(200,140,20,.4)} .enc__ico::after{content:'Рё';position:absolute;inset:0;display:flex;align-items:center;justify-content:center; font-size:15px;font-weight:800;color:#7a4d05} .enc__bal{display:flex;flex-direction:column;line-height:1.15;min-width:0} .enc__bal b{font-size:28px;font-weight:800;color:#5a3d08!important} .night .enc__bal b{color:#ffd773!important} .enc__bal span{font-size:12.5px;color:#a07c22!important} .night .enc__bal span{color:#b79b63!important} .enc__side{display:flex;flex-direction:column;align-items:flex-end;gap:6px} .enc__daily{border:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:13.5px; padding:10px 18px;border-radius:11px;color:#5a3d08!important; background:linear-gradient(135deg,#ffcf4d,#eaa511)!important; box-shadow:0 3px 10px rgba(200,140,20,.3);transition:filter .15s,opacity .2s} .enc__daily:hover:not(:disabled){filter:brightness(1.06)} .enc__daily:active:not(:disabled){transform:translateY(1px)} .enc__daily.is-got,.enc__daily:disabled{background:#e2caa0!important;color:#8a6a20!important; box-shadow:none;cursor:default;opacity:.85} .night .enc__daily.is-got,.night .enc__daily:disabled{background:#3a2f1a!important;color:#a88f5c!important} .enc__hint{font-size:11.5px;line-height:1.55;color:#a07c22!important;text-align:right;max-width:240px} .night .enc__hint{color:#9a8a5a!important} @media(max-width:520px){ .enc{padding:14px 16px} .enc__side{align-items:stretch;width:100%} .enc__daily{width:100%} .enc__hint{text-align:center;max-width:none} } /* Магазин Рё (Фаза 3.2) — трата баланса на «без рекламы» */ .shop{margin:0 0 20px;padding:16px 20px;border-radius:16px; background:var(--panel,#fff);border:1px solid var(--line,#eadfce)} .night .shop{background:var(--panel-2,#1b1b22);border-color:rgba(255,255,255,.08)} .shop[hidden]{display:none!important} .shop__head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 12px} .shop__title{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:15.5px} .shop__title .fal{color:#eaa511} .shop__status{font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px; color:#5a3d08;background:linear-gradient(135deg,#ffe79a,#f0c65a)} .night .shop__status{color:#ffd773;background:rgba(240,180,40,.16)} .shop__status[hidden]{display:none!important} .shop__items{display:flex;flex-direction:column;gap:8px} .shop__item{display:flex;align-items:center;justify-content:space-between;gap:12px; padding:11px 14px;border-radius:12px;background:var(--panel-2,#faf5ec);border:1px solid var(--line,#eee3d2)} .night .shop__item{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.06)} .shop__item-t{display:flex;flex-direction:column;line-height:1.3;min-width:0} .shop__item-t b{font-size:14px;font-weight:700} .shop__item-t span{font-size:12.5px;color:#a07c22!important;font-weight:700} .night .shop__item-t span{color:#c9a94f!important} .shop__buy{flex:0 0 auto;border:0;cursor:pointer;font-family:inherit;font-weight:700;font-size:13px; padding:9px 18px;border-radius:10px;color:#5a3d08!important; background:linear-gradient(135deg,#ffcf4d,#eaa511)!important; box-shadow:0 3px 9px rgba(200,140,20,.28);transition:filter .15s,opacity .2s,transform .1s} .shop__buy:hover:not(:disabled){filter:brightness(1.06)} .shop__buy:active:not(:disabled){transform:translateY(1px)} .shop__buy:disabled{background:#e2caa0!important;color:#8a6a20!important;box-shadow:none;cursor:default;opacity:.75} .night .shop__buy:disabled{background:#3a2f1a!important;color:#a88f5c!important} .shop__note{margin:12px 2px 0;font-size:11.5px;line-height:1.5;color:var(--muted,#9b8a70)} .shop__note-imp{display:flex;gap:8px;align-items:flex-start;margin:0 0 6px;padding:9px 11px;border-radius:10px; font-size:12px;line-height:1.5;color:#8a5a0a;background:rgba(240,180,40,.12);border:1px solid rgba(240,180,40,.28)} .shop__note-imp .fal{flex:0 0 auto;margin-top:1px;color:#eaa511;font-size:13px} .night .shop__note-imp{color:#e8c877;background:rgba(240,180,40,.09);border-color:rgba(240,180,40,.2)} .shop__note-imp b{font-weight:700} @media(max-width:520px){ .shop{padding:14px 16px} .shop__item{padding:10px 12px} } /* «Рё» — золотой чип баланса в шапке (Фаза 3.1) */ .lk-coins{display:inline-flex;align-items:center;gap:6px;height:40px;box-sizing:border-box; padding:0 13px 0 6px;margin-right:8px;border-radius:22px;text-decoration:none!important; background:linear-gradient(135deg,#ffcf4d,#eaa511)!important;color:#5a3d08!important; font-weight:800;font-size:14px;line-height:1;white-space:nowrap;box-shadow:0 2px 9px rgba(200,140,20,.32)} .lk-coins:hover{filter:brightness(1.06)} .lk-coins__ico{flex:0 0 28px;width:28px;height:28px;border-radius:50%;position:relative; background:radial-gradient(circle at 34% 28%,#fff0c0,#f0b429 60%,#c8890f); box-shadow:inset 0 -2px 4px rgba(140,90,10,.4)} .lk-coins__ico::after{content:'Рё';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#7a4d05} .lk-coins__n{color:#5a3d08!important} .night .lk-coins,.night .lk-coins__n{color:#3a2a08!important} /* монета золотая в обеих темах */ /* пункт «Рё» в дропдауне (замена «Энергия скоро») */ .lk-energy .lk-count{background:linear-gradient(135deg,#ffcf4d,#eaa511)!important;color:#5a3d08!important} .lk-energy .fa-bolt{color:#eaa511!important} @media (max-width:600px){ /* ЗАЛОГИНЕН: в шапке появляются чип «Рё» + аватар — элементов стало много. Ужимаем логотип, тему, бургер и сами чип/аватар, чтобы весь ряд (логотип · Рё · аватар · тема · бургер) помещался в ОДНУ строку, а поиск уходил на вторую — без переноса бургера вниз. Общие элементы ужимаем только при логине через header:has(.lk--user), чтобы гостевая шапка не менялась. :has() уже используется в этом файле. */ header:has(.lk--user){column-gap:5px!important} header:has(.lk--user) .logo{flex:0 0 104px!important;width:104px!important} header:has(.lk--user) .theme-toggle{flex:0 0 34px!important;width:34px!important;height:34px!important;background-size:19px!important} header:has(.lk--user) .mobile-menu-button{flex:0 0 34px!important;width:34px!important;height:34px!important} /* чип «Рё» — прижат вправо (логотип слева), компактный */ .lk-coins{order:2;margin:0 0 0 auto!important;height:34px!important;gap:3px!important; padding:0 7px 0 4px!important;font-size:12px!important} .lk-coins__ico{flex:0 0 22px!important;width:22px!important;height:22px!important} .lk-coins__ico::after{font-size:9px!important} /* фикс-ширина числа: чип НЕ меняет ширину от баланса → зазор до логотипа постоянный и маленький (пустой резерв уходит ВНУТРЬ пилюли, а не в внешний зазор), + нет прыжка вёрстки при AJAX-подгрузке баланса. Только чип в шапке (.lk-coins .lk-coins__n), бейдж в дропдауне не трогаем. */ .lk-coins .lk-coins__n{min-width:34px!important;text-align:center!important} /* аватар-триггер — компактный, шеврон мельче */ .lk{margin-left:0!important} .lk--user .lk-trigger{height:34px!important;padding:3px 6px 3px 3px!important;gap:4px!important} .lk--user .lk-avatar{width:28px!important;height:28px!important;flex-basis:28px!important} .lk--user .lk-trigger .fa-chevron-down{font-size:10px!important} }