/* Early-preview notice (test-mode.js): a card centred at the bottom of the window, full width on phones. */
#vc-test-notice {
  position: fixed; z-index: 10000; left: 50%; bottom: 24px;
  display: flex; align-items: center; gap: 16px;
  width: min(680px, calc(100vw - 48px)); box-sizing: border-box; padding: 16px 16px 16px 18px;
  border: 1px solid transparent; border-radius: 22px;
  background: linear-gradient(#0e1336, #0b0f2c) padding-box, linear-gradient(135deg, rgba(51,160,255,.75), rgba(118,120,246,.75)) border-box;
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.85), 0 0 40px -10px rgba(90,120,255,.45);
  color: #fff; font: 15px/1.45 var(--font, system-ui, sans-serif);
  transform: translateX(-50%); translate: 0 20px; opacity: 0;
  transition: opacity .35s ease, translate .45s cubic-bezier(.2, .8, .2, 1);
}
#vc-test-notice[hidden] { display: none; }
#vc-test-notice.in { translate: 0 0; opacity: 1; }
.vtn-icon {
  flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px;
  background: linear-gradient(135deg, #33a0ff, #7678f6); box-shadow: 0 6px 18px -6px rgba(51,160,255,.8);
}
.vtn-icon svg { width: 22px; height: 22px; fill: #fff; }
.vtn-text { flex: 1; min-width: 0; }
.vtn-text b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 2px; }
.vtn-text span { display: block; color: #c3c9ea; }
.vtn-hide {
  flex: none; min-height: 46px; padding: 0 26px; border: 0; border-radius: 999px;
  background: #fff; color: #0a0d2c; font: 700 16px/1 var(--font, system-ui, sans-serif); cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(255,255,255,.45);
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease, background .2s ease;
}
.vtn-hide:hover { transform: translateY(-1px); background: #eef1ff; box-shadow: 0 10px 24px -8px rgba(255,255,255,.55); }
.vtn-hide:active { transform: scale(.97); }
.vtn-hide:focus-visible { outline: 3px solid #33a0ff; outline-offset: 3px; }
@media (max-width: 640px) {
  #vc-test-notice {
    left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); width: auto;
    flex-wrap: wrap; align-items: flex-start; gap: 14px; padding: 16px; transform: none;
  }
  .vtn-icon { width: 38px; height: 38px; border-radius: 12px; }
  .vtn-text span { font-size: 14.5px; }
  .vtn-hide { width: 100%; min-height: 50px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { #vc-test-notice { transition: none; } }