/* MAI VPN 8.6 — visual layer. Zero changes to payments, bot or VPN transport. */
:root{
  --bg:#0b090d;--panel:#191319;--panel2:#24191f;--text:#faf6f8;
  --muted:#b0a3ae;--red:#ff3154;--red2:#ca153c;--line:rgba(255,255,255,.095);
  --dashboard-red:#ff3154;--premium-glow:rgba(255,46,84,.22);
  --ease-luxe:cubic-bezier(.16,1,.3,1);
}
html,body{background:#0b090d;color:var(--text);max-width:100%;overflow-x:hidden}
body{background:radial-gradient(ellipse 85% 32% at 91% -9%,rgba(123,15,46,.26),transparent 80%),linear-gradient(180deg,#100b10,#0b090d 55%)}
.app{isolation:isolate}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #ff617d;outline-offset:3px}
button:disabled{cursor:not-allowed;opacity:.55}
.topbar{width:100%;padding-inline:19px;display:flex;align-items:center;justify-content:space-between!important;gap:12px;border-bottom:1px solid rgba(255,255,255,.06)!important;box-shadow:0 12px 38px rgba(5,2,6,.21)}
.topbar .brand{min-width:0}
.topbar .brand b{font-size:21px;letter-spacing:-.055em}
.topbar .brand>div:last-child span{font-size:10px;letter-spacing:.015em}
.header-live{display:inline-flex;align-items:center;justify-content:flex-end;white-space:nowrap;gap:7px;font-size:9px;letter-spacing:.09em;font-weight:800;color:#cbbec6;min-width:0}
.signal-dot{width:7px;height:7px;border-radius:50%;background:#65eeb2;flex:none;box-shadow:0 0 0 3px rgba(101,238,178,.10),0 0 15px rgba(101,238,178,.35);animation:signal-breathe 2.9s ease-in-out infinite}
.dashboard-home{padding-top:24px!important}
.welcome-eyebrow{display:flex;align-items:center;gap:9px;color:#c89ba9;font-weight:800;letter-spacing:.22em;font-size:9px;padding:0 4px;animation:fade-rise .7s var(--ease-luxe) both}
.welcome-line{display:block;height:1px;width:20px;background:linear-gradient(90deg,#ff4568,transparent)}
.welcome-version{margin-left:auto;color:#6f626d;letter-spacing:.12em}
.welcome-head{position:relative;overflow:hidden;isolation:isolate;padding:15px 2px 15px;margin-bottom:2px;min-height:153px;animation:fade-rise .8s .06s var(--ease-luxe) both}
.welcome-head h1{position:relative;z-index:2;margin:3px 0 8px;font-size:clamp(39px,10vw,63px);line-height:1.015;letter-spacing:-.068em;font-weight:860}
.welcome-head h1 em{font-style:normal;color:#ff4565;background:linear-gradient(95deg,#ff486d,#f11d49 72%,#ff7893);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.welcome-head p{position:relative;z-index:2;color:#a89ba5;font-size:12px;margin:10px 0}
.welcome-orb{position:absolute;right:-35px;top:4px;width:206px;height:206px;border-radius:50%;z-index:1;background:radial-gradient(circle at 46% 48%,#ef31558c 0%,#ed23572d 21%,#6e15302a 43%,transparent 64%);filter:blur(3px);animation:orb-float 7s ease-in-out infinite alternate;pointer-events:none}
.welcome-orb::after{content:"";position:absolute;inset:45px;border:1px solid rgba(255,74,113,.22);border-radius:50%;box-shadow:0 0 0 35px rgba(255,48,80,.022),0 0 0 70px rgba(255,48,80,.017)}
.home-profile,.dashboard-home .dashboard-status,.home-plan,.home-server,.account-main,.copy-box,.admin-card{backdrop-filter:blur(14px) saturate(115%);-webkit-backdrop-filter:blur(14px) saturate(115%)}
.dashboard-home .surface,.glass-card{background:linear-gradient(147deg,rgba(36,27,36,.94),rgba(19,15,21,.98))!important;border:1px solid rgba(255,255,255,.095)!important;box-shadow:0 12px 33px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.025)}
.home-profile{min-height:76px!important;padding:12px 16px!important;border-radius:21px!important;position:relative;transition:border-color .25s ease,box-shadow .3s ease,transform .25s var(--ease-luxe)!important;animation:fade-rise .65s .12s var(--ease-luxe) both}
.home-profile:hover{border-color:rgba(255,66,105,.32)!important;box-shadow:0 13px 38px rgba(0,0,0,.27),0 0 18px rgba(255,49,84,.035)}
.home-profile-copy strong{font-size:13px;font-weight:680;color:#b1a5af}
.home-profile-copy small{font-size:16px;font-weight:800;color:#fff}
.home-chevron{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;font-size:23px;background:#352129;color:#ff5977}
.dashboard-home .dashboard-status{position:relative;overflow:hidden;padding:21px!important;border-radius:25px!important;margin-top:12px!important;background:linear-gradient(132deg,#371621 0%,#24141f 42%,#171219 100%)!important;border:1px solid rgba(255,92,122,.24)!important;box-shadow:0 20px 47px rgba(28,6,15,.4),inset 0 1px 0 rgba(255,255,255,.065)!important;animation:fade-rise .7s .20s var(--ease-luxe) both}
.dashboard-home .dashboard-status::before{content:"";position:absolute;right:-85px;top:-100px;width:265px;height:265px;border-radius:50%;background:radial-gradient(circle,rgba(255,58,98,.23),transparent 66%);pointer-events:none;animation:orb-float 9s ease-in-out infinite alternate}
.dashboard-status>.dash-status-head,.dashboard-status>.dash-progress,.dashboard-status>.dash-status-metrics,.dashboard-status>.dash-status-until,.dashboard-status>.dash-status-description{position:relative;z-index:1}
.dash-muted{color:#c5a3b2;letter-spacing:.025em}
.dashboard-status .dash-status-head h3{font-size:clamp(24px,6vw,32px)!important;margin-top:9px!important;letter-spacing:-.055em}
.dashboard-status button.dash-renew{background:#ff385e!important;border-radius:12px!important;box-shadow:0 10px 28px rgba(254,46,86,.28)!important;transition:transform .2s var(--ease-luxe),box-shadow .2s ease!important}
.dashboard-status button.dash-renew:active{transform:scale(.96)}
.dash-progress{height:8px!important;margin-top:21px!important;background:rgba(255,255,255,.095)!important}
.dash-progress>span{background:linear-gradient(90deg,#ff4061,#ff8d9f)!important;box-shadow:0 0 16px rgba(255,51,87,.28)}
.dash-status-metrics{margin-top:13px!important}
.dash-status-metrics b{font-size:13px}
.dashboard-tariff-block{margin-top:29px!important}
.home-section-head h2{font-size:21px;letter-spacing:-.045em}
.home-section-note{font-size:11px;color:#c3a3af}
.home-tariff-choices{gap:11px!important}
.dashboard-home .home-plan{min-height:77px!important;padding:14px 17px!important;border-radius:19px!important;position:relative;overflow:hidden;animation:fade-rise .55s both;animation-delay:calc(.25s + var(--item-index,0)*.055s);transition:transform .3s var(--ease-luxe),border-color .23s,background .3s,box-shadow .3s!important}
.dashboard-home .home-plan::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(180deg,#ff5a78,#d7133d);opacity:0;transition:opacity .3s}
.dashboard-home .home-plan.featured{border-color:rgba(255,78,111,.40)!important;background:linear-gradient(125deg,#341822,#1e141c 77%)!important;box-shadow:0 12px 34px rgba(35,4,14,.20)}
.dashboard-home .home-plan.featured::before,.dashboard-home .home-plan:hover::before{opacity:1}
.dashboard-home .home-plan:hover{transform:translateY(-2px)!important;border-color:rgba(255,70,110,.48)!important}
.home-plan-title{font-size:15px!important;letter-spacing:-.024em}
.home-plan-meta{margin-top:6px;font-size:11px!important;color:#a99ba5!important}
.home-plan-badge{font-size:9px;letter-spacing:.02em}
.home-plan-price b{font-size:18px;letter-spacing:-.05em}
.home-plan-arrow{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:10px;background:#37202b;font-size:22px!important}
.home-trial-btn{border-radius:17px!important;min-height:55px;background:linear-gradient(100deg,#3b1725,#281721)!important;border:1px solid #602638!important;box-shadow:0 8px 22px rgba(44,6,19,.18);transition:transform .28s var(--ease-luxe),box-shadow .28s}
.home-trial-btn:not(:disabled):hover{box-shadow:0 10px 32px rgba(255,36,73,.14);transform:translateY(-1px)}
.home-device-guides{gap:12px 16px}
.home-device-guides a{color:#d5b3bf;text-underline-offset:3px}
.home-servers{gap:10px!important}
.dashboard-home .home-server{min-height:76px;border-radius:18px!important;padding:14px 16px;transition:border-color .25s ease,transform .25s ease}
.server-flag{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.045);font-size:23px}
.server-description b{font-size:14px}
.server-detail{font-size:10px;line-height:1.35}
.page-head h1{font-weight:830;letter-spacing:-.06em}
.page-head>span{font-size:10px;font-weight:750;letter-spacing:.19em}
.title-spark{font-size:.55em;vertical-align:top;color:#fd4168;animation:sparkle 4s ease-in-out infinite}
/* Subscription page: height is content-driven so buttons cannot be clipped on phones. */
body[data-current-page="account"]{overflow-y:auto!important}
.page[data-page="account"].active{height:auto!important;min-height:calc(100dvh - 160px)!important;overflow:visible!important;padding-top:12px!important;padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))!important}
#accountView{flex:none!important;min-height:0!important;gap:14px!important}
.page[data-page="account"] .page-head{padding-top:10px;padding-bottom:18px}
.page[data-page="account"] .account-main{flex:none!important;min-height:0!important;padding:24px 19px!important;background:linear-gradient(145deg,#321723,#241620 55%,#18131b)!important;border-color:rgba(255,80,110,.24)!important;border-radius:25px!important;position:relative;overflow:hidden;animation:fade-rise .7s .06s var(--ease-luxe) both}
.account-main::after{content:"";position:absolute;right:-77px;top:-95px;width:235px;height:235px;background:radial-gradient(circle,rgba(255,49,86,.19),transparent 66%);pointer-events:none}
.account-tag{display:inline-flex;align-items:center;gap:9px;color:#ff9caf;font-size:10px;letter-spacing:.11em;font-weight:850;margin-bottom:18px}
.account-subtitle{color:#ad9da9;font-size:13px}
.page[data-page="account"] .account-main .big{font-size:clamp(43px,10vw,60px)!important;font-weight:850;letter-spacing:-.065em;margin-top:4px;margin-bottom:25px;line-height:1.08}
.account-traffic{position:relative;margin:15px 0 22px}
.account-traffic .row{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:#b9aab5}
.account-traffic .row strong{color:#fef9fc}
.account-traffic-track{height:7px;margin-top:10px;background:rgba(255,255,255,.1);border-radius:10px;overflow:hidden}
.account-traffic-track>span{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,#ff2957,#ff879e);transition:width .9s var(--ease-luxe)}
.account-traffic-hint{font-size:11px;color:#b09aa7;margin-top:9px}
.page[data-page="account"] .stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important;margin:17px 0 0!important}
.page[data-page="account"] .stat{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07);border-radius:14px;min-height:77px!important;padding:13px!important;min-width:0}
.page[data-page="account"] .stat b{font-size:17px;letter-spacing:-.03em;overflow-wrap:anywhere}
.page[data-page="account"] .stat span{font-size:11px;color:#a99da9}
.page[data-page="account"] .copy-box{flex:none!important;padding:18px!important;border-radius:22px!important;margin:0!important;animation:fade-rise .7s .18s var(--ease-luxe) both}
.sub-label{display:flex;gap:12px;align-items:center;margin-bottom:15px}
.sub-icon{flex:none;display:grid;place-items:center;width:41px;height:41px;border-radius:13px;background:#3a1c2b;color:#ff5677;font-size:23px}
.sub-label>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.sub-label b{font-size:13px;color:#fff}
.sub-label small{font-size:11px;color:#ae9faa;line-height:1.4}
.page[data-page="account"] .copy-box code.sub-url{display:block;white-space:normal;overflow-wrap:anywhere;word-break:break-all;border-radius:12px;border:1px solid rgba(255,255,255,.09);background:rgba(5,4,6,.40);padding:13px;color:#e7cbd6;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:11px;line-height:1.55;margin:0 0 13px}
.sub-actions{display:grid;grid-template-columns:minmax(0,1fr) 46px;gap:9px}
.page[data-page="account"] .sub-actions .btn{margin:0;min-width:0;border-radius:12px;min-height:45px;font-size:13px;display:flex;align-items:center;justify-content:center;gap:9px}
.sub-actions .btn.secondary{font-size:20px;color:#fff}
.sub-select{user-select:all;-webkit-user-select:all;word-break:break-all;color:#fff;background:#181119;border-radius:12px;padding:14px;line-height:1.8}
/* Admin client cards: predictable search/filter and reliable loading state. */
.admin-caption{font-size:12px;color:#a99da9;margin:8px 0 0}
.admin-client-tools{display:flex;flex-direction:column;gap:12px;margin-bottom:14px}
.admin-client-summary{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.admin-client-summary b{font-size:16px;letter-spacing:-.025em}
.admin-client-summary span{font-size:12px;color:#a99baa}
.admin-search{display:flex;align-items:center;gap:11px;min-height:49px;border-radius:15px;padding:0 15px;background:#201821;border:1px solid rgba(255,255,255,.11);transition:border-color .2s ease}
.admin-search:focus-within{border-color:rgba(255,62,101,.65)}
.admin-search span{font-size:24px;color:#bda8b3}
.admin-search input{min-width:0;width:100%;outline:none;border:0;background:transparent;color:#fff;font-size:13px}
.admin-search input::placeholder{color:#93828d}
.admin-refresh{height:39px;padding:9px 12px;font-size:12px;align-self:flex-end;width:auto}
.admin-loading{display:flex;align-items:center;gap:12px;justify-content:center;padding:32px 10px;color:#b9aab7;font-size:13px}
.spin{width:18px;height:18px;border:2px solid #4e2838;border-top-color:#ff496e;border-radius:50%;animation:spin .75s linear infinite}
.admin-card.client-card{background:linear-gradient(135deg,#211923,#18131a);padding:15px;border-radius:18px;margin-bottom:10px;border:1px solid rgba(255,255,255,.08);animation:fade-rise .5s both;animation-delay:calc(var(--item-index,0)*.035s)}
.client-card .row{align-items:center;gap:6px}
.client-name{display:flex;align-items:center;min-width:0;gap:10px}
.client-name b{min-width:0;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.client-mini-avatar{display:grid;place-items:center;flex:none;width:33px;height:33px;border-radius:10px;font-size:12px;color:#ff7291;background:#3b1a28;font-weight:700}
.client-card .pill{font-size:9px;letter-spacing:.02em;flex:none}
.client-card p{font-size:11px;margin:10px 0 0;color:#ad9fac}
.meta-dot{color:#5d4b58}
.client-card .actions{margin-top:12px}
.client-card .actions button{font-size:12px;color:#f3bdcd}
.admin-empty,.admin-error{border:1px dashed rgba(255,255,255,.15);border-radius:20px;text-align:center;padding:30px 17px;color:#b5a8b3;background:rgba(25,18,26,.75)}
.admin-empty>span{font-size:33px;color:#ff4268}.admin-empty h3{color:#fff;margin:7px 0 0}.admin-empty p{font-size:12px}
.admin-error b{color:#fff}.admin-error p{font-size:12px;overflow-wrap:anywhere}.admin-error button{border:0;color:#fff;background:#d72a4c;padding:10px 14px;border-radius:11px}
.empty-emblem{font-size:32px;color:#ff4268}.empty h3{font-size:20px}.empty p{font-size:13px;color:#aca0aa}
.gate{animation:fade-rise .65s var(--ease-luxe) both}
.menu-list a{border-radius:14px!important;transition:background .2s,transform .25s var(--ease-luxe)}
.menu-list a:active{transform:scale(.98)}
#content>.bottom-nav{background:rgba(14,10,15,.89)!important;border-top:1px solid rgba(255,255,255,.085)!important;backdrop-filter:blur(25px) saturate(130%);-webkit-backdrop-filter:blur(25px) saturate(130%);box-shadow:0 -15px 35px rgba(5,3,6,.38)!important}
.bottom-nav button.active{color:#ff5475!important}
.bottom-nav button::before{background:linear-gradient(90deg,#fd2555,#ff7690)!important}
.modal{z-index:60!important}
.sheet{background:linear-gradient(150deg,#2a1a24,#171017)!important;box-shadow:0 -20px 70px rgba(0,0,0,.55)!important}
@keyframes fade-rise{from{opacity:0;transform:translate3d(0,14px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes signal-breathe{0%,100%{box-shadow:0 0 0 3px rgba(101,238,178,.1),0 0 15px rgba(101,238,178,.28)}50%{box-shadow:0 0 0 6px rgba(101,238,178,.035),0 0 25px rgba(101,238,178,.4)}}
@keyframes sparkle{0%,100%{opacity:.6;transform:scale(.9)}50%{opacity:1;transform:scale(1.09)}}
@keyframes orb-float{to{transform:translate3d(-12px,12px,0) scale(1.08)}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:370px){
  .header-live{font-size:8px;letter-spacing:0}
  .topbar{padding-inline:12px}
  .dashboard-home{padding-inline:13px!important}
  .welcome-head h1{font-size:39px}
  .dashboard-home .dashboard-status{padding:17px!important}
  .dashboard-status .dash-status-head h3{font-size:22px!important}
  .home-plan-title{font-size:13px!important}
  .home-plan-price b{font-size:15px}
  .page[data-page="account"] .account-main{padding:19px 15px!important}
}
@media(min-width:600px){
  .dashboard-home{padding-inline:26px!important}
  .welcome-head{min-height:178px;padding-top:23px}
  .welcome-orb{right:25px;top:-3px;width:252px;height:252px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}