/* Cosmic mist — translucent section edges and a deeper night sky.
   No images are loaded: the background stays light and stable in Telegram. */
body:has(.vs-northern){
  background:
    radial-gradient(1.4px 1.4px at 9% 13%,rgba(255,246,223,.72),transparent 72%),
    radial-gradient(1px 1px at 83% 17%,rgba(255,246,223,.62),transparent 75%),
    radial-gradient(1px 1px at 67% 41%,rgba(255,246,223,.42),transparent 75%),
    radial-gradient(1.5px 1.5px at 16% 68%,rgba(255,246,223,.44),transparent 73%),
    radial-gradient(1px 1px at 91% 82%,rgba(255,246,223,.42),transparent 75%),
    radial-gradient(62% 31% at 52% -4%,rgba(121,94,170,.24),transparent 72%),
    radial-gradient(55% 36% at -10% 49%,rgba(53,104,117,.18),transparent 72%),
    radial-gradient(56% 38% at 108% 74%,rgba(116,77,133,.18),transparent 72%),
    #0c0c14;
}
body:has(.vs-northern):after{
  content:"";
  position:fixed;
  inset:-22vh -24vw;
  z-index:0;
  pointer-events:none;
  opacity:.64;
  background:
    radial-gradient(34% 16% at 38% 22%,rgba(204,177,235,.13),transparent 74%),
    radial-gradient(29% 19% at 74% 47%,rgba(91,143,161,.12),transparent 75%),
    radial-gradient(36% 18% at 31% 79%,rgba(225,171,127,.08),transparent 74%);
  filter:blur(34px);
}

.vs-northern.app.sky.dash{isolation:isolate}
.vs-northern.app.sky.dash:before{
  content:"";
  position:absolute;
  z-index:-1;
  top:88px;left:50%;
  width:280px;height:280px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle,rgba(214,183,114,.14),rgba(146,111,171,.08) 38%,transparent 70%);
  filter:blur(14px);
  pointer-events:none;
}

.vs-northern .dash-head{
  border-color:rgba(221,204,235,.14);
  background:
    radial-gradient(94% 105% at 8% 0%,rgba(178,150,210,.15),transparent 65%),
    linear-gradient(130deg,rgba(52,45,69,.61),rgba(14,15,25,.42));
  box-shadow:inset 0 1px rgba(255,246,234,.065),0 20px 48px rgba(0,0,0,.24),0 0 52px rgba(126,94,167,.08);
  backdrop-filter:blur(13px);
  -webkit-backdrop-filter:blur(13px);
}
.vs-northern .dash-head:before{
  content:"";
  position:absolute;
  inset:26% -16% -55%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgba(216,208,239,.15),transparent 67%);
  filter:blur(22px);
  pointer-events:none;
}
.vs-northern .dash-head>*{position:relative;z-index:1}

.vs-northern .sky-moon:after{
  content:"";
  display:block;
  width:160px;height:18px;
  margin:-9px auto 0;
  border-radius:50%;
  background:rgba(192,166,229,.2);
  filter:blur(16px);
}
.vs-northern .cyclephase{position:relative}
.vs-northern .cyclephase:before{
  content:"";
  position:absolute;
  left:4%;right:4%;top:8px;height:28px;
  border-radius:50%;
  background:linear-gradient(90deg,transparent,rgba(219,193,238,.13),transparent);
  filter:blur(12px);
}

.vs-northern .dash-card{
  overflow:hidden;
  border-color:rgba(220,208,235,.11);
  background:
    linear-gradient(135deg,rgba(48,45,62,.57),rgba(15,17,27,.6) 68%),
    rgba(13,14,23,.42);
  box-shadow:
    inset 0 1px rgba(255,249,240,.045),
    0 20px 44px rgba(0,0,0,.22),
    0 5px 26px rgba(112,92,156,.07);
  backdrop-filter:blur(16px) saturate(112%);
  -webkit-backdrop-filter:blur(16px) saturate(112%);
}
.vs-northern .dash-card:before{
  inset:-25%;
  opacity:1;
  background:
    radial-gradient(43% 42% at 12% 7%,rgba(229,212,249,.12),transparent 71%),
    radial-gradient(42% 47% at 94% 94%,rgba(89,154,170,.11),transparent 73%);
  filter:blur(18px);
  mix-blend-mode:screen;
}
.vs-northern .dash-card:after{
  content:"";
  position:absolute;
  z-index:0;
  left:-20%;right:-20%;bottom:-48%;height:70%;
  border-radius:50%;
  background:rgba(194,182,231,.13);
  filter:blur(25px);
  pointer-events:none;
}
.vs-northern .dash-card.insight-card{
  border-color:rgba(160,191,173,.18);
  background:linear-gradient(135deg,rgba(43,66,61,.52),rgba(16,23,27,.64));
  box-shadow:inset 0 1px rgba(225,255,235,.05),0 20px 43px rgba(0,0,0,.21),0 5px 28px rgba(89,145,122,.09);
}
.vs-northern .dash-card.dream-card{
  border-color:rgba(191,169,230,.18);
  background:linear-gradient(135deg,rgba(55,45,78,.56),rgba(19,17,31,.64));
}
.vs-northern .dash-card + .dash-card{margin-top:18px}

.vs-northern .vs-engagement-card{
  overflow:hidden;
  border-color:rgba(220,208,235,.12);
  background:linear-gradient(135deg,rgba(49,45,64,.54),rgba(15,16,26,.61));
  box-shadow:inset 0 1px rgba(255,249,240,.04),0 17px 36px rgba(0,0,0,.19);
  backdrop-filter:blur(15px);
  -webkit-backdrop-filter:blur(15px);
}

.vs-daythread{
  border-color:rgba(223,207,240,.18);
  background:rgba(29,27,43,.42);
  box-shadow:0 7px 23px rgba(0,0,0,.13),inset 0 1px rgba(255,248,239,.05);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.vs-northern .dash-cal-btn,.vs-northern .btn-ghost{
  border-color:rgba(250,225,178,.54);
  background:linear-gradient(130deg,rgba(227,205,159,.94),rgba(176,143,104,.93));
  box-shadow:0 10px 27px rgba(0,0,0,.24),0 0 24px rgba(216,190,137,.12);
}
.nav.vs-northern-nav{
  border-color:rgba(220,208,235,.18);
  background:rgba(17,18,29,.71);
  box-shadow:0 15px 38px rgba(0,0,0,.42),0 0 38px rgba(105,89,145,.11),inset 0 1px rgba(255,249,240,.06);
  backdrop-filter:blur(24px) saturate(125%);
  -webkit-backdrop-filter:blur(24px) saturate(125%);
}
.nav.vs-northern-nav button.on:before{background:linear-gradient(145deg,rgba(217,192,239,.17),rgba(213,183,114,.1))}

@media (prefers-reduced-motion:no-preference){
  .vs-northern.app.sky.dash:before{animation:vs-breathe 9s ease-in-out infinite alternate}
  .vs-northern .dash-card:after{animation:vs-mist 11s ease-in-out infinite alternate}
}
@keyframes vs-breathe{to{transform:translateX(-50%) scale(1.09);opacity:.78}}
@keyframes vs-mist{to{transform:translateX(7%) translateY(-5px);opacity:.7}}