/*
 * Vestnik Severnoy — Reference Match 20260902-7
 * Matches the approved warm-ivory editorial mockups while preserving live UI.
 */

:root {
  --vr-ivory: #f4ead8;
  --vr-ivory-hi: #fff9ee;
  --vr-ivory-lo: #e7d9c5;
  --vr-navy: #12324b;
  --vr-navy-2: #244b64;
  --vr-blue: #6f8791;
  --vr-gold: #b28a4b;
  --vr-copper: #b77f68;
  --vr-sage: #6f7d70;
  --vr-line: rgba(158, 123, 72, .30);
  --vr-ink-soft: #52656e;
  --vr-shadow: rgba(61, 65, 61, .23);
  --bg: var(--vr-ivory);
  --bg-2: var(--vr-ivory-lo);
  --card: rgba(249, 240, 225, .97);
  --card-2: rgba(244, 233, 215, .98);
  --ink: var(--vr-navy);
  --ink-soft: var(--vr-ink-soft);
  --muted: #728084;
  --gold: var(--vr-gold);
  --line: var(--vr-line);
  --blue: var(--vr-blue);
  --good: #6f8777;
  --bad: #ad716b;
  --radius: 28px;
}

html,
body,
#root {
  min-height: 100%;
  color-scheme: light;
}

html { background: #eee4d2; }

body,
body.vs-reference-body {
  margin: 0;
  color: var(--vr-navy) !important;
  font-family: Manrope, Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  font-weight: 400;
  background: #eee4d2 !important;
}

body::before,
body.vs-reference-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 250, 240, .08), rgba(244, 234, 216, .02)),
    url("/assets/vestnik-reference-aurora-bg.jpg?v=20260902-7") center top / cover no-repeat;
}

body::after,
body.vs-reference-body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .10;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.73' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

.vs-ref-static-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("/assets/vestnik-reference-aurora-bg.jpg?v=20260902-7") center top / cover no-repeat;
  transform: translateZ(0);
}

button,
input,
textarea,
select { font-family: Manrope, Montserrat, sans-serif; }

.serif,
.slabel-text,
.dash-name,
.dc-label,
.dash-msg,
.sky-phase,
.cal-head .m,
.dp-date,
.day-title,
.prof-name,
.dsoul-hi,
.jrow-title,
.ed-date,
.tariff-title,
.tariff-price,
.ta-name,
.dream-omen,
.vs-ref-title,
.vs-ref-hero-title,
.vs-ref-hero-copy {
  font-family: "Cormorant Garamond", Cormorant, Georgia, serif !important;
}

.app,
.app.sky,
.app.sky.dash,
.app.vs-reference-app {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  min-height: 100vh;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 22px 15px calc(122px + env(safe-area-inset-bottom)) !important;
  overflow: visible;
  color: var(--vr-navy) !important;
  background: transparent !important;
  isolation: isolate;
}

.app::before,
.app::after { content: none !important; }

/* Exact header rhythm from the approved mockups. */
.vs-ref-header {
  position: relative;
  min-height: 142px;
  box-sizing: border-box;
  padding: 45px 8px 15px;
  text-align: center;
  color: var(--vr-navy);
}

.vs-ref-header::before {
  content: "◆";
  position: absolute;
  top: 16px;
  left: 50%;
  color: var(--vr-gold);
  font-size: 12px;
  transform: translateX(-50%) rotate(45deg);
  text-shadow: 0 2px 6px rgba(126, 92, 45, .18);
}

.vs-ref-header::after {
  content: "";
  position: absolute;
  top: 22px;
  left: calc(50% - 70px);
  width: 140px;
  height: 1px;
  opacity: .65;
  background: linear-gradient(90deg, transparent, var(--vr-gold) 35%, transparent 35% 65%, var(--vr-gold) 65%, transparent);
}

.vs-ref-title {
  display: block;
  margin: 0;
  color: var(--vr-navy);
  font-size: clamp(2.05rem, 9.2vw, 3.35rem);
  font-weight: 500;
  line-height: .93;
  letter-spacing: -.045em;
  white-space: nowrap;
}

