/* OVEVPN global theme refresh, 2026-07-24.
   Palette inspiration: globally common product UI systems — Apple/Vercel monochrome,
   Linear dark slate, Tailwind/Material blue-indigo accents. Loaded last on purpose. */
:root{
  --ove-font: Manrope, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --ove-mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --ove-blue:#2563eb;
  --ove-blue-2:#4f46e5;
  --ove-cyan:#38bdf8;
  --ove-violet:#7c3aed;
  --ove-emerald:#10b981;
  --ove-amber:#f59e0b;
  --ove-red:#ef4444;
  --ove-radius:24px;
  --ove-radius-sm:16px;
  --ove-ease:cubic-bezier(.2,.8,.2,1);
}

html.light{
  color-scheme:light!important;
  --ove-bg:#f8fafc;
  --ove-bg-2:#eef2ff;
  --ove-bg-3:#ffffff;
  --ove-surface:rgba(255,255,255,.92);
  --ove-surface-2:#ffffff;
  --ove-surface-3:#f1f5f9;
  --ove-text:#0f172a;
  --ove-text-2:#334155;
  --ove-muted:#64748b;
  --ove-faint:#94a3b8;
  --ove-border:#e2e8f0;
  --ove-border-2:#cbd5e1;
  --ove-icon:#0f172a;
  --ove-link:#2563eb;
  --ove-accent:#2563eb;
  --ove-accent-2:#4f46e5;
  --ove-accent-3:#06b6d4;
  --ove-chip:rgba(255,255,255,.90);
  --ove-emerald-soft:rgba(16,185,129,.18);
  --ove-accent-border:rgba(37,99,235,.35);
  --ove-glow:rgba(37,99,235,.20);
  --ove-shadow:0 24px 70px rgba(15,23,42,.12);
  --ove-soft-shadow:0 10px 28px rgba(15,23,42,.09);
  --ove-page-wash:
    radial-gradient(circle at 14% 6%, rgba(37,99,235,.18), transparent 30%),
    radial-gradient(circle at 86% 14%, rgba(79,70,229,.16), transparent 26%),
    radial-gradient(circle at 50% 100%, rgba(56,189,248,.12), transparent 32%),
    linear-gradient(180deg,#ffffff 0%,#f8fafc 42%,#eef2ff 100%);
  --ove-grid-a:rgba(37,99,235,.05);
  --ove-grid-b:rgba(79,70,229,.045);
  --color-dark-50:15,23,42!important;
  --color-dark-100:30,41,59!important;
  --color-dark-200:51,65,85!important;
  --color-dark-300:71,85,105!important;
  --color-dark-400:100,116,139!important;
  --color-dark-500:148,163,184!important;
  --color-dark-600:203,213,225!important;
  --color-dark-700:226,232,240!important;
  --color-dark-800:241,245,249!important;
  --color-dark-850:248,250,252!important;
  --color-dark-900:255,255,255!important;
  --color-dark-950:255,255,255!important;
}

html.dark,
html:not(.light){
  color-scheme:dark!important;
  --ove-bg:#020617;
  --ove-bg-2:#0f172a;
  --ove-bg-3:#111827;
  --ove-surface:rgba(15,23,42,.86);
  --ove-surface-2:rgba(30,41,59,.78);
  --ove-surface-3:rgba(51,65,85,.70);
  --ove-text:#f8fafc;
  --ove-text-2:#dbeafe;
  --ove-muted:#94a3b8;
  --ove-faint:#64748b;
  --ove-border:rgba(148,163,184,.18);
  --ove-border-2:rgba(148,163,184,.28);
  --ove-icon:#e2e8f0;
  --ove-link:#93c5fd;
  --ove-accent:#60a5fa;
  --ove-accent-2:#818cf8;
  --ove-accent-3:#22d3ee;
  --ove-chip:rgba(15,23,42,.82);
  --ove-emerald-soft:rgba(16,185,129,.18);
  --ove-accent-border:rgba(96,165,250,.35);
  --ove-glow:rgba(96,165,250,.30);
  --ove-shadow:0 28px 90px rgba(0,0,0,.44);
  --ove-soft-shadow:0 14px 34px rgba(0,0,0,.30);
  --ove-page-wash:
    radial-gradient(circle at 18% 4%, rgba(96,165,250,.24), transparent 28%),
    radial-gradient(circle at 86% 14%, rgba(129,140,248,.22), transparent 26%),
    radial-gradient(circle at 58% 104%, rgba(34,211,238,.13), transparent 34%),
    linear-gradient(180deg,#020617 0%,#0f172a 48%,#020617 100%);
  --ove-grid-a:rgba(148,163,184,.055);
  --ove-grid-b:rgba(96,165,250,.045);
  --color-dark-50:248,250,252!important;
  --color-dark-100:241,245,249!important;
  --color-dark-200:226,232,240!important;
  --color-dark-300:203,213,225!important;
  --color-dark-400:148,163,184!important;
  --color-dark-500:100,116,139!important;
  --color-dark-600:71,85,105!important;
  --color-dark-700:51,65,85!important;
  --color-dark-800:30,41,59!important;
  --color-dark-850:23,32,51!important;
  --color-dark-900:15,23,42!important;
  --color-dark-950:2,6,23!important;
}

html,
body,
#root{
  min-height:100%;
  background:var(--ove-bg)!important;
  color:var(--ove-text)!important;
  font-family:var(--ove-font)!important;
  font-feature-settings:"cv01","ss03","liga";
  text-rendering:geometricPrecision;
}
body{margin:0;overflow-x:hidden;}
body:before{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:-4!important;
  pointer-events:none!important;
  background:var(--ove-page-wash)!important;
  opacity:1!important;
}
body:after{
  content:""!important;
  position:fixed!important;
  inset:0!important;
  z-index:-3!important;
  pointer-events:none!important;
  background-image:
    linear-gradient(var(--ove-grid-a) 1px, transparent 1px),
    linear-gradient(90deg, var(--ove-grid-b) 1px, transparent 1px)!important;
  background-size:72px 72px!important;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.42),transparent 72%)!important;
}
#root:before{display:none!important;}

