/* OVEVPN cabinet light redesign — loaded after legacy dark overrides. */
:root{
  --ove-page:#f7f9ff;
  --ove-page-2:#ffffff;
  --ove-ink:#17263a;
  --ove-ink-2:#253650;
  --ove-muted:#8a97ad;
  --ove-muted-2:#a4afc1;
  --ove-line:#e5ebf6;
  --ove-line-2:#d9e0f0;
  --ove-violet:#5b3cff;
  --ove-violet-2:#8b6cff;
  --ove-pink:#d43b9f;
  --ove-cyan:#43c7ee;
  --ove-green:#2ecc71;
  --ove-shadow:0 22px 65px rgba(84,93,130,.16);
  --ove-soft-shadow:0 10px 30px rgba(84,93,130,.12);
  --ove-radius:22px;
}

html,body,#root{
  min-height:100%;
  background:var(--ove-page)!important;
  color:var(--ove-ink)!important;
  font-family:Manrope,Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif!important;
}
body{margin:0;overflow-x:hidden;}
body:before{
  content:"";position:fixed;inset:0;z-index:-4;pointer-events:none;
  background:
    linear-gradient(165deg,rgba(139,108,255,.34) 0%,rgba(212,59,159,.18) 22%,rgba(67,199,238,.18) 46%,rgba(247,249,255,0) 47%) top/100% 560px no-repeat,
    radial-gradient(circle at 78% 17%,rgba(67,199,238,.22),transparent 28%),
    radial-gradient(circle at 18% 11%,rgba(139,108,255,.28),transparent 30%),
    linear-gradient(180deg,#fff 0%,#f7f9ff 38%,#ffffff 100%)!important;
}
body:after{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;
  background-image:linear-gradient(rgba(91,60,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(67,199,238,.04) 1px,transparent 1px);
  background-size:76px 76px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.24),transparent 62%);
}
#root:before{display:none!important;}