.vs-ref-subtitle {
  display: block;
  margin-top: 13px;
  color: var(--vr-navy-2);
  font-size: .82rem;
  font-weight: 400;
  letter-spacing: .04em;
}

.vs-ref-top-button {
  position: absolute;
  top: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: var(--vr-navy);
  border: 1px solid rgba(180, 139, 77, .52);
  border-radius: 50%;
  background: linear-gradient(145deg, #fffaf0, #eadcca);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.95),
    inset 0 -1px rgba(114, 103, 86, .14),
    0 3px 0 rgba(158, 143, 121, .18),
    0 8px 14px rgba(66, 65, 60, .14);
}

.vs-ref-profile { left: 0; }
.vs-ref-notice { right: 0; }
.vs-ref-top-button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.45; }

.dash > .dash-head { display: none !important; }
.vs-daythread { display: none !important; }
.sky-top { display: none !important; }

.dash > .vs-ref-header {
  min-height: 150px;
  padding-left: 8px;
  padding-right: 8px;
}

.dash > .vs-ref-header .vs-ref-title {
  font-size: clamp(2.15rem, 10.7vw, 3.2rem);
  white-space: nowrap;
}

/* Ivory panel construction: inset keyline, soft bevel, low paper shadow. */
.dash-card,
.vs-engagement-card,
.checkin,
.tariff-card,
.locked-card,
.sky-locked,
.day-pop,
.garden-today,
.planting-card,
.today-prev,
.dsoul-create,
.legal-doc,
.subscription-manage,
.preview-cycle-card,
.prof-hero,
.prof-stats,
.sub-info,
.jgroup,
.monthgrid,
.heat,
.seg,
.dsoul-head,
.insights {
  position: relative;
  color: var(--vr-navy) !important;
  border: 1px solid rgba(255, 255, 255, .94) !important;
  border-radius: 27px !important;
  background:
    linear-gradient(145deg, rgba(255, 250, 240, .98), rgba(235, 222, 202, .97)),
    var(--vr-ivory) !important;
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(122, 111, 94, .16),
    0 4px 0 rgba(160, 145, 121, .20),
    0 14px 27px rgba(60, 63, 61, .17) !important;
}

.dash-card::after,
.prof-hero::after,
.dsoul-head::after,
.jgroup::after,
.monthgrid::after,
.sub-info::after,
.insights::after {
  content: "";
  position: absolute;
  inset: 7px;
  z-index: 0;
  pointer-events: none;
  border: 1px solid rgba(181, 139, 78, .18);
  border-radius: 21px;
}

.dash-card > *,
.prof-hero > *,
.dsoul-head > *,
.jgroup > *,
.monthgrid > *,
.sub-info > *,
.insights > * { position: relative; z-index: 1; }

/* Home hero: one-to-one proportions from the approved screen. */
.sky-moon,
.dash-moon {
  position: relative;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  max-width: 344px;
  min-height: 330px;
  box-sizing: border-box;
  margin: 0 auto 22px !important;
  padding: 45px 15px 14px !important;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .96) !important;
  border-radius: 34px !important;
  background: linear-gradient(145deg, rgba(255, 250, 240, .985), rgba(235, 222, 202, .97)) !important;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.98),
    inset 0 -1px rgba(119,103,82,.16),
    0 5px 0 rgba(158,143,119,.22),
    0 18px 34px rgba(58,62,60,.19) !important;
}

.sky-moon.vs-ref-flora-host,
.dash-moon.vs-ref-flora-host,
.dash-card.vs-ref-flora-host {
  overflow: visible;
}

.vs-ref-card-flora {
  position: absolute !important;
  display: block;
  box-sizing: border-box;
  pointer-events: none;
  background-repeat: no-repeat;
  transform: translateZ(0);
}

.vs-ref-card-flora--hero-left,
.vs-ref-card-flora--hero-right {
  bottom: -70px;
  z-index: 1 !important;
  width: 112px;
  height: 252px;
  opacity: .92;
  background-image: url("/assets/vestnik-reference-flora-mid-v2.png?v=20260902-7");
  background-size: 286px auto;
  filter:
    saturate(.82)
    brightness(1.05)
    contrast(.96)
    drop-shadow(0 10px 12px rgba(39, 51, 48, .22));
}