/* Root / auth shell */
#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:"◉ OVEVPN"!important;
  position:fixed!important;
  left:clamp(16px,5vw,72px)!important;
  top:22px!important;
  z-index:30!important;
  width:auto!important;
  height:auto!important;
  padding:9px 14px!important;
  border-radius:999px!important;
  background:var(--ove-chip)!important;
  color:var(--ove-text)!important;
  font-weight:820!important;
  font-size:17px!important;
  line-height:1!important;
  letter-spacing:-.035em!important;
  border:1px solid var(--ove-border)!important;
  box-shadow:var(--ove-soft-shadow)!important;
  -webkit-mask:none!important;
  mask:none!important;
  backdrop-filter:blur(18px) saturate(130%)!important;
}
#root > div > .flex.min-h-\[100dvh\]:after{
  content:"24/7 · одна ссылка · RU/EU маршруты"!important;
  position:fixed!important;
  right:clamp(16px,5vw,72px)!important;
  bottom:26px!important;
  color:var(--ove-muted)!important;
  font-size:13px!important;
  letter-spacing:.01em!important;
}
.relative.w-full.max-w-md{max-width:520px!important;z-index:2!important;}
.relative.w-full.max-w-md:before{
  content:""!important;
  display:inline-flex!important;
  width:10px!important;
  height:10px!important;
  margin:0 8px 18px 0!important;
  vertical-align:middle!important;
  border-radius:50%!important;
  background:var(--ove-emerald)!important;
  box-shadow:0 0 0 5px var(--ove-emerald-soft)!important;
}
.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 var(--ove-border)!important;
  background:var(--ove-chip)!important;
  color:var(--ove-muted)!important;
  font-size:13px!important;
  font-weight:700!important;
  filter:none!important;
  box-shadow:var(--ove-soft-shadow)!important;
  backdrop-filter:blur(18px) saturate(130%)!important;
}

