/* assets/style.css */
:root{
  --bg0:#06070a;
  --bg1:#0b0f16;
  --glass: rgba(20, 24, 34, 0.55);
  --stroke: rgba(255,255,255,0.10);
  --stroke2: rgba(255,255,255,0.18);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.62);
  --accent: rgba(120, 160, 255, 0.95);
  --shadow: 0 18px 60px rgba(0,0,0,0.55);
  --r: 18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    color: var(--text);
    overflow-x: hidden;
    background: black;
}
.noise{
  position:fixed; inset:0; pointer-events:none; opacity:.08;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.container{width:min(1120px, calc(100% - 36px)); margin:0 auto;}
.header{
  position:sticky; top:0; z-index:30;
  backdrop-filter: blur(14px);
  background: linear-gradient(180deg, rgba(8,10,15,.72), rgba(8,10,15,.38));
  border-bottom:1px solid var(--stroke);
}
.header__inner{display:flex; align-items:center; justify-content:space-between; gap:18px; padding:14px 0;}
.logo{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none;}
.logo__mark{width:28px; height:28px; border-radius:10px; background:linear-gradient(135deg, rgba(120,160,255,.95), rgba(140,210,255,.65)); box-shadow:0 10px 24px rgba(120,160,255,.18);}
.logo__text{font-weight:650; letter-spacing:.2px;}
.nav{
  display:flex; gap:14px; padding:10px 14px;
  border:1px solid var(--stroke); border-radius:999px; background: rgba(10,12,18,.30);
}
.nav__link{
  color:var(--muted); text-decoration:none; font-size:14px;
  padding:8px 10px; border-radius:999px;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.nav__link:hover{color:var(--text); background:rgba(255,255,255,.06); transform:translateY(-1px);}
.header__actions{display:flex; align-items:center; gap:12px;}
.btn{
  appearance:none; border:0; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:999px;
  font-weight:650; letter-spacing:.2px;
  color:var(--text); background:rgba(255,255,255,.08);
  border:1px solid var(--stroke);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn:hover{transform:translateY(-1px); border-color:var(--stroke2); background:rgba(255,255,255,.10);}
.btn--primary{
  background: linear-gradient(135deg, rgba(120,160,255,.95), rgba(140,210,255,.70));
  border-color: rgba(140,210,255,.35);
  box-shadow: 0 16px 40px rgba(120,160,255,.14);
  color: rgba(10,12,18,.92);
}
.btn--ghost{background: rgba(255,255,255,0.06);}
.main{padding:26px 0 40px;}
.card{
  background: var(--glass);
  border:1px solid var(--stroke);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.card:hover{transform:translateY(-2px); border-color:var(--stroke2); background: rgba(20,24,34,0.62);}
.card--hero{padding:18px;}
.hero__top{display:grid; grid-template-columns:1.4fr .6fr; gap:18px; align-items:start; margin-bottom:18px;}
.title{font-size: clamp(26px, 3.2vw, 40px); margin:0 0 8px 0;}
.subtitle{margin:0; color:var(--muted); max-width:64ch; line-height:1.5;}
.hero__cta{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;}
.hero__statgrid{display:grid; gap:10px;}
.stat{background: rgba(0,0,0,0.22); border:1px solid var(--stroke); border-radius:14px; padding:12px;}
.stat__value{font-weight:780; font-size:20px;}
.stat__label{color:var(--muted); font-size:13px; margin-top:2px;}
/* slider */
.slider{position:relative; border-radius:16px; border:1px solid var(--stroke); overflow:hidden; background:rgba(0,0,0,0.20);}
.slider__track{display:flex; width:100%; transform:translateX(0%); transition: transform .35s ease;}
.slide{min-width:100%; height:360px; position:relative;}
.slide__bg{position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.02); filter:saturate(1.05) contrast(1.05);}
.slide__bg--1{background-image: radial-gradient(900px 500px at 20% 10%, rgba(120,160,255,0.35), transparent 60%), linear-gradient(135deg, rgba(10,12,18,0.2), rgba(0,0,0,0.6));}
.slide__bg--2{background-image: radial-gradient(900px 500px at 80% 20%, rgba(140,210,255,0.28), transparent 60%), linear-gradient(135deg, rgba(0,0,0,0.4), rgba(10,12,18,0.2));}
.slide__bg--3{background-image: radial-gradient(900px 500px at 50% 20%, rgba(120,255,200,0.18), transparent 60%), linear-gradient(135deg, rgba(0,0,0,0.55), rgba(10,12,18,0.2));}
.slide__overlay{
  position:absolute; left:16px; right:16px; bottom:16px;
  background: rgba(8,10,15,0.58); backdrop-filter: blur(12px);
  border:1px solid var(--stroke); border-radius:14px;
  padding: 12px 14px;
}
.slide__title{font-weight:760;}
.slide__text{color:var(--muted); margin-top:3px; font-size:14px;}
.slider__btn{
  position:absolute; top:50%; transform: translateY(-50%);
  width:44px; height:44px; border-radius:999px;
  border:1px solid var(--stroke); background: rgba(10,12,18,0.45);
  color: var(--text); cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.slider__btn:hover{background: rgba(10,12,18,0.65); border-color:var(--stroke2); transform:translateY(-50%) scale(1.03);}
.slider__btn--prev{left:12px;} .slider__btn--next{right:12px;}
.slider__dots{
  position:absolute; left:50%; transform:translateX(-50%); bottom:12px;
  display:flex; gap:8px; padding:8px 10px; border-radius:999px;
  background: rgba(8,10,15,0.35); border:1px solid var(--stroke);
}
.dot{width:10px; height:10px; border-radius:999px; border:1px solid var(--stroke2); background: rgba(255,255,255,0.12); cursor:pointer; transition: transform .18s ease, background .18s ease;}
.dot.is-active{background: rgba(140,210,255,0.85); transform: scale(1.15);}
/* blocks */
.grid{margin-top:18px; display:grid; gap:16px;}
.card--split{display:grid; grid-template-columns: .9fr 1.1fr; min-height:260px;}
.split__img{min-height:260px;}
.imgph{width:100%; height:100%; background-size:cover; background-position:center; filter:saturate(1.05);}
.imgph--1{background-image: radial-gradient(900px 500px at 20% 10%, rgba(120,160,255,0.22), transparent 60%), linear-gradient(135deg, rgba(0,0,0,0.25), rgba(0,0,0,0.65));}
.imgph--2{background-image: radial-gradient(900px 500px at 80% 20%, rgba(140,210,255,0.18), transparent 60%), linear-gradient(135deg, rgba(0,0,0,0.65), rgba(0,0,0,0.25));}
.split__text{padding:18px;}
.h2{margin:0 0 10px 0; font-size:20px;}
.p{margin:0; color:var(--muted); line-height:1.55;}
.list{margin:12px 0 0; padding-left:18px; color:var(--muted);}
.list li{margin:7px 0;}
.pillrow{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px;}
.pill{font-size:12px; padding:7px 10px; border-radius:999px; border:1px solid var(--stroke); background: rgba(255,255,255,0.06); color: var(--muted);}
.section{margin-top:16px; padding:18px;}
/* footer */
.footer{margin-top:34px; border-top:1px solid var(--stroke); background: rgba(8,10,15,0.48); backdrop-filter: blur(14px);}
.footer__inner{padding:22px 0; display:grid; grid-template-columns: 1fr 1fr 1fr 1.2fr; gap:16px;}
.logo--footer .logo__mark{width:24px; height:24px; border-radius:9px;}
.footer__title{font-weight:720; margin-bottom:10px;}
.footer__link{display:block; color:var(--muted); text-decoration:none; margin:8px 0; transition: color .18s ease, transform .18s ease;}
.footer__link:hover{color:var(--text); transform: translateX(2px);}
.footer__bottom{border-top:1px solid var(--stroke); background: rgba(0,0,0,0.18);}
.footer__bottomInner{padding:12px 0;}
/* misc */
.small{font-size:12px;} .muted{color:var(--muted);}
.alert{margin-bottom:14px; background: rgba(255,190,90,0.10); border:1px solid rgba(255,190,90,0.25); border-radius: var(--r); padding:14px 16px;}
.alert__title{font-weight:780;} .alert__text{color:var(--muted); margin-top:4px;}
.userchip{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:999px; border:1px solid var(--stroke); background: rgba(255,255,255,0.06);}
.userchip__avatar{width:34px; height:34px; border-radius:999px; display:flex; align-items:center; justify-content:center; background: rgba(140,210,255,0.18); border:1px solid rgba(140,210,255,0.20); font-weight:850;}
.userchip__email{font-size:13px; font-weight:700;}
.userchip__sub{display:flex; gap:8px; align-items:center; font-size:12px; color:var(--muted);}
.userchip__logout{margin-left:6px; color:var(--muted); text-decoration:none; font-size:12px; padding:7px 10px; border-radius:999px; border:1px solid var(--stroke); background: rgba(0,0,0,0.18);}
.userchip__logout:hover{border-color:var(--stroke2); color:var(--text);}
.badge{font-size:11px; padding:4px 8px; border-radius:999px; border:1px solid var(--stroke); letter-spacing:.3px;}
.badge--active{background: rgba(90,220,160,0.14); border-color: rgba(90,220,160,0.30); color: rgba(170,255,220,0.95);}
.badge--free{background: rgba(255,255,255,0.06);}
.badge--expired{background: rgba(255,100,120,0.12); border-color: rgba(255,100,120,0.25); color: rgba(255,170,180,0.95);}
/* modal */
.modal{position:fixed; inset:0; display:none; z-index:50;}
.modal.is-open{display:block;}
.modal__backdrop{position:absolute; inset:0; background: rgba(0,0,0,0.55); backdrop-filter: blur(6px);}
.modal__panel{
  position:relative; width:min(480px, calc(100% - 22px));
  margin:7vh auto 0;
  background: rgba(12,14,20,0.72);
  border:1px solid var(--stroke2);
  border-radius: calc(var(--r) + 6px);
  box-shadow: var(--shadow);
  overflow:hidden;
  transform: translateY(10px);
  animation: pop .22s ease forwards;
}
@keyframes pop{to{transform:translateY(0px)}}
.modal__header{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--stroke);}
.modal__title{font-weight:780;}
.iconbtn{width:36px; height:36px; border-radius:12px; border:1px solid var(--stroke); background: rgba(255,255,255,0.06); color:var(--text); cursor:pointer;}
.iconbtn:hover{border-color:var(--stroke2);}
.tabs{display:flex; gap:8px; padding:12px 16px 0;}
.tab{flex:1; padding:10px 12px; border-radius:14px; border:1px solid var(--stroke); background: rgba(255,255,255,0.06); color:var(--muted); cursor:pointer;}
.tab.is-active{
  color: rgba(10,12,18,.92);
  background: linear-gradient(135deg, rgba(120,160,255,.90), rgba(140,210,255,.65));
  border-color: rgba(140,210,255,.35);
}
.tabpanels{padding:12px 16px 10px;}
.panel{display:none;} .panel.is-active{display:block;}
.form{display:grid; gap:12px; margin-top:6px;}
.field span{display:block; font-size:12px; color:var(--muted); margin-bottom:6px;}
.field input{width:100%; padding:12px; border-radius:14px; border:1px solid var(--stroke); background: rgba(0,0,0,0.22); color: var(--text); outline:none;}
.field input:focus{border-color: rgba(140,210,255,0.45);}
.w100{width:100%;}
.modal__footer{padding:10px 16px 14px; border-top:1px solid var(--stroke);}
/* responsive */
@media (max-width: 880px){
  .hero__top{grid-template-columns:1fr;}
  .nav{display:none;}
  .card--split{grid-template-columns:1fr;}
  .slide{height:300px;}
  .footer__inner{grid-template-columns:1fr 1fr;}
}
@media (max-width: 520px){
  .footer__inner{grid-template-columns:1fr;}
}


/* user dropdown */
.userchip--drop{
  position:relative;
  cursor:pointer;
  z-index: 60; /* выше шапки/карточек */
}
/* ВАЖНО: без зазора */
.userdrop{
  position:absolute;
  right:0;
  top:100%;                 /* было calc(100% + 8px) */
  margin-top:8px;           /* визуальный отступ */
  min-width:220px;
  padding:8px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(12, 14, 20, 0.88);
  backdrop-filter: blur(16px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
  display:none;
  z-index: 999;
}

/* “мостик” — перекрывает путь курсора */
.userdrop::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-10px;
  height:10px;
}
/* показываем меню при ховере на чип или на меню */
.userchip--drop:hover .userdrop,
.userdrop:hover{
  display:block;
}
.userdrop__item{
  display:flex;
  padding:10px 10px;
  border-radius:12px;
  text-decoration:none;
  color: rgba(255,255,255,0.86);
  font-weight:700;
  border:1px solid transparent;
  background: transparent;
}
.userdrop__item:hover{
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
}
.userdrop__sep{
  height:1px;
  background: rgba(255,255,255,0.10);
  margin:6px 2px;
}
.userdrop__danger{ color: rgba(255,180,190,0.95); }

/* password eye */
.passwrap{ position:relative; }
.passwrap input{ padding-right:44px; }
.eye{
  position:absolute; right:8px; top:50%;
  transform:translateY(-50%);
  width:34px; height:34px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  cursor:pointer;
}
.eye:hover{ border-color: rgba(255,255,255,0.18); }
form#resetForm .eye {
    color: white;
}


.header, .header__inner{
  overflow: visible;
}

/* footer */
.footer{
  margin-top: 18px;
  border-top:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.20);
}
.footer__inner{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap:12px;
  padding:18px 0;
}
.footer__title{
  font-weight:800;
  margin:4px 0 10px;
  color: rgba(255,255,255,0.88);
}
.footer__link{
  display:block;
  text-decoration:none;
  color: rgba(255,255,255,0.62);
  padding:6px 0;
}
.footer__link:hover{ color: rgba(255,255,255,0.88); }
.footer__mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

.footer__bottom{
  border-top:1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
}
.footer__bottomInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 0;
}

@media (max-width: 980px){
  .footer__inner{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .footer__inner{ grid-template-columns: 1fr; }
  .footer__bottomInner{ flex-direction: column; align-items:flex-start; }
}


/* custom select */
.field select{
  width:100%;
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;

  height:46px;
  padding:0 44px 0 14px;

  border-radius:14px;
  border:1px solid rgba(255,255,255,0.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)),
    rgba(12,14,20,0.85);

  color: rgba(255,255,255,0.92);
  font-weight:600;
  outline:none;

  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.field select:hover{
  border-color: rgba(255,255,255,0.20);
}

.field select:focus{
  border-color: rgba(120,160,255,0.65);
  box-shadow: 0 0 0 3px rgba(120,160,255,0.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03)),
    rgba(12,14,20,0.92);
}

/* стрелка */
.field{
  position:relative;
}
.field select{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.65) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.65) 50%, transparent 50%),
    linear-gradient(to right, rgba(255,255,255,0.12), rgba(255,255,255,0.12));
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%,
    calc(100% - 40px) 50%;
  background-size:
    5px 5px,
    5px 5px,
    1px 60%;
  background-repeat:no-repeat;
}

/* option */
.field select option{
  background:#0b0f16;
  color: rgba(255,255,255,0.92);
}