/* Root auth layout */
#root > div > .flex.min-h-\[100dvh\]{
  min-height:100dvh!important;
  padding:88px 20px 42px!important;
  align-items:center!important;
  justify-content:center!important;
}
#root > div > .flex.min-h-\[100dvh\]:before{
  content:""!important;
  position:fixed!important;left:clamp(18px,5vw,72px)!important;top:22px!important;z-index:30!important;
  width:178px;height:44px;
  border-radius:14px;
  background:
    linear-gradient(135deg,var(--ove-violet),var(--ove-pink)) left 0 top 0/44px 44px no-repeat,
    linear-gradient(90deg,var(--ove-ink),var(--ove-ink)) left 56px top 12px/94px 20px no-repeat;
  box-shadow:none!important;
  -webkit-mask:
    radial-gradient(circle at 22px 22px,#000 0 19px,transparent 20px) left top/44px 44px no-repeat,
    linear-gradient(#000,#000) left 56px top 12px/94px 20px no-repeat;
  mask:
    radial-gradient(circle at 22px 22px,#000 0 19px,transparent 20px) left top/44px 44px no-repeat,
    linear-gradient(#000,#000) left 56px top 12px/94px 20px no-repeat;
}
#root > div > .flex.min-h-\[100dvh\]:after{
  content:"24/7 · одна ссылка · RU/EU маршруты"!important;
  position:fixed!important;right:clamp(18px,5vw,72px)!important;bottom:26px!important;
  color:var(--ove-muted)!important;font-size:13px;letter-spacing:.01em;
}

.relative.w-full.max-w-md{max-width:520px!important;z-index:2;}
.relative.w-full.max-w-md:before{
  content:""!important;
  display:inline-flex!important;width:10px;height:10px;margin:0 8px 18px 0!important;vertical-align:middle;
  border-radius:50%;background:var(--ove-green);box-shadow:0 0 0 5px rgba(46,204,113,.12);
}
.relative.w-full.max-w-md:after{
  content:"Стабильный быстрый маршрут каждый день"!important;
  position:relative!important;display:inline-flex!important;width:auto!important;height:auto!important;inset:auto!important;
  margin:0 auto 18px!important;padding:8px 13px!important;border-radius:999px!important;
  border:1px solid rgba(255,255,255,.82)!important;background:rgba(255,255,255,.78)!important;
  color:#59677d!important;font-size:13px;font-weight:650!important;filter:none!important;box-shadow:0 10px 30px rgba(91,60,255,.1)!important;
}

/* Header/language pill */
.fixed.right-3.z-50{top:22px!important;right:clamp(18px,5vw,72px)!important;}
.fixed.right-3.z-50 button,
button[aria-label="Change language"]{
  border-radius:999px!important;background:rgba(255,255,255,.84)!important;border:1px solid rgba(229,235,246,.95)!important;
  color:var(--ove-ink)!important;backdrop-filter:blur(18px);box-shadow:0 10px 30px rgba(84,93,130,.1)!important;
}

/* Brand mark and headline */
.text-center .relative.mx-auto{
  width:58px!important;height:58px!important;border-radius:18px!important;border:0!important;
  background:linear-gradient(135deg,var(--ove-violet),var(--ove-pink))!important;
  box-shadow:0 20px 42px rgba(91,60,255,.25)!important;
}
.text-center .relative.mx-auto span{color:#fff!important;font-size:0!important;text-shadow:none!important;}
.text-center .relative.mx-auto span:after{content:"O";font-size:26px;font-weight:800;letter-spacing:-.08em;}
h1.text-2xl,.text-center h1{
  margin-top:18px!important;margin-bottom:8px!important;
  font-size:clamp(36px,7vw,58px)!important;line-height:1.02!important;letter-spacing:-.065em!important;font-weight:650!important;
  color:transparent!important;background:linear-gradient(90deg,#17263a 0%,#17263a 48%,var(--ove-violet) 68%,var(--ove-cyan) 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
}

/* Surfaces */
.card,
[class*="bg-dark-700"],
[class*="bg-dark-800"],
[class*="bg-dark-900"],
[class*="bg-dark-950"]{
  background:rgba(255,255,255,.88)!important;
  border-color:var(--ove-line)!important;
  color:var(--ove-ink)!important;
  box-shadow:var(--ove-shadow)!important;
  backdrop-filter:blur(18px);
}
.card{
  position:relative;overflow:hidden;border-radius:28px!important;border:1px solid var(--ove-line)!important;padding:30px!important;
}
.card:before{
  content:""!important;position:absolute;inset:0 0 auto 0;height:5px!important;
  background:linear-gradient(90deg,var(--ove-violet),var(--ove-pink),var(--ove-cyan))!important;
}
.card:after{
  content:""!important;position:absolute;right:-70px;top:-75px;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,rgba(67,199,238,.18),transparent 70%)!important;pointer-events:none;
}
.rounded-2xl.bg-white{background:#fff!important;border:1px solid #edf1f8!important;border-radius:24px!important;box-shadow:0 18px 40px rgba(84,93,130,.14)!important;}

/* Text contrast */
[class*="text-dark-50"], [class*="text-dark-100"], [class*="text-dark-200"], .font-medium.text-dark-200{color:var(--ove-ink)!important;}
[class*="text-dark-300"], [class*="text-dark-400"], .text-gray-400, .text-gray-500{color:var(--ove-muted)!important;}
[class*="text-dark-500"], .text-dark-500{color:var(--ove-muted-2)!important;}
.text-white{color:#fff!important;}
p{line-height:1.65;}
code,.truncate.text-xs{font-family:"IBM Plex Mono","JetBrains Mono",monospace!important;color:#59677d!important;}

/* Buttons: same primary/secondary language as landing */
a[class*="bg-\[\#54a9eb\]"],
button[type="submit"],
.card a:not([class*="text-"]),
.card button:not([class*="group"]):not([aria-label]){
  border-radius:12px!important;border:1px solid rgba(91,60,255,.15)!important;
  background:linear-gradient(135deg,var(--ove-violet),#6854ff)!important;
  color:#fff!important;box-shadow:0 14px 30px rgba(91,60,255,.24)!important;
  transition:transform .2s ease,box-shadow .2s ease,filter .2s ease!important;
}
.card a:hover,.card button:hover{transform:translateY(-1px);filter:saturate(1.05);}
.card button[class*="group"], button.group{
  border-radius:14px!important;background:#f8faff!important;border:1px solid var(--ove-line)!important;
  color:var(--ove-ink)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important;
}
.flex.items-stretch.gap-2 > button{
  min-height:72px;border-radius:18px!important;background:#fff!important;border:1px solid var(--ove-line)!important;
  box-shadow:var(--ove-soft-shadow)!important;color:var(--ove-ink)!important;
}
.flex.items-stretch.gap-2 > button:hover{background:#f7f9ff!important;border-color:#d6dfff!important;}

input,textarea,select{
  background:#fff!important;border:1px solid var(--ove-line)!important;color:var(--ove-ink)!important;border-radius:14px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)!important;
}
input::placeholder,textarea::placeholder{color:var(--ove-muted-2)!important;}
.h-px{background:var(--ove-line)!important;}
.animate-spin{border-color:var(--ove-violet)!important;border-top-color:transparent!important;box-shadow:0 0 16px rgba(91,60,255,.25);}
svg{filter:none!important;}

/* Generic dashboard/app pages after login */
main,aside,header,nav{color:var(--ove-ink)!important;}
[class*="shadow"], [class*="rounded-"]{border-color:var(--ove-line);}
[class*="from-dark"], [class*="to-dark"], [class*="via-dark"]{--tw-gradient-from:#ffffff!important;--tw-gradient-to:#f7f9ff!important;--tw-gradient-stops:#ffffff,#f7f9ff!important;}
[class*="border-dark"]{border-color:var(--ove-line)!important;}
[class*="hover:bg-dark"]:hover{background:#f7f9ff!important;}

@media (max-width:640px){
  #root > div > .flex.min-h-\[100dvh\]{padding:76px 16px 28px!important;}
  #root > div > .flex.min-h-\[100dvh\]:before{top:16px!important;left:16px!important;transform:scale(.86);transform-origin:left top;}
  #root > div > .flex.min-h-\[100dvh\]:after{display:none!important;}
  .fixed.right-3.z-50{top:14px!important;right:14px!important;}
  .card{padding:24px!important;border-radius:24px!important;}
  .relative.w-full.max-w-md:before,.relative.w-full.max-w-md:after{margin-top:8px!important;}
}


/* Final override against legacy html.light dark contrast hotfix. */
html.light, html.light body, html.light #root{
  color-scheme:light!important;
  background:var(--ove-page)!important;
  color:var(--ove-ink)!important;
}
html.light body:before{
  background:
    linear-gradient(165deg,rgba(139,108,255,.34) 0%,rgba(212,59,159,.18) 22%,rgba(67,199,238,.18) 46%,rgba(247,249,255,0) 47%) top/100% 560px no-repeat,
    radial-gradient(circle at 78% 17%,rgba(67,199,238,.22),transparent 28%),
    radial-gradient(circle at 18% 11%,rgba(139,108,255,.28),transparent 30%),
    linear-gradient(180deg,#fff 0%,#f7f9ff 38%,#ffffff 100%)!important;
}
html.light body:after{
  background-image:linear-gradient(rgba(91,60,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(67,199,238,.04) 1px,transparent 1px)!important;
  background-size:76px 76px!important;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.24),transparent 62%)!important;
}
html.light .card,
html.light [class*="bg-dark-700"],
html.light [class*="bg-dark-800"],
html.light [class*="bg-dark-900"],
html.light [class*="bg-dark-950"]{
  background:rgba(255,255,255,.88)!important;
  border-color:var(--ove-line)!important;
  color:var(--ove-ink)!important;
  box-shadow:var(--ove-shadow)!important;
}
html.light [class*="text-dark-50"], html.light [class*="text-dark-100"], html.light [class*="text-dark-200"], html.light .font-medium.text-dark-200{color:var(--ove-ink)!important;}
html.light [class*="text-dark-300"], html.light [class*="text-dark-400"], html.light .text-gray-400, html.light .text-gray-500{color:var(--ove-muted)!important;}
html.light [class*="text-dark-500"], html.light .text-dark-500{color:var(--ove-muted-2)!important;}
html.light h1.text-2xl, html.light .text-center h1{
  color:transparent!important;
  background:linear-gradient(90deg,#17263a 0%,#17263a 48%,var(--ove-violet) 68%,var(--ove-cyan) 100%)!important;
  -webkit-background-clip:text!important;background-clip:text!important;
}


/* Polish pass: readable logo and stronger secondary contrast. */
#root > div > .flex.min-h-\[100dvh\]:before{
  content:"◉ OVEVPN"!important;
  width:auto!important;height:auto!important;
  padding:9px 14px!important;border-radius:14px!important;
  background:rgba(255,255,255,.78)!important;
  -webkit-mask:none!important;mask:none!important;
  color:var(--ove-ink)!important;font-weight:800!important;font-size:17px!important;letter-spacing:-.03em!important;
  border:1px solid rgba(229,235,246,.9)!important;
  box-shadow:0 10px 30px rgba(84,93,130,.1)!important;
}
#root > div > .flex.min-h-\[100dvh\]:before::first-letter{color:var(--ove-violet)!important;}
html.light [class*="text-dark-300"], html.light [class*="text-dark-400"], html.light .text-gray-400, html.light .text-gray-500,
[class*="text-dark-300"], [class*="text-dark-400"], .text-gray-400, .text-gray-500{color:#6f7d94!important;}
html.light [class*="text-dark-500"], html.light .text-dark-500,
[class*="text-dark-500"], .text-dark-500{color:#7f8aa0!important;}
.flex.items-stretch.gap-2 > button span,
.flex.items-stretch.gap-2 > button [class*="text-"]{color:#536178!important;font-weight:700!important;}
#root > div > .flex.min-h-\[100dvh\]:after{color:#6f7d94!important;}


/* Accessibility polish: secondary labels darker on light theme. */
html.light [class*="text-dark-300"], html.light [class*="text-dark-400"], html.light .text-gray-400, html.light .text-gray-500,
[class*="text-dark-300"], [class*="text-dark-400"], .text-gray-400, .text-gray-500{color:#59677d!important;}
html.light [class*="text-dark-500"], html.light .text-dark-500,
[class*="text-dark-500"], .text-dark-500{color:#637188!important;}
#root > div > .flex.min-h-\[100dvh\]:after{color:#59677d!important;}

/* 2026-06-08: make cabinet icons and lower/subtext elements dark on light subdomain UI. */
:root{
  --ove-icon-dark:#17263a;
  --ove-subtext-dark:#34445d;
}

/* Generic UI icons should be dark on the light cabinet theme. QR modules are excluded. */
html.light svg:not([role="img"]),
html.light button[aria-label="Change language"] svg,
html.light .card button.group svg,
html.light .card a svg,
html.light .card button svg{
  color:var(--ove-icon-dark)!important;
  stroke:currentColor!important;
}

/* Bottom OAuth provider buttons: convert brand marks to monochrome dark as requested. */
html.light .flex.items-stretch.gap-2 > button svg,
html.light .flex.items-stretch.gap-2 > button svg *,
.flex.items-stretch.gap-2 > button svg,
.flex.items-stretch.gap-2 > button svg *{
  color:var(--ove-icon-dark)!important;
  fill:var(--ove-icon-dark)!important;
  stroke:var(--ove-icon-dark)!important;
}

/* Keep QR black/white and keep primary Telegram CTA readable on its dark gradient. */
html.light svg[role="img"],
html.light svg[role="img"] *,
svg[role="img"],
svg[role="img"] *{
  color:initial!important;
  stroke:initial!important;
}
html.light .card a[class*="bg-\[\#54a9eb\]"] svg,
.card a[class*="bg-\[\#54a9eb\]"] svg,
html.light .card a[class*="bg-\[\#54a9eb\]"] svg *,
.card a[class*="bg-\[\#54a9eb\]"] svg *{
  color:#fff!important;
  fill:#fff!important;
  stroke:#fff!important;
}

/* Darken the lower captions, divider, command text and fixed bottom subdomain label. */
html.light [class*="text-dark-300"], html.light [class*="text-dark-400"], html.light .text-gray-400, html.light .text-gray-500,
[class*="text-dark-300"], [class*="text-dark-400"], .text-gray-400, .text-gray-500{
  color:var(--ove-subtext-dark)!important;
}
html.light [class*="text-dark-500"], html.light .text-dark-500,
[class*="text-dark-500"], .text-dark-500{
  color:#40506a!important;
}
code,.truncate.text-xs,
.flex.items-stretch.gap-2 > button span,
.flex.items-stretch.gap-2 > button [class*="text-"]{
  color:var(--ove-icon-dark)!important;
  font-weight:750!important;
}
.relative.w-full.max-w-md:after,
#root > div > .flex.min-h-\[100dvh\]:after{
  color:var(--ove-subtext-dark)!important;
}