/* Floating controls */
.fixed.right-3.z-50{top:22px!important;right:clamp(16px,5vw,72px)!important;}
.fixed.right-3.z-50 button,
button[aria-label="Change language"]{
  border-radius:999px!important;
  background:var(--ove-chip)!important;
  border:1px solid var(--ove-border)!important;
  color:var(--ove-text)!important;
  box-shadow:var(--ove-soft-shadow)!important;
  backdrop-filter:blur(18px) saturate(130%)!important;
}

/* Logo / headline */
.text-center .relative.mx-auto{
  width:58px!important;
  height:58px!important;
  border-radius:18px!important;
  border:1px solid var(--ove-accent-border)!important;
  background:linear-gradient(135deg,var(--ove-accent),var(--ove-accent-2) 58%,var(--ove-accent-3))!important;
  box-shadow:0 20px 44px var(--ove-glow), inset 0 1px 0 rgba(255,255,255,.28)!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:850;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:760!important;
  color:transparent!important;
  background:linear-gradient(90deg,var(--ove-text) 0%,var(--ove-text) 46%,var(--ove-accent) 68%,var(--ove-accent-3) 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
}

/* Surfaces */
.card,
[class*="bg-dark-700"],
[class*="bg-dark-800"],
[class*="bg-dark-850"],
[class*="bg-dark-900"],
[class*="bg-dark-950"],
[class*="bg-champagne-"],
[class*="border-champagne"]{
  background:var(--ove-surface)!important;
  border-color:var(--ove-border)!important;
  color:var(--ove-text)!important;
  box-shadow:var(--ove-shadow)!important;
  backdrop-filter:blur(18px) saturate(130%)!important;
}
.card{
  position:relative!important;
  overflow:hidden!important;
  border-radius:var(--ove-radius)!important;
  border:1px solid var(--ove-border)!important;
  padding:30px!important;
}
.card:before{
  content:""!important;
  position:absolute!important;
  inset:0 0 auto 0!important;
  height:4px!important;
  background:linear-gradient(90deg,var(--ove-accent),var(--ove-accent-2),var(--ove-accent-3))!important;
}
.card:after{
  content:""!important;
  position:absolute!important;
  right:-74px!important;
  top:-78px!important;
  width:200px!important;
  height:200px!important;
  border-radius:50%!important;
  background:radial-gradient(circle,var(--ove-glow),transparent 70%)!important;
  pointer-events:none!important;
}
.rounded-2xl.bg-white,
.bg-white.rounded-2xl{
  background:#fff!important;
  color:#0f172a!important;
  border:1px solid #e2e8f0!important;
  border-radius:24px!important;
  box-shadow:var(--ove-soft-shadow)!important;
}

/* Inline pale cards emitted by JS should follow the selected theme. */
[style*="rgba(255,255,255,0.95)"],
[style*="rgba(255,255,255,0.88)"],
[style*="rgba(255,255,255, 0.95)"],
[style*="rgba(255,255,255, 0.88)"]{
  background:var(--ove-surface)!important;
  border-color:var(--ove-border)!important;
  color:var(--ove-text)!important;
}

/* Text */
[class*="text-dark-50"],
[class*="text-dark-100"],
[class*="text-dark-200"],
.font-medium.text-dark-200,
[class*="text-champagne-"]{
  color:var(--ove-text)!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,
.text-gray-600,
.text-slate-500{
  color:var(--ove-faint)!important;
}
html.light .card :is(h1,h2,h3,h4,p,span,div,label,li)[class*="text-white"]{
  color:var(--ove-text)!important;
}
html.dark .text-white,
html:not(.light) .text-white{
  color:var(--ove-text)!important;
}
p{line-height:1.65;}
a{color:var(--ove-link);}
code,
.truncate.text-xs{
  font-family:var(--ove-mono)!important;
  color:var(--ove-text-2)!important;
}
.h-px{background:var(--ove-border)!important;}
[class*="border-dark"],
[class*="border-gray"],
[class*="border-slate"]{
  border-color:var(--ove-border)!important;
}
[class*="from-dark"],
[class*="via-dark"],
[class*="to-dark"]{
  --tw-gradient-from:var(--ove-bg-3)!important;
  --tw-gradient-to:var(--ove-bg)!important;
  --tw-gradient-stops:var(--ove-bg-3),var(--ove-bg)!important;
}

/* Buttons / CTAs */
a[class*="bg-\[\#54a9eb\]"],
button[type="submit"],
.card a:not([class*="text-"]):not([href^="mailto"]),
.card button:not([class*="group"]):not([aria-label]){
  border-radius:14px!important;
  border:1px solid var(--ove-accent-border)!important;
  background:linear-gradient(135deg,var(--ove-accent),var(--ove-accent-2))!important;
  color:#fff!important;
  box-shadow:0 16px 34px var(--ove-glow), inset 0 1px 0 rgba(255,255,255,.22)!important;
  transition:transform .2s var(--ove-ease), box-shadow .2s var(--ove-ease), filter .2s var(--ove-ease)!important;
}
.card a:not([class*="text-"]):hover,
.card button:not([aria-label]):hover{transform:translateY(-1px);filter:saturate(1.08);}
.card button[class*="group"],
button.group,
.flex.items-stretch.gap-2 > button{
  border-radius:16px!important;
  background:var(--ove-surface-2)!important;
  border:1px solid var(--ove-border)!important;
  color:var(--ove-text)!important;
  box-shadow:var(--ove-soft-shadow)!important;
}
.flex.items-stretch.gap-2 > button{
  min-height:72px!important;
}
.flex.items-stretch.gap-2 > button:hover,
[class*="hover:bg-dark"]:hover{
  background:var(--ove-surface-3)!important;
  border-color:var(--ove-border-2)!important;
}
input,
textarea,
select{
  background:var(--ove-surface-2)!important;
  border:1px solid var(--ove-border)!important;
  color:var(--ove-text)!important;
  border-radius:14px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important;
}
input::placeholder,
textarea::placeholder{color:var(--ove-faint)!important;}
:focus-visible{outline:2px solid var(--ove-accent)!important;outline-offset:2px!important;}
.animate-spin{border-color:var(--ove-accent)!important;border-top-color:transparent!important;box-shadow:0 0 16px var(--ove-glow)!important;}

/* Icons */
svg{filter:none!important;color:currentColor;}
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,
html.dark svg:not([role="img"]),
html:not(.light) svg:not([role="img"]){
  color:var(--ove-icon)!important;
  stroke:currentColor!important;
}
.flex.items-stretch.gap-2 > button svg,
.flex.items-stretch.gap-2 > button svg *{
  color:var(--ove-icon)!important;
  fill:var(--ove-icon)!important;
  stroke:var(--ove-icon)!important;
}
svg[role="img"],
svg[role="img"] *{
  color:initial!important;
  stroke:initial!important;
}
a[class*="bg-\[\#54a9eb\]"] svg,
a[class*="bg-\[\#54a9eb\]"] svg *,
button[type="submit"] svg,
button[type="submit"] svg *{
  color:#fff!important;
  fill:#fff!important;
  stroke:#fff!important;
}
.flex.items-stretch.gap-2 > button span,
.flex.items-stretch.gap-2 > button [class*="text-"]{
  color:var(--ove-text-2)!important;
  font-weight:760!important;
}
.relative.w-full.max-w-md:after,
#root > div > .flex.min-h-\[100dvh\]:after{
  color:var(--ove-muted)!important;
}

/* 2026-07-24: subscription dashboard contrast fix.
   The built SPA helper currently forces its inline palette to dark values even when html.light is active,
   so the "Осталось" subscription block can render white inline text on pale panels. */
html.light [class*="text-dark-50/20"],
html.light [class*="text-dark-50/25"],
html.light [class*="text-dark-50/30"]{
  color:rgba(15,23,42,.58)!important;
}
html.light [class*="text-dark-50/35"],
html.light [class*="text-dark-50/40"],
html.light [class*="text-dark-50/50"]{
  color:rgba(15,23,42,.72)!important;
}
html.light .card [style*="color: rgb(255, 255, 255)"],
html.light .card [style*="color:#fff"],
html.light .card [style*="color: #fff"]{
  color:var(--ove-text)!important;
}
html.light .card [style*="color: rgba(255, 255, 255, 0.4)"],
html.light .card [style*="color:rgba(255,255,255,0.4)"],
html.light .card [style*="color: rgba(255, 255, 255, 0.3)"],
html.light .card [style*="color:rgba(255,255,255,0.3)"],
html.light .card [style*="color: rgba(255, 255, 255, 0.25)"],
html.light .card [style*="color:rgba(255,255,255,0.25)"]{
  color:var(--ove-muted)!important;
}
html.light .card [style*="background: rgba(255, 255, 255, 0.03)"],
html.light .card [style*="background:rgba(255,255,255,0.03)"],
html.light .card [style*="background: rgba(255, 255, 255, 0.05)"],
html.light .card [style*="background:rgba(255,255,255,0.05)"]{
  background:#f1f5f9!important;
  border-color:var(--ove-border)!important;
}
html.light .card [style*="border: 1px solid rgba(255, 255, 255, 0.04)"],
html.light .card [style*="border:1px solid rgba(255,255,255,0.04)"],
html.light .card [style*="border: 1px solid rgba(255, 255, 255, 0.08)"],
html.light .card [style*="border:1px solid rgba(255,255,255,0.08)"]{
  border-color:var(--ove-border)!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;font-size:15px!important;padding:8px 12px!important;}
  #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;}
}

