[hidden] { display: none !important; }
:root{
/* base colors */
--bg:#0b0f1a;
--white:#ffffff;
--black:#000000;
--text:#121826;
--muted:#383A3F;
--surface:#fff;
--surface-muted:#fafafa;
--h: 675px;
--gap: 18px;
--r: 48px;
--w-collapsed: 100px; /* ширина свернутой кнопки */
--w-expanded: 50%;
/* brand */
--brand-blue:#6389E6;
--brand-cyan:#9AC1EC;
--grad-90: linear-gradient(90.24deg, var(--brand-cyan) -29.32%, var(--brand-blue) 99.79%);
--grad-40: linear-gradient(40.78deg, var(--brand-cyan) 10.1%, var(--brand-blue) 95.03%);
/* neutrals and borders */
--blue-50:#eef5ff;
--blue-100:#dbe9ff;
--panel:#f6f8fb;
--border:#eaeef7;
--border-2:#e7ecf5;
--soft:#f3f6fb;
/* cards/backgrounds */
--card:linear-gradient(40.78deg, #FFFFFF 10.1%, #DDEAFE 95.03%);
--gradient: linear-gradient(135deg, #e9f1ff 0%, #f8fbff 45%, #e9f1ff 100%);
}
*{box-sizing:border-box}
html,body{font-size: 16px;
margin: 0;
font-family: 'Manrope', Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: var(--text);
background: #fafafa;
}
/* Кастомный курсор по умолчанию */
body{ cursor: url("data:image/svg+xml;utf8,") 0 0, auto; }
/* Sticky footer layout */
body{ min-height: 100vh; display: flex; flex-direction: column; }
a{font-size:18px;color:inherit;text-decoration:none}
.container{ width: 100%;
margin: 0 auto;}
.section {
margin: 200px 0;
}
.section.solid{background:var(--blue-100)}
.section-title{font-size:2.5rem;line-height:1.2;text-align:center;margin: 42px 0 56px;}
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:12px;padding:12px 18px;border:1px solid var(--border);background:var(--surface);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.05);cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .2s ease,color .2s ease}
.btn:not(:disabled):active,.btn:not([disabled]):active{transform:translateY(1px) scale(.98);box-shadow:0 6px 18px rgba(17,34,61,.18)}
.btn:disabled,.btn[disabled]{cursor:not-allowed;opacity:.6;box-shadow:none;filter:saturate(.7)}
.btn-ghost:disabled,.btn-ghost[disabled]{background:#e6e7ec;color:#9aa0ad;border-color:#d0d4de}
.btn-sm{padding:8px 12px;border-radius:10px}
.btn-primary{background: var(--grad-90);
color: #fff;
gap: 15px;
opacity: 1;
border-radius: 200px;
padding-top: 16px;
padding-right: 32px;
padding-bottom: 16px;
padding-left: 32px;
font-size: 18px;}
.btn-secondary{background:#fff;color:var(--primary);border-color:var(--primary)}
.btn-ghost{ background: #DCDDDD;
opacity: 1;
gap: 10px;
border-radius: var(--r);
padding-top: 12px;
padding-right: 16px;
padding-bottom: 12px;
padding-left: 16px;
color: #383A3F;
font-family: Manrope;
font-weight: 500;
font-size: 20px;
line-height: 130%;
white-space: nowrap;}
.btn-danger{background:#fbe9eb;border-color:#f5c4cb;color:#c43d4f;}
.btn-danger:hover{background:#f7d4db;color:#b13243;}
.btn-card-2 {
margin: 20px;
}
.btn-card, .btn-card-2 {
position: absolute;
border-radius: 200px;
background: var(--grad-90);
padding: 4px;
display: inline-flex;
bottom: 0;
right: 0;
}
.btn-card > .inner,.btn-card-2 > .inner {
border-radius: 200px;
background: #fff;
height: 100%;
padding: 16px 32px;
display: inline-flex;
}
.btn[disabled]{ opacity:.6; cursor:not-allowed; }
.btn-card::before{
position: absolute;
width: calc(100% + 25px);
height: calc(103.969px + 25px);
left: -25px;
z-index: -6;
background: #fafafa;
top: -25px;
border-radius: 50px 0 0 0;
}
.btn-card::after{
position: absolute;
display: block;
width: 300px;
height: 300px;
background: #fafafa;
right: 0;
top: -84px;
clip-rule: evenodd;
fill-rule: evenodd;
clip-path: path("M300 0 A60 60 0 0 1 240 60 L300 60 Z");
mask-repeat: no-repeat;
mask-position: top right;
}
.btn-card::before, .btn-card::after{
content: "";
}
.pill{border-radius: 30px;
opacity: 1;
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
padding-left: 16px;
background: #FFFFFF;
color: #000;
display: inline-flex;
}
.chips{ margin-top: 25px;
display: flex;
flex-wrap: wrap;
gap: 24px;}
.chip{ border: 1px solid #FAFAFA4D;
padding-top: 16px;
padding-right: 24px;
padding-bottom: 16px;
padding-left: 24px;
opacity: 1;
border-radius: 30px;
border-width: 1px;
}
.chip:hover{
background: #FFFFFF33;
}
.cards-top{
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 32px;
min-height: 336px;
}
.cards-bottom{
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 32px;
min-height: 336px;
}
.blue-card {background: var(--grad-40) !important;
color: #fff !important;
}
.cards-2{
display: flex;
gap: 32px;
}
img.infinity{
position: absolute;
right: 0;
bottom: 0;
}
.cards-2 .card{
width: 100%;
}
.cards-bottom p span{
display: block;
padding-top: 10px;
}
.cards-3 h4{
font-size: 2rem;
font-weight: 700;
margin: 20px 0;
}
.bottom-text{ padding-right: 20px; position: absolute;
bottom: 30px;}
.cards-3{display: grid;
gap: 32px;
font-size: 20px;}
.card{position: relative; z-index: 1;
overflow: hidden;
background:var(--card);border-radius:20px;
padding:20px;padding-bottom: 65px;}
.card.pricing header{display:flex;justify-content:space-between;align-items:center; margin-bottom: 20px;}
.card.pricing .price{font-size: 1.5rem;
font-weight: 800;
margin: 12px 0;
position: absolute;
left: 40px;
bottom: 10px;}
.card.pricing.featured{border-color:var(--primary);box-shadow:0 10px 36px rgba(79,140,255,.2)}
h3{font-size:1.6rem;font-weight:700; display: flex;
margin: 0 20px;
align-items: center;}
.card .list{padding-left: 20px;
list-style: none;
margin: 0 0 30px 0;}
.card .list li{margin:6px 0}
.list.compact li{margin:4px 0}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel{ border: 1px solid #eaeef7;
border-radius: var(--r);
background: linear-gradient(40.78deg, #FFFFFF 10.1%, #DDEAFE 95.03%);
overflow: hidden;
padding: 16px;
position: relative;}
.panel-body p{
border-radius: 30px;
opacity: 1;
gap: 16px;
padding-top: 16px;
padding-right: 24px;
padding-bottom: 16px;
padding-left: 24px;
background: #fff;
display: inline-flex;
margin: 0;
}
.panel-text {
display: flex;
gap: 16px;
flex-wrap: wrap;
margin-top: 30px;
}
.panel-body {
bottom: 0;
border-radius: 30px;
opacity: 1;
gap: 16px;
padding-top: 32px;
padding-right: 16px;
padding-bottom: 32px;
padding-left: 16px;
position: absolute;
z-index: 1;
color: #000;
width: calc(100% - 30px);
background: linear-gradient(18deg, #FFFFFF 10.1%, #DDEAFE 95.03%);
}
.pill span{
margin-left: 15px;
}
.panel-blue { background: var(--grad-40);
padding: 24px;
color: #fff;
border-radius: var(--r);
}
.panel-body.right{
padding-top: 24px;
padding-bottom: 24px;
width: 100%;
}
.panel-blue h3{
color: rgb(250 250 250 / 70%);
margin: 0;
}
.panel-blue h3 span{
margin: 0 10px;
color: #fafafa;
}
.panel-blue .list.compact li {
margin: 15px 0;
}
.panel-top{
margin: 20px 0;
}
.panel-top .list{
padding: 0 20px;
}
.panel.solid{ padding: 0 !important;
background: #fafafa;
border: none;}
.panel-header .dot{width:8px;height:8px;border-radius:50%;background:#22c55e}
.panel .mock{width:100%;border-radius:12px;margin-top:12px}
.support-banner{display:grid;grid-template-columns:1.4fr .6fr;align-items:center;gap:12px;background:linear-gradient(135deg,#6aa4ff 0%, #9fc5ff 100%);color:#fff;border-radius:24px;padding:24px}
.big24{position: absolute;
right: 40px;
bottom: 0;}
/* Header */
.topbar{background:#f2f6ff;font-size: 0.90rem;color:var(--text)}
.topbar-inner{display:flex;justify-content:space-between;align-items:center;height:32px}
.topbar-contacts{display:flex;gap:16px}
.topbar-link{display:flex;align-items:center;gap:6px;color:inherit}
.topbar-link svg{width:16px;height:16px;flex-shrink:0;color:var(--primary)}
.topbar-social{display:flex;gap:12px}
.site-header{position: sticky;
background: #ffffffd9;
backdrop-filter: saturate(180%) blur(8px);
z-index: 50;
width: 100%;
display: flex;
padding: 16px 0;
justify-content: space-between;
opacity: 1;
top: 0;
left: 24px;}
main {
padding: 0 24px;
flex: 1 0 auto;
}
.header-inner{display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
width: 100%;
padding: 0 24px;}
.logo{display:flex;align-items:center;gap:20px;font-weight:800}
.logo-mark img{width: 100%;}
.logo-mark{ display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 8px;}
.nav{display:flex;gap:18px; font-size: 18px;}
.header-cta{display:flex;align-items:center;gap:10px}
.header-phone{font-weight:600;text-decoration:none;color:#383A3F;white-space:nowrap}
.header-tg img{width:40px;height:40px;display:block}
.lk-icon{display:inline-flex;}
.lk-icon svg{display:block}
.nav-toggle{display:none;border:0;background:transparent;padding:4px}
.nav-toggle span{display:block;width:22px;height:2px;background:#111;border-radius:2px;margin:4px 0}
/* Language select */
.visually-hidden{position:absolute !important;clip:rect(1px,1px,1px,1px);padding:0;border:0;height:1px;width:1px;overflow:hidden;white-space:nowrap}
.lang-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background:transparent url('data:image/svg+xml;utf8,') no-repeat right 10px center;background-size:14px; border: none;
padding: 8px 25px 8px 12px;
cursor:pointer;
font-family: 'Manrope', Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
font-size: 18px;
line-height: 24px;
letter-spacing: 0;
}
.lang-select:focus{outline:2px solid rgba(79,140,255,.35);outline-offset:2px}
/* Hero */
.hero{padding: 70px 80px;
background: linear-gradient(180deg, rgba(192, 212, 255, 0.75) 0%, rgba(255, 255, 255, 0.75) 100%);
overflow: hidden;
position: relative;
width: 100%;
height: 638px;
opacity: 1;
border-radius: var(--r);}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:16px}
.hero-copy h1{ margin: 32px 0 40px 0;
font-family: Manrope;
font-weight: 800;
font-size: 3rem;
line-height: 140%;
}
.hero-copy .accent{ background: linear-gradient(90.24deg, #7272A2 -29.32%, #6A95FF 99.79%);
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
.hero-badges{display:flex;flex-wrap:wrap;gap:8px}
.hero-badges span{
display: inline-flex;
align-items: center;
background: #fff;
border: 1px solid #eaeef7;
font-weight: 600;
gap: 10px;
opacity: 1;
border-radius: 30px;
padding-top: 8px;
padding-right: 16px;
padding-bottom: 8px;
padding-left: 16px;
}
.cards-3 .device-2{
background: transparent url(/assets/img/hero-device.png) no-repeat;
display: block;
width: 100%;
height: 100%;
background-size: cover;
right: 0;
position: relative;
grid-area: C;
}
.cards-3 .content h4 {
font-size: 1.7rem;
font-weight: 700;
margin: 0;
grid-area: A;
}
.cards-3 .content{
display: grid;
grid-template-areas:
"A C"
"B C";
grid-template-columns: 2fr 1.4fr;
position: absolute;
bottom: 0;
height: 240px;
grid-template-rows: 1fr 1.1fr;
}
.cards-3 .content p{
grid-area: B;
margin: 0;
}
.hero-badges svg{width:14px;height:14px;color:var(--primary)}
.hero-art .device{width: 40%;
height: 550px;
background: transparent url(/assets/img/hero-device.png) no-repeat;
position: absolute;
bottom: 0;
right: 0;}
.hero-actions{display:flex;gap:10px}
/* Carousel */
.carousel{position:relative;overflow:hidden;border-radius:20px;border:1px solid #eaeef7;background:#fff}
.carousel-track{display:flex;transition:transform .5s ease}
.slide{min-width:100%;padding:24px;
background: var(--grad-40);
border-radius: var(--r);
position: relative;
height: 560px;
overflow: hidden;
}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);border:0;background:#fff;width:36px;height:36px;border-radius:50%;box-shadow:0 6px 16px rgba(0,0,0,.15);cursor:pointer}
.carousel-btn.prev{left:10px}
.carousel-btn.next{right:10px}
.carousel-dots{display:flex;gap:6px;justify-content:center; padding: 0 30px;}
/* CTA */
.section.cta{background:var(--gradient);}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#fff;border:1px solid #eaeef7;border-radius:20px;padding:20px}
/* Cabinet */
.cabinet-grid{align-items:center}
.cabinet-art img{width:100%;border-radius:20px;box-shadow:0 12px 40px rgba(37,99,235,.15)}
/* Footer */
.site-footer{background:#0b1220;color:#d1d5db;padding:36px 0 16px;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:16px}
.site-footer a{color:#e5e7eb}
.footer-bottom{margin-top:16px;padding-top:12px;border-top:1px solid #1f2937;display:flex;justify-content:space-between;color:#9ca3af}
.support-slider {
position: relative;
overflow: hidden;
width: 100%;
}
.support-slider .slides {
display: flex;
transition: transform 400ms ease; /* скорость перелистывания */
will-change: transform;
}
.support-slider .slide {
min-width: 100%;
position: relative;
}
.support-slider .slide-inner {
padding: 24px 0; /* подстрой под свою сетку */
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
align-items: center;
}
.support-slider .progress {
position: absolute;
top: 0;
left: 0;
height: 3px;
width: 100%;
background: rgba(0,0,0,0.08);
overflow: hidden;
}
.support-slider .progress .bar {
height: 100%;
width: 0%;
background: #383A3F; /* можно заменить на брендовый */
transform-origin: left center;
}
.support-slider .nav {
position: absolute;
top: 50%;
translate: 0 -50%;
border: 0;
background: rgba(0,0,0,0.35);
color: #fff;
width: 36px;
height: 36px;
border-radius: 9999px;
cursor: pointer;
display: grid;
place-items: center;
user-select: none;
}
.support-slider { position: relative; overflow: hidden; }
.support-slider .carousel-track { display: flex; transition: transform .4s ease; }
.support-slider .slide { min-width: 100%; flex: 0 0 100%; }
.support-slider .nav { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.support-slider .nav button { pointer-events: all; }
.support-slider{position:relative;overflow:hidden;width:100%; height: 560px;}
.support-slider .carousel-track{display:flex;transition:transform .4s ease}
.support-slider .slide{min-width:100%;flex:0 0 100%}
/* индикаторы на всю ширину */
.support-slider .carousel-dots{
display:flex;
gap:32px;
align-items:center;
width:100%;
margin-top:16px;
position: absolute;
bottom: 64px;
}
.slide p span{
color: #fff;
font-size: 20px;
display: block;
margin: 10px 0;
width: 40%;
}
.slide h3{
color: #fff;
margin: 56px 0 24px 0 !important;
font-size: 2rem;
}
.support-slider .dot{
background: transparent;
border: 0;
cursor: pointer;
display: block;
padding: 0;
margin: 0;
height: 10px;
width: 100%;
}
.support-slider .bar{
position:relative;
display:block;
width:100%;
height:10px;
border-radius:999px;
background:#ffffff40;
overflow:hidden;
}
.support-slider .fill{
position:absolute;
inset:0 auto 0 0;
width:0%;
height:100%;
border-radius:inherit;
background:#fff;
}
.review-card {
background: linear-gradient(40.78deg, #FFFFFF 10.1%, #DDEAFE 95.03%);
border-radius: 16px;
padding: 32px 24px;
max-width: 500px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
color: #222;
max-height: 425px;
width: 544px;
font-size: 1.11rem;
position: relative;
z-index: 2;
}
.topvizor {
margin-top: 0;
position: relative;
z-index: 0;
opacity: 0;
border-radius: var(--r);
background: #FFFFFF80;
max-height: 425px;
padding: 10px 40px 48px 40px;
top: 0;
width: 80%;
transition: right 0.8s ease;
right: -60%;
}
.active .topvizor {
right: -10%; /* конечное положение */
opacity: 1; /* делаем видимым */
}
.review-background{
background: var(--grad-40);
border-radius: var(--r);
min-height: 907px;
}
.slide-review{
position: relative;
}
.topvizor-badge {
width: 100%;
overflow: hidden;
padding: 20px 0;
height: 100%;
border-radius: var(--r);
display: flex;
position: relative;
z-index: -1;
max-height: 90%;
}
.topvizor-badge img{
border-radius: var(--r);
width: 100%;
height: 100%;
z-index: -4;
position: absolute;
}
.left-reviews{
width: 55%;
height: 907px;
}
.review-header {
display: flex;
align-items: center;
margin-bottom: 12px;
}
.review-info {
display: flex;
flex-direction: column;
}
.review-rating {
display: flex;
align-items: center;
font-weight: bold;
}
.stars {
color: #FFD700; /* жёлтые звёзды */
font-size: 18px;
margin-right: 6px;
}
.score {
font-size: 0.95rem;
color: #333;
}
.review-name {
font-size: 20px;
font-weight: 600;
margin-top: 4px;
}
.review-text {
border-radius: 12px;
line-height: 1.5;
margin-top: 40px;
margin-bottom: 24px;
}
.review-footer {
color: #666;
margin-bottom: 59px;
}
.review-avatar {
width: 56px;
height: 56px;
border-radius: 50%;
margin-right: 12px;
background: #007bff; /* фон по умолчанию для буквы */
color: #fff;
font-weight: bold;
font-size: 24px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
text-transform: uppercase;
}
.review-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
display: none; /* по умолчанию скрыт */
}
.right-reviews{
width: 45%;
display: flex;
position: relative;
color: #fff;
padding: 170px 100px;
flex-direction: column;
font-size: 1.11rem;
}
.right-reviews h3 {margin:40px 0 ;}
.btn-reviews{
padding: 16px 32px;
gap: 4px;
opacity: 1;
border-radius: 200px;
display: inline-flex;
align-items: center;
flex-wrap: wrap;
align-content: center;
background: #FAFAFA40;
margin-top: 5%;
justify-content: space-evenly;
flex-wrap: wrap;
float: right;
}
.btn-reviews .inner {display: flex;}
/* контейнер и трек */
#reviews .review-background { position: relative; display: flex; }
#reviews .left-reviews { position: relative; overflow: hidden; flex: 1; }
/* важное: трек станет «колонкой», высота и отступы вычисляются в JS */
#reviews .left-reviews .carousel-track {
display: flex;
flex-direction: column;
transition: transform .4s ease;
will-change: transform;
}
#reviews .slide-review {
flex: 0 0 auto;
margin: 12px 0;
display: flex;
justify-content: flex-end;
padding-right: 0;
flex-direction: row-reverse;
}
/* вертикальные индикаторы справа */
#reviews .carousel-dots-vertical {
display: flex;
flex-direction: column;
justify-content: center;
gap: 15px;
margin-left: 20px;
position: absolute;
left: 0;
top: 50%;
}
#reviews .dot {
background: #ffffff40;
border: 0;
padding: 0;
cursor: pointer;
width: 16px;
height: 16px;
border-radius: 20px;
}
#reviews .dot.active {
background: #fff;
}
#reviews .bar {
position: relative;
width: 6px;
height: 60px; /* можно подправить */
border-radius: 999px;
background: rgba(0,0,0,0.12);
overflow: hidden;
}
#reviews .fill {
position: absolute; left: 0; bottom: 0;
width: 100%; height: 0%;
background: currentColor; /* возьмёт цвет текста */
transition: height .2s linear; /* будет перезаписан на точную длительность */
}
.va-line{
display: flex;
gap: var(--gap);
height: var(--h);
justify-content: space-between;
}
.va-item{
flex: 0 0 var(--w-collapsed);
height: 100%;
border-radius: var(--r);
color: #fff;
position: relative;
overflow: hidden;
cursor: pointer;
display: flex;
flex-direction: column;
background: var(--grad-40);
}
.va-item.is-active{ flex: 0 0 var(--w-expanded); }
.va-head{
flex-shrink: 0;
position: absolute;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
left: 25px;
top: 25px;
}
.is-active .va-label{
display: none;
}
.va-label{
writing-mode: vertical-rl;
transform: rotate(180deg);
font-weight: 700;
font-size: 1.7rem;
margin-bottom: 65px;
}
.white-btn{
background: linear-gradient(40.78deg, #FFFFFF 10.1%, #DDEAFE 95.03%);
opacity: 1;
border-radius: 200px;
padding-top: 16px;
padding-right: 32px;
padding-bottom: 16px;
padding-left: 32px;
color: #000;
display: inline-flex;
float: right;
width: 70%;
margin-left: auto;
cursor: pointer;
}
.is-active .va-head{
left: 30px;
}
.va-body{
position: absolute;
inset: 0;
padding: 32px;
overflow: hidden;
display: none;
}
.va-item.is-active .va-body{ display: block; }
.va-item:not(.is-active) .va-icon span {
display: none;
}
.va-item .pill{
padding: 15px !important;
}
.va-item img{
width: 100%;
border-radius: var(--r);
}
.va-side{
flex: 0 0 20%;
height: 100%;
border-radius: var(--r);
background: var(--grad-40);
color: #fff;
padding: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
max-width: 349px;
}
.va-item h3{
font-size: 2em !important;
margin-top: 60px;
margin-bottom: 40px;
margin-left: 0;
}
.va-item:not(.is-active) {
max-width: 104px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
.ch{
opacity: 1;
gap: 10px;
border-radius: 30px;
padding-top: 16px;
padding-right: 24px;
padding-bottom: 16px;
padding-left: 24px;
background: #FFFFFF33;
}
.footer {
background: linear-gradient(40.78deg, #FFFFFF 10.1%, #DDEAFE 95.03%);
padding: 20px 40px;
font-family: Arial, sans-serif;
color: #555;
border-radius: var(--r);
}
.footer__top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
}
.footer__logo{
display: grid;
grid-template-areas:
"A B"
"C C";
grid-template-columns: 1fr 3fr;
}
.footer__logo p{
grid-area: C;
margin: 5px 0 32px 0;
color: #383A3FB2;
font-size: 0.95rem;
}
.footer__logo img {
height: 40px;
margin-right: 20px;
}
.footer__logo span{
font-family: Manrope;
font-weight: 700;
font-size: 1.5rem;
line-height: 38.4px;
color: #000;
}
.footer__nav a{
color: #383A3FB2;
font-size: 2.6rem;
font-weight: 800;
text-decoration: none;
margin-right: 48px;
}
.footer__nav a:hover,
.footer__links a:hover {
text-decoration: underline;
}
.footer__auth{
color: #383A3FB2;
font-size: 0.95rem;
}
.footer__auth h4 {
margin: 0 0 8px 0;
color: #383A3F;
font-weight: 600;
}
.footer__contacts {
display: flex;
align-items: flex-start;
gap: 10px;
flex-direction: column;
align-content: flex-start;
flex-wrap: wrap;
margin-top: 32px;
}
.footer__auth a{
color: #383A3FB2;
font-size: 0.95rem;
}
.footer__contacts p {
margin: 0;
}
.footer__contacts a {
color: #383A3FB2;
display: block;
text-decoration: none;
font-size: 0.95rem;
}
.footer__icon {
width: 40px;
height: 40px;
}
.footer__bottom {
border-top: 1px solid #ddd;
padding-top: 20px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
font-size: 0.95rem;
color: #8E8E8E;
}
.footer__links {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
color: #8E8E8E;
padding-top: 10px;
align-items: center;
}
.footer__links a{
font-size: 0.95rem;
text-align: left;
margin-right: 16px;
}
.footer__requisites {
width: 100%;
text-align: center;
font-size: 0.82rem;
color: #b0b0b0;
margin: 4px 0 0;
order: 10;
}
/* ================== LK (личный кабинет) ================== */
.cabinet-choice { max-width:640px; padding:8px; }
.cabinet-choice__title { margin:0 0 12px; font-size:24px; font-weight:600; color:#111827; }
.cabinet-choice__subtitle { margin:0 0 20px; font-size:15px; line-height:1.5; color:#4b5563; }
.cabinet-choice__grid { display:grid; gap:16px; }
@media (min-width: 720px){ .cabinet-choice__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cabinet-choice__option { border:1px solid #d1d5db; border-radius:16px; background:#fff; padding:18px 16px; text-align:left; cursor:pointer; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; font:inherit; color:inherit; }
.cabinet-choice__option:hover,
.cabinet-choice__option:focus-visible { border-color:#2563eb; box-shadow:0 12px 28px rgba(37,99,235,.12); transform:translateY(-2px); outline:none; }
.cabinet-choice__option.is-loading { opacity:.6; pointer-events:none; }
.cabinet-choice__heading { display:block; margin-bottom:8px; font-size:17px; font-weight:600; color:#111827; }
.cabinet-choice__text { display:block; font-size:14px; line-height:1.5; color:#4b5563; }
.lk { padding: 32px 0 48px; }
.lk-grid { display: grid;
grid-template-columns: 27% 1fr;
gap: 32px; }
.lk-menu__item svg path,.lk-menu__item svg{
fill:#000;
}
.lk-menu__item.is-active svg path,.lk-menu__item.is-active svg{
fill:#fff;
}
.is-active.renting svg path{
stroke: #fff;
}
.renting svg path{
stroke: #000;
}
.lk-sidebar { border-radius:16px; padding:12px; height: fit-content; }
.lk-menu { display:flex; flex-direction:column; gap:6px; }
.lk-sep { border: 0;
border-top: 0.6px solid #E0E0E0;
margin: 8px 8px; }
.lk-menu__item { display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius: var(--r); color:#111827; font-weight:600; }
.lk-menu__item:hover { background:#f4f7ff; }
.lk-menu__item .ico { width:18px; height:18px; flex:0 0 18px; color:#383A3F; }
.lk-menu__item.is-active { background: var(--grad-90); color:#fff; }
.lk-menu__item.is-active .ico { color:#fff; }
.lk-menu-toggle { display:none; align-items:center; gap:8px; border:0; border-radius:0 999px 999px 0; background:var(--grad-90); color:#fff; font-weight:700; padding:10px 18px; box-shadow:0 8px 20px rgba(0,0,0,.18); cursor:pointer; }
.lk-menu-toggle:focus-visible { outline:2px solid rgba(79,140,255,.45); outline-offset:3px; }
.lk-menu-toggle svg { width:16px; height:16px; }
.lk-content { border-radius:16px; padding:12px; }
.lk-header h1 { margin:0 0 12px; font-size: 2.67rem; line-height:1.2; }
.lk-body { display:grid; grid-template-columns: 1fr; gap: 24px; align-items:start; }
.lk-main p { margin: 40px 0; }
#lk-section{
margin-bottom: 16px;
}
/* Form */
.lk-form { margin-top:12px; }
.form-row { display:grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap:12px; }
.field { display:flex; flex-direction:column; gap:6px; }
.field-label { font-size:0.95rem; color:#383A3F; }
.control {
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background: #fff;
height: 50px;
padding: 12px 16px;
border: 1px solid #eaeef7;
border-radius: 12px;
font-family: inherit;
font-size: 0.95rem;
}
/* стрелка только у select */
select.control{
background: #fff url(../img/arrow.svg) no-repeat right 10px center;
padding-right: 36px;
}
.muted{margin: 40px 0 10px !important;}
.control:focus { outline:none; }
.partner-notes{ font-size: 0.95rem;color: #90939B;}
.acc p{margin: 0 0 10px 0 !important;}
input.control{
border-radius: 5px;
}
input.control::placeholder { color:#c0c6d4; }
/* подсветка ошибки только после ввода (когда плейсхолдер скрыт) */
input.control:invalid:not(:placeholder-shown) { border-color:#fca5a5; box-shadow: inset 0 0 0 1px #fca5a5; }
/* e-mail шириной 25% */
input[type="email"].control{ width: 25%; min-width: 240px; }
.lk-cta {
margin-top: 18px;
padding: 14px 24px;
border-radius: 999px;
color: #FAFAFA;
font-family: Manrope;
font-weight: 500;
font-size: 20px;
line-height: 130%;
}.input{
background: #fff;
padding: 12px 16px;
font-size: 0.95rem;
border-radius: 12px;
border: 1px solid #eaeef7;
width: 35%;
}
/* Promo card */
.lk-aside { align-self:stretch; }
.promo-card { background:#fff; border:1px solid #eaeef7; border-radius:24px; padding:24px; box-shadow:0 10px 30px rgba(26,35,126,.06);max-width: 350px;
margin: auto; }
.promo-percent { font-size: 6rem;
font-weight: 800;
background: linear-gradient(90deg, #9AC1EC -20%, #6389E6 100%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
line-height: 1; }
.promo-title { margin-top: 6px;
font-weight: 700;
font-size: 1.6rem;
margin-bottom: 15px; }
.promo-note { margin: 16px 0 0 !important;
color: #383A3F;
font-size: 0.95rem; }
/* Try page layout (two columns only there) */
.try-layout{ display:grid; grid-template-columns: 1.3fr .7fr; gap:24px; align-items:start; }
/* ======= Rent (аренда) ======= */
.rent { padding-top: 8px; width: 60%; }
.rent-block { margin: 18px 0 22px; }
.rent h3 { margin: 0 0 10px; font-size: 18px; font-weight: 700; }
/* tabs */
.pill-tabs { display: flex; flex-wrap: wrap; gap:10px; }
.pill-tab { font-size: 1.12rem; border:1px solid #e7ecf5; background:#fff; color:#383A3F; padding:7px 16px; border-radius:999px; font-weight:500; }
.pill-tab.is-active { font-size: 1.12rem; background: linear-gradient(90deg,#9AC1EC -20%, #6389E6 100%); color:#fff; border-color: transparent; }
/* qty */
.qty { display:flex; align-items:center; gap:10px; }
/* По умолчанию обе кнопки голубые */
.qty-btn { width:50px; height:50px; border-radius:999px; border:1px solid var(--border-2); background: var(--grad-40); font-size:20px; font-weight:700; line-height:1; display:grid; place-items:center; color:#fff; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .2s ease, color .2s ease; box-shadow:0 2px 6px rgba(17,34,61,.14); }
/* Иконки внутри кнопок наследуют цвет кнопки */
.qty-btn svg path{ width: 20px; height: 20px; color: inherit; fill: currentColor; stroke: currentColor; }
.qty-btn:not(:disabled):active { transform:scale(.9); box-shadow:0 8px 18px rgba(17,34,61,.25); }
/* Серым показываем только отключённые (например, минус при значении 1) */
.qty-btn:disabled, .qty-btn.is-disabled { background:#DCDDDD; color:#A8A8A8; cursor:not-allowed; box-shadow:none; }
.qty-input { width: 260px; }
/* total */
.rent-total { font-size: 2rem; font-weight: 800; margin: 12px 0 8px; color: #383A3F;}
.rent-total span { white-space: nowrap; }
.rent-total__discount { font-size: 0.95rem; margin-top: 4px; }
.rent select option.is-unavailable { color: #9aa0ad; }
.pay-btn.is-disabled,
.pay-btn:disabled { opacity: 0.6; cursor: not-allowed; }
/* payments */
.pay-list { display:flex; flex-wrap: wrap; gap:10px; }
.pay-chip { display: flex;
gap: 8px;
align-items: center;
line-height: 0;
flex-wrap: wrap;
align-content: center;border:1px solid #e7ecf5; background:#fff; font-size: 1.11rem; color:#111827; padding:7px 16px; border-radius:999px; font-weight:500; }
.pay-chip.is-active {
background: linear-gradient(90deg,#9AC1EC -20%, #6389E6 100%); color:#fff; border-color: transparent; }
.ico-pay { display:inline-block; width:14px; height:14px; margin-right:6px; }
/* coupon */
.coupon-row { display:flex; align-items:center; gap:12px; }
.coupon-label { color:#383A3F; }
.coupon-input { width: 240px; }
.coupon-apply[disabled] { opacity:.55; cursor:not-allowed; }
/* ======= Proxies (мои прокси) ======= */
.proxies-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.proxies-head h2 { margin:0; font-size:28px; }
.proxies .tz { color:#383A3F; font-size: 0.90rem; }
.proxies-box { border-radius: var(--r); padding:24px; background:#fff; }
.toolbar { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.toolbar .search { display: flex;
border-radius: 12px;
padding: 6px 10px;
border: 1px solid #0000001A;
background: #FFFFFF;
opacity: 1;
gap: 10px;
border-radius: 8px;
padding-top: 12px;
padding-right: 16px;
padding-bottom: 12px;
padding-left: 16px;
border-width: 1px;
width: 30%; }
.toolbar .search .ico { width:16px; height:16px; color:#383A3F; }
.toolbar .search .control { border: 0;
background: transparent;
height: auto;
padding: 0;
font-size: 1.11rem;
color: #B4B4B4; }
.toolbar .chk { display:flex; align-items:center; gap:6px; color:#111827;margin: 0 40px; }
.toolbar .link { color:#6a95ff; text-decoration: underline;}
.filters { display:flex; gap:12px; flex-wrap:wrap; margin: 45px 0 24px; }
.table-wrap { overflow:auto; border:1px solid #eaeef7; border-radius:12px; }
.table { width:100%; border-collapse:separate; border-spacing:0; font-size: 0.90rem; }
.table thead th {
position: sticky;
top: 0;
text-align: left;
padding: 10px;
border-bottom: 1px solid #eaeef7;
white-space: nowrap;
color: #383A3F;
font-weight: 500;
font-size: 1.2rem;
}
.table td { padding:10px; border-bottom:1px solid #f0f3f9; vertical-align:middle;position: relative; }
.table tr:hover { background:#fafcff; }
.table tbody tr.is-transferred { background: #f4f8ff; }
.table tbody tr.is-transferred:hover { background: #eef2ff; }
.table tbody tr.is-transferred td { position: relative; }
.table tbody tr.is-transferred td:first-child::before {
content: '';
position: absolute;
left: 4px;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 6px;
border-radius: 50%;
background: #6389e6;
pointer-events: none;
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; }
.table .proto-cell{ position:relative; }
.table .proto-cell .cell-actions{ position:absolute; right:8px; top:50%; transform:translateY(-50%); display:flex; gap:6px; opacity:0; transition:opacity .15s ease; }
.table .proto-cell:hover .cell-actions{ opacity:1; }
.table .proto-cell.is-marked, .table .proto-cell.cell-selected{ background:#eef5ff; box-shadow: inset 0 0 0 2px #9AC1EC; border-radius:8px; }
.table .icon{ background: transparent;
border: none;
border-radius: 8px;
padding: 4px;
display: grid;
place-items: center;
cursor: pointer; }
.icon-settings{
border: none;
background: transparent;
cursor: pointer;
opacity: 0.8;
}
.icon-settings:hover{
opacity: 1;
}
.change-icon:hover{
cursor: pointer;
}
.table .proto-cell .icon svg{ display:block; }
.table .cred-cell{ position:relative; }
.table .cred-cell .cell-actions{ position:absolute; right:8px; top:50%; transform:translateY(-50%); display:flex; gap:6px; opacity:0; transition:opacity .15s ease; }
.table .cred-cell:hover .cell-actions{ opacity:1; }
.table .cred-cell.is-marked, .table .cred-cell.cell-selected{ background:#eef5ff; box-shadow: inset 0 0 0 2px #9AC1EC; border-radius:8px; }
/* Toast (center of screen) */
.toast{ position: fixed; left:50%; top:50%; transform: translate(-50%,-50%) scale(.95); background: rgba(17,24,39,.9); color:#fff; padding:12px 18px; border-radius:12px; opacity:0; pointer-events:none; transition: opacity .2s ease, transform .2s ease; z-index: 1200; }
.toast.show{ opacity:1; transform: translate(-50%,-50%) scale(1); }
.change-cell{ position: relative; }
.change-link{
font-weight: 500;
font-size: 0.95rem;
line-height: 24px;
text-decoration: underline;
background: var(--grad-90);
-webkit-background-clip: text; background-clip: text; color: transparent;
border-bottom: 0.5px solid #6389E6;
}
.change-cell .timer-indicator{
margin-top: 6px;
font-size: 0.82rem;
color: #6C6C6C;
display: inline-flex;
align-items: center;
gap: 6px;
}
.change-cell .timer-indicator::before{
content: '⏱';
font-size: 0.85rem;
opacity: 0.85;
}
.icon-close{
position: absolute;
right: 20px;
top: 20px;
border: none;
background: transparent;
cursor: pointer;
opacity: 0.8;
}
.change-icon{ position:absolute; right:8px; top:50%; transform:translateY(-50%); opacity:0; transition:opacity .15s ease; }
.change-cell:hover .change-icon{ opacity:1; }
.badge { display:inline-flex; align-items:center; gap:6px;white-space:nowrap;padding:4px 10px; border-radius:999px; font-weight:700; font-size: 0.85rem; }
.badge.ok { background: #7DBC791A; color:#7DBC79; border:1px solid #7DBC791A; }
.badge.bad { background: #BE614E1A; color:#BE614E; border:1px solid #BE614E1A; }
.badge.expired { background: #7E1F1F1A; color:#7E1F1F; border:1px solid #7E1F1F1A; }
.badge.pending { background: #B8BDC71A; color:#5D6372; border:1px solid #B8BDC71A; }
.badge.ok::before,
.badge.bad::before,
.badge.expired::before,
.badge.pending::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; }
.badge.ok::before{ background:#7DBC7A; }
.badge.bad::before{ background:#BE614E; }
.badge.expired::before{ background:#7E1F1F; }
.badge.pending::before{ background:#8B919E; }
.exp.warn { color:#BE614E; font-weight:700; }
.row-actions .icon { background:#f3f6fb; border:1px solid #e7ecf5; border-radius:8px; padding:4px 6px; cursor:pointer; }
.table-foot { display:flex; justify-content:space-between; align-items:center; padding:10px 4px; color:#383A3F; }
.table-foot .icon { background:#f3f6fb; border:1px solid #e7ecf5; border-radius:8px; padding:4px 10px; }
.bulk { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
.bulk .chip { border:1px solid #e7ecf5; background:#f3f6fb; color:#111827; padding:8px 12px; border-radius:999px; font-weight:700; }
.ends{
width: 250px;
}
.meta .muted{
color: #88898C;
font-size: 1.15rem;
margin-right: 10px !important;
}
.meta span{
font-size: 1.15rem;
color: #383A3F;
}
.link-download{
background: linear-gradient(90.24deg, #9AC1EC -29.32%, #6389E6 99.79%);
font-size: 1.15rem;
line-height: 130%;
letter-spacing: 0%;
text-decoration: underline;
text-decoration-style: solid;
text-decoration-thickness: 0%;
text-decoration-skip-ink: auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 400 !important;
}
/* ======= History (история оплат) ======= */
.history h2 { font-size: 32px; margin: 0 0 16px; border-bottom: 4px solid #9AC1EC; width: max-content; padding-bottom: 6px; }
.history-list { display: grid; gap: 20px; }
.history-empty { color: #8a90a3; margin-bottom: 16px; }
.history-empty[hidden] { display: none; }
.history-item { background: #fff;
border: 1px solid #eaeef7;
border-radius: var(--r);
padding: 24px; }
.history-item h3 { margin: 20px 0 6px;
font-size: 1.5rem;
color: #383A3F; }
.history-item .sub { color: #88898C;
font-size: 1.15rem; }
.history-item .status-badge {
display: inline-block;
padding: 4px 8px;
border-radius: 999px;
font-weight: 600;
font-size: 0.85rem;
color: #fff;
background: var(--grad-40);
}
.history-item.notpaid .status-badge { background: linear-gradient(40.78deg, #FFFFFF 10.1%, #DDEAFE 95.03%);
color: #9AC1EC; }
.history-item .meta { display:flex; flex-wrap:wrap; gap:14px 24px; align-items:center; margin-top:10px; }
.history-item .meta a { color:#6a95ff; font-weight:600; }
.history-pids { margin: 14px 0 0; padding-left: 18px; color:#5d6372; font-size:14px; }
.history-pids li { margin: 4px 0; }
.admin-login { padding: 80px 0 120px; }
.admin-login__inner { max-width: 420px; margin: 0 auto; display:flex; flex-direction:column; gap:24px; }
.admin-login__form { display:flex; flex-direction:column; gap:18px; }
.admin-login__error { color:#d1435b; background:#fbe9eb; border:1px solid #f5c2c7; padding:10px 14px; border-radius:12px; }
.admin-nav { background: #0d1b2a;
color: #fff;
padding: 16px;
border-radius: 10px; }
.admin-nav__inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.admin-nav__logo { font-weight:700; letter-spacing:0.04em; text-transform:uppercase; }
.admin-nav__menu { list-style:none; display:flex; gap:18px; margin:0; padding:0; }
.admin-nav__menu a { color:#dbe2ef; text-decoration:none; font-weight:600; }
.admin-nav__menu a.is-active { color:#fff; border-bottom:2px solid #9ac1ec; padding-bottom:4px; }
.admin-nav__user { display:flex; align-items:center; gap:12px; color:#dbe2ef; }
.admin-nav__logout { color:#ffb4a2; text-decoration:none; font-weight:600; }
.admin-nav__logout:hover { text-decoration:underline; }
.admin-section { padding: 60px 0 100px; }
.admin-section__inner { display:flex; flex-direction:column; gap:28px; }
.admin-section__note { color:#69758f; max-width:640px; }
.admin-grid { display:grid; gap:24px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items:stretch; }
.admin-card { background:#fff; border-radius:24px; box-shadow:0 12px 32px rgba(17,34,61,.08); padding:24px 28px; display:flex; flex-direction:column; gap:18px; }
.admin-card h2 { font-size:18px; margin:0; }
.admin-card__actions { display:flex; gap:12px; }
.admin-card__toolbar { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.admin-card__toolbar .control { flex:1 1 220px; }
.admin-card__toolbar-actions { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.admin-card__toolbar-actions .btn { flex:0 0 auto; }
.admin-card__status { font-size:14px; color:#5d6372; }
.admin-card__status[hidden] { display:none; }
.admin-table-wrap { overflow-x:auto; }
.admin-table th, .admin-table td { padding:12px 10px; text-align:left; border-bottom:1px solid #edf1f7; }
.admin-table tbody tr:last-child td { border-bottom:none; }
.admin-table tbody tr.is-selected { background:#f4f7ff; }
.admin-table tbody tr.is-selected td { background:transparent; }
.admin-cabinet-select { min-width: 170px; }
.admin-cabinet-status { display:inline-block; margin-left:12px; font-size:12px; color:#5d6372; }
.admin-cabinet-status[data-mode="success"] { color:#2f855a; }
.admin-cabinet-status[data-mode="error"] { color:#d1435b; }
.admin-actions { display:flex; gap:12px; align-items:center; }
.admin-pill { display:inline-flex; border-radius:999px; padding:4px 10px; font-size:12px; font-weight:600; background:#e7ecf5; color:#1b263b; }
.admin-pill.inactive { background:#fbe9eb; color:#d1435b; }
.admin-empty-row td { text-align:center; color:#8a90a3; padding:28px 12px; }
.control.is-readonly { background:#f4f7ff; color:#8a90a3; }
.proxy-meta-select-header,
.proxy-meta-select {
width:48px;
text-align:center;
}
.proxy-meta-select-header input[type="checkbox"],
.proxy-meta-select input[type="checkbox"] {
width:18px;
height:18px;
cursor:pointer;
}
/* ======= API (аккордеон) ======= */
.api h2 { font-size: 32px; margin: 0 0 16px; }
.acc { display: grid; gap: 14px; }
.acc details { border:1px solid #D9D9D9; background: #fafafa; border-radius:16px; padding:40px; position:relative; }
.acc summary { list-style:none; cursor:pointer; font-weight:800; padding:6px 0; }
.acc summary::-webkit-details-marker { display:none; }
.acc details[open] { box-shadow:0 8px 24px rgba(26,35,126,.06); }
.acc details[open] summary { margin-bottom:6px; }
.acc .acc-body { color:#374151; }
.acc pre { margin: 8px 0 0; background:#f8fafc; border:1px solid #eaeef7; border-radius:12px; padding:12px; overflow:auto; }
.acc details::before{background: url(../img/arrow.svg); content: "";
position: absolute;
right: 40px;
top: 46px;
width: 24px;
height: 24px;}
.acc details[open]::before{transform: rotate(180deg);top: 42px;}
/* ======= Settings (настройки) ======= */
.settings h2 { font-size: 42px; margin: 0 0 10px; }
.settings-tabs { margin-bottom: 14px; }
.settings-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap: 36px; align-items:start; }
.settings-main .field { margin-bottom: 12px; }
.settings-save { margin-top: 14px;
border-radius: 999px;
background: linear-gradient(90.24deg, #b7c7f0 -29.32%, #7da0ff 99.79%);
width: 65%;
font-weight: 100;
text-align: center;
justify-content: center; }
.chk-row { display:flex; align-items:center; gap:8px; margin: 10px 0; }
.settings-aside { padding: 18px 20px;
align-self: start;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px; }
.settings-aside h3 { margin: 0 0 10px; font-size: 28px; }
.settings-aside p { margin: 0 0 10px; color:#383A3F; }
#settingsProfile {
max-width: 80%;
PADDING-TOP: 20PX;
}
#settingsProfile input{
min-width: 100%;
}
.btn.danger { background: linear-gradient(90.24deg, #b7c7f0 -29.32%, #7da0ff 99.79%);
width: 50%;
font-weight: 100;
text-align: center;
justify-content: center; }
.hidden { display: none !important; }
/* занимает место в раскладке, но невидим */
.invisible { visibility: hidden; }
#settingsPassword{
max-width: 45%;
display: flex;
flex-direction: column;
padding-top: 20px;
}
#settingsPassword button {
width: 100%;
}
.logo span{
font-size: 1.5rem;
}
.notify-group { margin: 14px 0 18px;}
.notify-group h4 { margin: 25px 0 10px;
font-weight: 400; }
.notify-row { display:flex; justify-content: space-between; align-items:center; margin: 15px 0; gap: 12px; max-width: 20%;}
input.switch{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
width: 0 !important; height: 0 !important;
border: 0;
border-radius: 999px;
background: #E7E7E7; /* серый фон в выключенном состоянии */
box-shadow: inset 0 0 0 1px #e0e0e0;
position: relative;
outline: none;
cursor: pointer;
transition: background .2s ease, box-shadow .2s ease;
-webkit-tap-highlight-color: transparent;
}
#settingsNotify button{
max-width: 35%;
}
input.switch::before{
content: '';
position: absolute;
top: -16px;
left: 0px;
width: 64px;
height: 32px;
border-radius: 30px;
background: #DCDDDDB2;
transition: transform .2s ease;
}
input.switch::after{
content: '';
position: absolute;
top: -12px;
left: 4px;
width: 24px;
height: 24px;
border-radius: 50%;
background: #fff;
transition: transform .2s ease;
}
input.switch:focus-visible{ box-shadow: inset 0 0 0 2px rgba(79,140,255,.35); }
input.switch:checked{
background: var(--grad-40); /* синева при активном */
box-shadow: none;
}
input.switch:checked::after{ transform: translateX(30px); }
input.switch:checked::before{ background: var(--grad-40); }
.partner { display:flex; flex-direction:column; gap:22px; padding-top: 10px; }
.partner-top { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.partner h2 { margin:0; font-size:36px; }
.partner-sub { margin:6px 0 0; max-width:560px; color:var(--muted); font-size:1rem; }
.partner-pane { border-radius:var(--r); padding:28px 32px; }
.partner-layout { display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); gap:36px; align-items:flex-start; }
.partner-form { display:flex; flex-direction:column; gap:24px; }
.partner-form h3 { margin:0; font-size:30px; }
.partner-group { display:grid; gap:14px; }
.partner-group h4 { margin:0; font-size:18px; font-weight:700; color:#111827; }
.partner-form .field { display:flex; flex-direction:column; gap:6px; }
.partner-form .field-label { font-weight:600; color:#111827; }
.partner-form .control { width:100%; }
.partner-form .control-multiline { resize: vertical; min-height:96px; }
.partner-form .field-hint { font-size:0.9rem; color:var(--muted); }
.partner-form .field-hint a { color:var(--brand-blue); font-size: inherit; }
.partner-form .field.required .field-label::after { content:' *'; color:#e45865; }
.partner-actions { display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.partner-note { margin:0; font-size:0.9rem; max-width:420px; color:var(--muted); }
.partner-label { display:block; margin-bottom:6px; font-size:0.9rem; color:var(--muted); }
.partner-checklist { border-radius:24px; padding:24px 26px; display:flex; flex-direction:column; gap:18px; }
.partner-checklist h4 { margin:0; font-size:22px; }
.partner-switches { list-style:none; margin:0; padding:0; display:grid; gap:14px;width: 90%; }
.partner-switches li { display:flex; align-items:center; justify-content:space-between; gap:18px; font-size:0.95rem; color:#121826; }
.partner-switches li span { flex:1; }
.partner-switches a { color:var(--brand-blue); font-size: inherit; }
.partner-checklist .switch { margin-left:16px; }
.partner-help { margin-top:auto; display:flex; flex-direction:column; gap:12px; background:#fff; border-radius:20px; padding:18px; box-shadow:0 12px 30px rgba(17,34,61,.08); }
.partner-help p { margin:0; font-size:0.95rem; color:var(--muted); }
.partner-help .btn { align-self:flex-start; }
.partner-cards { display:grid; gap:24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.partner-card { background:#fff; border-radius:24px; padding:22px 24px; box-shadow:0 16px 40px rgba(17,34,61,.06); display:flex; flex-direction:column; gap:16px; }
.partner-card h4 { margin:0; font-size:20px; }
.partner-card p { margin:0; }
.partner-price { font-size:2rem; font-weight:700; }
.partner-price span { font-size:1rem; font-weight:400; color:var(--muted); }
.partner-card ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; color:var(--muted); }
.partner-card dl { margin:0; display:grid; gap:8px; }
.partner-card dl > div { display:flex; justify-content:space-between; font-size:0.95rem; color:#111827; }
.partner-log { list-style:none; margin:0; padding:0; display:grid; gap:8px; color:var(--muted); font-size:0.95rem; }
.partner-log span { display:inline-block; min-width:56px; font-weight:600; color:#111827; }
.partner-link { color:var(--brand-blue); font-weight:600; font-size:0.95rem; }
.partner-referral { display:flex; flex-direction:column; gap:28px; }
.partner-referral__head { display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:flex-end; }
.partner-link-box { display:flex; gap:12px; align-items:center; }
.partner-link-box .control { width:260px; }
.partner-grid { display:grid; gap:24px; grid-template-columns: minmax(0,0.9fr) minmax(0,1.1fr); }
.partner-summary { background:#fff; border-radius:24px; padding:24px; box-shadow:0 12px 32px rgba(17,34,61,.06); display:flex; flex-direction:column; gap:16px; }
.partner-summary dl { margin:0; display:grid; gap:10px; }
.partner-summary dl > div { display:flex; justify-content:space-between; font-size:0.95rem; }
.partner-table { background:#fff; border-radius:24px; padding:24px; box-shadow:0 12px 32px rgba(17,34,61,.06); }
.partner-table__head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.partner-table table { width:100%; border-collapse:collapse; font-size:0.95rem; }
.partner-table th, .partner-table td { border:1px solid #edf1fb; padding:10px 14px; text-align:left; }
.partner-table th { background:#f3f6ff; font-weight:600; }
.partner-pane.hidden { display:none !important; }
.partner-dashboard { background:#fff; border-radius:32px; padding:32px; box-shadow:0 24px 64px rgba(17,34,61,.08); display:flex; flex-direction:column; gap:24px; }
.partner-dashboard__head { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; flex-wrap:wrap; }
.partner-dashboard__head h2 { margin:0; font-size:34px; }
.partner-dashboard__hint { margin:6px 0 0; max-width:420px; color:var(--muted); font-size:0.95rem; }
.partner-dashboard__summary { display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.partner-dashboard__income { display:flex; align-items:center; gap:12px; border-radius:16px; padding:10px 16px; font-weight:600; }
.partner-dashboard__income strong { font-size:1.15rem; }
.partner-dashboard__link { border:none; background:none; color:var(--brand-blue); font-weight:600; cursor:pointer; padding:0; }
.partner-dashboard__link:hover { text-decoration:underline; }
.partner-search { display:flex; align-items:center; gap:10px; border:1px solid var(--border); border-radius:18px; padding:0 14px; background:#fff; box-shadow:0 6px 18px rgba(17,34,61,.08); }
.partner-search input { border:none; padding:0; min-width:220px; }
.partner-search input:focus { outline:none; box-shadow:none; }
.partner-dashboard__filters { display:flex; gap:18px; flex-wrap:wrap; }
.partner-dashboard__filters .field { min-width:160px; }
.partner-dashboard__table { border:1px solid var(--border); border-radius:24px; overflow:hidden; background:#fff; }
.partner-dashboard__table table { width:100%; border-collapse:collapse; }
.partner-dashboard__table thead { background:#eef4ff; }
.partner-dashboard__table th { text-align:left; font-weight:600; padding:14px 18px; font-size:0.95rem; color:#111827; }
.partner-dashboard__table td { padding:12px 18px; border-top:1px solid #eef1fb; vertical-align:middle; font-size:0.95rem; }
.partner-dashboard__table tbody tr:hover { background:#f9fbff; }
.partner-dashboard__table .mono { font-family:"JetBrains Mono", "Fira Code", "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size:0.9rem; }
.partner-dashboard__tools .icon { background:none; border:none; padding:6px; cursor:pointer; }
.partner-dashboard__tools .icon:hover { opacity:.7; }
.partner-dashboard__footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px; align-items:center; }
.partner-dashboard__pager { display:flex; align-items:center; gap:16px; color:var(--muted); font-size:0.9rem; }
.partner-dashboard__pager-controls { display:flex; gap:8px; }
.partner-dashboard__pager-controls .icon { width:36px; height:36px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; background:#fff; cursor:pointer; }
.partner-dashboard__pager-controls .icon[disabled] { opacity:.4; cursor:not-allowed; }
.partner-dashboard__bulk { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.partner-dashboard__bulk-actions { display:flex; align-items:center; gap:12px; font-size:0.9rem; color:var(--muted); }
.partner-dashboard__bulk .chip { border:1px solid #dce3f1; background:#f4f6fb; color:#111827; padding:8px 16px; border-radius:999px; font-weight:600; cursor:pointer; }
.partner-dashboard__bulk .chip:disabled { opacity:.5; cursor:not-allowed; }
.partner-modal { display:flex; flex-direction:column; gap:24px; }
.partner-modal__head { display:flex; justify-content:space-between; align-items:center; gap:16px; }
.partner-modal__head h2 { margin:0; font-size:28px; }
.partner-modal__close { background:none; border:none; font-size:32px; line-height:1; cursor:pointer; color:#88898c; padding:0 4px; }
.partner-modal .partner-layout { grid-template-columns: minmax(0,1fr) minmax(0,0.9fr); }
@media (max-width: 1200px){
.partner-layout { grid-template-columns: 1fr; }
.partner-checklist { order:-1; }
}
@media (max-width: 1024px){
.partner-dashboard { padding:24px; border-radius:24px; }
.partner-dashboard__filters { gap:12px; }
.partner-dashboard__filters .field { flex:1 1 160px; }
}
@media (max-width: 900px){
.partner-grid { grid-template-columns: 1fr; }
.partner-top { flex-direction:column; }
.partner-pane { padding:24px; }
}
@media (max-width: 720px){
.partner-dashboard__summary { flex-direction:column; align-items:stretch; }
.partner-search input { min-width:0; width:100%; }
.partner-dashboard__table { overflow-x:auto; }
.partner-dashboard__table table { min-width:720px; }
.partner-modal .partner-layout { grid-template-columns: 1fr; }
.partner-modal__head { flex-wrap:wrap; }
}
td, th{
border: 0.5px solid #e6e6e6;
}
th {
background: #EDF4FE;
}
.black-wrapper{
border-radius: var(--r);
padding: 24px;
background: #fff;
}
.black-wrapper .muted{
width: 50%;
margin: 8px 0 !important;
}
/* ======= Modal (общая) ======= */
.modal-overlay { position: fixed; inset: 0; background: rgba(17,24,39,.65); display: grid; place-items: center; opacity: 0; transition: opacity .15s ease; z-index: 1000; }
.modal-overlay.open { opacity: 1; }
.modal {
position: relative;
background:#fafafa;
border-radius:28px;
border:1px solid #eaeef7;
padding: 20px;
box-shadow: 0 20px 60px rgba(0,0,0,.25);
max-width:80%;
max-height:80%;
overflow:auto;
-ms-overflow-style:none; /* IE/Edge скрываем скролл */
scrollbar-width:none; /* Firefox скрываем скролл */
}
.modal::-webkit-scrollbar{ display:none; }
.modal h3 { margin: 6px 0 14px; font-size: 26px; }
.modal-actions { display:flex; gap: 14px; justify-content: space-between; }
.btn-neutral { background:#e9edf3; border:1px solid #e0e6f0; color:#111827; border-radius: 999px; padding: 14px 24px; font-weight: 700; }
/* Blacklist modal */
.modal .bl { max-width: 100%; background:#fafafa; }
.modal .bl-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; }
.modal .bl-top h2{ margin:0; font-size: 28px; }
.modal .bl-tabs{ margin: 8px 0 10px; }
.modal .bl .bl-toolbar{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin:10px 0; }
.modal .bl .bl-toolbar .link{
color: #383A3F;
}
/* Auth modal */
.auth-modal { position:relative; width:min(90vw,420px); padding:32px 32px 28px; background:#fff; border-radius:28px; color:#1d2433; display:flex; flex-direction:column; }
.auth-modal__title { margin:0 0 24px; font-size:28px; font-weight:700; }
.auth-modal__form { display:flex; flex-direction:column; gap:18px; }
.auth-field { display:flex; flex-direction:column; gap:8px; }
.auth-field label { font-weight:600; font-size:16px; color:#2c3240; }
.auth-input { display:flex; align-items:center; padding:0 16px; border-radius:20px; border:1px solid #e1e7f3; background:#f6f8fc; transition:border-color .2s ease, box-shadow .2s ease; }
.auth-input input { flex:1; border:0; background:transparent; font-size:18px; padding:16px 0; color:inherit; }
.auth-input input::placeholder { color:#a4adc1; }
.auth-input input:focus { outline:none; }
.auth-input.is-focused { border-color:#99b9f7; box-shadow:0 0 0 3px rgba(153,185,247,.25); }
.auth-input__toggle { border:0; background:none; color:#7b849a; cursor:pointer; font-size:16px; padding:4px 0 4px 8px; display:flex; align-items:center; }
.auth-modal__link { color:#5d7de7; font-weight:600; cursor:pointer; text-decoration:none; }
.auth-modal__link:hover { color:#3f63d9; }
.auth-modal__actions { display:flex; flex-direction:column; gap:16px; }
.auth-modal .btn-primary { width:100%; justify-content:center; border-radius:200px; font-size:18px; }
.auth-modal__footer { font-size:16px; color:#6b7285; text-align:center; display:flex; justify-content:center; gap:8px; }
.auth-modal__footer .auth-modal__link { font-weight:600; }
.auth-modal__footer--single { gap:0; }
.auth-hint { font-size:14px; color:#8891a7; margin-top:-4px; }
.auth-telegram { display:flex; flex-direction:column; gap:8px; text-align:center; font-size:14px; color:#69758f; }
.auth-telegram a { color:#5d7de7; font-weight:600; }
.auth-field__extra { display:flex; justify-content:flex-end; font-size:14px; }
.auth-modal__close { position:absolute; top:16px; right:16px; border:0; background:none; color:#a0a9bc; font-size:24px; line-height:1; cursor:pointer; padding:4px; }
.auth-modal__close:hover { color:#6f7b95; }
.auth-message { min-height:22px; font-size:14px; color:#6b7285; margin-bottom:4px; }
.auth-message.hidden { display:none; }
.auth-message--error { color:#d14338; }
.auth-message--success { color:#1f7a3a; }
.auth-extra { margin:8px 0 16px; display:flex; justify-content:center; }
.auth-extra.hidden { display:none; }
.auth-extra__btn { display:inline-flex; align-items:center; justify-content:center; padding:10px 18px; border-radius:999px; border:1px solid transparent; background:var(--grad-90); color:#fff; font-weight:600; cursor:pointer; text-decoration:none; }
.auth-extra__btn:hover { opacity:.9; }
.auth-extra__btn:active { transform:translateY(1px); }
/* ======= Radio (кастомный вид) ======= */
/* Сбрасываем стандартный вид и вставляем SVG как фон */
input[type="checkbox"]{
-webkit-appearance: none;
appearance: none;
width: 16px; height: 16px;
border: none !important;
border-radius: 0;
background: url("data:image/svg+xml;utf8,") center / contain no-repeat;
display: inline-block;
vertical-align: middle;
cursor: pointer;
}
input[type="checkbox"]:checked{
background-image: url("data:image/svg+xml;utf8,");
}
input[type="checkbox"]:focus-visible{ outline:2px solid rgba(79,140,255,.35); outline-offset:2px; }
input[type="checkbox"]:disabled{ opacity:.6; cursor:not-allowed; }
.table-foot .icon-left {
background: #FAFBFD;
border-radius: 8px 0 0 8px;
padding: 10px 17px;
border: 0.6px solid #D5D5D5;
cursor: pointer;
}
.table-foot .icon-right {
background: #FAFBFD;
border-radius: 0 8px 8px 0;
padding: 10px 17px;
border: 0.6px solid #D5D5D5;
cursor: pointer;
}
.is-active .bulk-buttons button{
cursor: pointer;
}
.hint{
font-family: Manrope;
font-weight: 500;
font-style: Medium;
font-size: 0.95rem;
line-height: 24px;
letter-spacing: 0%;
color: #383A3F;
}
#nav-back,#mobilefooter{
display: none;
}
.header-contacts, .menu, .lk-wrap{
display: flex;
align-items: center;
gap: 10px;
}
@media (max-width: 768px) {
.support-slider .slide-inner {
grid-template-columns: 1fr;
}
}
@media (max-width: 960px){
:root{
--r: 30px;
--w-expanded: 85%;
--h: 375px
}
html{
font-size: 16px;
}
.header-contacts .header-tg{
padding: 0;
}
.header-contacts{
display: flex;
align-content: center;
align-items: center;
gap: 15px;
justify-content: flex-start;
flex-wrap: wrap;
margin-top: 40px;
}
.menu{
display: flex;
flex-direction: column;
}
.menu a{
border-bottom: 1px solid #90939B;
padding: 16px 0 12px;
display: block;
width: 100%;
}
.header-inner:has(.open) {
align-items: center;
justify-content: flex-start;
height: 64px;
width: 100%;
padding: 0 24px;
flex-direction: row;
}
.header-inner:has(.open) .logo {
margin-left: 30px;
}
#nav-back.open{
display: block !important;
}
.lk-grid { grid-template-columns: 1fr; }
.lk-body { grid-template-columns: 1fr; }
.card.pricing .btn-primary{position:static;right:auto;bottom:auto;margin-top:14px}
.try-layout{ grid-template-columns:1fr; }
.filters { flex-direction:column; }
.settings-grid { grid-template-columns: 1fr; }
.settings-save { width: 100%; }
.two-col{grid-template-columns:1fr}
.hero-grid{grid-template-columns:1fr}
.support-banner{grid-template-columns:1fr}
.nav{display:none;position:absolute;top:80px;right:0;background:#fff;border-left:1px solid #edf1f7;border-bottom:1px solid #edf1f7;padding:12px;flex-direction:column;gap:10px}
.nav.open{display:flex;flex-direction: column;
width: 100%;
height: calc(100vh - 80px);}
.nav-toggle{display:inline-block}
.footer-grid{grid-template-columns:1fr;gap:10px}
.header-cta {
display: flex;
align-items: flex-start;
gap: 10px;
flex-direction: column;
}
.logo span {
font-size: 1.11rem;
}
.btn-sm{
position: absolute;
bottom: 160px;
width: calc(100% - 24px);
display: flex;
align-items: center;
justify-content: center;
}
.logo-mark img {
width: 48px;
height: 48px;
}
.lk-wrap{
display: flex;
gap: 10px;
margin-top: 24px;
}
#mobilefooter p{
margin: 7px 0;
}
#mobilefooter{
color: #8E8E8E;
position: absolute;
bottom: 70px;
display: block;
}
.lk-icon{
margin: 0 !important;
}
main{
padding: 0;
overflow: hidden;
}
.hero{
padding: 32px 11.5px;
height: 390px;
}
.hero-copy h1{
font-size: 1.5rem;
z-index: 9;
position: relative;
}
.accent{
display: block;
}
.device{
top: 200px;
left: 45%;
z-index: 0;
width: 80% !important;
height: 200px !important;
background-size: cover !important;
}
.btn-primary{
z-index: 9;
border: none;
}
.section-title{
font-size: 1.3em;
margin: 26px 0;
}
.section {
margin: 48px 0;
}
.cards-2 h3{
font-size: 1.3em;
margin: 0;
}
.cards-2 {
display: flex;
gap: 16px;
overflow: scroll;
position: relative;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
scrollbar-width: none;
flex-wrap: nowrap;
flex-direction: row;
align-items: center;
padding: 0 12px;
}
.cards-2 .card {
width: 100%;
flex: 0 0 307px;
padding: 16px 12px;
}
.pill {
padding: 8px 12px;
font-size: 1rem;
margin-bottom: 12px;
}
.card.pricing header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0;
}
.card .list li {
margin: 4px 0;
}
.btn-card, .btn-card-2 {
position: absolute;
border-radius: 200px;
background: linear-gradient(90.24deg, #AF80B3 -29.32%, #6A95FF 99.79%);
padding: 4px;
display: inline-flex;
bottom: 0;
right: 0;
}
.big24 svg{
width: 100%;
}
.slide h3 {
color: #fff;
margin: 24px 0 24px 0 !important;
font-size: 1.3rem;
}
.slide p span {
width: 100%;
font-size: 1rem;
}
.support-slider {
width: calc(100% - 24px);
height: 560px;
margin: 0 12px;
}
.support-slider .carousel-dots {
gap: 8px;
align-items: center;
width: 100%;
margin-top: 16px;
bottom: 64px;
position: absolute;
padding: 0 12px;
}
#reviews .review-background
{
position: relative;
display: flex;
flex-direction: column-reverse;
gap: 32px;
background: #fafafa;
}
.right-reviews {
width: calc(100% - 24px);
display: flex;
position: relative;
color: #fff;
padding: 24px 12px;
flex-direction: column;
font-size: 1.11rem;
background: linear-gradient(40.78deg, #9AC1EC 10.1%, #6A95FF 95.03%);
border-radius: var(--r);
margin: 0 12px;
}
.right-reviews h3 {
margin: 15px 0;
font-size: 1.3rem;
}
.big24 {
position: absolute;
right: 0px;
bottom: -65px;
width: 65%;
}
.btn-card > .inner, .btn-card-2 > .inner {
border-radius: 200px;
background: #fff;
height: 100%;
padding: 8px 16px;
display: inline-flex;
}
.btn-card::before {
position: absolute;
width: calc(100% + 25px);
height: calc(103.969px + 25px);
left: -10px;
z-index: -6;
background: #fafafa;
top: -10px;
border-radius: 30px 0 0 0;
}
.btn-card::after{
position: absolute;
display: block;
width: 300px;
height: 300px;
background: #fafafa;
right: 0;
top: -39px;
clip-path: path("M300 0 A30 30 0 0 1 270 30 L300 30 Z");
mask-repeat: no-repeat;
mask-position: top right;
}
a {
font-size: 1rem;
color: inherit;
text-decoration: none;
}
.card.pricing .price {
font-size: 1.3rem;
font-weight: 700;
margin: 12px 0;
position: absolute;
left: 12px;
bottom: 0px;
}
.card .list {
padding-left: 0;
margin-top: -8px;
margin-bottom: 50px;
}
h3 {
font-size: 1rem;
font-weight: 700;
margin: 0 16px;
align-items: center;
}
.panel-body p{
font-size: 1rem;
padding: 12px 24px;
}
.panel-text {
display: flex;
gap: 16px;
margin-top: 16px;
overflow: scroll;
flex-direction: row;
scrollbar-width: none;
flex-wrap: nowrap;
}
.panel-body{
padding: 24px 0 24px 16px;
width: 100%;
}
.panel-body p {
font-size: 1rem;
padding: 12px 24px;
flex: 0 0 fit-content;
}
.panel {
border: 1px solid #eaeef7;
border-radius: var(--r);
background: linear-gradient(40.78deg, #FFFFFF 10.1%, #DDEAFE 95.03%);
overflow: hidden;
padding: 16px 0;
position: relative;
margin: 12px;
}
.panel-header{
margin-left: 16px;
}
.mock{
margin: 16px;
width: calc(100% - 32px);
}
.pill svg{
width: 16px;
}
.panel-blue .panel-header{
margin: 0;
}
.panel-blue {
padding: 24px 12px;
}
.panel-blue h3 {
margin: 0;
font-size: 1rem;
display: block;
}
.panel-top .list {
padding: 0 15px;
list-style: disc;
}
.chips {
margin-top: 25px;
display: flex;
flex-wrap: nowrap;
gap: 24px;
flex-direction: row;
overflow: scroll;
scrollbar-width: none;
}
.chip{
flex: 0 0 fit-content;
padding: 12px 24px;
}
.panel-body.right {
padding-top: 24px;
padding-bottom: 24px;
width: 100%;
position: relative;
margin-top: 24px;
}
.right .panel-text{
flex-wrap: wrap;
}
.cards-top,
.cards-bottom{
display: contents; /* убираем сами обёртки, остаются только карточки */
}
.container.cards-3{
display: flex;
gap: 16px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
padding: 0 16px;
}
/* спрячем полосу прокрутки */
.container.cards-3::-webkit-scrollbar{ display:none }
.container.cards-3{ scrollbar-width: none }
.cards-3 h4 {
font-size: 1.5rem;
font-weight: 700;
margin: 16px 0;
width: 258px;
}
img.infinity {
width: 100%;
}
.cards-3 {
display: flex;
gap: 16px;
font-size: 1.2rem;
}
.cards-3 .card{
width: 258px;
flex: 0 0 258px;
max-width: 258px;
scroll-snap-align: start;
padding: 24px 12px;
}
.bottom-text {
padding-right: 0;
position: relative;
word-wrap: normal;
max-width: 258px;
margin: 16px 0;
bottom: 0;
}
.cards-3 h4 {
font-size: 1.5rem;
font-weight: 700;
margin: 16px 0;
width: 100%;
position: relative;
}
.cards-3 .content h4{
font-size: 1.5rem;
font-weight: 700;
margin: 0;
width: 100%;
position: relative;
}
.cards-3 {
display: flex !important;
gap: 0;
overflow: scroll;
scrollbar-width: none;
}
.cards-bottom p {
margin: 0;
}
.device-2{
position: absolute;
left: 40%;
top: 50%;
width: 200px;
z-index: -1;
}
.cards-3 .content {
display: flex;
position: absolute;
bottom: 0;
height: 240px;
flex-direction: column;
gap: 12px;
}
#reviews .left-reviews {
position: relative;
overflow: hidden;
flex: 1;
width: 100%;
background: linear-gradient(40.78deg, #9AC1EC 10.1%, #6A95FF 95.03%);
border-radius: var(--r);
max-height: 679px;
}
#reviews .slide-review {
flex: 0 0 auto;
margin: 12px 0;
display: flex;
justify-content: flex-end;
padding-right: 0;
flex-direction: column-reverse;
width: 80%;
}
.review-card{
max-width: 100%;
}
.active .topvizor {
right: 0;
opacity: 1;
bottom: 0px;
width: 100%;
transform: translate(0, 15%);
}
.topvizor {
right: 0;
opacity: 1;
bottom: 0px;
width: 100%;
transform: translate(0, 100%);
padding: 12px;
border-radius: var(--r);
transition: right 2.8s ease;
}
#reviews .slide-review{
margin: 12px !important;
}
.topvizor-badge {
width: 100%;
overflow: hidden;
padding: 20px 0;
height: 200px;
border-radius: var(--r);
display: flex;
position: relative;
z-index: -1;
max-height: 90%;
}
#reviews .carousel-dots-vertical {
display: flex;
flex-direction: column;
justify-content: center;
gap: 15px;
margin-left: 20px;
position: absolute;
right: 20px;
top: calc(150% + 32px);
}
#reviews .dot {
background: #ffffff40;
border: 0;
padding: 0;
cursor: pointer;
width: 8px;
height: 8px;
border-radius: 20px;
}
#reviews .carousel-dots-vertical {
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
margin-left: 20px;
position: absolute;
right: 20px;
top: calc(160% + 32px);
align-items: flex-end;
}
.review-text {
margin-top: 16px;
margin-bottom: 10px;
}
.va-line {
display: flex;
gap: var(--gap);
height: var(--h);
justify-content: space-between;
margin-left: 12px;
overflow: scroll;
scrollbar-width: none;
}
.va-body{
padding: 16px 12px;
}
.va-item .pill {
padding: 8px 12px !important;
display: flex;
align-items: center;
max-width: 90%;
}
.pill span{
margin-left: 8px;
}
.va-item h3{
font-size: 1rem !important;
margin: 70px 20px 50px 0;
}
.va-item:not(.is-active) {
max-width: 100%;
}
.va-item {
flex: 0 0 var(--w-expanded);
height: 100%;
border-radius: var(--r);
color: #fff;
position: relative;
overflow: hidden;
cursor: pointer;
display: flex;
flex-direction: column;
background: var(--grad-40);
}
.va-head {
align-items: flex-start;
}
.is-active .va-head {
left: 12px;
position: relative;
width: calc(100% - 24px);
}
.va-side {
flex: 0 0 70%;}
.chips{
flex-wrap: wrap;
}
.footer__nav a {
color: #383A3FB2;
font-size: 1rem;
font-weight: 800;
text-decoration: none;
margin-right: 11px;
margin-bottom: 20px;
display: inline-flex;
flex-direction: row;
}
.footer__top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
flex-direction: column-reverse;
gap: 40px;
}
.footer{
padding: 24px 12px;
}
#lkMenuToggle .lk-menu-toggle__label{
writing-mode: vertical-rl;
text-orientation: upright;
}
.lk-header h1 {
margin: 0 0 12px;
font-size: 1.5rem;
line-height: 1.2;
}
.lk-menu-toggle { display:inline-flex; position:fixed; top:50%; left:0; transform:translateY(-50%); z-index:1200; padding: 20px 5px; border-radius: 0 var(--r) var(--r) 0; flex-direction: column;}
.lk-menu-toggle.is-active svg { transform:rotate(180deg); }
.lk-sidebar { display:none; position:fixed; inset:0; margin:0; padding:0; background:rgba(17,24,39,.45); z-index:1190; }
.lk-sidebar.is-open { display:block; }
.lk-sidebar .lk-menu { position:fixed; top:50%; left:0; transform:translateY(-50%); background:#fff; border-radius: 0 18px 18px 0; padding:18px; max-height:70vh; width:min(260px, calc(100vw - 96px)); overflow:auto; box-shadow:0 18px 40px rgba(0,0,0,.2); }
.lk-sidebar .lk-sep { display:none; }
body.lk-menu-open { overflow:hidden; }
.lk-menu-toggle.is-active{
left: min(260px, calc(100vw - 96px));
}
.lk-content {
border-radius: 16px;
padding: 12px;
display: flex;
width: 100%;
POSITION: relative;
}
.lk-body {
display: flex;
gap: 24px;
align-items: start;
width: 100%;
}
.lk-main{
display: flex;
width: 100%;
}
.form-row {
display: flex;
grid-template-columns: repeat(3, minmax(180px, 1fr));
gap: 12px;
flex-direction: column;
}
.try-layout {
display: flex;
grid-template-columns: 1.3fr .7fr;
gap: 24px;
align-items: start;
flex-direction: column-reverse;
}
.promo-percent{
text-align: center;
}
.promo-card p{
text-align: center;
}
.promo-card{
max-width: 100%;
}
input[type="email"].control {
width: 100%;
min-width: 240px;
border-radius: 12px;
}
.btn-primary {
z-index: 9;
border: none;
width: 100%;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.rent {
padding-top: 8px;
width: 100%;
}
.lk-grid {
display: flex;
gap: 32px;
}
.coupon-row {
display: flex;
align-items: center;
gap: 12px;
flex-direction: column;
}
#lk-section {
margin-bottom: 16px;
width: 100%;
}
.pill-tabs {
display: flex;
flex-wrap: nowrap;
gap: 10px;
overflow: auto;
width: 100%;
scrollbar-width: none;
}
.pill-tab {
font-size: 1.12rem;
border: 1px solid #e7ecf5;
background: #fff;
color: #383A3F;
padding: 7px 16px;
border-radius: 999px;
font-weight: 500;
width: 120px;
flex: 0 0 auto;
}
.pay-list {
display: flex;
flex-wrap: nowrap;
gap: 10px;
overflow: auto;
scrollbar-width: none;
}
.pay-chip {
display: flex;
gap: 8px;
align-items: center;
line-height: 0;
flex-wrap: wrap;
align-content: center;
border: 1px solid #e7ecf5;
background: #fff;
font-size: 1.11rem;
color: #111827;
padding: 7px 16px;
border-radius: 999px;
font-weight: 500;
width: 125px;
flex: 0 0 auto;
justify-content: center;
}
.coupon-input {
width: 100%;
border-radius: 12px !important;
}
.btn-ghost {
background: #DCDDDD;
opacity: 1;
gap: 10px;
border-radius: var(--r);
padding-top: 12px;
padding-right: 16px;
padding-bottom: 12px;
padding-left: 16px;
color: #383A3F;
font-family: Manrope;
font-weight: 500;
font-size: 20px;
line-height: 130%;
white-space: nowrap;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.proxies-box {
border-radius: var(--r);
padding: 0;
background: #fafafa;
}
.toolbar .search{
width: 100%;
}
.ends {
width: 100%;
}
.table-wrap {
overflow: auto;
border: none;
}
.table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 0.90rem;
border-radius: var(--r);
overflow: hidden;
border: none;
}
.bulk-buttons{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 15px;
}
.bulk {
display: flex;
align-items: flex-start;
gap: 10px;
flex-wrap: wrap;
margin-top: 10px;
flex-direction: column;
align-content: flex-start;
}
.bulk-buttons .btn-ghost{
width: calc(50% - 8px);
display: flex;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.history-item h3 {
margin: 20px 0 6px;
font-size: 1.25rem;
color: #383A3F;
}
.acc details {
border: 1px solid #D9D9D9;
background: #fafafa;
border-radius: 16px;
padding: 10px;
position: relative;
}
.acc details[open]::before {
top: 15px;
}
.acc details::before{
top: 15px;
right: 15px;
}
.acc {
display: flex;
gap: 14px;
flex-direction: column;
}
.acc pre {
margin: 8px 0 0;
background: #f8fafc;
border: 1px solid #eaeef7;
border-radius: 12px;
padding: 12px;
overflow: auto;
width: 100%;
}
.settings-tabs .pill-tab{
width: 180px;
}
#settingsProfile {
max-width: 100%;
PADDING-TOP: 20PX;
}
input{
border-radius: 12px;
}
.btn.danger {
background: linear-gradient(90.24deg, #b7c7f0 -29.32%, #7da0ff 99.79%);
width: 100%;
font-weight: 100;
text-align: center;
justify-content: center;
}
.settings-aside{
padding: 0;
}
#settingsNotify button {
max-width: 100%;
}
.notify-row {
display: flex;
justify-content: space-between;
align-items: center;
margin: 15px 0;
gap: 12px;
max-width: 40%;
}
#settingsPassword {
max-width: 100%;
}
.bt.btn-primary.btn-sm{
width: calc(100% - 24px) !important;
}
.modal {
position: relative;
background: #fafafa;
border-radius: 28px 28px 0 0;
border: 1px solid #eaeef7;
padding: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
max-width: 80%;
max-height: 80%;
overflow: auto;
-ms-overflow-style: none;
scrollbar-width: none;
}
.modal::-webkit-scrollbar { display: none; }
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(17, 24, 39, .65);
display: grid;
place-items: center;
opacity: 0;
transition: opacity .15s ease;
z-index: 1000;
align-items: end;
}
.modal h3 {
margin: 6px 0 14px;
font-size: 1.25rem;
}
.modal-actions .btn{
width: 50% !important;
display: flex;
justify-content: center;
}
}
.partner-info .partner-cta {
margin-top: 1.5rem;
}
.partner-info .partner-cta .btn {
display: inline-flex;
align-items: center;
justify-content: center;
}
.pagination {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 16px;
font-size: 14px;
gap: 16px;
}
.pagination[hidden] {
display: none !important;
}
.pagination__summary {
color: #6C6C6C;
}
.pagination__controls {
display: inline-flex;
border: 1px solid #E0E4EA;
border-radius: 999px;
overflow: hidden;
background: #fff;
}
.pagination__controls .page-btn {
border: none;
background: transparent;
padding: 6px 14px;
min-width: 44px;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
line-height: 1;
color: #383A3F;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.pagination__controls .page-btn + .page-btn {
border-left: 1px solid #E0E4EA;
}
.pagination__controls .page-btn[disabled] {
color: #B4B8BF;
cursor: default;
}
.pagination__controls .page-btn:not([disabled]):hover {
background: #F2F4F7;
}
.ps-selected-block {
background: #F6F8FF;
border: 1px solid #E0E6F6;
border-radius: 24px;
padding: 18px;
margin-bottom: 18px;
}
.ps-selected-block .ps-subtitle {
margin-bottom: 12px;
font-weight: 600;
color: #1D2433;
}
.ps-selected-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.ps-selected-list__item {
background: #FFFFFF;
border: 1px solid #E4E8F6;
border-radius: 18px;
padding: 14px 16px;
box-shadow: 0 10px 24px rgba(17, 34, 61, 0.06);
}
.ps-selected-list__title {
font-weight: 600;
margin-bottom: 6px;
color: #1D2433;
}
.ps-selected-list__meta {
display: flex;
flex-wrap: wrap;
gap: 10px 16px;
font-size: 13px;
color: #6C6C6C;
}
.ps-selected-list__meta span {
display: inline-flex;
align-items: center;
gap: 4px;
}
.ps-timer .ps-timer-actions{
background: #F6F8FF;
border: 1px solid #E0E6F6;
border-radius: 24px;
padding: 18px;
display: flex;
flex-direction: column;
gap: 16px;
}
.ps-timer .ps-timer-buttons{
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.ps-timer .ps-timer-buttons .btn{
flex: 1 1 180px;
}
.ps-timer .ps-timer-status{
font-size: 0.9rem;
color: #5D6372;
}
.ps-timer .ps-timer-now{
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.95rem;
color: #1D2433;
}
.ps-timer-warning{
margin-top: 10px;
font-size: 0.85rem;
color: #d1435b;
}
.ps-controls{
display:flex;
flex-direction:column;
gap:12px;
margin-bottom:16px;
}
.ps-controls .ps-search{
max-width:320px;
}
.ps-controls .ps-filters{
display:grid;
gap:12px;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}
@media (min-width:992px){
.ps-controls{
flex-direction:row;
align-items:flex-end;
justify-content:space-between;
}
.ps-controls .ps-search{
flex:0 0 280px;
}
.ps-controls .ps-filters{
flex:1 1 auto;
grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
}
}
.admin-proxy-meta{padding:72px 0 96px;background:#f5f7ff}
.admin-proxy-meta__inner{display:flex;flex-direction:column;gap:28px}
.admin-proxy-meta__title{font-size:32px;font-weight:700;line-height:1.2;color:#1d2433}
.admin-proxy-meta__note{max-width:680px;color:#5d6372;font-size:16px}
.proxy-meta-layout{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:32px;align-items:start}
.proxy-meta-form,.proxy-meta-table{background:#fff;border-radius:26px;box-shadow:0 18px 48px rgba(17,34,61,.08);padding:28px 30px;display:flex;flex-direction:column;gap:20px}
.proxy-meta-form__title{font-size:18px;font-weight:600}
.proxy-meta-form .control.is-readonly,.proxy-meta-form .is-readonly{background:#f4f7ff;color:#8a90a3}
.proxy-meta-form__actions{display:flex;gap:12px;margin-top:4px}
.proxy-meta-table__toolbar{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.proxy-meta-table__toolbar .control{flex:1 1 280px;min-width:200px}
.proxy-meta-table__wrap{overflow-x:auto}
.proxy-meta-table__table{width:100%;border-collapse:collapse;font-size:15px}
.proxy-meta-table__table th,.proxy-meta-table__table td{padding:12px 10px;border-bottom:1px solid #edf1f7;text-align:left;vertical-align:middle}
.proxy-meta-table__table tbody tr:last-child td{border-bottom:none}
.proxy-meta-table__table .muted{color:#8a90a3;font-size:14px}
.proxy-meta-actions{display:flex;gap:12px}
.proxy-meta-actions .link{color:#6389e6;text-decoration:underline;font-size:14px;padding:0;background:transparent;border:none;cursor:pointer}
.proxy-meta-actions .link-danger{color:#d1435b}
.proxy-meta-status{font-size:14px;color:#5d6372}
.proxy-meta-status[hidden]{display:none}
.proxy-meta-status[data-mode="success"]{color:#2c9b67}
.proxy-meta-status[data-mode="error"]{color:#d1435b}
.proxy-meta-status[data-mode="info"]{color:#5263c6}
.proxy-meta-empty td{padding:28px 12px;color:#8a90a3;text-align:center}
@media (max-width: 1200px){
.proxy-meta-layout{grid-template-columns:1fr}
}
@media (max-width: 768px){
.admin-proxy-meta{padding:48px 0 72px}
.proxy-meta-form,.proxy-meta-table{padding:22px 20px}
.proxy-meta-table__toolbar{flex-direction:column;align-items:stretch}
.proxy-meta-table__toolbar .control{flex:1 1 auto;width:100%}
.proxy-meta-form__actions{flex-direction:column}
.proxy-meta-actions{flex-direction:column;align-items:flex-start}
}
/* =====================================================
MOBILE ADAPTIVE — общие исправления для <600px
===================================================== */
@media (max-width: 599px) {
/* ── Base font size ── */
html, body { font-size: 13px; }
/* ── Скрываем API пункт меню ── */
.lk-menu__item[href="/lk#api"] { display: none !important; }
/* ── LK иконка в шапке — всегда видима на мобильном ── */
.lk-icon { display: inline-flex !important; }
.lk-wrap { display: flex !important; align-items: center; gap: 8px; }
/* ── Container padding ── */
.container { padding-left: 12px; padding-right: 12px; }
/* ── Модальные окна — по центру, не выезжают за экран ── */
.modal-overlay {
align-items: center;
justify-content: center;
padding: 12px;
}
.modal {
width: min(96vw, 520px);
max-width: 96vw;
max-height: 88vh;
padding: 20px 16px;
border-radius: 20px;
margin: 0 auto;
}
.auth-modal {
width: min(90vw, 420px);
padding: 24px 20px 20px;
border-radius: 20px;
max-width: 100%;
}
.modal h3 { font-size: 20px; }
.modal-actions { flex-direction: column; gap: 10px; }
.modal-actions .btn { width: 100%; justify-content: center; }
/* ── ЛК: убираем горизонтальный overflow ── */
#lk-section, .lk-content, .lk-main, .lk-body, .lk-grid {
max-width: 100%;
overflow-x: hidden;
}
.lk-grid { flex-direction: column; gap: 16px; }
/* ── Форма покупки: qty, coupon, inputs — на всю ширину ── */
.qty-input { width: 100%; }
.coupon-input { width: 100%; }
.coupon-row { flex-direction: column; align-items: stretch; }
.coupon-row .btn { width: 100%; justify-content: center; }
/* ── Поля управления qty ── */
.qty-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: nowrap;
}
.qty-btn { width: 44px; height: 44px; flex: 0 0 44px; }
/* ── Pill-tabs: горизонтальный скролл ── */
.pill-tabs {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
padding-bottom: 4px;
}
.pill-tab { flex: 0 0 auto; font-size: 0.95rem; }
/* ── Таблицы — горизонтальный скролл ── */
.table-wrap, .admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { min-width: 480px; font-size: 0.82rem; }
.table th, .table td { padding: 8px 6px; }
/* ── Прокси-карточки ── */
.proxy-card, .proxy-row { flex-direction: column; gap: 8px; }
.proxy-addr { font-size: 0.85rem; word-break: break-all; }
/* ── История ── */
.history-item { padding: 12px; }
.history-item h3 { font-size: 1.1rem; }
/* ── LK CTA кнопка (купить) ── */
.lk-cta { width: 100%; justify-content: center; text-align: center; }
/* ── Блок итоговой суммы и покупки ── */
.price-block, .order-total { flex-direction: column; gap: 8px; }
.price-block .btn-primary { width: 100%; justify-content: center; }
/* ── Настройки ── */
.settings-grid { grid-template-columns: 1fr; }
.settings-save { width: 100%; justify-content: center; }
/* ── Форма (поля) ── */
.field { width: 100%; }
.control { width: 100%; box-sizing: border-box; }
.form-row { flex-direction: column; gap: 10px; }
.form-group { width: 100%; }
/* ── Rent-секция ── */
.rent-section, .rent { padding: 8px 0; }
/* ── Кнопки действий в виде колонки ── */
.bulk-buttons { flex-direction: column; }
.bulk-buttons .btn-ghost { width: 100%; }
.bulk { flex-direction: column; }
/* ── Main не обрезает контент ── */
main { overflow-x: hidden; }
/* ── Шапка раздела ── */
.lk-header h1 { font-size: 1.35rem; }
/* ── Подвал ── */
.footer__bottom { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.footer__links { justify-content: center; flex-wrap: wrap; gap: 8px; }
.footer__links a { margin-right: 0; font-size: 0.85rem; }
.footer__requisites { font-size: 0.78rem; }
.footer__top { flex-direction: column; gap: 16px; }
.footer__left, .footer__right { width: 100%; }
/* ── Тост-уведомления ── */
.toast {
left: 50%;
top: auto;
bottom: 24px;
transform: translateX(-50%) scale(.95);
width: calc(100vw - 32px);
max-width: 360px;
text-align: center;
}
.toast.show {
transform: translateX(-50%) scale(1);
}
}