.vs-ref-card-flora--hero-left {
  left: -38px;
  background-position: left bottom;
}

.vs-ref-card-flora--hero-right {
  right: -38px;
  background-position: right bottom;
}

.sky-moon::before,
.dash-moon::before {
  content: "";
  position: absolute;
  inset: 8px;
  pointer-events: none;
  border: 1px solid rgba(181, 139, 78, .22);
  border-radius: 27px;
}

.sky-moon::after,
.dash-moon::after {
  content: "";
  position: absolute;
  top: 78px;
  left: 50%;
  width: 190px;
  height: 190px;
  pointer-events: none;
  border-radius: 50%;
  opacity: .55;
  transform: translateX(-50%);
  background: repeating-conic-gradient(from 0deg, rgba(178,138,75,.42) 0 .45deg, transparent .45deg 5deg);
  -webkit-mask: radial-gradient(circle, transparent 0 47%, #000 47.5% 49%, transparent 49.5%);
  mask: radial-gradient(circle, transparent 0 47%, #000 47.5% 49%, transparent 49.5%);
}

.vs-ref-hero-title {
  position: absolute;
  top: 24px;
  left: 20px;
  right: 20px;
  z-index: 2;
  color: var(--vr-navy);
  font-size: 1.85rem;
  font-weight: 500;
  line-height: 1;
  text-align: center;
}

.phase-hero,
.sky-moon > .phase-hero {
  position: relative;
  z-index: 2;
  width: 150px !important;
  height: 150px !important;
  flex: 0 0 150px;
  margin-top: 20px;
  overflow: hidden;
  border: 2px solid rgba(184, 140, 76, .72);
  border-radius: 50%;
  background:
    radial-gradient(circle at 36% 27%, rgba(84, 116, 134, .50), transparent 33%),
    radial-gradient(circle at 50% 56%, #244a63, #12324b 68%, #0b2639);
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.18),
    inset 0 -10px 20px rgba(0,12,22,.38),
    0 0 0 8px rgba(247,237,222,.98),
    0 0 0 9px rgba(178,138,75,.44),
    0 13px 25px rgba(31,49,60,.26);
}

.phase-hero::before {
  content: "";
  position: absolute;
  inset: 12px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(226, 198, 148, .55);
  border-radius: 50%;
}

.field-img,
.phase-fog,
.vs-live-sky-field,
.vs-sky-caption,
.vs-sky-lines,
.vs-constellation-star,
.vs-constellation-label,
.vs-background-star,
.vs-real-star,
.vs-real-planet { display: none !important; }

.phase-moon {
  width: 78% !important;
  height: 78% !important;
  object-fit: contain;
  filter: sepia(.28) saturate(.56) brightness(1.28) contrast(.94) drop-shadow(0 7px 8px rgba(2,16,27,.32));
}

.phase-glow {
  width: 88%;
  height: 88%;
  opacity: .72;
  background: radial-gradient(closest-side, rgba(255,245,212,.32), rgba(187,204,207,.11) 55%, transparent 75%);
  filter: blur(8px);
}

.vs-ref-hero-copy {
  position: relative;
  z-index: 3;
  margin-top: 14px;
  color: var(--vr-navy);
  font-size: 1.14rem;
  font-weight: 500;
  line-height: 1;
}

.vs-ref-open {
  position: relative;
  z-index: 3;
  min-width: 168px;
  min-height: 44px;
  margin-top: 10px;
  padding: 0 24px;
  color: var(--vr-navy);
  font: 500 1.1rem "Cormorant Garamond", Georgia, serif;
  border: 1px solid rgba(181, 139, 78, .38);
  border-radius: 999px;
  background: linear-gradient(145deg, #fffaf0, #eadcca);
  box-shadow: inset 0 2px #fff, 0 3px 0 rgba(157,140,116,.18), 0 9px 16px rgba(66,65,60,.14);
}

.sky-phase { display: none !important; }

.cyclephase {
  max-width: 330px;
  margin: -8px auto 22px !important;
  padding: 9px 16px 11px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 999px;
  background: rgba(249,240,225,.92);
  box-shadow: inset 0 1px #fff, 0 3px 0 rgba(158,143,121,.15), 0 9px 18px rgba(61,65,61,.11);
}

.cyclebar { height: 3px; border-radius: 999px; background: rgba(18,50,75,.14); }
.cyclefill { background: linear-gradient(90deg, var(--vr-navy-2), var(--vr-gold)); }
.cyclecap { color: var(--vr-ink-soft); font-size: .66rem; }

.dash-card {
  margin: 13px 0 !important;
  padding: 25px 22px !important;
  text-align: center;
}

.dc-label {
  color: var(--vr-navy) !important;
  font-size: 1.38rem !important;
  font-weight: 500;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.dc-label::before {
  content: "◆";
  display: block;
  margin-bottom: 7px;
  color: var(--vr-gold);
  font-size: .55rem;
  transform: rotate(45deg);
}

.dash-msg,
.dream-text,
.sky-desc {
  color: var(--vr-navy-2) !important;
  font-size: .9rem;
  line-height: 1.65;
}

.dash-card.vs-ref-feature-card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: calc(50% - 7px);
  min-height: 292px;
  box-sizing: border-box;
  vertical-align: top;
  padding: 21px 14px !important;
}

.dash-card.vs-ref-feature-card + .dash-card.vs-ref-feature-card { margin-left: 10px !important; }

.dash-card.vs-ref-feature-card .vs-ref-card-flora {
  top: 18px;
  bottom: auto;
  z-index: 1 !important;
  width: 98px;
  height: 152px;
  opacity: .96;
  background-image: url("/assets/vestnik-reference-flora-front-v2.png?v=20260902-7");
  background-size: 224px auto;
  filter:
    saturate(.9)
    brightness(1.02)
    contrast(1.01)
    drop-shadow(0 8px 9px rgba(34, 45, 42, .23));
}

.dash-card.vs-ref-feature-card .vs-ref-card-flora--card-left {
  left: -27px;
  background-position: left bottom;
}

.dash-card.vs-ref-feature-card .vs-ref-card-flora--card-right {
  right: -27px;
  background-position: right bottom;
}

.dash-card.vs-ref-feature-card::before {
  content: "";
  position: relative;
  z-index: 2;
  display: block;
  opacity: 1;
  mix-blend-mode: normal;
  width: 112px;
  height: 112px;
  flex: 0 0 112px;
  margin: 5px auto 17px;
  border: 1px solid rgba(201,169,113,.70);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 31%, rgba(211,181,125,.7) 31.5% 32.5%, transparent 33%),
    repeating-conic-gradient(from 0deg, rgba(217,185,127,.75) 0 1deg, transparent 1deg 15deg),
    radial-gradient(circle, #244a63, #12324b 72%);
  box-shadow: 0 0 0 6px #f5ead8, 0 0 0 7px rgba(178,138,75,.35), 0 8px 16px rgba(37,52,60,.20);
}

.dash-card.vs-ref-feature-card:nth-of-type(even)::before {
  background:
    radial-gradient(circle at 50% 50%, #f5ead8 0 7%, transparent 8%),
    repeating-conic-gradient(from 0deg, rgba(217,185,127,.75) 0 1deg, transparent 1deg 30deg),
    radial-gradient(circle, #244a63, #12324b 72%);
}

.dash-card.vs-ref-feature-card .dash-msg {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: .74rem;
  line-height: 1.45;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.dash-cal-btn,
.btn-ghost,
.dc-more,
.dsoul-create,
.prof-city-btn,
.prof-name-btn {
  min-height: 46px;
  color: var(--vr-navy) !important;
  border: 1px solid rgba(181,139,78,.36) !important;
  border-radius: 999px !important;
  background: linear-gradient(145deg, #fffaf0, #e9dac6) !important;
  box-shadow: inset 0 2px #fff, 0 3px 0 rgba(157,140,116,.17), 0 9px 16px rgba(66,65,60,.12) !important;
}

.stat-grid { gap: 8px; }
.stat {
  border: 1px solid rgba(181,139,78,.20) !important;
  border-radius: 17px !important;
  background: rgba(255,250,240,.62) !important;
}
.stat .k { color: #788387 !important; }
.stat .v { color: var(--vr-navy) !important; }

.tarot-img {
  border: 7px solid #f7ecda;
  outline: 1px solid rgba(178,138,75,.40);
  box-shadow: 0 4px 0 rgba(158,143,121,.18), 0 16px 28px rgba(61,65,61,.18);
}

/* Calendar: generous book page grid. */
.slabel { color: var(--vr-navy); }
.slabel-line,
.cdiv-line { background: linear-gradient(90deg, transparent, rgba(178,138,75,.5), transparent) !important; }
.cdiv-star { border-color: var(--vr-gold) !important; transform: rotate(45deg); }

.cal-head {
  max-width: 430px;
  min-height: 64px;
  box-sizing: border-box;
  margin: 0 auto 14px !important;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.92);
  border-radius: 24px;
  background: linear-gradient(145deg, #fffaf0, #eadcca);
  box-shadow: inset 0 2px #fff, 0 4px 0 rgba(158,143,121,.18), 0 12px 22px rgba(61,65,61,.13);
}
.cal-head .m { color: var(--vr-navy) !important; font-size: 1.65rem !important; font-weight: 500; }
.cal-head button {
  width: 44px;
  height: 44px;
  color: #956f3a !important;
  border: 1px solid rgba(181,139,78,.27) !important;
  border-radius: 50% !important;
  background: linear-gradient(145deg,#fffaf0,#e9dac6) !important;
  box-shadow: inset 0 2px #fff,0 3px 0 rgba(157,140,116,.17),0 7px 12px rgba(66,65,60,.11);
}

.grid.monthgrid,
.grid.heat,
.preview-monthgrid {
  max-width: 430px;
  box-sizing: border-box;
  margin: 0 auto 20px !important;
  padding: 24px 13px 20px !important;
}
.grid .wd { color: #6e7779 !important; font: 500 .64rem Manrope,sans-serif; }
.cell { min-height: 3.25rem; color: var(--vr-navy) !important; border-radius: 14px !important; }
.cell .n { color: var(--vr-navy) !important; font: 500 1.25rem "Cormorant Garamond",Georgia,serif !important; }
.cell.sel {
  color: #fff7e8 !important;
  background: radial-gradient(circle at 35% 25%,#365f77,#12324b 70%) !important;
  box-shadow: 0 0 0 4px #f4ead8,0 0 0 5px rgba(178,138,75,.52),0 7px 14px rgba(35,51,60,.22) !important;
}
.cell.sel .n { color:#fff7e8 !important; }
.cell.today { background:transparent !important; }
.cell.today .n { color:#9a713d !important; border-color:rgba(178,138,75,.48) !important; }
.legend { color: var(--vr-ink-soft) !important; }

.day-pop {
  color: var(--vr-navy) !important;
  background: linear-gradient(145deg, rgba(255,250,240,.99),rgba(235,222,202,.99)) !important;
}
.dp-date { color:var(--vr-navy) !important; font-size:1.8rem !important; }
.dp-lunar,.dp-sign { color:var(--vr-navy-2) !important; }
.dp-card { border-color:rgba(178,138,75,.20) !important; background:rgba(255,250,240,.58) !important; }

/* Diary and soul sections. */
.seg {
  max-width: 440px;
  margin: 0 auto 17px !important;
  padding: 6px !important;
  border-radius: 20px !important;
}
.seg button { min-height:38px; color:var(--vr-ink-soft) !important; border-radius:15px !important; }
.seg button.on { color:var(--vr-navy) !important; background:#fff8eb !important; box-shadow:inset 0 1px #fff,0 3px 0 rgba(157,140,116,.15),0 7px 12px rgba(61,65,61,.11) !important; }

.dsoul-head {
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  max-width:440px;
  box-sizing:border-box;
  margin:0 auto 14px !important;
  padding:23px 22px !important;
}
.dsoul-hi { color:var(--vr-navy) !important; font-size:1.75rem !important; }
.dsoul-date { color:var(--vr-ink-soft) !important; }
.dsoul-streak { color:#9a713d !important; background:#fff7e8 !important; border-color:rgba(178,138,75,.25) !important; }
.dsoul-create { width:100%; margin:0 0 14px !important; }
.dsoul-mood { gap:8px !important; }
.facebtn {
  width:52px !important;
  height:52px !important;
  border:1px solid rgba(178,138,75,.30) !important;
  border-radius:50% !important;
  background:linear-gradient(145deg,#fffaf0,#eadcca) !important;
  box-shadow:inset 0 2px #fff,0 3px 0 rgba(157,140,116,.16),0 8px 13px rgba(61,65,61,.12) !important;
}
.today-prev,.jgroup { padding:17px !important; }
.jrow { color:var(--vr-navy) !important; border-color:rgba(178,138,75,.17) !important; }
.jrow-kind,.jrow-prev { color:var(--vr-navy-2) !important; }

.input,
.ed-area,
.ed-title,
.cityinput,
.prof-name-input,
.promo-input,
.ed-dateinput {
  color:var(--vr-navy) !important;
  color-scheme:light;
  border:1px solid rgba(178,138,75,.24) !important;
  background:rgba(255,250,240,.76) !important;
  box-shadow:inset 0 2px 5px rgba(66,65,60,.08) !important;
}

/* Profile. */
.prof-hero {
  max-width:440px;
  box-sizing:border-box;
  margin:0 auto 17px !important;
  padding:27px 19px 23px !important;
  text-align:center;
}
.prof-avatar,.prof-avatar-empty {
  display:grid !important;
  place-items:center;
  width:112px !important;
  height:112px !important;
  box-sizing:border-box;
  margin:0 auto 14px !important;
  overflow:hidden;
  border:8px solid #f7ecda !important;
  border-radius:50% !important;
  outline:1px solid rgba(178,138,75,.5);
  background:radial-gradient(circle at 35% 25%,#365f77,#12324b 70%) !important;
  color:#f7ecda !important;
  box-shadow:0 0 0 1px rgba(178,138,75,.32),0 13px 24px rgba(35,51,60,.22) !important;
}
.prof-name { color:var(--vr-navy) !important; font-size:2rem !important; }
.prof-meta { color:var(--vr-ink-soft) !important; }
.prof-stats { display:grid !important; grid-template-columns:repeat(2,1fr); gap:8px; padding:13px !important; }
.pstat { border:1px solid rgba(178,138,75,.17) !important; border-radius:18px !important; background:rgba(255,250,240,.52) !important; }
.pstat-n { color:var(--vr-navy) !important; }
.pstat-l { color:var(--vr-ink-soft) !important; }
.sub-info { padding:18px !important; }
.sub-row { border-color:rgba(178,138,75,.17) !important; }
.sub-row .k { color:var(--vr-ink-soft) !important; }
.sub-row .v { color:var(--vr-navy) !important; }

/* Loading and auth states also match the final application. */
.loader,
.center-screen {
  color:var(--vr-navy) !important;
  background:transparent !important;
}
.loader::before,
.center-screen::before {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  background:url("/assets/vestnik-reference-aurora-bg.jpg?v=20260902-7") center top / cover no-repeat;
}
.loader-fog { display:none !important; }
.loader-tri,.loader-brand { color:var(--vr-navy) !important; }
.loader-cap { color:var(--vr-ink-soft) !important; }
.err { color:#a56661 !important; }

/* Four-item porcelain navigation, as in the approved reference. */
.nav.vs-reference-nav {
  position:fixed !important;
  left:max(10px,calc((100vw - 480px)/2 + 10px)) !important;
  right:max(10px,calc((100vw - 480px)/2 + 10px)) !important;
  bottom:max(8px,env(safe-area-inset-bottom)) !important;
  z-index:100 !important;
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  width:auto !important;
  max-width:460px !important;
  min-height:87px;
  box-sizing:border-box;
  margin:0 auto !important;
  padding:8px 7px 7px !important;
  overflow:visible !important;
  border:1px solid rgba(255,255,255,.96) !important;
  border-radius:29px !important;
  background:linear-gradient(145deg,rgba(255,250,240,.985),rgba(232,218,197,.975)) !important;
  box-shadow:inset 0 2px 2px #fff,inset 0 -1px rgba(116,101,80,.16),0 5px 0 rgba(158,143,121,.22),0 18px 34px rgba(55,59,57,.24) !important;
}

.nav.vs-reference-nav button {
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0 !important;
  min-height:69px !important;
  gap:4px !important;
  padding:2px 1px 0 !important;
  color:var(--vr-navy) !important;
  font-size:clamp(.52rem,2.35vw,.62rem) !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.nav.vs-reference-nav button:last-child { display:none !important; }
.nav.vs-reference-nav button::before { content:none !important; }

.nav.vs-reference-nav .ic,
.nav.vs-reference-nav svg.ic {
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:50px !important;
  height:50px !important;
  box-sizing:border-box;
  margin:0 auto !important;
  padding:7px !important;
  color:var(--vr-navy) !important;
  border:1px solid rgba(255,255,255,.96) !important;
  border-radius:15px !important;
  background:linear-gradient(145deg,#fffaf0,#e6d7c2) !important;
  box-shadow:inset 0 2px 1px #fff,inset 0 -1px rgba(108,96,78,.16),0 4px 0 rgba(154,139,116,.20),0 9px 15px rgba(55,59,57,.18) !important;
  filter:none !important;
  transition:transform .18s ease,box-shadow .18s ease;
}

.nav.vs-reference-nav .vs-ref-nav-art {
  overflow: visible;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 1px rgba(72,61,45,.16));
}

.nav.vs-reference-nav .vs-ref-nav-art .nav-ivory { fill:#fbf1df; }
.nav.vs-reference-nav .vs-ref-nav-art .nav-paper { fill:#fffaf0; }
.nav.vs-reference-nav .vs-ref-nav-art .nav-gold { fill:#d2ae70; }
.nav.vs-reference-nav .vs-ref-nav-art .nav-gold-soft { fill:#ead8b6; }
.nav.vs-reference-nav .vs-ref-nav-art .nav-navy { fill:#17384f; }
.nav.vs-reference-nav .vs-ref-nav-art .nav-navy-line { fill:none; stroke:#17384f; stroke-width:1.65; }
.nav.vs-reference-nav .vs-ref-nav-art .nav-gold-line { fill:none; stroke:#a77a3e; stroke-width:1.55; }
.nav.vs-reference-nav .vs-ref-nav-art .nav-highlight { fill:none; stroke:rgba(255,255,255,.92); stroke-width:1.2; }

.nav.vs-reference-nav button.on {
  font-weight:600;
  transform:translateY(-5px);
  border:1px solid rgba(190,146,78,.62) !important;
  border-radius:19px !important;
  background:linear-gradient(145deg,rgba(255,250,240,.98),rgba(232,216,193,.98)) !important;
  box-shadow:inset 0 2px 1px #fff,inset 0 -1px rgba(109,93,70,.16),0 4px 0 rgba(145,112,66,.22),0 11px 18px rgba(55,59,57,.18) !important;
}
.nav.vs-reference-nav button.on .ic,
.nav.vs-reference-nav button.on svg.ic {
  color:#8f6937 !important;
  transform:none;
  border-color:rgba(190,146,78,.48) !important;
  background:radial-gradient(circle at 35% 24%,#fffdf5,transparent 36%),linear-gradient(145deg,#fff4df,#e5cfaa) !important;
  box-shadow:inset 0 2px #fff,inset 0 -1px rgba(108,75,34,.14),0 4px 0 rgba(137,104,59,.20),0 10px 16px rgba(55,59,57,.18) !important;
}

@media (max-width:380px) {
  .app,.app.sky,.app.sky.dash { padding-left:10px !important; padding-right:10px !important; }
  .vs-ref-header { min-height:132px; padding-left:47px; padding-right:47px; }
  .vs-ref-title { font-size:2.5rem; }
  .sky-moon,.dash-moon { min-height:320px; }
  .phase-hero,.sky-moon>.phase-hero { width:142px !important; height:142px !important; flex-basis:142px; }
  .sky-moon::after,.dash-moon::after { width:182px; height:182px; top:76px; }
  .dash-card.vs-ref-feature-card { min-height:280px; padding-left:10px !important; padding-right:10px !important; }
  .dash-card.vs-ref-feature-card::before { width:98px; height:98px; flex-basis:98px; }
  .nav.vs-reference-nav .ic,.nav.vs-reference-nav svg.ic { width:41px !important; height:41px !important; padding:8px !important; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}