/* 2026-07-24 hotfix #2: logged-in subscription cards are not always `.card`.
   The "ОСТАЛОСЬ" panel uses inline dark-theme values from JS, so scope the override
   to rounded/panel-like blocks in light mode and then restore CTA/button whites. */
html.light [style*="background: rgba(255, 255, 255, 0.03)"],
html.light [style*="background:rgba(255,255,255,0.03)"],
html.light [style*="background: rgba(255, 255, 255, 0.05)"],
html.light [style*="background:rgba(255,255,255,0.05)"]{
  background:#f1f5f9!important;
  border-color:#dbeafe!important;
}
html.light [style*="border: 1px solid rgba(255, 255, 255, 0.04)"],
html.light [style*="border:1px solid rgba(255,255,255,0.04)"],
html.light [style*="border: 1px solid rgba(255, 255, 255, 0.08)"],
html.light [style*="border:1px solid rgba(255,255,255,0.08)"]{
  border-color:#dbeafe!important;
}
html.light :is(main,section,article,[class*="rounded"],[class*="p-3"])
  :not(button):not(a)[style*="color: rgb(255, 255, 255)"],
html.light :is(main,section,article,[class*="rounded"],[class*="p-3"])
  :not(button):not(a)[style*="color:#fff"],
html.light :is(main,section,article,[class*="rounded"],[class*="p-3"])
  :not(button):not(a)[style*="color: #fff"]{
  color:#0f172a!important;
}
html.light :is(main,section,article,[class*="rounded"],[class*="p-3"])
  :not(button):not(a)[style*="color: rgba(255, 255, 255, 0.4)"],
html.light :is(main,section,article,[class*="rounded"],[class*="p-3"])
  :not(button):not(a)[style*="color:rgba(255,255,255,0.4)"],
html.light :is(main,section,article,[class*="rounded"],[class*="p-3"])
  :not(button):not(a)[style*="color: rgba(255, 255, 255, 0.3)"],
html.light :is(main,section,article,[class*="rounded"],[class*="p-3"])
  :not(button):not(a)[style*="color:rgba(255,255,255,0.3)"],
html.light :is(main,section,article,[class*="rounded"],[class*="p-3"])
  :not(button):not(a)[style*="color: rgba(255, 255, 255, 0.25)"],
html.light :is(main,section,article,[class*="rounded"],[class*="p-3"])
  :not(button):not(a)[style*="color:rgba(255,255,255,0.25)"]{
  color:#64748b!important;
}
html.light button [style*="color: rgb(255, 255, 255)"],
html.light button [style*="color:#fff"],
html.light button [style*="color: #fff"],
html.light a[class*="bg-"] [style*="color: rgb(255, 255, 255)"],
html.light a[class*="bg-"] [style*="color:#fff"],
html.light a[class*="bg-"] [style*="color: #fff"]{
  color:#fff!important;
}