/* Pro reach (2026-09-19): the top-bar pill and the upgrade sheet. Linked from
   index.html after the app stylesheets. The pill used white text on the mint
   gradient, which nearly vanished in the dark theme; it is now ink on a
   mint-to-sky gradient with a slow shimmer, readable on both themes. */
.os-top-nav__upgrade {
  color: #0E1A15 !important;
  background: linear-gradient(110deg, #C8F5AD 0%, #9BE8C4 38%, #E9FFD9 50%, #9BE8C4 62%, #80C8EF 100%) !important;
  background-size: 220% 100% !important;
  box-shadow: 0 4px 16px rgba(128, 214, 170, 0.45), inset 0 0 0 1px rgba(14, 26, 21, 0.12) !important;
  animation: kv-pill-shimmer 7s ease-in-out infinite;
}
.os-top-nav__upgrade svg { color: #0E1A15; }
.os-top-nav__upgrade:hover { box-shadow: 0 8px 22px rgba(128, 214, 170, 0.6), inset 0 0 0 1px rgba(14, 26, 21, 0.16) !important; }
@keyframes kv-pill-shimmer {
  0%, 70% { background-position: 100% 0; }
  100% { background-position: -20% 0; }
}
@media (prefers-reduced-motion: reduce) { .os-top-nav__upgrade { animation: none; } }

/* Upgrade sheet: always the dark brand card, like the Pro page hero. */
.kv-upsheet-backdrop {
  position: fixed; inset: 0; z-index: 10050; display: grid; place-items: center; padding: 16px;
  background: rgba(6, 12, 9, 0.55); animation: kv-upsheet-fade 0.18s ease both;
}
.kv-upsheet-backdrop.is-leaving { animation: kv-upsheet-fade 0.18s ease reverse both; }
.kv-upsheet {
  position: relative; width: min(440px, 100%); padding: 28px 24px 20px; border-radius: 26px; box-sizing: border-box;
  background:
    radial-gradient(70% 60% at 85% 0%, rgba(200, 245, 173, 0.24), transparent 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(128, 200, 239, 0.16), transparent 70%),
    #0E1A15;
  color: #F1F3E9; font-family: 'DM Sans', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(200, 245, 173, 0.12);
  animation: kv-upsheet-rise 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.kv-upsheet__mark {
  display: grid; place-items: center; width: 48px; height: 48px; margin-block-end: 14px; border-radius: 16px;
  background: #C8F5AD; color: #0E1A15; font-size: 22px;
}
.kv-upsheet h2 { margin: 0 0 8px; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: #F1F3E9; }
.kv-upsheet[dir="rtl"] h2 { letter-spacing: 0; line-height: 1.35; }
.kv-upsheet__body { margin: 0; font-size: 15px; line-height: 1.6; color: #C9D4CC; }
.kv-upsheet__price {
  display: inline-block; margin: 12px 0 0; padding: 5px 11px; border-radius: 999px;
  background: rgba(200, 245, 173, 0.14); color: #C8F5AD; font-size: 14px; font-weight: 700;
}
.kv-upsheet__price[hidden] { display: none; }
.kv-upsheet__actions { display: grid; gap: 8px; margin-block-start: 20px; }
.kv-upsheet button { font: inherit; cursor: pointer; }
.kv-upsheet .kv-upsheet__primary {
  min-height: 52px; border: 0; border-radius: 14px; background: #C8F5AD; color: #0E1A15; font-size: 16px; font-weight: 700;
  box-shadow: 0 12px 30px -12px rgba(200, 245, 173, 0.8);
}
.kv-upsheet .kv-upsheet__primary:hover { filter: brightness(1.05); }
.kv-upsheet .kv-upsheet__secondary { min-height: 44px; border: 0; border-radius: 12px; background: transparent; color: #AEBDB4; font-size: 15px; }
.kv-upsheet .kv-upsheet__close {
  position: absolute; inset-block-start: 12px; inset-inline-end: 12px; width: 36px; height: 36px; min-height: 36px; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #AEBDB4; font-size: 22px; line-height: 1;
}
.kv-upsheet button:focus-visible { outline: 3px solid #80C8EF; outline-offset: 3px; }
@media (max-width: 639px) {
  .kv-upsheet-backdrop { place-items: end stretch; padding: 8px; }
  .kv-upsheet { width: 100%; border-radius: 24px 24px 18px 18px; padding-block-end: calc(18px + env(safe-area-inset-bottom)); }
}
@keyframes kv-upsheet-fade { from { opacity: 0; } }
@keyframes kv-upsheet-rise { from { opacity: 0; transform: translateY(24px) scale(0.98); } }
@media (prefers-reduced-motion: reduce) {
  .kv-upsheet-backdrop, .kv-upsheet-backdrop.is-leaving, .kv-upsheet { animation: none; }
}