/* VPN Portal v29 — refreshed visual language. Kept separate for safe rollback. */
:root{--v29-bg:#080d19;--v29-surface:rgba(17,25,43,.86);--v29-surface-2:rgba(25,36,61,.78);--v29-line:rgba(166,184,255,.17);--v29-text:#f4f6ff;--v29-muted:#a5b2ce;--v29-blue:#6f86ff;--v29-violet:#a16bff;--v29-mint:#55dfc3;--v29-radius:24px}
html{background:var(--v29-bg)}
body{color:var(--v29-text);background:radial-gradient(ellipse at 12% -5%,rgba(89,111,255,.25),transparent 34%),radial-gradient(ellipse at 94% 13%,rgba(75,222,197,.13),transparent 30%),radial-gradient(ellipse at 50% 100%,rgba(131,75,255,.10),transparent 40%),linear-gradient(145deg,#080d19 0%,#0c1425 52%,#080d19 100%);background-attachment:fixed;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.018) 48%,transparent 70%);opacity:.8}
.top{width:min(1240px,calc(100% - 44px));max-width:1240px;margin:20px auto 12px;padding:13px 17px;border:1px solid var(--v29-line);border-radius:20px;background:rgba(12,19,34,.78);box-shadow:0 16px 48px rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.07);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:18px;letter-spacing:-.025em}.brand:before{content:"";width:9px;height:27px;border-radius:9px;background:linear-gradient(180deg,var(--v29-mint),var(--v29-blue),var(--v29-violet));box-shadow:0 0 18px rgba(111,134,255,.7)}
.top-links{gap:7px}.top-links a{min-height:40px;padding:8px 13px;border:1px solid transparent;border-radius:12px;background:rgba(255,255,255,.045);color:#dce4ff;font-size:12px;transition:all .2s ease}.top-links a:hover{border-color:rgba(139,158,255,.32);background:linear-gradient(120deg,rgba(111,134,255,.2),rgba(85,223,195,.08));transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.2)}
.wrap{width:min(1240px,calc(100% - 44px));max-width:1240px;margin:22px auto 56px;padding:0;min-width:0}
.hero,.panel{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--v29-line);border-radius:var(--v29-radius);background:linear-gradient(145deg,rgba(21,31,54,.94),rgba(13,21,37,.91));box-shadow:0 24px 70px rgba(0,0,0,.27),inset 0 1px rgba(255,255,255,.07);padding:clamp(22px,3vw,36px);margin-bottom:18px;min-width:0}
.hero:before,.panel:before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(175,190,255,.55),rgba(85,223,195,.38),transparent);opacity:.8;pointer-events:none}
.hero:after{content:"";position:absolute;width:330px;height:330px;right:-150px;top:-210px;border-radius:50%;background:radial-gradient(circle,rgba(111,134,255,.2),transparent 68%);pointer-events:none;z-index:-1}
.panel{transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease}.panel:hover{border-color:rgba(148,166,255,.27);box-shadow:0 27px 78px rgba(0,0,0,.31),0 0 36px rgba(111,134,255,.045),inset 0 1px rgba(255,255,255,.08)}
.home-hero{padding:clamp(28px,5vw,58px);background:radial-gradient(ellipse at 84% 20%,rgba(104,126,255,.21),transparent 36%),linear-gradient(125deg,rgba(34,47,84,.97),rgba(14,22,39,.96) 68%)}
.hero h1{font-size:clamp(36px,5.6vw,66px);line-height:1.02;letter-spacing:-.055em;max-width:850px}.hero h1 span{background:linear-gradient(100deg,#b8c5ff 0%,#8da4ff 42%,#75e5d0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
h1,h2,h3{letter-spacing:-.025em}h2{font-size:clamp(21px,2.5vw,27px)}.eyebrow{color:#9baeff;letter-spacing:.19em}.muted,.date{color:var(--v29-muted)}
input,textarea,select{border:1px solid rgba(157,176,255,.2);border-radius:13px;background:rgba(5,11,23,.72);color:#f4f6ff;box-shadow:inset 0 1px 3px rgba(0,0,0,.18);transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}input:hover,textarea:hover,select:hover{border-color:rgba(157,176,255,.36)}input:focus,textarea:focus,select:focus{border-color:#8298ff!important;box-shadow:0 0 0 4px rgba(111,134,255,.14),0 0 22px rgba(111,134,255,.08)!important;background:rgba(9,16,32,.96)}textarea{line-height:1.65}
button,.button-link{position:relative;overflow:hidden;border:1px solid rgba(185,197,255,.18);border-radius:13px;min-height:44px;padding:11px 16px;font-weight:800;letter-spacing:.005em;transition:transform .2s ease,box-shadow .2s ease,filter .2s ease,border-color .2s ease}button:before,.button-link:before{content:"";position:absolute;inset:0;transform:translateX(-130%);background:linear-gradient(110deg,transparent,rgba(255,255,255,.16),transparent);transition:transform .55s ease;pointer-events:none}button:hover:before,.button-link:hover:before{transform:translateX(130%)}button:hover,.button-link:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.25),0 0 22px rgba(111,134,255,.14);filter:brightness(1.08)}button:active,.button-link:active{transform:translateY(0)}.primary,.button-link.primary{background:linear-gradient(115deg,#526df0 0%,#785ee9 55%,#8b63dc 100%);border-color:rgba(190,195,255,.34);box-shadow:0 8px 25px rgba(87,99,230,.2)}.secondary,.mini,.button-link.secondary{background:linear-gradient(130deg,rgba(43,58,91,.95),rgba(26,39,64,.95));border-color:rgba(166,184,255,.16)}.danger{background:linear-gradient(120deg,#8e354c,#632c43);border-color:rgba(255,133,157,.25)}
.tag,.chips span{border:1px solid rgba(166,184,255,.2);background:linear-gradient(120deg,rgba(111,134,255,.12),rgba(85,223,195,.055));color:#d5defb;backdrop-filter:blur(8px)}
.notice{position:relative;margin:14px 0;padding:19px 20px;border:1px solid rgba(166,184,255,.15);border-radius:18px;background:linear-gradient(135deg,rgba(29,43,71,.72),rgba(15,24,42,.76));box-shadow:inset 0 1px rgba(255,255,255,.035);overflow:hidden}.notice:before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:4px;background:linear-gradient(180deg,var(--v29-blue),var(--v29-mint))}.announcement-title{overflow-wrap:anywhere}.announcement-body{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.75;max-width:none}.announcement-media{border-radius:15px;border:1px solid rgba(166,184,255,.18);box-shadow:0 12px 30px rgba(0,0,0,.22)}
.form-grid{gap:10px 18px}.form-grid>label{min-width:0}.section-head,.admin-head{gap:18px}.admin-head h1{font-size:clamp(28px,4vw,42px)}.admin-nav{border:1px solid var(--v29-line);border-radius:18px;background:rgba(10,17,31,.88);box-shadow:0 15px 42px rgba(0,0,0,.25);backdrop-filter:blur(16px)}.admin-nav a{border:1px solid rgba(166,184,255,.12);border-radius:12px;background:rgba(255,255,255,.045);color:#dce4ff}.admin-nav a.active{background:linear-gradient(120deg,#526df0,#795fe7);box-shadow:0 7px 22px rgba(87,99,230,.22)}
.table-wrap{border:1px solid rgba(166,184,255,.13);border-radius:15px;background:rgba(5,11,22,.28)}table{font-size:13px}th{color:#aebeff;background:rgba(111,134,255,.07);font-size:11px;letter-spacing:.04em;text-transform:uppercase}th,td{border-bottom:1px solid rgba(166,184,255,.11);padding:13px}tbody tr:hover{background:rgba(111,134,255,.045)}
.flash{border:1px solid rgba(85,223,195,.22);border-radius:14px;background:linear-gradient(120deg,rgba(20,91,78,.38),rgba(20,49,54,.5));color:#d8fff4}.flash.error{border-color:rgba(255,112,137,.28);background:linear-gradient(120deg,rgba(116,39,59,.5),rgba(58,26,44,.62));color:#ffe4eb}
.steps>div{border:1px solid rgba(166,184,255,.16);border-radius:17px;background:linear-gradient(145deg,rgba(35,48,79,.55),rgba(17,27,47,.65));box-shadow:inset 0 1px rgba(255,255,255,.04)}
.login{max-width:520px;margin:clamp(25px,6vw,70px) auto}.login h1{font-size:clamp(30px,5vw,44px)}
.promo-banner{position:relative;isolation:isolate;display:flex;align-items:center;gap:18px;width:min(1240px,calc(100% - 44px));margin:0 auto 16px;padding:17px 20px;border:1px solid rgba(155,174,255,.28);border-radius:20px;background:radial-gradient(ellipse at 5% 0%,rgba(85,223,195,.16),transparent 35%),linear-gradient(105deg,rgba(40,55,101,.96),rgba(32,39,80,.96) 56%,rgba(34,29,70,.96));box-shadow:0 17px 45px rgba(0,0,0,.24),0 0 28px rgba(111,134,255,.09),inset 0 1px rgba(255,255,255,.12);overflow:hidden;animation:v29-banner-in .45s ease both}.promo-banner:after{content:"";position:absolute;z-index:-1;inset:-80% auto -80% -30%;width:24%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:v29-shine 8s ease-in-out infinite}.promo-banner-mark{flex:0 0 48px;width:48px;height:48px;display:grid;place-items:center;border-radius:15px;background:linear-gradient(140deg,rgba(85,223,195,.2),rgba(111,134,255,.28));border:1px solid rgba(255,255,255,.17);font-size:25px;color:#d6fff6;box-shadow:0 0 22px rgba(85,223,195,.12)}.promo-banner-copy{min-width:0;flex:1}.promo-banner-kicker{font-size:9px;font-weight:900;letter-spacing:.18em;color:#a8c7ff}.promo-banner-copy h2{margin:3px 0 2px;font-size:18px}.promo-banner-copy p{margin:0;color:#d0d9f4;font-size:13px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}.promo-banner-cta{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:44px;padding:10px 17px;border:1px solid rgba(255,255,255,.26);border-radius:13px;background:linear-gradient(115deg,#627cff,#8c63e5);color:#fff;text-decoration:none;font-size:13px;font-weight:850;box-shadow:0 8px 23px rgba(0,0,0,.2);transition:transform .2s ease,box-shadow .2s ease}.promo-banner-cta:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.3);color:#fff}.promo-admin-card{padding:20px;border:1px solid rgba(145,165,255,.22);border-radius:18px;background:linear-gradient(140deg,rgba(35,48,82,.55),rgba(15,24,43,.75));box-shadow:inset 0 1px rgba(255,255,255,.05)}.promo-admin-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.promo-admin-heading h3{margin:0 0 5px}.promo-admin-heading p{margin:0 0 14px}.promo-admin-icon{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:14px;background:linear-gradient(140deg,rgba(85,223,195,.2),rgba(111,134,255,.25));font-size:22px}.toggle-line{display:flex;align-items:center;gap:10px;margin:12px 0 18px;padding:12px 14px;border:1px solid rgba(85,223,195,.2);border-radius:12px;background:rgba(85,223,195,.055);color:#e4fff8;font-size:13px}.toggle-line input{width:19px;height:19px;min-height:19px;margin:0;accent-color:#70dfc4}.promo-banner-preview{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;padding:14px;border-radius:14px;background:linear-gradient(110deg,#283765,#29234f);border:1px solid rgba(255,255,255,.14)}.promo-banner-preview b{font-size:14px}.promo-banner-preview span{font-size:12px;color:#d2dcf6}.promo-banner-preview .promo-banner-cta-preview{margin-left:auto;padding:8px 12px;border-radius:10px;background:#6c6ce5;color:white;font-weight:800}
@keyframes v29-banner-in{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}@keyframes v29-shine{0%,55%{left:-35%}75%,100%{left:125%}}
@media(max-width:760px){.top,.wrap,.promo-banner{width:calc(100% - 28px)}.top{margin-top:12px;padding:12px 14px}.wrap{margin-top:14px}.promo-banner{align-items:flex-start;flex-wrap:wrap;padding:15px;gap:12px}.promo-banner-mark{width:40px;height:40px;flex-basis:40px}.promo-banner-copy{flex:1 1 calc(100% - 54px)}.promo-banner-cta{width:100%}.admin-nav{display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity}.admin-nav a{flex:0 0 auto;scroll-snap-align:start}.section-head,.admin-head{align-items:flex-start}.section-head>*{min-width:0}.table-wrap table{min-width:680px}}
@media(max-width:480px){.top,.wrap,.promo-banner{width:calc(100% - 20px)}.brand{font-size:15px}.top-links{overflow-x:auto}.top-links a{flex:0 0 auto}.hero,.panel{padding:17px!important;border-radius:18px!important}.hero h1{font-size:clamp(31px,10vw,42px)}.promo-banner{border-radius:16px}.promo-banner-copy h2{font-size:16px}.promo-banner-copy p{font-size:12px}.promo-banner-cta{min-height:46px}.form-grid{grid-template-columns:minmax(0,1fr)}.form-grid .wide{grid-column:1}.promo-admin-card{padding:14px}.promo-banner-preview .promo-banner-cta-preview{margin-left:0}}
@media(prefers-reduced-motion:reduce){.promo-banner,.promo-banner:after{animation:none!important}*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}


/* v30 contrast + banner scope + home hero cleanup */
:root {
  color-scheme: dark;
  --v29-text: #f4f7ff;
  --v29-muted: #c0cbe0;
  --v29-line: rgba(166,184,255,.2);
}
html, body { color: #f4f7ff; }
body {
  background-color: #080d19 !important;
  background-image:
    radial-gradient(ellipse at 12% -5%, rgba(89,111,255,.22), transparent 34%),
    radial-gradient(ellipse at 94% 13%, rgba(75,222,197,.12), transparent 30%),
    radial-gradient(ellipse at 50% 100%, rgba(131,75,255,.09), transparent 40%),
    linear-gradient(145deg,#080d19 0%,#0c1425 52%,#080d19 100%) !important;
  background-attachment: fixed;
}
/* Avoid negative-z fixed overlays that can render as dark bands in some browsers. */
body::before { content: none !important; display: none !important; }
/* One consistent dark surface keeps text contrast predictable on every page. */
.hero, .panel, .login, .payment-panel, .support-card {
  color: #f4f7ff !important;
  background: linear-gradient(145deg, rgba(23,34,58,.97), rgba(12,20,36,.97)) !important;
  border-color: rgba(157,178,235,.22) !important;
}
.hero h1, .hero h2, .hero h3,
.panel h1, .panel h2, .panel h3,
.login h1, .login h2, .login h3,
.payment-panel h1, .payment-panel h2, .payment-panel h3,
.support-card h1, .support-card h2, .support-card h3 {
  color: #f7f9ff !important;
}
.hero p, .panel p, .login p, .payment-panel p, .support-card p,
.hero .muted, .panel .muted, .login .muted,
.payment-panel .muted, .support-card .muted {
  color: #c0cbe0 !important;
}
.eyebrow { color: #aebeff !important; }
.muted, .date, small, .help-text, .hint { color: #b8c5dc !important; }
label, .check, .toggle-line { color: #e0e8fa !important; }
input, textarea, select {
  color: #f7f9ff !important;
  background: #0a1222 !important;
  border-color: rgba(164,183,239,.28) !important;
}
input::placeholder, textarea::placeholder { color: #8998b5 !important; opacity: 1; }
select option { color: #f7f9ff; background: #101a2d; }
a { color: #aebeff; }
a:hover { color: #d7e2ff; }
.top-links a, .admin-global-links a {
  color: #e8edff !important;
  background: linear-gradient(135deg, rgba(36,51,82,.96), rgba(22,34,58,.96)) !important;
  border-color: rgba(164,183,239,.2) !important;
}
.admin-nav {
  background: rgba(10,17,31,.94) !important;
  border-color: rgba(157,178,235,.2) !important;
}
.admin-nav a {
  color: #e8edff !important;
  background: rgba(255,255,255,.065) !important;
}
.admin-nav a.active {
  color: #fff !important;
  background: linear-gradient(120deg,#526df0,#795fe7) !important;
}
.notice {
  color: #f1f5ff !important;
  background: linear-gradient(145deg,rgba(27,41,68,.94),rgba(15,25,44,.97)) !important;
  border-color: rgba(157,178,235,.2) !important;
}
.notice .announcement-title, .notice h3 { color: #f5f7ff !important; }
.notice .announcement-body, .notice p { color: #d1dbed !important; }
.notice .date { color: #aebbd2 !important; }
.steps > div {
  color: #eef3ff !important;
  background: linear-gradient(145deg,rgba(30,45,73,.9),rgba(15,25,43,.96)) !important;
  border-color: rgba(157,178,235,.2) !important;
}
.steps > div b { color: #f5f7ff !important; }
.steps > div p { color: #c0cbe0 !important; }
.tag, .chips span {
  color: #e0e8ff !important;
  background: rgba(92,112,177,.16) !important;
  border-color: rgba(164,183,239,.22) !important;
}
th { color: #c4d0eb !important; background: rgba(111,134,255,.12) !important; }
td { color: #e7edfa !important; }
td a { color: #b8c8ff !important; }
.stat { color: #f2f5ff !important; background: rgba(255,255,255,.07) !important; }
.stat span { color: #c0cbe0 !important; }
.empty h3 { color: #f5f7ff !important; }
.empty p { color: #c0cbe0 !important; }
.flash { color: #e5fff7 !important; }
.flash.error { color: #ffe7ed !important; }
.promo-banner { color: #f7f9ff !important; }
.promo-banner-copy h2 { color: #fff !important; }
.promo-banner-copy p { color: #e0e7f8 !important; }
.promo-banner-kicker { color: #b8d2ff !important; }
.promo-banner-cta { color: #fff !important; }
.promo-admin-card { color: #f2f5ff !important; }
.promo-admin-card h3 { color: #fff !important; }
.promo-admin-card p { color: #c0cbe0 !important; }
/* Home hero had a moving diagonal sheen that looked like a dark horizontal stripe on some screens. */
.home-hero {
  background:
    radial-gradient(ellipse at 86% 8%,rgba(103,126,255,.22),transparent 38%),
    linear-gradient(135deg,rgba(29,44,76,.98),rgba(12,21,38,.98)) !important;
  color: #f5f7ff !important;
}
.home-hero h1, .home-hero h1 span { color: #f5f7ff !important; }
.home-hero h1 span {
  background: linear-gradient(100deg,#c5d0ff,#91a8ff 48%,#7be6d2);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.home-hero p { color: #d1dbed !important; }
.home-hero::after { content: none !important; display: none !important; }
.home-hero::before { opacity: .35 !important; }
/* In the standalone 3x-ui cabinet keep its original dark hero instead of the light generic variant. */
.page .hero {
  color: #f5f7ff !important;
  background: linear-gradient(135deg,rgba(36,45,80,.98),rgba(17,23,38,.99)) !important;
  border-color: rgba(157,178,235,.2) !important;
}
.page .hero h1, .page .hero h2, .page .hero h3 { color: #f7f9ff !important; }
.page .hero p { color: #c4cee2 !important; }
.page .section-card, .page .info-card, .page .card {
  color: #edf2ff;
}
.page .section-card h1, .page .section-card h2, .page .section-card h3,
.page .info-card h1, .page .info-card h2, .page .info-card h3,
.page .card h1, .page .card h2, .page .card h3 { color: #f5f7ff; }
.page .section-card p, .page .info-card p, .page .card p { color: #c0cbe0; }
.page .brand-subtitle { color: #aab7ce !important; }
footer { color: #9eacc5 !important; }
button:disabled { color: #aab5c9 !important; opacity: .58; }
::selection { color: #fff; background: rgba(102,126,234,.55); }
@media (max-width: 760px) {
  .home-hero { padding: clamp(20px,5vw,28px) !important; }
  .top-links a { color: #edf2ff !important; }
}


/* v31: balanced light surfaces and consistent readable text across all pages */
:root {
  color-scheme: light;
  --v31-ink: #17243b;
  --v31-muted: #52627a;
  --v31-line: rgba(91,116,158,.20);
  --v31-surface: #ffffff;
}
html, body {
  color: var(--v31-ink) !important;
}
body {
  background-color: #edf3fb !important;
  background-image:
    radial-gradient(ellipse at 8% 0%, rgba(116,158,255,.18), transparent 34%),
    radial-gradient(ellipse at 94% 12%, rgba(91,218,196,.13), transparent 30%),
    linear-gradient(145deg,#f5f8fd 0%,#eaf1fa 54%,#f6f8fc 100%) !important;
  background-attachment: fixed;
}
/* Main content cards: light surfaces, dark readable typography. */
.hero, .panel, .login, .payment-panel, .support-card,
.page .section-card, .page .info-card, .page .card,
.promo-admin-card, .admin-card, .settings-card, .content-card {
  color: var(--v31-ink) !important;
  background: linear-gradient(145deg,rgba(255,255,255,.98),rgba(243,247,253,.98)) !important;
  border-color: rgba(104,129,169,.22) !important;
  box-shadow: 0 12px 32px rgba(42,65,103,.075) !important;
}
.hero h1, .hero h2, .hero h3, .panel h1, .panel h2, .panel h3,
.login h1, .login h2, .login h3,
.payment-panel h1, .payment-panel h2, .payment-panel h3,
.support-card h1, .support-card h2, .support-card h3,
.page .section-card h1, .page .section-card h2, .page .section-card h3,
.page .info-card h1, .page .info-card h2, .page .info-card h3,
.page .card h1, .page .card h2, .page .card h3,
.promo-admin-card h3 {
  color: #17243b !important;
}
.hero p, .panel p, .login p, .payment-panel p, .support-card p,
.page .section-card p, .page .info-card p, .page .card p,
.promo-admin-card p, .muted, .date, small, .help-text, .hint,
.brand-subtitle {
  color: #52627a !important;
}
label, .check, .toggle-line { color: #34445e !important; }
/* Inputs are light with dark text, including placeholders and dropdown options. */
input, textarea, select {
  color: #17243b !important;
  background: #fff !important;
  border: 1px solid rgba(104,129,169,.34) !important;
  box-shadow: inset 0 1px 2px rgba(25,45,75,.035);
}
input::placeholder, textarea::placeholder { color: #8290a5 !important; opacity: 1; }
select option { color: #17243b !important; background: #fff !important; }
/* Navigation and secondary controls use a light blue treatment. */
.top, .top-links a, .admin-global-links a, .admin-nav {
  color: #20314d !important;
  background: rgba(255,255,255,.88) !important;
  border-color: rgba(104,129,169,.22) !important;
  box-shadow: 0 8px 24px rgba(42,65,103,.055);
}
.top-links a, .admin-global-links a, .admin-nav a {
  color: #304563 !important;
  background: linear-gradient(135deg,#f8fbff,#eaf1fb) !important;
  border-color: rgba(104,129,169,.2) !important;
}
.admin-nav a.active {
  color: #fff !important;
  background: linear-gradient(120deg,#526df0,#795fe7) !important;
}
a { color: #385fbd; }
a:hover { color: #24458f; }
/* Light informational panels and tables. */
.notice, .steps > div, .stat, .tag, .chips span, .empty {
  color: #263752 !important;
  background: linear-gradient(145deg,#fff,#f0f5fc) !important;
  border-color: rgba(104,129,169,.2) !important;
}
.notice .announcement-title, .notice h3, .steps > div b,
.empty h3 { color: #17243b !important; }
.notice .announcement-body, .notice p, .steps > div p,
.empty p, .stat span { color: #52627a !important; }
.notice .date { color: #718099 !important; }
th { color: #304563 !important; background: #e8eff9 !important; }
td { color: #34445e !important; }
td a { color: #385fbd !important; }
.stat { box-shadow: 0 6px 18px rgba(42,65,103,.045); }
.eyebrow { color: #526da9 !important; }
footer { color: #66758c !important; }
/* Home hero and 3x-ui cabinet hero also move to a bright, calm palette. */
.home-hero, .page .hero {
  color: #17243b !important;
  background:
    radial-gradient(ellipse at 86% 8%,rgba(116,158,255,.22),transparent 38%),
    linear-gradient(135deg,#ffffff 0%,#eaf1fc 100%) !important;
  border-color: rgba(104,129,169,.22) !important;
}
.home-hero h1, .home-hero h1 span,
.page .hero h1, .page .hero h2, .page .hero h3 {
  color: #17243b !important;
}
.home-hero h1 span {
  background: linear-gradient(100deg,#526fd0,#5369bd 48%,#218d83) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.home-hero p, .page .hero p { color: #52627a !important; }
.page .brand-subtitle { color: #66758c !important; }
/* Preserve deliberate high-contrast promotional banner and status messages. */
.promo-banner {
  color: #fff !important;
  background: linear-gradient(110deg,#263d78,#453477) !important;
}
.promo-banner-copy h2, .promo-banner-cta { color: #fff !important; }
.promo-banner-copy p { color: #e8edff !important; }
.promo-banner-kicker { color: #c8d8ff !important; }
.flash { color: #17634f !important; }
.flash.error { color: #a52e49 !important; }
button:disabled { color: #718099 !important; }
::selection { color: #17243b; background: rgba(120,157,255,.35); }
@media (max-width:760px) {
  .top, .wrap { color: #17243b !important; }
  .top-links a { color: #304563 !important; }
}


/* v32: remove animated overlays that can appear as horizontal/diagonal bands */
html, body {
  background-attachment: scroll !important;
  background-repeat: no-repeat !important;
}
body::before, body::after,
.home-hero::before, .home-hero::after,
.hero::before, .hero::after,
.panel::before, .panel::after,
.payment-panel::before, .payment-panel::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
/* Do not let old decorative layers create stacking or paint artifacts. */
body {
  isolation: auto !important;
  position: relative !important;
  overflow-x: hidden !important;
}
.hero, .panel, .login, .payment-panel, .support-card,
.page .section-card, .page .info-card, .page .card,
.promo-admin-card, .admin-card, .settings-card, .content-card {
  overflow: hidden;
  isolation: isolate;
}
/* Consistent type hierarchy and contrast across home, account, support and admin. */
body, button, input, textarea, select, table {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
}
body { color: #24334d !important; }
h1, h2, h3, h4, h5, h6,
.hero h1, .hero h2, .hero h3,
.panel h1, .panel h2, .panel h3 {
  color: #1b2b45 !important;
  text-wrap: balance;
}
p, li, dd, dt, .description, .subtitle {
  color: #465873;
}
label, legend { color: #2f405b !important; }
.muted, small, .hint, .help-text, .date, .brand-subtitle {
  color: #65758e !important;
}
a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
/* Soft neutral surfaces keep the site light without flattening every section. */
.wrap { color: #24334d !important; }
.panel, .login, .payment-panel, .support-card,
.page .section-card, .page .info-card, .page .card {
  background: #fff !important;
  color: #24334d !important;
  border: 1px solid #dce5f1 !important;
  box-shadow: 0 10px 28px rgba(34,55,91,.07) !important;
}
.hero, .home-hero, .page .hero {
  background: linear-gradient(135deg,#f5f8ff 0%,#edf3ff 58%,#eef9f6 100%) !important;
  color: #1b2b45 !important;
  border: 1px solid #dce6f4 !important;
  box-shadow: 0 14px 34px rgba(49,76,126,.09) !important;
}
.home-hero h1, .home-hero h1 span {
  color: #20375f !important;
}
.home-hero h1 span {
  background: linear-gradient(100deg,#4967c8,#6958bd 52%,#238b7c) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.hero p, .home-hero p, .page .hero p { color: #52637d !important; }
input, textarea, select {
  color: #1e2e48 !important;
  background-color: #fff !important;
  border-color: #cbd7e8 !important;
}
input:focus, textarea:focus, select:focus {
  outline: 3px solid rgba(82,112,220,.16) !important;
  border-color: #7189dc !important;
}
input::placeholder, textarea::placeholder { color: #8997aa !important; }
button, .button-link {
  box-shadow: 0 5px 14px rgba(48,75,137,.12);
}
button.secondary, .button-link.secondary,
button:not(.primary):not(.danger):not(.success) {
  color: #304563;
}
.table-wrap, .table-container { background: #fff; }
table { color: #34445e !important; }
th { color: #304563 !important; background: #eaf0f8 !important; }
td { color: #354760 !important; }
tr:nth-child(even) td { background-color: rgba(239,244,251,.48); }
.notice, .steps > div, .stat, .empty {
  border: 1px solid #dce5f1 !important;
  box-shadow: 0 6px 18px rgba(34,55,91,.045);
}
.admin-nav { background: #fff !important; }
.admin-nav a { color: #344966 !important; }
.admin-nav a.active { color: #fff !important; }
.flash { background: #e8f7f1 !important; color: #17634f !important; }
.flash.error { background: #fff0f2 !important; color: #a52e49 !important; }
/* Banner intentionally remains the single saturated dark accent surface. */
.promo-banner {
  background: linear-gradient(110deg,#263d78,#453477) !important;
  color: #fff !important;
}
.promo-banner-copy h2, .promo-banner-cta { color: #fff !important; }
.promo-banner-copy p { color: #e8edff !important; }
@media (max-width: 760px) {
  html, body { background-attachment: scroll !important; }
  .hero, .panel, .login, .payment-panel, .support-card { overflow: visible; }
}


/* v33 — WhatsApp-inspired visual system: warm canvas, clean white panels, fresh green accents */
:root {
  color-scheme: light;
  --wa-green: #087e68;
  --wa-green-deep: #075e54;
  --wa-green-soft: #dff5ec;
  --wa-canvas: #efeae2;
  --wa-paper: #ffffff;
  --wa-ink: #263238;
  --wa-muted: #667781;
  --wa-border: #dce3e5;
}
html, body {
  min-height: 100%;
  color: var(--wa-ink) !important;
  background: var(--wa-canvas) !important;
  background-image: linear-gradient(180deg,#f6f3ed 0%,#ece7df 100%) !important;
  background-attachment: scroll !important;
  background-repeat: no-repeat !important;
}
/* Disable every decorative pseudo-layer: no sheen, stripes, moving overlays or fixed backgrounds. */
body::before, body::after,
.hero::before, .hero::after, .home-hero::before, .home-hero::after,
.panel::before, .panel::after, .payment-panel::before, .payment-panel::after,
.support-card::before, .support-card::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  transform: none !important;
  background: none !important;
  box-shadow: none !important;
  opacity: 0 !important;
}
body {
  position: relative !important;
  isolation: auto !important;
  overflow-x: hidden !important;
}
/* Header: clean app bar with WhatsApp-like green identity, without copying its logo. */
.top {
  width: min(calc(100% - 2 * var(--frame-gutter, 18px)), 1180px) !important;
  margin: 16px auto 18px !important;
  padding: 13px 18px !important;
  min-height: 64px !important;
  border: 1px solid #d7e0dd !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 4px 16px rgba(35,55,50,.07) !important;
}
.brand {
  color: var(--wa-green-deep) !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
}
.top-links a, .admin-global-links a {
  color: #3b4b50 !important;
  background: #f4f7f6 !important;
  border: 1px solid #e0e8e5 !important;
  box-shadow: none !important;
  border-radius: 10px !important;
}
.top-links a:hover, .admin-global-links a:hover {
  color: var(--wa-green-deep) !important;
  background: #e8f5ef !important;
}
.wrap {
  width: min(calc(100% - 2 * var(--frame-gutter, 18px)), 1180px) !important;
  margin: 0 auto 48px !important;
}
/* Cards and content panels. */
.hero, .home-hero, .panel, .login, .payment-panel, .support-card,
.page .hero, .page .section-card, .page .info-card, .page .card,
.promo-admin-card, .request-card, .support-ticket-card {
  color: var(--wa-ink) !important;
  background: var(--wa-paper) !important;
  border: 1px solid var(--wa-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 5px 18px rgba(35,55,50,.055) !important;
}
.hero, .home-hero, .page .hero {
  background: linear-gradient(135deg,#ffffff 0%,#f5faf7 100%) !important;
  border-left: 4px solid var(--wa-green) !important;
}
h1,h2,h3,h4,h5,h6,
.hero h1,.hero h2,.hero h3,
.panel h1,.panel h2,.panel h3,
.login h1,.payment-panel h1,.payment-panel h2,
.page .hero h1,.page .hero h2,.page .hero h3 {
  color: #203239 !important;
}
p, li, dd, dt, .description, .subtitle,
.hero p,.panel p,.login p,.payment-panel p,.support-card p,
.page .hero p,.page .section-card p,.page .info-card p,.page .card p {
  color: #52636a !important;
}
.eyebrow { color: var(--wa-green) !important; letter-spacing: .09em !important; }
.muted, small, .hint, .help-text, .date, .brand-subtitle,
footer { color: var(--wa-muted) !important; }
label, legend, .check { color: #35464c !important; }
/* Inputs, selectors and message composer. */
input, textarea, select,
.payment-field input,.payment-field select,.payment-field textarea {
  color: #263238 !important;
  background: #fff !important;
  border: 1px solid #cbd6d7 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
input::placeholder, textarea::placeholder { color: #89979b !important; opacity: 1 !important; }
input:focus, textarea:focus, select:focus {
  outline: 3px solid rgba(8,126,104,.13) !important;
  border-color: #55a997 !important;
}
select option { color: #263238 !important; background: #fff !important; }
/* Green action hierarchy. */
button.primary, .button-link.primary, .primary,
.payment-submit {
  color: #fff !important;
  background: linear-gradient(135deg,#0b8f75,#087e68) !important;
  border-color: transparent !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 11px rgba(8,126,104,.17) !important;
}
button.primary:hover, .button-link.primary:hover, .primary:hover {
  background: linear-gradient(135deg,#087e68,#066354) !important;
}
button.secondary, .button-link.secondary,
button:not(.primary):not(.danger):not(.success) {
  color: #3c5055 !important;
  background: #f2f6f5 !important;
  border-color: #dce5e2 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
button.danger, .danger { color:#fff !important; }
/* Tabs and navigation. */
.admin-nav {
  background: #fff !important;
  border: 1px solid #dce5e2 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 14px rgba(35,55,50,.05) !important;
}
.admin-nav a {
  color: #52636a !important;
  background: #f4f7f6 !important;
  border: 1px solid transparent !important;
  border-radius: 9px !important;
}
.admin-nav a.active {
  color: #fff !important;
  background: var(--wa-green) !important;
}
.tag, .chips span, .stat {
  color: #31534b !important;
  background: #eaf5f0 !important;
  border: 1px solid #d6ebe2 !important;
}
.notice, .steps > div, .empty {
  color: var(--wa-ink) !important;
  background: #fbfdfc !important;
  border: 1px solid #e1e9e6 !important;
  border-radius: 13px !important;
  box-shadow: none !important;
}
.notice h3, .notice .announcement-title, .steps > div b, .empty h3 {
  color: #263c3b !important;
}
.notice p, .steps > div p, .empty p, .notice .announcement-body {
  color: #596b6d !important;
}
th { color:#3e5556 !important; background:#edf4f1 !important; }
td { color:#35484d !important; }
td a, a { color:#087e68; }
a:hover { color:#075e54; }
.flash { color:#17634f !important; background:#e5f5ed !important; }
.flash.error { color:#a52e49 !important; background:#fff0f2 !important; }
/* Support conversations use familiar alternating message bubbles. */
.support-conversation-panel {
  background: #f7f5ef !important;
}
.support-thread, .support-admin-thread {
  background: #eee9e1 !important;
  border: 1px solid #e0dcd3 !important;
  border-radius: 13px !important;
  padding: 14px !important;
}
.support-chat-message, .support-admin-message {
  max-width: 82%;
  margin: 10px 0 !important;
}
.support-chat-message.from-client, .support-admin-message.from-client {
  margin-left: auto !important;
}
.support-chat-message.from-admin, .support-admin-message.from-admin {
  margin-right: auto !important;
}
.support-chat-bubble {
  color: #263238 !important;
  background: #fff !important;
  border: 1px solid #e4e8e5 !important;
  border-radius: 4px 13px 13px 13px !important;
  box-shadow: 0 1px 2px rgba(30,50,45,.06) !important;
  padding: 10px 13px !important;
  line-height: 1.5 !important;
  overflow-wrap: anywhere;
}
.from-client .support-chat-bubble {
  background: #dff5e8 !important;
  border-color: #ccebd9 !important;
  border-radius: 13px 4px 13px 13px !important;
}
.support-chat-meta, .support-chat-meta b, .support-chat-meta time {
  color: #718087 !important;
  font-size: 11px !important;
}
.support-compose {
  background: #fff !important;
  border: 1px solid #e0e8e4 !important;
  border-radius: 13px !important;
  padding: 14px !important;
}
.support-ticket-status.is-open { color:#087e68 !important; background:#e2f4eb !important; }
.support-ticket-status.is-closed { color:#667781 !important; background:#edf1f2 !important; }
/* Payment section contains legacy inline styles; force the new accessible palette. */
.payment-panel, .payment-panel * { --payment-ink:#263238; }
.payment-panel { background:#fff !important; color:#263238 !important; }
.payment-panel p, .payment-panel .payment-details { color:#52636a !important; }
.payment-panel .payment-method {
  color:#34464b !important;
  background:#f7faf8 !important;
  border:1px solid #dce7e2 !important;
}
.payment-panel .payment-method label,
.payment-panel .payment-field,
.payment-panel .payment-order-status { color:#35464c !important; }
.payment-panel .payment-muted,
.payment-panel .payment-qr-preview .media-preview-hint { color:#667781 !important; }
.payment-panel .payment-history { border-color:#dce5e2 !important; scrollbar-color:#a9c4ba transparent !important; }
.payment-panel .payment-history th { color:#36514b !important; background:#edf4f1 !important; }
.payment-panel .payment-history td { color:#35484d !important; }
.payment-panel .payment-field input,
.payment-panel .payment-field select,
.payment-panel .payment-field textarea {
  color:#263238 !important; background:#fff !important; border-color:#cbd6d7 !important;
}
.payment-panel .payment-field select option { color:#263238 !important; background:#fff !important; }
/* Standalone 3x-ui cabinet gets the same visual language. */
.page {
  color:#263238 !important;
  background:transparent !important;
}
.page .section-card, .page .info-card, .page .card {
  color:#263238 !important;
  background:#fff !important;
  border-color:#dce5e2 !important;
}
.page .section-card p, .page .info-card p, .page .card p { color:#52636a !important; }
.page .brand-subtitle { color:#667781 !important; }
/* Keep the promo banner as a distinctive, readable dark accent. */
.promo-banner {
  color:#fff !important;
  background:linear-gradient(110deg,#075e54,#0b8f75) !important;
  border-color:rgba(7,94,84,.18) !important;
}
.promo-banner-copy h2, .promo-banner-cta { color:#fff !important; }
.promo-banner-copy p { color:#e3f5ef !important; }
.promo-banner-kicker { color:#bde9dc !important; }
footer { color:#718087 !important; }
::selection { color:#fff; background:rgba(8,126,104,.28); }
@media(max-width:760px) {
  .top { width:calc(100% - 20px) !important; margin:10px auto 14px !important; flex-wrap:wrap; }
  .top-links { width:100%; justify-content:flex-start; overflow-x:auto; }
  .top-links a { flex:0 0 auto; }
  .wrap { width:calc(100% - 20px) !important; }
  .support-chat-message, .support-admin-message { max-width:94%; }
  .support-thread, .support-admin-thread { padding:9px !important; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; }
}


/* v34: safe administrative retention controls */
.cleanup-tools {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line, rgba(30, 50, 45, .14));
  border-radius: 14px;
  background: rgba(255,255,255,.72);
}
.cleanup-tools > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--text, #26332f);
}
.cleanup-tools form { margin-top: 14px; }
.cleanup-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 10px 0 14px;
}
.mail-log-toolbar select,
.mail-log-toolbar input[type="date"] {
  min-width: 145px;
  max-width: 100%;
}
.mail-log-toolbar select,
.mail-log-toolbar input {
  border: 1px solid var(--line, #d8e2dd);
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  color: #26332f;
}
@media (max-width: 760px) {
  .cleanup-inline { align-items: stretch; flex-direction: column; }
  .cleanup-inline button { width: 100%; }
  .mail-log-toolbar { align-items: stretch; }
  .mail-log-toolbar > * { width: 100%; max-width: none; }
}


/* v35: admin diagnostics, robust form sizing and explicit client status labels */
.server-stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin:16px 0}
.server-stat-card{min-width:0;padding:15px;border:1px solid #dce5f0;border-radius:15px;background:#fff;box-shadow:0 5px 18px rgba(34,55,86,.06)}
.server-stat-card span{display:block;color:#64748b;font-size:12px;line-height:1.4}
.server-stat-card b{display:block;margin-top:7px;color:#20324d;font-size:17px;overflow-wrap:anywhere}
.server-maintenance{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:20px;padding:18px;border:1px solid #dbe5f0;border-radius:16px;background:#f7f9fc}
.server-maintenance h3{margin:0 0 6px;color:#20324d;font-size:16px}
.server-maintenance p{margin:0;max-width:720px}
.client-status-stack{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:10px}
.tag.status-ok{background:#e1f5e9!important;color:#17623c!important;border-color:#b7e3c7!important}
.tag.status-warn{background:#fff4d9!important;color:#815b0a!important;border-color:#f0d99b!important}
.tag.status-bad{background:#ffe8e9!important;color:#9b2838!important;border-color:#f0c4c9!important}
.tag.status-muted{background:#eef2f7!important;color:#52647d!important;border-color:#d7e0eb!important}
.admin-head, .section-head, .refresh-actions{min-width:0;flex-wrap:wrap}
.admin-nav{overflow-x:auto;overscroll-behavior-x:contain}
.admin-nav a{white-space:nowrap}
#admin-tabs~.panel input:not([type=checkbox]):not([type=radio]),#admin-tabs~.panel select,#admin-tabs~.panel textarea{max-width:100%;min-width:0}
#portal-clients-table input,#panel-clients-table input{width:100%;min-width:0}
#portal-clients-table select,#panel-clients-table select{max-width:100%;min-width:0}
#portal-clients-table button,#panel-clients-table button{white-space:normal;overflow-wrap:anywhere}
@media(max-width:700px){.server-maintenance{align-items:stretch;flex-direction:column}.server-maintenance form,.server-maintenance button{width:100%}.server-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.server-stats-grid{grid-template-columns:1fr}}


/* =========================================================
   v39 — SVOI VPN purple-glass visual system
   Visual layer only: routes, forms, IDs and application logic
   remain unchanged. Loaded after the legacy styles.
========================================================= */
:root{
  --v39-bg:#090914;
  --v39-bg-soft:#111126;
  --v39-panel:rgba(25,24,51,.88);
  --v39-panel-2:#1b1a38;
  --v39-line:rgba(190,174,255,.16);
  --v39-text:#f7f5ff;
  --v39-muted:#aaa5c5;
  --v39-purple:#9b7cff;
  --v39-purple-2:#6c4fe4;
  --v39-pink:#db8cff;
  --v39-cyan:#8ddcff;
  --v39-green:#6ce0b2;
  --v39-danger:#ff8798;
  --v39-radius:24px;
}
html{background:var(--v39-bg);scroll-behavior:smooth}
body{
 color:var(--v39-text);
 background:
  radial-gradient(900px 520px at 85% -5%,rgba(115,76,230,.24),transparent 65%),
  radial-gradient(700px 500px at -10% 35%,rgba(63,121,190,.13),transparent 65%),
  linear-gradient(145deg,#090914 0%,#101027 55%,#090914 100%);
 background-attachment:fixed;
 color-scheme:dark;
}
body:before{
 content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
 background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.012) 48%,transparent 70%);
}
.top{
 width:min(1200px,calc(100% - 44px));max-width:1200px;
 margin:18px auto 12px;padding:12px 16px;
 border:1px solid var(--v39-line);border-radius:19px;
 background:rgba(17,16,39,.78);
 box-shadow:0 16px 48px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.06);
 backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
}
.brand{display:inline-flex;align-items:center;gap:11px;font-size:17px;letter-spacing:-.02em;color:#fff;text-decoration:none;min-width:0}
.brand:before{display:none}
.brand-mark{width:39px;height:39px;flex:none;display:grid;place-items:center;border-radius:14px;
 color:white;background:linear-gradient(140deg,#b79cff,#6849df);box-shadow:0 8px 28px #754de866}
.brand-mark svg{width:23px;height:23px}
.brand-name{font-weight:850;overflow-wrap:anywhere}
.top-links{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.top-links a{
 min-height:39px;padding:9px 13px;border:1px solid transparent;border-radius:12px;
 background:rgba(255,255,255,.045);color:#dcd7f4;font-size:12px;font-weight:650;
 transition:background .18s,border-color .18s,transform .18s;
}
.top-links a:hover{border-color:#a88cff55;background:rgba(155,124,255,.14);color:#fff;transform:translateY(-1px)}
.wrap{width:min(1200px,calc(100% - 44px));max-width:1200px;margin:22px auto 56px;padding:0;min-width:0}
.hero,.panel{
 position:relative;isolation:isolate;overflow:hidden;min-width:0;
 border:1px solid var(--v39-line);border-radius:var(--v39-radius);
 background:linear-gradient(145deg,rgba(31,29,61,.91),rgba(17,17,36,.95));
 box-shadow:0 24px 70px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.055);
 padding:clamp(22px,3vw,36px);margin-bottom:18px;
}
.hero:before,.panel:before{
 content:"";position:absolute;inset:0 0 auto;height:1px;pointer-events:none;
 background:linear-gradient(90deg,transparent,rgba(190,174,255,.48),rgba(141,220,255,.24),transparent)
}
.hero:after{
 content:"";position:absolute;width:320px;height:320px;right:-160px;top:-205px;border-radius:50%;
 background:radial-gradient(circle,rgba(155,124,255,.19),transparent 70%);pointer-events:none;z-index:-1
}
.panel{transition:border-color .2s,box-shadow .2s}
.panel:hover{border-color:rgba(166,139,255,.23);box-shadow:0 26px 74px rgba(0,0,0,.31),inset 0 1px rgba(255,255,255,.06)}
.home-hero{
 min-height:340px;padding:clamp(30px,5vw,58px);
 background:radial-gradient(ellipse at 84% 20%,rgba(132,91,255,.22),transparent 37%),
 linear-gradient(125deg,rgba(48,35,91,.97),rgba(18,18,42,.97) 68%);
}
.eyebrow,.kicker{
 color:#b8a2ff;font-size:11px;letter-spacing:.15em;font-weight:850;
}
.hero h1{font-size:clamp(38px,5.5vw,66px);line-height:1.04;letter-spacing:-.055em;max-width:850px;margin:8px 0 16px}
.hero h1 span{background:linear-gradient(100deg,#fff 10%,#c3b1ff 52%,#8bdcff);-webkit-background-clip:text;background-clip:text;color:transparent}
h1,h2,h3{color:var(--v39-text);letter-spacing:-.025em;line-height:1.18}
h2{font-size:clamp(22px,2.5vw,29px);margin:0 0 14px}
h3{font-size:17px}
p,.hero p,.panel p{color:#b9b4d0}
.muted,.date,.notice .date,.refresh-status{color:var(--v39-muted)!important}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chips span,.tag{
 border:1px solid rgba(190,174,255,.18);background:rgba(155,124,255,.09);
 padding:7px 11px;border-radius:999px;color:#d5cafa;font-size:12px
}
.hero-actions,.support-hero-actions,.payment-back,.refresh-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:20px}
button,.button-link,.promo-banner-cta{
 min-height:41px;border:1px solid rgba(190,174,255,.2);border-radius:13px;
 padding:10px 15px;color:#fff;background:rgba(255,255,255,.055);
 font:inherit;font-size:13px;font-weight:750;cursor:pointer;text-decoration:none;
 transition:transform .18s,border-color .18s,filter .18s,box-shadow .18s;
}
button:hover,.button-link:hover{transform:translateY(-1px);border-color:#b69cff88;filter:brightness(1.08)}
button:disabled{opacity:.48;cursor:not-allowed;transform:none}
button.primary,.primary,.button-link.primary{
 border:0;color:#fff;background:linear-gradient(120deg,#a58aff,#704de7);
 box-shadow:0 10px 28px rgba(118,80,229,.24)
}
button.secondary,.secondary,.button-link.secondary{
 color:#e7e1ff;background:rgba(255,255,255,.055);border:1px solid var(--v39-line)
}
button.danger,.danger{background:linear-gradient(120deg,#b94760,#7e2945);color:#fff;border:1px solid #ff9aab33}
a{color:#c7b7ff}
a:hover{color:#fff}
.section-head,.admin-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.admin-head{margin:0 0 18px;padding:20px 24px;border:1px solid var(--v39-line);border-radius:22px;
 background:linear-gradient(125deg,rgba(48,35,91,.9),rgba(18,18,42,.94))}
.admin-head h1{margin:4px 0;font-size:clamp(28px,4vw,40px)}
.admin-head p{margin:5px 0}
.admin-nav{
 display:flex;gap:7px;overflow-x:auto;overscroll-behavior-x:contain;
 padding:9px;margin:0 0 18px;border:1px solid var(--v39-line);border-radius:18px;
 background:rgba(17,16,39,.88);scrollbar-width:thin;scrollbar-color:#6d58ad transparent;
 position:sticky;top:8px;z-index:5;backdrop-filter:blur(14px)
}
.admin-nav a{
 flex:none;white-space:nowrap;padding:9px 12px;border-radius:11px;
 border:1px solid transparent;background:rgba(255,255,255,.035);
 color:#c9c3e2;font-size:12px;font-weight:700
}
.admin-nav a:hover,.admin-nav a.active{background:rgba(155,124,255,.16);border-color:#a88cff55;color:#fff}
.admin-nav::-webkit-scrollbar{height:5px}.admin-nav::-webkit-scrollbar-thumb{background:#6d58ad;border-radius:9px}
.form-grid{gap:0 16px}
label{display:block;color:#c7c1df;font-size:12px;font-weight:650;margin-bottom:12px}
input,textarea,select{
 width:100%;min-width:0;margin-top:6px;padding:12px 13px;
 border:1px solid rgba(190,174,255,.18);border-radius:12px;
 background:#0d0d20;color:#f7f5ff;font:inherit;font-size:13px;
 box-shadow:inset 0 1px 2px rgba(0,0,0,.15);outline:none
}
input::placeholder,textarea::placeholder{color:#77728f}
input:focus,textarea:focus,select:focus{border-color:#a58aff;box-shadow:0 0 0 3px rgba(155,124,255,.13)}
input[type="checkbox"],input[type="radio"]{width:auto;accent-color:#9b7cff}
select option{background:#17162d;color:#fff}
.table-wrap{overflow-x:auto;border:1px solid rgba(190,174,255,.12);border-radius:14px}
table{width:100%;border-collapse:collapse;font-size:12px;background:rgba(10,10,25,.28)}
th,td{padding:12px;border-bottom:1px solid rgba(190,174,255,.12);vertical-align:top;color:#ddd8ee}
th{color:#b8a9e8;background:rgba(155,124,255,.08);font-weight:800}
tr:hover td{background:rgba(155,124,255,.045)}
td a{color:#c3b1ff;text-decoration:underline;text-underline-offset:3px}
.stat,.mini,.info-box,.payment-config-card,.client-comment{
 background:rgba(255,255,255,.045)!important;border:1px solid rgba(190,174,255,.13)!important;
 border-radius:14px!important;color:#eeeaff
}
.stat span,.mini small,.info-label{color:#aaa5c5!important}
.stats-grid{gap:11px}
.steps{display:grid;gap:11px}
.steps>div,.step,.quick-step{
 border:1px solid rgba(190,174,255,.13);border-radius:16px;
 background:rgba(255,255,255,.035);padding:15px 17px
}
.steps b,.step-title{color:#f4f0ff}
.steps p{margin:5px 0 0;font-size:13px}
.notice,.announcement-card{
 border-color:rgba(190,174,255,.14);background:rgba(255,255,255,.025)
}
.announcement-card{padding:19px;border:1px solid rgba(190,174,255,.14);border-radius:18px;margin:12px 0}
.announcement-title{margin:6px 0 9px;font-size:19px}
.announcement-body{white-space:pre-wrap;overflow-wrap:anywhere}
.announcement-media{border-radius:16px;border:1px solid rgba(190,174,255,.14);max-width:100%}
.media-preview{border:1px solid rgba(190,174,255,.18);background:#111126;border-radius:16px;overflow:hidden}
.media-preview-hint{background:rgba(9,9,20,.8);color:#eeeaff}
.empty{color:var(--v39-muted)}
.empty-icon,.symbol{color:#b8a2ff}
.flash{padding:13px 16px;border-radius:13px;border:1px solid rgba(108,224,178,.2);background:rgba(52,142,112,.14);color:#d7ffef}
.flash.error{background:rgba(185,64,87,.16);border-color:rgba(255,135,152,.28);color:#ffdce2}
.tag.status-ok,.status-ok{color:#8af0c7!important;background:rgba(108,224,178,.1)!important;border-color:rgba(108,224,178,.3)!important}
.tag.status-bad,.status-bad{color:#ff9eac!important;background:rgba(255,100,125,.1)!important;border-color:rgba(255,100,125,.3)!important}
.tag.status-warn,.status-warn{color:#ffd58b!important;background:rgba(255,190,90,.1)!important;border-color:rgba(255,190,90,.3)!important}
.urlbox,.keybox{display:flex;align-items:center;gap:9px;min-width:0}
.urlbox input{flex:1;min-width:0}
.login{max-width:520px;margin:40px auto}
footer{color:#8983a5;text-align:center;padding:24px 12px 36px;font-size:12px}
.promo-banner{
 border:1px solid rgba(190,174,255,.25);border-radius:20px;
 background:linear-gradient(115deg,#3a276c,#714bd5 55%,#3d4c91);
 box-shadow:0 18px 48px rgba(0,0,0,.24)
}
.promo-banner h2,.promo-banner p{color:#fff}
.app-confirm-dialog,.media-lightbox-dialog{
 background:#191832;border:1px solid rgba(190,174,255,.25);color:#f7f5ff;
 box-shadow:0 28px 90px rgba(0,0,0,.58)
}
.app-confirm-dialog p{color:#c5bfdc}
.app-confirm-backdrop,.media-lightbox-backdrop{background:rgba(4,4,13,.78)}
.device-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-top:18px}
.device-card{
 position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;
 padding:18px;border:1px solid rgba(190,174,255,.15);border-radius:18px;
 background:linear-gradient(145deg,rgba(43,37,79,.75),rgba(18,18,40,.85));
 color:#f7f5ff;text-decoration:none;transition:transform .2s,border-color .2s,box-shadow .2s
}
.device-card:hover{transform:translateY(-3px);border-color:#a88cff77;box-shadow:0 16px 35px rgba(0,0,0,.24);color:white}
.device-card-icon{width:54px;height:54px;display:grid;place-items:center;border-radius:16px;
 background:linear-gradient(145deg,rgba(155,124,255,.22),rgba(141,220,255,.08));
 border:1px solid rgba(190,174,255,.2);color:#cbbcff;margin-bottom:7px}
.device-card-icon svg{width:34px;height:34px}
.device-card b{font-size:15px}
.device-card small{color:#aaa5c5;font-size:12px}
.device-card-arrow{position:absolute;right:16px;top:16px;color:#bca7ff}
.device-section .muted{max-width:650px}
.support-fab{border:1px solid rgba(190,174,255,.25);background:linear-gradient(120deg,#8c6be9,#6046c4);box-shadow:0 12px 32px rgba(75,49,154,.35)}
/* keep interactive controls reachable and readable on small screens */
@media(max-width:850px){
 .top{align-items:flex-start;gap:12px}
 .top-links{justify-content:flex-end}
 .device-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .admin-nav{top:4px}
}
@media(max-width:600px){
 .top{width:calc(100% - 24px);margin:10px auto;padding:10px 11px;flex-wrap:wrap}
 .brand-mark{width:35px;height:35px;border-radius:12px}
 .top-links{width:100%;justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}
 .top-links a{flex:none}
 .wrap{width:calc(100% - 24px);margin:14px auto 38px}
 .hero,.panel{border-radius:19px;padding:19px;margin-bottom:13px}
 .home-hero{padding:25px 20px}
 .hero h1{font-size:clamp(35px,10vw,48px)}
 .section-head,.admin-head{align-items:flex-start;flex-direction:column}
 .admin-head form{align-self:flex-end}
 .device-grid{gap:9px}
 .device-card{padding:14px}
 .device-card-icon{width:46px;height:46px}
 .form-grid{grid-template-columns:minmax(0,1fr)}
 .wide{grid-column:auto}
 .urlbox{flex-direction:column;align-items:stretch}
 .urlbox button{width:100%}
 .table-wrap{margin-left:-3px;margin-right:-3px}
 .admin-nav{border-radius:14px;padding:6px}
 .admin-nav a{padding:8px 10px}
 .hero-actions,.support-hero-actions{align-items:stretch}
 .hero-actions>* ,.support-hero-actions>*{flex:1 1 auto;text-align:center}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}

/* v39 refinements for the standalone subscription / setup guide */
.instruction-tab,.nav-button{
 border:1px solid rgba(190,174,255,.16)!important;
 background:rgba(255,255,255,.045)!important;color:#d9d2f1!important;
 border-radius:12px!important
}
.instruction-tab.active,.nav-button.active{
 background:linear-gradient(120deg,rgba(155,124,255,.28),rgba(108,79,228,.2))!important;
 border-color:rgba(190,174,255,.4)!important;color:#fff!important
}
.instruction-panel,.section-card,.other-card,.help-item{
 background:linear-gradient(145deg,rgba(31,29,61,.9),rgba(17,17,36,.95))!important;
 border:1px solid rgba(190,174,255,.15)!important;border-radius:19px!important;
 color:#f7f5ff!important;box-shadow:0 16px 42px rgba(0,0,0,.2)!important
}
.section-title,.step-title,.other-name,.help-item-title{color:#f7f5ff!important}
.section-small,.step-text,.other-description,.help-item-text{color:#b9b4d0!important}
.url-row,.url-input,.info-value{
 background:#0d0d20!important;color:#f7f5ff!important;
 border-color:rgba(190,174,255,.18)!important;border-radius:12px!important
}
.copy-button,.btn,.other-button{
 background:linear-gradient(120deg,#a58aff,#704de7)!important;color:#fff!important;
 border:0!important;border-radius:12px!important;box-shadow:0 8px 22px rgba(118,80,229,.2)!important
}
.quick-number,.step-number,.info-icon{
 background:rgba(155,124,255,.16)!important;color:#cbbcff!important;
 border:1px solid rgba(190,174,255,.18)!important
}


/* v40 — consistent page system, clearer forms, admin and managed instruction links */
:root{--v40-surface:rgba(20,27,49,.94);--v40-border:rgba(165,180,235,.2);--v40-muted:#b9c6df;--v40-accent:#9a83ff;--v40-accent2:#6d78f5}
html{scroll-padding-top:100px}
body{color:#f4f6ff}
.wrap{max-width:1160px}
.top{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid var(--v40-border);box-shadow:0 12px 36px rgba(0,0,0,.2)}
.hero,.panel,.login,.payment-panel,.support-card{box-shadow:0 18px 48px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.035)}
.panel{min-width:0;overflow-wrap:anywhere}
.panel h1,.panel h2,.panel h3,.hero h1,.hero h2{letter-spacing:-.025em}
button,.button-link,.primary,.secondary,.mini{min-height:40px;font-weight:750;transition:transform .16s ease,filter .16s ease,box-shadow .16s ease}
button:hover:not(:disabled),.button-link:hover,.mini:hover{filter:brightness(1.08);transform:translateY(-1px)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #b6a6ff;outline-offset:3px}
input,textarea,select{min-height:44px;border-radius:12px}
textarea{resize:vertical;line-height:1.55}
input[type=file]{padding:9px}
label{line-height:1.45}
.form-grid{align-items:start}
.form-grid>.wide{min-width:0}
.admin-head{gap:16px}
.admin-head h1{margin:4px 0 8px}
.admin-nav{position:sticky;z-index:20;top:8px;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.admin-nav a{font-weight:700;white-space:nowrap}
.admin-nav a:focus-visible{outline-offset:1px}
.table-wrap{max-width:100%;overscroll-behavior-x:contain}
.table-wrap table{min-width:640px}
.notice,.announcement-card{overflow:hidden}
.announcement-media{max-width:100%;height:auto;object-fit:contain}
.flash{overflow-wrap:anywhere}
.login{padding:clamp(22px,4vw,36px)!important}
.login form{display:grid;gap:12px}
.login form button{width:100%}
.support-hero{overflow:hidden}
.support-hero-actions{display:flex;gap:10px;flex-wrap:wrap}
.device-card{min-height:176px}
.instruction-admin-card{padding:20px;border:1px solid rgba(155,124,255,.25);border-radius:18px;background:linear-gradient(145deg,rgba(42,36,78,.55),rgba(15,20,39,.8));}
.instruction-admin-card h3{margin:5px 0 7px;color:#f8f7ff}
.instruction-admin-card>p{max-width:760px}
.instruction-admin-grid{margin-top:14px}
.client-instruction-grid,.portal-instruction-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px}
.client-instruction-grid>a,.portal-instruction-grid>a{position:relative;display:flex;flex-direction:column;gap:7px;min-width:0;padding:17px;border-radius:16px;border:1px solid rgba(165,180,235,.2);background:linear-gradient(145deg,rgba(53,49,96,.48),rgba(17,25,45,.85));color:#f4f6ff;text-decoration:none;transition:transform .18s,border-color .18s,box-shadow .18s}
.client-instruction-grid>a:hover,.portal-instruction-grid>a:hover{transform:translateY(-2px);border-color:rgba(177,157,255,.65);box-shadow:0 12px 28px rgba(0,0,0,.2);color:#fff}
.client-instruction-grid>a>span{font-size:22px;color:#bcaaff}
.client-instruction-grid>a>b{font-size:14px}
.client-instruction-grid>a>small{font-size:12px;color:var(--v40-muted)}
.client-instruction-grid>a>i,.portal-instruction-grid>a>span{position:absolute;right:14px;top:13px;color:#bcaaff;font-style:normal}
.instruction-empty{grid-column:1/-1;padding:15px;border-radius:13px;background:rgba(255,255,255,.04);color:var(--v40-muted)}
.portal-instruction-links{max-width:1120px;margin:22px auto;padding:22px;border:1px solid rgba(165,180,235,.2);border-radius:20px;background:linear-gradient(145deg,rgba(31,34,65,.94),rgba(12,20,36,.97));box-shadow:0 16px 40px rgba(0,0,0,.22)}
.portal-instruction-links h2{margin:5px 0 0;color:#f8f7ff;font-size:21px}
.portal-instruction-eyebrow{font-size:10px;letter-spacing:.16em;font-weight:850;color:#b6a6ff}
.portal-instruction-grid>a{padding:14px;font-weight:750}
.portal-instruction-grid>p{color:var(--v40-muted)}
@media(max-width:850px){.client-instruction-grid,.portal-instruction-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
 .admin-head{align-items:flex-start}
 .admin-head form{align-self:flex-start}
 .admin-nav{top:4px;max-width:100%;}
 .instruction-admin-card{padding:15px}
 .client-instruction-grid,.portal-instruction-grid{gap:9px}
 .client-instruction-grid>a,.portal-instruction-grid>a{padding:13px}
 .portal-instruction-links{margin:14px auto;padding:16px;border-radius:17px}
 .portal-instruction-links h2{font-size:18px}
 .table-wrap table{min-width:620px}
}
@media(max-width:360px){.client-instruction-grid,.portal-instruction-grid{grid-template-columns:1fr}.device-grid{grid-template-columns:1fr}}

/* =====================================================================
   v41 — visual implementation of the supplied SVOI VPN HTML concept.
   Public landing page follows the reference composition; portal/admin
   screens share its dark violet surfaces, gradients and controls.
===================================================================== */
:root{
  color-scheme:dark;
  --v41-bg:#090914;
  --v41-bg2:#111126;
  --v41-panel:rgba(25,24,51,.88);
  --v41-panel2:#1b1a38;
  --v41-line:rgba(190,174,255,.16);
  --v41-text:#f7f5ff;
  --v41-muted:#b8b2d0;
  --v41-purple:#9b7cff;
  --v41-purple2:#6c4fe4;
  --v41-pink:#db8cff;
  --v41-cyan:#8ddcff;
  --v41-green:#6ce0b2;
}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{min-height:100vh;color:var(--v41-text)!important;background:radial-gradient(900px 520px at 85% -5%,rgba(115,76,230,.24),transparent 65%),radial-gradient(700px 500px at -10% 35%,rgba(63,121,190,.13),transparent 65%),var(--v41-bg)!important;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif!important}
body::before{display:none!important;content:none!important}
.site-top{width:100%;max-width:1200px;margin:0 auto;padding:18px 28px;min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:22px;border:0;border-bottom:1px solid rgba(255,255,255,.07);border-radius:0;background:transparent;box-shadow:none;backdrop-filter:none}
.site-brand{display:flex;align-items:center;gap:12px;min-width:max-content;color:#fff!important;text-decoration:none}
.brand-mark{width:39px;height:39px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(140deg,#b79cff,#6849df);box-shadow:0 8px 28px #754de866;color:white;flex:none}
.brand-mark svg{width:23px;height:23px}
.brand-name{font-size:18px;font-weight:900;letter-spacing:.2px;color:#fff}
.brand-name em{font-style:normal;color:#a991ff}
.site-nav{display:flex;align-items:center;justify-content:center;gap:25px;flex:1}
.site-nav a{padding:5px 0;border:0;background:none;color:#bcb6d5!important;font-size:13px;font-weight:650;text-decoration:none;transition:color .18s}
.site-nav a:hover{background:none;color:#fff!important}
.site-top-actions{display:flex;align-items:center;gap:10px;flex:none}
.site-top-actions .button-link{width:auto;min-height:42px;padding:10px 15px;border-radius:13px;font-size:12px}
.public-home .wrap{width:100%;max-width:1200px;margin:0 auto 50px;padding:0 28px}
.site-footer{width:100%;max-width:1200px;margin:45px auto 0;padding:26px 28px 38px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:16px;color:#a9a4c5;font-size:12px;text-align:left}

/* Landing hero */
.v41-hero{padding:70px 0 46px;display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:center;min-height:490px}
.v41-hero-copy{min-width:0}
.v41-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 12px;border:1px solid #7e6bc044;border-radius:99px;background:#9d83ff12;color:#c8baff;font-size:11px;font-weight:750;letter-spacing:.5px}
.v41-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--v41-green);box-shadow:0 0 12px var(--v41-green)}
.v41-hero h1{margin:22px 0;font-size:clamp(42px,5.4vw,66px);line-height:1.04;letter-spacing:-2.4px;font-weight:850;color:#fff}
.v41-hero h1 span{background:linear-gradient(100deg,#fff 10%,#c3b1ff 52%,#8bdcff);-webkit-background-clip:text;background-clip:text;color:transparent}
.v41-hero-copy>p{max-width:550px;margin:0;color:var(--v41-muted);font-size:17px;line-height:1.65}
.v41-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0 25px}
.v41-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:45px;padding:11px 17px;border:1px solid var(--v41-line);border-radius:13px;color:#fff!important;background:rgba(255,255,255,.04);font-size:13px;font-weight:750;text-decoration:none;cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s,filter .2s}
.v41-btn:hover{transform:translateY(-2px);border-color:#a88cff88;color:#fff;filter:brightness(1.07)}
.v41-btn.primary{border:0;background:linear-gradient(120deg,#a58aff,#704de7);box-shadow:0 10px 28px #7650e544;color:white!important}
.v41-trust{display:flex;gap:20px;flex-wrap:wrap;color:#c2bdd9;font-size:12px}
.v41-trust span{display:flex;gap:7px;align-items:center}
.v41-hero-art{position:relative;min-height:410px;display:grid;place-items:center;isolation:isolate}
.v41-orbit{position:absolute;width:min(390px,88%);aspect-ratio:1;border:1px solid #a58aff24;border-radius:50%;box-shadow:0 0 80px #704de71a,inset 0 0 70px #704de712}
.v41-orbit:before,.v41-orbit:after{content:"";position:absolute;border:1px solid #a58aff20;border-radius:50%;inset:32px}
.v41-orbit:after{inset:68px}
.v41-glow{position:absolute;width:250px;height:250px;background:#875bff55;filter:blur(80px);border-radius:50%;z-index:-1}
.v41-device{position:relative;width:275px;min-height:300px;border-radius:34px;border:1px solid #c5b5ff55;background:linear-gradient(145deg,#29234b,#121327 75%);box-shadow:0 35px 90px #0009,inset 0 1px 0 #ffffff26;padding:22px;transform:rotate(-7deg);text-align:center}
.v41-device:before{content:"";position:absolute;inset:8px;border:1px solid #ffffff10;border-radius:27px;pointer-events:none}
.v41-device-head{display:flex;justify-content:space-between;color:#c8baff;font-size:10px;position:relative}
.v41-shield{width:112px;height:125px;margin:22px auto 12px;display:block;filter:drop-shadow(0 10px 22px #906dff66)}
.v41-device h3{margin:0;font-size:20px;color:#fff}
.v41-device p{margin:4px;color:#aaa4c7;font-size:12px}
.v41-signal{display:flex;gap:5px;justify-content:center;margin-top:16px}
.v41-signal i{display:block;height:4px;width:24px;border-radius:9px;background:linear-gradient(90deg,#9b7cff,#73e2c2)}
.v41-float{position:absolute;z-index:2;padding:13px 16px;border:1px solid var(--v41-line);border-radius:16px;background:#191832ed;backdrop-filter:blur(14px);box-shadow:0 24px 70px rgba(0,0,0,.35);font-size:12px}
.v41-float small{display:block;color:var(--v41-muted)!important;font-size:11px}
.v41-float b{display:block;margin-top:2px;color:#fff;font-size:14px}
.v41-float-one{right:0;top:60px}.v41-float-two{left:0;bottom:54px}

/* Landing sections and cards */
.v41-section{padding:48px 0;scroll-margin-top:90px}
.v41-section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}
.v41-kicker{color:#a991ff;font-size:11px;text-transform:uppercase;letter-spacing:1.6px;font-weight:850}
.v41-section h2,.v41-faq-layout h2{margin:8px 0;font-size:clamp(27px,3vw,38px);line-height:1.15;letter-spacing:-1px;color:#fff}
.v41-section-head p,.v41-faq-layout>div>p{max-width:620px;margin:0;color:var(--v41-muted);font-size:14px}
.v41-count{flex:none;padding:7px 11px;border:1px solid var(--v41-line);border-radius:99px;color:#c8baff;background:#9d83ff12;font-size:11px}
.v41-text-link{color:#c8baff!important;font-size:13px;font-weight:750;text-decoration:none;white-space:nowrap}
.v41-text-link:hover{color:#fff!important}
.v41-device-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.v41-device-card{position:relative;min-width:0;min-height:180px;padding:20px;border:1px solid var(--v41-line);border-radius:20px;background:linear-gradient(145deg,rgba(31,29,61,.88),rgba(17,17,36,.92));box-shadow:0 12px 40px #0002;text-decoration:none;color:#fff!important;transition:transform .2s,border-color .2s,box-shadow .2s}
.v41-device-card:hover{transform:translateY(-3px);border-color:#a68aff66;box-shadow:0 18px 44px #0004}
.v41-device-icon{width:66px;height:66px;margin-bottom:17px;display:grid;place-items:center;border:1px solid #a88cff30;border-radius:19px;background:linear-gradient(145deg,#8f70ef30,#6acde21a);color:#cbbcff}
.v41-device-icon svg{width:36px;height:36px;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.v41-device-card b{display:block;margin-bottom:6px;font-size:16px}
.v41-device-card small{display:block;color:var(--v41-muted)!important;font-size:12px}
.v41-device-card>i{position:absolute;right:17px;top:18px;color:#bdaaff;font-style:normal}
.v41-news-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.v41-news-card{min-width:0;padding:20px;border:1px solid var(--v41-line);border-radius:19px;background:linear-gradient(145deg,rgba(31,29,61,.88),rgba(17,17,36,.92));overflow:hidden}
.v41-news-date{color:#aaa4c7;font-size:11px}
.v41-news-card h3{margin:7px 0 8px;color:#fff;font-size:18px}
.v41-news-card p{margin:0;color:#c3bddb;font-size:13px;white-space:pre-wrap;overflow-wrap:anywhere}
.v41-news-card .announcement-preview{display:block;max-width:100%;margin:12px 0 0}
.v41-news-card .announcement-media{width:100%;max-height:320px;object-fit:contain;border-radius:12px}
.v41-instruction-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:18px}
.v41-instruction-intro{position:relative;isolation:isolate;min-height:300px;padding:28px;border:1px solid #a88cff35;border-radius:24px;background:linear-gradient(145deg,#32235c,#17162f);overflow:hidden}
.v41-instruction-intro h2{max-width:320px;margin:10px 0;font-size:29px}
.v41-instruction-intro p{max-width:310px;margin:0 0 22px;color:#c3badf;font-size:13px}
.v41-instruction-intro .v41-btn{position:relative;z-index:2}
.v41-intro-orb{position:absolute;z-index:-1;width:180px;height:180px;right:-60px;bottom:-70px;border-radius:50%;background:#a77aff55;filter:blur(45px)}
.v41-steps{display:grid;align-content:start;gap:10px}
.v41-step{display:flex;align-items:center;gap:15px;min-height:67px;padding:15px 18px;border:1px solid var(--v41-line);border-radius:17px;background:#17162d}
.v41-step>span{width:30px;height:30px;flex:none;display:grid;place-items:center;border-radius:10px;background:#a486ff24;color:#c9baff;font-weight:850;font-size:12px}
.v41-step b{display:block;color:#fff;font-size:14px}
.v41-step small{display:block;margin-top:3px;color:var(--v41-muted)!important;font-size:12px}
.v41-cabinet-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.v41-account-card{position:relative;min-width:0;padding:25px;border:1px solid #a78aff44;border-radius:24px;background:linear-gradient(135deg,#211d42,#15152d);overflow:hidden}
.v41-account-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.v41-account-card h3{margin:5px 0 8px;color:#fff;font-size:23px}
.v41-status-pill{flex:none;padding:6px 10px;border:1px solid #61d9aa3b;border-radius:99px;background:#61d9aa17;color:#8af0c7;font-size:11px}
.v41-account-illustration{display:flex;align-items:center;gap:14px;margin:22px 0 16px;padding:17px;border:1px solid #ffffff14;border-radius:16px;background:#0c0c1c}
.v41-account-illustration>span{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:linear-gradient(140deg,#9b7cff44,#6c4fe433);color:#d6caff;font-size:28px}
.v41-account-illustration b,.v41-account-illustration small{display:block}
.v41-account-illustration b{font-size:14px;color:#fff}
.v41-account-illustration small{margin-top:3px;color:#aaa4c7;font-size:11px}
.v41-account-actions{display:flex;flex-wrap:wrap;gap:9px}
.v41-account-card>p{margin:16px 0 0;color:#b8b2d0;font-size:12px}
.v41-guides-card{background:linear-gradient(145deg,#1d1a3b,#131328)}
.v41-guides-card h3{font-size:22px}
.v41-guides-card>p{margin:0 0 15px}
.v41-guide-links{display:grid;gap:8px}
.v41-guide-links a{display:flex;justify-content:space-between;gap:10px;padding:11px 13px;border:1px solid var(--v41-line);border-radius:12px;background:#0c0c1c;color:#e9e3ff!important;font-size:12px;font-weight:750;text-decoration:none}
.v41-guide-links a span{color:#bdaaff}
.v41-guide-empty{padding:13px;border:1px dashed var(--v41-line);border-radius:12px;color:var(--v41-muted);font-size:12px}
.v41-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.v41-feature-card{min-height:160px;padding:20px;border:1px solid var(--v41-line);border-radius:20px;background:linear-gradient(145deg,rgba(31,29,61,.88),rgba(17,17,36,.92))}
.v41-feature-card>span{display:block;margin-bottom:12px;color:#bcaaff;font-size:24px}
.v41-feature-card h3{margin:0 0 7px;color:#fff;font-size:16px}
.v41-feature-card p{margin:0;color:var(--v41-muted);font-size:13px}
.v41-faq-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:30px}
.v41-faq-layout>div:first-child .v41-text-link{display:inline-block;margin-top:20px}
.v41-faq-list details{margin:0;padding:16px 0;border-top:0;border-bottom:1px solid var(--v41-line)}
.v41-faq-list summary{display:flex;justify-content:space-between;gap:15px;padding:0;color:#f7f5ff;font-size:14px;font-weight:700;list-style:none;cursor:pointer}
.v41-faq-list summary::-webkit-details-marker{display:none}
.v41-faq-list summary:after{content:"+";color:#b49aff;font-size:20px;line-height:1}
.v41-faq-list details[open] summary:after{content:"−"}
.v41-faq-list details p{margin:11px 0 0;color:var(--v41-muted);font-size:13px}

/* Shared visual language for login, request, payment, support, cabinet and admin */
.portal-page .wrap,.admin-page .wrap{max-width:1200px;margin:28px auto 48px;padding:0 28px}
.portal-page .hero,.portal-page .panel,.portal-page .login,.portal-page .payment-panel,.portal-page .support-card,
.admin-page .hero,.admin-page .panel,.admin-page .login{color:var(--v41-text)!important;background:linear-gradient(145deg,rgba(25,24,51,.94),rgba(17,17,36,.97))!important;border:1px solid var(--v41-line)!important;border-radius:22px!important;box-shadow:0 18px 50px rgba(0,0,0,.26),inset 0 1px rgba(255,255,255,.025)!important}
.portal-page .hero h1,.portal-page .hero h2,.portal-page .panel h1,.portal-page .panel h2,.portal-page .panel h3,.portal-page .login h1,.portal-page .payment-panel h1,.portal-page .support-card h2,
.admin-page .hero h1,.admin-page .panel h1,.admin-page .panel h2,.admin-page .panel h3{color:#fff!important}
.portal-page .hero p,.portal-page .panel p,.portal-page .login p,.portal-page .payment-panel p,.portal-page .support-card p,
.admin-page .hero p,.admin-page .panel p{color:#c3bddb!important}
.portal-page .eyebrow,.admin-page .eyebrow{color:#b7a4ff!important}
.portal-page .muted,.portal-page small,.portal-page .date,.admin-page .muted,.admin-page small,.admin-page .date{color:#aaa4c7!important}
.portal-page label,.admin-page label{color:#ded8f2!important}
.portal-page input,.portal-page textarea,.portal-page select,.admin-page input,.admin-page textarea,.admin-page select{color:#f7f5ff!important;background:#0c0c1d!important;border:1px solid rgba(190,174,255,.2)!important;border-radius:12px!important;box-shadow:none}
.portal-page input::placeholder,.portal-page textarea::placeholder,.admin-page input::placeholder,.admin-page textarea::placeholder{color:#817b9e!important}
.portal-page input:focus,.portal-page textarea:focus,.portal-page select:focus,.admin-page input:focus,.admin-page textarea:focus,.admin-page select:focus{border-color:#a58aff!important;box-shadow:0 0 0 3px #a58aff20!important;outline:none}
.portal-page button,.admin-page button,.portal-page .button-link,.admin-page .button-link{border-radius:12px;font-weight:750}
.portal-page .primary,.admin-page .primary,.portal-page button.primary,.admin-page button.primary{background:linear-gradient(120deg,#a58aff,#704de7)!important;border:0!important;color:#fff!important;box-shadow:0 9px 25px #7650e533}
.portal-page .secondary,.admin-page .secondary,.portal-page .mini,.admin-page .mini{background:#252142!important;border:1px solid var(--v41-line)!important;color:#f2edff!important}
.portal-page .top-links a,.admin-page .top-links a{color:#e8e1ff!important;background:#1b1a38!important;border:1px solid var(--v41-line)!important}
.portal-page .admin-nav,.admin-page .admin-nav{background:rgba(17,16,37,.96)!important;border:1px solid var(--v41-line)!important}
.portal-page .admin-nav a,.admin-page .admin-nav a{background:#252142!important;color:#eee8ff!important;border:1px solid var(--v41-line)!important}
.portal-page .admin-nav a.active,.admin-page .admin-nav a.active{background:linear-gradient(120deg,#a58aff,#704de7)!important;color:#fff!important}
.portal-page .notice,.admin-page .notice,.portal-page .stat,.admin-page .stat,.portal-page .steps>div,.admin-page .steps>div{background:#17162d!important;border:1px solid var(--v41-line)!important;color:#eee9ff!important;border-radius:15px}
.portal-page .notice h3,.admin-page .notice h3,.portal-page .steps b,.admin-page .steps b{color:#fff!important}
.portal-page .notice p,.admin-page .notice p,.portal-page .steps p,.admin-page .steps p{color:#c3bddb!important}
.portal-page th,.admin-page th{color:#c8baff!important;background:#a58aff16!important}
.portal-page td,.admin-page td{color:#e9e4f8!important;border-color:#ffffff12!important}
.portal-page td a,.admin-page td a{color:#c5b4ff!important}
.portal-page .tag,.portal-page .chips span,.admin-page .tag,.admin-page .chips span{color:#d9ceff!important;background:#a58aff15!important;border:1px solid var(--v41-line)!important}
.portal-page .flash,.admin-page .flash{color:#e9fff7!important;background:#164333!important;border:1px solid #6ce0b233}
.portal-page .flash.error,.admin-page .flash.error{color:#ffe8ee!important;background:#492331!important;border-color:#db8caa55}
.portal-page .login,.admin-page .login{max-width:520px;margin:48px auto;padding:clamp(22px,4vw,36px)!important}
.portal-page .login form,.admin-page .login form{display:grid;gap:10px}
.portal-page .login form button,.admin-page .login form button{width:100%}
.portal-page .stats-grid .stat,.admin-page .stats-grid .stat{gap:6px}
.portal-page .urlbox,.admin-page .urlbox{padding:12px;border-radius:15px;background:#0c0c1c;border:1px solid var(--v41-line)}
.portal-page .urlbox input,.admin-page .urlbox input{margin:0}
.portal-page .device-card,.admin-page .device-card{background:linear-gradient(145deg,#211d42,#15152d);border:1px solid var(--v41-line)}
.portal-page .instruction-admin-card,.admin-page .instruction-admin-card{background:linear-gradient(145deg,#211d42,#15152d);border-color:var(--v41-line)}
.portal-page .client-instruction-grid>a,.portal-page .portal-instruction-grid>a,.admin-page .client-instruction-grid>a{background:linear-gradient(145deg,#211d42,#15152d);border-color:var(--v41-line);color:#f7f5ff!important}
.portal-page .portal-instruction-links{background:linear-gradient(145deg,#211d42,#15152d);border-color:var(--v41-line)}
.portal-page .portal-instruction-links h2{color:#fff}
.portal-page .portal-instruction-eyebrow{color:#b7a4ff}
.portal-page .promo-banner{background:linear-gradient(110deg,rgba(35,28,69,.98),rgba(24,25,54,.96))!important;border-color:var(--v41-line)!important}
.portal-page .promo-banner-copy h2{color:#fff!important}
.portal-page .promo-banner-copy p{color:#d0c9e5!important}
.admin-page .admin-head{gap:16px}
.admin-page .admin-nav{position:sticky;top:8px;z-index:20;display:flex;flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity}
.admin-page .admin-nav a{flex:none;scroll-snap-align:start;white-space:nowrap}
.admin-page .table-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
.admin-page table{min-width:640px}

@media(max-width:900px){
 .site-top{padding:15px 20px;gap:14px}.site-nav{gap:14px}.site-nav a{font-size:12px}
 .v41-hero{grid-template-columns:1fr;padding-top:48px;gap:12px}.v41-hero-art{min-height:360px}
 .v41-device-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .v41-instruction-layout,.v41-cabinet-layout,.v41-faq-layout{grid-template-columns:1fr}
 .v41-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
 .site-top{width:100%;padding:13px 17px;min-height:68px;flex-wrap:wrap}.site-brand{flex:1}.site-nav{order:3;flex:1 1 100%;justify-content:flex-start;overflow-x:auto;gap:20px;padding:5px 0 2px}.site-nav a{flex:none;white-space:nowrap}.site-top-actions{gap:7px}.site-top-actions .button-link{min-height:38px;padding:8px 10px;font-size:11px}
 .public-home .wrap,.portal-page .wrap,.admin-page .wrap{padding:0 17px;margin-top:15px}
 .v41-hero{padding:38px 0 20px;gap:8px}.v41-hero h1{font-size:42px;letter-spacing:-1.7px}.v41-hero-copy>p{font-size:15px}.v41-hero-art{min-height:315px}.v41-orbit{width:300px}.v41-device{transform:scale(.85) rotate(-7deg)}.v41-float-one{right:-2px;top:20px}.v41-float-two{left:-2px;bottom:24px}
 .v41-section{padding:36px 0}.v41-section-head{display:block}.v41-section-head>.v41-text-link{display:inline-block;margin-top:13px}.v41-device-grid,.v41-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.v41-device-card{min-height:164px;padding:15px}.v41-device-icon{width:56px;height:56px;margin-bottom:13px}.v41-device-card b{font-size:14px}.v41-device-card small{font-size:11px}.v41-news-grid{grid-template-columns:1fr}.v41-instruction-intro{min-height:270px;padding:22px}.v41-step{padding:13px;gap:11px}.v41-account-card{padding:18px}.v41-account-actions{display:grid}.v41-account-actions .v41-btn{width:100%}.v41-faq-layout{gap:16px}
 .site-footer{display:block;padding:22px 17px 30px}.site-footer span{display:block;margin-top:6px}
 .portal-page .hero,.portal-page .panel,.admin-page .hero,.admin-page .panel{padding:18px!important;border-radius:18px!important}
 .admin-page .admin-nav{top:4px}.admin-page .admin-head{align-items:flex-start}.admin-page .table-wrap table{min-width:620px}
}
@media(max-width:380px){
 .site-top-actions .button-link.secondary{display:none}.v41-hero h1{font-size:38px}.v41-device-grid,.v41-feature-grid{grid-template-columns:1fr}.v41-device-card{min-height:130px}.v41-device-icon{margin-bottom:8px}.v41-trust{gap:10px}.v41-trust span{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.v41-btn,.v41-device-card{transition:none!important}.v41-btn:hover,.v41-device-card:hover{transform:none}}

/* Standalone 3x-ui subscription page shares the same violet visual language. */
body.portal-3xui-page{background:radial-gradient(900px 520px at 85% -5%,rgba(115,76,230,.24),transparent 65%),radial-gradient(700px 500px at -10% 35%,rgba(63,121,190,.13),transparent 65%),#090914!important;color:#f7f5ff!important}
.page .topbar{padding:4px 0 14px;border-bottom:1px solid rgba(255,255,255,.07)}
.page .brand-logo{background:linear-gradient(140deg,#b79cff,#6849df)!important;box-shadow:0 8px 28px #754de866!important}
.page .brand-subtitle{color:#aaa4c7!important}
.page .status-pill{background:#191832ed!important;border-color:var(--v41-line)!important;color:#d6caff!important}
.page .hero{background:linear-gradient(145deg,#29234b,#17162f)!important;border-color:#a78aff44!important;box-shadow:0 25px 80px rgba(0,0,0,.35)!important}
.page .hero::before{background:rgba(135,91,255,.25)!important}
.page .hero-label{color:#b7a4ff!important}
.page .hero h1,.page .hero h2,.page .hero h3{color:#fff!important}
.page .hero p{color:#c3bddb!important}
.page .section-card,.page .info-card,.page .card,.page .subscription-card,.page .traffic-card{background:linear-gradient(145deg,rgba(31,29,61,.95),rgba(17,17,36,.98))!important;border-color:var(--v41-line)!important;color:#f7f5ff!important;box-shadow:0 14px 42px rgba(0,0,0,.24)!important}
.page .section-card h1,.page .section-card h2,.page .section-card h3,.page .info-card h1,.page .info-card h2,.page .info-card h3,.page .card h1,.page .card h2,.page .card h3{color:#fff!important}
.page .section-card p,.page .info-card p,.page .card p{color:#c3bddb!important}
.page button,.page .btn,.page .button,.page a.button{border-radius:12px!important}
.page button.primary,.page .btn-primary,.page .primary{background:linear-gradient(120deg,#a58aff,#704de7)!important;border-color:transparent!important;color:#fff!important}
.page input,.page select,.page textarea{background:#0c0c1d!important;color:#f7f5ff!important;border-color:var(--v41-line)!important}
.page .portal-instruction-links{max-width:1120px;margin:22px auto;padding:22px;border:1px solid var(--v41-line);border-radius:20px;background:linear-gradient(145deg,#211d42,#15152d);box-shadow:0 16px 40px rgba(0,0,0,.22)}
.page .portal-instruction-links h2{margin:5px 0 0;color:#fff;font-size:21px}
.page .portal-instruction-eyebrow{font-size:10px;letter-spacing:.16em;font-weight:850;color:#b7a4ff}
.page .portal-instruction-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:15px}
.page .portal-instruction-grid>a{position:relative;display:flex;justify-content:space-between;gap:8px;padding:13px;border:1px solid var(--v41-line);border-radius:13px;background:#0c0c1c;color:#eee8ff!important;text-decoration:none;font-size:12px;font-weight:750}
.page .portal-instruction-grid>a span{color:#bdaaff}
@media(max-width:650px){.page .portal-instruction-links{padding:16px;margin:14px auto}.page .portal-instruction-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:360px){.page .portal-instruction-grid{grid-template-columns:1fr}}
.public-home .promo-banner{max-width:1144px;margin:0 auto 10px;background:linear-gradient(110deg,rgba(35,28,69,.98),rgba(24,25,54,.96))!important;border:1px solid var(--v41-line)!important;border-radius:18px;color:#fff!important}
.public-home .promo-banner-copy h2{color:#fff!important}
.public-home .promo-banner-copy p{color:#d0c9e5!important}
.public-home .flash{color:#e9fff7!important;background:#164333!important;border:1px solid #6ce0b233}
.v41-news-card .media-preview{padding:0;border:0;background:transparent;box-shadow:none;min-height:0}
.v41-news-card .media-preview-hint{font-size:11px}

/* v47: визуальная коррекция таблиц админки без изменения HTML-логики, форм или обработчиков */
.admin-page .table-wrap,
.admin-page .table-container {
  background: rgba(8, 8, 24, .72) !important;
  border: 1px solid rgba(190, 174, 255, .18) !important;
  border-radius: 16px;
  overflow: auto;
  isolation: isolate;
}
.admin-page .table-wrap table,
.admin-page .table-container table {
  width: 100%;
  min-width: 1050px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  background: #111126 !important;
  color: #f2efff !important;
}
.admin-page .table-wrap th,
.admin-page .table-container th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 13px 12px;
  background: #211d40 !important;
  color: #cbbdff !important;
  border-bottom: 1px solid rgba(190, 174, 255, .22) !important;
  text-align: left;
  vertical-align: middle;
  white-space: normal;
  overflow-wrap: anywhere;
}
.admin-page .table-wrap td,
.admin-page .table-container td {
  padding: 14px 12px;
  background: #15142b !important;
  color: #eeeaff !important;
  border-bottom: 1px solid rgba(190, 174, 255, .12) !important;
  vertical-align: top;
  overflow-wrap: anywhere;
}
.admin-page .table-wrap tbody tr:nth-child(even) td,
.admin-page .table-container tbody tr:nth-child(even) td {
  background: #191731 !important;
}
.admin-page .table-wrap tbody tr:hover td,
.admin-page .table-container tbody tr:hover td {
  background: #211d40 !important;
}
.admin-page #panel-clients-table th:nth-child(1) { width: 24%; }
.admin-page #panel-clients-table th:nth-child(2) { width: 13%; }
.admin-page #panel-clients-table th:nth-child(3) { width: 15%; }
.admin-page #panel-clients-table th:nth-child(4) { width: 15%; }
.admin-page #panel-clients-table th:nth-child(5) { width: 13%; }
.admin-page #panel-clients-table th:nth-child(6) { width: 20%; }
.admin-page #panel-clients-table .action-stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
  min-width: 0;
  margin: 0;
}
.admin-page #panel-clients-table .inline-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 7px;
  min-width: 0;
}
.admin-page #panel-clients-table input,
.admin-page #panel-clients-table select,
.admin-page #panel-clients-table button {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.admin-page #panel-clients-table input,
.admin-page #panel-clients-table select {
  min-height: 40px;
  padding: 9px 11px;
  border: 1px solid rgba(190, 174, 255, .2) !important;
  border-radius: 11px;
  background: #0c0c1d !important;
  color: #f7f5ff !important;
}
.admin-page #panel-clients-table button {
  min-height: 38px;
  padding: 8px 10px;
  border-radius: 10px;
  line-height: 1.25;
  white-space: normal;
  overflow-wrap: anywhere;
}
.admin-page #panel-clients-table .danger { background: #9e3154 !important; color: #fff !important; }
.admin-page #panel-clients-table .client-comment,
.admin-page #panel-clients-table .muted { color: #aaa4c7 !important; }
@media (max-width: 760px) {
  .admin-page .table-wrap,
  .admin-page .table-container { border-radius: 12px; }
  .admin-page .table-wrap table,
  .admin-page .table-container table { min-width: 1050px; }
}