/* Northern Quiet — a visual layer for the Telegram Mini App.
   It intentionally reuses the existing dashboard markup and keeps every
   product action in place. */
:root{
  --vs-night:#100e12;
  --vs-ink:#f4eddf;
  --vs-soft:#c8bdab;
  --vs-gold:#d6b772;
  --vs-moss:#98aa97;
  --vs-line:rgba(226,199,143,.18);
}

body:has(.vs-northern){
  background:
    radial-gradient(78% 38% at 50% -10%,rgba(128,104,82,.26),transparent 70%),
    radial-gradient(58% 42% at 102% 58%,rgba(96,117,108,.13),transparent 68%),
    var(--vs-night);
}

.vs-northern.app.sky.dash{
  max-width:510px;
  padding:18px 16px calc(110px + env(safe-area-inset-bottom));
}

.vs-northern .dash-head{
  position:relative;
  overflow:hidden;
  min-height:120px;
  margin:0 0 6px;
  padding:23px 22px 20px;
  text-align:left;
  border:1px solid var(--vs-line);
  border-radius:26px;
  background:linear-gradient(126deg,rgba(69,51,40,.75),rgba(20,17,21,.48));
  box-shadow:inset 0 1px rgba(255,243,216,.06),0 16px 42px rgba(0,0,0,.18);
}
.vs-northern .dash-head:after{
  content:"";
  position:absolute;
  width:162px;height:162px;right:-49px;top:-71px;
  border:1px solid rgba(225,194,130,.19);
  border-radius:50%;
  box-shadow:0 0 0 18px rgba(225,194,130,.025),0 0 0 46px rgba(225,194,130,.018);
  pointer-events:none;
}
.vs-northern .dash-hello{
  color:var(--vs-soft);
  font-size:.75rem;
  letter-spacing:1.4px;
  text-transform:uppercase;
}
.vs-northern .dash-name{
  position:relative;z-index:1;
  max-width:74%;
  margin-top:5px;
  color:var(--vs-ink);
  font-size:2.42rem;
  line-height:.9;
  letter-spacing:-.4px;
}
.vs-northern .dash-date{
  position:relative;z-index:1;
  margin-top:15px;
  color:var(--vs-gold);
  font-size:.62rem;
  letter-spacing:2.1px;
}

.vs-daythread{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:fit-content;
  max-width:100%;
  margin:13px auto 4px;
  padding:8px 13px;
  color:var(--vs-soft);
  font-size:.69rem;
  letter-spacing:.65px;
  border:1px solid rgba(226,199,143,.16);
  border-radius:999px;
  background:rgba(21,18,20,.52);
}
.vs-daythread:before{
  content:"";
  flex:0 0 auto;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--vs-gold);
  box-shadow:0 0 10px rgba(214,183,114,.9);
}

.vs-northern .dash-moon{margin:11px auto -1px}
.vs-northern .sky-phase{
  margin-top:3px;
  color:var(--vs-ink);
  font-size:1.28rem;
  letter-spacing:.25px;
}
.vs-northern .cyclephase{max-width:300px;margin:8px auto 22px}
.vs-northern .cyclebar{height:3px;background:rgba(232,217,189,.12)}
.vs-northern .cyclefill{background:linear-gradient(90deg,#83755a,var(--vs-gold),#f0ddab);box-shadow:0 0 9px rgba(214,183,114,.4)}
.vs-northern .cyclecap{margin-top:9px;color:var(--vs-soft);font-size:.68rem;letter-spacing:.5px}

.vs-northern .dash-card{
  margin-top:12px;
  padding:18px 18px 17px;
  border:1px solid rgba(226,199,143,.16);
  border-radius:22px;
  background:linear-gradient(142deg,rgba(48,39,36,.72),rgba(18,16,20,.72));
  box-shadow:inset 0 1px rgba(255,247,224,.045),0 12px 27px rgba(0,0,0,.13);
}
.vs-northern .dash-card:before{opacity:.08}
.vs-northern .dash-card.insight-card{
  border-color:rgba(145,171,146,.3);
  background:linear-gradient(142deg,rgba(49,63,53,.55),rgba(18,20,20,.75));
}
.vs-northern .dash-card.dream-card{
  border-color:rgba(151,142,191,.27);
  background:linear-gradient(142deg,rgba(46,42,65,.58),rgba(18,16,24,.75));
}
.vs-northern .dc-label{
  color:var(--vs-gold);
  font-size:.66rem;
  letter-spacing:2.15px;
}
.vs-northern .dash-msg{
  margin-top:11px;
  color:var(--vs-ink);
  font-size:.94rem;
  line-height:1.7;
}
.vs-northern .dash-card .stat-grid{gap:8px}
.vs-northern .dash-card .stat{
  padding:10px 8px;
  border:1px solid rgba(226,199,143,.1);
  border-radius:13px;
  background:rgba(8,8,11,.16);
}
.vs-northern .dash-card .stat .k{color:var(--vs-soft);font-size:.61rem;letter-spacing:.5px}
.vs-northern .dash-card .stat .v{margin-top:3px;color:var(--vs-ink);font-size:.86rem}
.vs-northern .dash-cal-btn,.vs-northern .btn-ghost{
  min-height:45px;
  margin-top:15px;
  padding:11px 21px;
  color:#2c2417;
  font-size:.69rem;
  font-weight:500;
  letter-spacing:1.25px;
  border:1px solid rgba(244,222,169,.72);
  background:linear-gradient(130deg,#dec489,#b9985c);
  box-shadow:0 8px 21px rgba(0,0,0,.2);
}
.vs-northern .dash-cal-btn:active,.vs-northern .btn-ghost:active{background:#e7ce96;transform:translateY(1px)}
.vs-northern .dc-more{color:var(--vs-gold);letter-spacing:1.1px}

.vs-northern + .nav,
.vs-northern ~ .nav,
.nav.vs-northern-nav{
  left:12px;
  right:12px;
  bottom:max(10px,env(safe-area-inset-bottom));
  max-width:486px;
  padding:7px 4px;
  border:1px solid rgba(226,199,143,.2);
  border-radius:20px;
  background:rgba(18,16,20,.88);
  box-shadow:0 12px 34px rgba(0,0,0,.38),inset 0 1px rgba(255,246,220,.05);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.nav.vs-northern-nav button{position:relative;min-height:47px;padding:5px 2px;color:#938979;font-size:.57rem;letter-spacing:.15px}
.nav.vs-northern-nav button .ic{position:relative;z-index:1;font-size:1.14rem}
.nav.vs-northern-nav button.on{color:var(--vs-ink)}
.nav.vs-northern-nav button.on:before{
  content:"";
  position:absolute;inset:1px 4px;
  border-radius:13px;
  background:rgba(214,183,114,.13);
}
.nav.vs-northern-nav button.on .ic{color:var(--vs-gold)}

.vs-northern .vs-engagement{margin-top:14px;gap:10px}
.vs-northern .vs-engagement-card{
  border-color:rgba(226,199,143,.17);
  border-radius:20px;
  background:linear-gradient(142deg,rgba(47,39,36,.64),rgba(17,15,19,.71));
}
.vs-northern .vs-dynamics{border-color:rgba(145,171,146,.3)}

@media (max-width:360px){
  .vs-northern.app.sky.dash{padding-left:11px;padding-right:11px}
  .vs-northern .dash-name{font-size:2.18rem}
  .nav.vs-northern-nav{left:6px;right:6px}
  .nav.vs-northern-nav button{font-size:.52rem}
}