/* Live interface surfaces inspired by the supplied emerald-glass reference. */
@font-face { font-family: VaultMontserrat; src: url('./assets/montserrat-variable.ttf') format('truetype'); font-style: normal; font-weight: 100 900; font-display: swap; }
:root { --green: #34f69b; font-family: VaultMontserrat, sans-serif; }
body, button, input, select, textarea, .vaultify-adsgram-task { font-family: VaultMontserrat, sans-serif; letter-spacing: 0; }
.app-screen { padding-top: 18px; }
.topbar { margin-bottom: 14px; }
.brand { font-size: 27px; font-weight: 700; line-height: 1.15; }
.brand .shield { width: 42px; height: 46px; flex-basis: 42px; }
.lang-toggle { width: 36px; height: 36px; border: 1px solid #536d70; border-radius: 8px; background: linear-gradient(145deg, #1b3033, #071211); box-shadow: inset 0 1px 0 #c5e5df18; }
.balance-card, [data-view='home'] .vault-card, .refresh-task {
  border-radius: 8px;
  border: 1px solid #8dadab38;
  background:
    linear-gradient(150deg, #d1fff70b, transparent 24%),
    linear-gradient(110deg, #0b211bfa, #040e0df5 52%, #0b372af0);
  box-shadow: inset 0 1px 0 #c9fff229, inset 0 -1px 0 #0009, 0 8px 20px #0005;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.balance-card { min-height: 172px; margin-bottom: 18px; padding: 18px; border-color: #8dadab38; box-shadow: inset 10px 0 18px -15px #26ffb1aa, inset -10px 0 18px -15px #26ffb177, inset 0 1px 0 #afffdc1a, 0 8px 20px #0005; }
.balance-card::after, [data-view='home'] .vault-card::after, .refresh-task::after {
  display: block;
  content: '';
  position: absolute;
  z-index: 3;
  inset: auto 10px 0;
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, #5bffc655, #90ffca, #5bffc655, transparent);
  box-shadow: 0 0 7px #32faaf88;
  mask-image: none;
  pointer-events: none;
}
.balance-card::before {
  display: block;
  content: '';
  position: absolute;
  top: 0;
  right: 10px;
  left: auto;
  bottom: auto;
  height: 1px;
  width: 38%;
  transform: none;
  background: linear-gradient(90deg, transparent, #6dffc2, transparent);
  box-shadow: 0 0 10px #38ffb2;
  border: 0;
  pointer-events: none;
}
.balance-copy { width: 55%; }
.balance-copy h1, .balance-copy p { width: 100%; min-width: 0; white-space: nowrap; }
.balance-label { font-size: 14px; font-weight: 400; line-height: 1.4; color: #b8c7c9; }
.balance-copy h1 { font-size: 38px; margin: 17px 0 14px; gap: 5px; line-height: 1.1; }
.balance-copy h1::before { content: ''; width: 33px; height: 33px; flex: 0 0 33px; background: url('./assets/vlt-coin-v1.webp') center / contain no-repeat; filter: drop-shadow(0 2px 3px #0008); }
.balance-copy h1 span { display: none; font-size: .5em; color: #bac7cc; margin: 0; }
.balance-copy h1 span::before { display: none; }
.balance-copy p { font-weight: 600; font-size: 17px; line-height: 1.3; }
.hero-safe { width: 59%; max-width: none; height: 165px; object-fit: contain; object-position: right bottom; right: -2px; bottom: 0; z-index: 1; filter: drop-shadow(0 0 6px #2efba228); }
[data-view='home'] .vault-card { padding: 17px 16px 14px; }
.vault-card::before, .vault-head::before { display: none; }
.vault-head { min-height: 112px; }
.vault-head > div { position: relative; z-index: 2; }
.vault-head h2 { font-size: 24px; font-weight: 700; line-height: 1.2; }
.vault-head h2 .heading-currency { color: #64eab1; }
.counter { font-size: 39px; font-weight: 700; line-height: 1.15; margin-top: 15px; }
.counter span { color: #b8c6ce; }
.vault-gift { position: absolute; width: 53%; height: 110px; object-fit: contain; object-position: right bottom; right: -15px; bottom: 0; margin: 0; filter: drop-shadow(0 0 5px #23fa9544); }
.progress { height: 13px; border: 1px solid #6d998f; padding: 1px; border-radius: 20px; background: #071410; box-shadow: inset 0 2px 3px #0009; }
.progress span { border-radius: 20px; background: linear-gradient(90deg, #00c965, #60ffc1); box-shadow: inset 0 1px 0 #beffe9a6, 0 0 8px #00ef99a6; }
.hint { color: #afc0c6; font-size: 13px; font-weight: 400; line-height: 1.45; margin: 12px 0 14px; }
.watch-button { min-height: 53px; border: 1px solid #63ba945c; border-radius: 8px; background: linear-gradient(165deg, #237b57, #125438 38%, #082e23); box-shadow: inset 0 1px 0 #c0ffe536, inset 0 -1px 0 #031c14, 0 3px 10px #0004, 0 0 8px #10ffa516; padding: 0 10px; gap: 8px; color: #f2fff8; text-shadow: 0 1px 1px #00180f66; }
.watch-button .play { width: 28px; height: 29px; flex-basis: 28px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.watch-button .play img { width: 28px; height: 29px; object-fit: contain; filter: drop-shadow(0 2px 3px #00351f66); }
.watch-button:active { transform: translateY(1px); filter: brightness(.9); }
.watch-button.is-loading { filter: brightness(.86); box-shadow: inset 0 2px 8px #00361e55; }
.watch-button.is-loading > strong { display: none; }
.watch-button.is-loading > span:last-of-type { flex: 1; text-align: center; font-size: 12px; }
.adsgram-reward .adsgram-vlt-coin { width: 18px; height: 18px; flex: 0 0 18px; display: block; border: 0; border-radius: 0; background: none; box-shadow: none; object-fit: contain; }
.watch-button strong { color: #ffe384; }
.adsgram-slot { margin-top: 14px; }
.adsgram-slot { min-height: 0; }
.adsgram-slot .vaultify-adsgram-task { min-height: 0; height: auto; padding: 12px 11px; }
.refresh-task { min-height: 79px; padding: 12px 14px; gap: 13px; }
.refresh-task-icon { width: 46px; height: 46px; flex-basis: 46px; border-radius: 50%; border: 1px solid #90f7ff; background: linear-gradient(145deg, #09d4ff, #0285d7); box-shadow: 0 0 10px #0ad9ff66, inset 0 1px 0 #d6ffff66; }
.refresh-task-copy > strong { font-size: 15px; font-weight: 700; line-height: 1.3; }
.refresh-task-copy p { font-size: 14px; }
.refresh-task button { width: 39px; height: 39px; flex-basis: 39px; border-radius: 50%; border: 1px solid #527f79; background: linear-gradient(145deg, #244e41, #071f16); box-shadow: 0 0 0 4px #071a1777, inset 0 1px 0 #bcffdf1f; color: #79ffb6; }
.rewards-card { margin-top: 17px; }
.rewards-head { position: relative; padding-left: 12px; margin-bottom: 12px; }
.rewards-head::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; border-radius: 2px; background: #16f68a; box-shadow: 0 0 7px #12fd8e55; }
.rewards-head h2 { font-size: 21px; font-weight: 700; line-height: 1.25; }
.reward { min-height: 154px; border-radius: 8px; border: 1px solid #5c818a; padding: 10px 5px 21px; grid-template-rows: 39px 23px 18px 24px; background: linear-gradient(145deg, #203539, #0b171b 62%, #132327); box-shadow: inset 0 1px 0 #d2eef522; }
.reward.is-open { border-color: #7cd5aa45; background: linear-gradient(145deg, #083b26, #031d11 63%, #0c3a23); box-shadow: inset 5px 0 12px -10px #0bff99, inset -5px 0 12px -10px #0bff99; }
.reward::before, .reward.is-open::before { display: none; }
.reward.is-open { box-shadow: inset 0 0 20px #04ee7c22, 0 0 12px #04ee7c27; }
.reward-icon { width: 36px; height: 36px; border: 1px solid #8baab4; background: linear-gradient(145deg, #213c44, #0b1b20); box-shadow: inset 0 1px 0 #b7e5f629; }
.reward.is-open .reward-icon { border-color: #66ffb5; background: #003a20; box-shadow: inset 0 0 7px #07ff7022, 0 0 8px #00ff8866; }
.reward-icon img { width: 27px; height: 27px; }
.reward > strong { font-size: 25px; font-weight: 700; line-height: 1; }
.reward > span { font-size: 12px; font-weight: 400; line-height: 1.3; color: #d0dadc; }
.reward em { font-size: 11px; border: 0; padding-top: 2px; }
.tabbar { bottom: 6px; width: min(calc(100% - 20px), 420px); border: 1px solid #36675b; border-radius: 8px; min-height: 73px; background: linear-gradient(110deg, #0a3023f5, #071816fc 45%, #0d1d21fa); box-shadow: inset 0 1px 0 #afffe91c; }
.tab.is-active svg { filter: drop-shadow(0 0 5px #14ff9277); }

/* Light falls along the sides instead of outlining every card in green. */
.balance-card::before, [data-view='home'] .vault-card::before, .refresh-task::before {
  display: block;
  content: '';
  position: absolute;
  inset: 8px auto 16px 0;
  width: 1px;
  height: auto;
  border: 0;
  border-radius: 0;
  transform: none;
  z-index: 3;
  background: linear-gradient(180deg, transparent, #a4ffe08c 18%, #33edb44d 50%, transparent 85%);
  box-shadow: 0 0 7px 1px #21ffb342;
  pointer-events: none;
}
.balance-card::after, [data-view='home'] .vault-card::after, .refresh-task::after {
  inset: 12px 0 8px auto;
  width: 1px;
  height: auto;
  background: linear-gradient(180deg, transparent 10%, #6bffc03d 40%, #a4ffe096 72%, transparent);
  box-shadow: 0 0 8px 1px #21ffb33b;
}
.refresh-task::before, .refresh-task::after { box-shadow: 0 0 6px 1px #5fdbc627; }
[data-view='home'] .vault-card { box-shadow: inset 8px 0 15px -12px #51f4b488, inset -8px 0 15px -12px #51f4b455, inset 0 1px 0 #c9fff21a, 0 8px 20px #0005; }
@media (max-width: 360px) {
  .balance-card { padding: 14px; min-height: 156px; }
  .balance-copy h1 { font-size: 31px; }
  .balance-copy h1 span { font-size: .5em; }
  .balance-copy h1::before { width: 28px; height: 28px; flex-basis: 28px; }
  .hero-safe { height: 148px; }
  .vault-head h2 { font-size: 21px; }
  .counter { font-size: 32px; }
  .watch-button { gap: 5px; padding: 0 8px; }
  .refresh-task { padding: 12px; gap: 9px; }
  .refresh-task-copy > strong { font-size: 13px; }
  .refresh-task-copy p { font-size: 12px; }
  .refresh-task-icon { width: 39px; height: 39px; flex-basis: 39px; }
  .refresh-task button { width: 33px; height: 33px; flex-basis: 33px; }
  .rewards-head h2 { font-size: 18px; }
  .reward em { font-size: 10px; }
}