/**
 * Auth-inspired visual system for the authenticated NexusVocab application.
 * The nv-app-ui body scope prevents these rules from leaking into Auth.
 */

body.nv-app-ui {
  --nv-paper: #f3efe5;
  --nv-card: #fffdf7;
  --nv-card-soft: rgba(255, 253, 247, .8);
  --nv-ink: #17322d;
  --nv-muted: #6d766f;
  --nv-line: #c9cec3;
  --nv-orange: #ef6b3a;
  --nv-orange-dark: #c94a2c;
  --nv-mint: #9fcdbd;
  --nv-mint-dark: #5f9e89;
  margin: 0;
  background:
    radial-gradient(circle at 7% 10%, rgba(239, 107, 58, .13), transparent 25rem),
    radial-gradient(circle at 92% 86%, rgba(95, 158, 137, .18), transparent 30rem),
    var(--nv-paper);
  color: var(--nv-ink);
  font-family: Inter, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@keyframes nv-friend-action-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes nv-friend-action-menu-in-above {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.nv-friend-action-menu {
  transform-origin: top right;
  animation: nv-friend-action-menu-in 160ms cubic-bezier(.2, .8, .2, 1) both;
}

.nv-friend-action-menu--above {
  transform-origin: bottom right;
  animation-name: nv-friend-action-menu-in-above;
}

@media (prefers-reduced-motion: reduce) {
  .nv-friend-action-menu { animation: none; }
}

body.nv-app-ui::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
  content: "";
  opacity: .3;
  pointer-events: none;
}

html.dark body.nv-app-ui {
  --nv-paper: #07111f;
  --nv-card: #0f1d31;
  --nv-card-soft: rgba(15, 29, 49, 0.82);
  --nv-ink: #f5f1e8;
  --nv-muted: #a9b7ca;
  --nv-line: rgba(148, 170, 202, 0.2);
  --nv-orange: #ef8159;
  --nv-orange-dark: #ffad88;
  --nv-mint: #294d73;
  --nv-mint-dark: #78a9d1;
  background:
    radial-gradient(circle at 50% 0%, rgba(47, 91, 145, 0.28) 0%, rgba(24, 48, 82, 0.12) 48%, transparent 78%),
    radial-gradient(circle at 10% 20%, rgba(239, 107, 58, 0.1), transparent 35rem),
    radial-gradient(circle at 90% 80%, rgba(62, 111, 168, 0.18), transparent 40rem),
    var(--nv-paper) !important;
  background-attachment: fixed !important;
}

html.dark body.nv-app-ui::before {
  opacity: 0.15 !important;
  mix-blend-mode: overlay;
}

body.nv-app-ui .nv-app-page {
  background: transparent !important;
  color: var(--nv-ink);
}

body.nv-app-ui .nv-study-page {
  background: transparent !important;
  color: var(--nv-ink);
}

body.nv-app-ui .nv-app-atmosphere > * {
  background: rgba(239, 107, 58, .08) !important;
  filter: blur(90px);
}

body.nv-app-ui .nv-app-atmosphere > *:last-child {
  background: rgba(95, 158, 137, .12) !important;
}

body.nv-app-ui .nv-app-content,
body.nv-app-ui .nv-study-grid {
  isolation: isolate;
}

body.nv-app-ui .nv-study-grid > *,
body.nv-app-ui .nv-study-stage,
body.nv-app-ui .nv-study-stage > * {
  min-width: 0;
  max-width: 100%;
}

body.nv-app-ui .nv-study-stage h1,
body.nv-app-ui .nv-study-stage h2 {
  overflow-wrap: anywhere;
}

body.nv-app-ui .nv-topbar-halo {
  display: none;
}

body.nv-app-ui .nv-topbar-surface {
  min-height: 58px;
  border: 2px solid var(--nv-ink) !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--nv-card) 94%, transparent) !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px);
}

body.nv-app-ui .nv-topbar-surface a {
  color: var(--nv-ink) !important;
}

@keyframes nv-topbar-wordmark-breathe {
  0%, 100% {
    opacity: .68;
    transform: scale(.94);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

.nv-topbar-wordmark {
  isolation: isolate;
}

.nv-topbar-wordmark-glow {
  inset: -.6rem -1.2rem;
  z-index: 0;
  background: radial-gradient(ellipse at center,
    rgba(255, 255, 255, .98) 0%,
    rgba(125, 211, 252, .58) 32%,
    rgba(99, 102, 241, .24) 54%,
    rgba(56, 189, 248, 0) 78%) !important;
  box-shadow: 0 0 24px rgba(56, 189, 248, .24);
  filter: blur(7px);
  animation: nv-topbar-wordmark-breathe 5.2s ease-in-out infinite;
  will-change: opacity, transform;
}

.nv-topbar-wordmark-text {
  z-index: 1;
  text-shadow: 0 0 14px rgba(255, 255, 255, .72);
}

html.dark .nv-topbar-wordmark-glow {
  background: radial-gradient(ellipse at center,
    rgba(34, 211, 238, .48) 0%,
    rgba(59, 130, 246, .34) 38%,
    rgba(99, 102, 241, .2) 58%,
    rgba(34, 211, 238, 0) 80%) !important;
  box-shadow: 0 0 30px rgba(34, 211, 238, .28);
}

html.dark .nv-topbar-wordmark-text {
  text-shadow: 0 0 16px rgba(125, 211, 252, .28);
}

@media (prefers-reduced-motion: reduce) {
  .nv-topbar-wordmark-glow {
    animation: none;
    opacity: .82;
    transform: none;
  }
}

body.nv-app-ui .menu-popup {
  border: 2px solid var(--nv-ink) !important;
  border-radius: 18px !important;
  background: var(--nv-card) !important;
  box-shadow:
    7px 8px 0 color-mix(in srgb, var(--nv-ink) 18%, transparent),
    0 22px 45px rgba(23, 50, 45, .16) !important;
}

body.nv-app-ui .menu-popup > :first-child {
  border-color: var(--nv-line) !important;
  background: color-mix(in srgb, var(--nv-mint) 32%, var(--nv-card)) !important;
}

body.nv-app-ui .nv-paper-card,
body.nv-app-ui .nv-study-stage,
body.nv-app-ui :where(section, article, div)[class*="rounded-3xl"][class*="bg-white"]:not(.nv-auth-page):not(.nv-auth-watcher-speech):not(.nv-flashcard-face):not(.nv-announcement-dialog):not(.nv-focused-dialog),
body.nv-app-ui :where(section, article, div)[class*="rounded-[28px]"][class*="bg-white"]:not(.nv-flashcard-face) {
  border: 1.5px solid var(--nv-line) !important;
  background: var(--nv-card-soft) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
}

html.dark body.nv-app-ui .nv-paper-card,
html.dark body.nv-app-ui .nv-study-stage,
html.dark body.nv-app-ui :where(section, article, div)[class*="rounded-3xl"][class*="bg-white"]:not(.nv-flashcard-face):not(.nv-announcement-dialog):not(.nv-focused-dialog),
html.dark body.nv-app-ui :where(section, article, div)[class*="rounded-[28px]"][class*="bg-white"]:not(.nv-flashcard-face) {
  box-shadow: none !important;
}

body.nv-app-ui .nv-study-stage {
  border: 2px solid var(--nv-ink) !important;
  background:
    linear-gradient(rgba(255, 253, 247, .9), rgba(255, 253, 247, .9)),
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(23, 50, 45, .04) 30px 31px) !important;
  box-shadow: none !important;
}

html.dark body.nv-app-ui .nv-study-stage {
  background:
    linear-gradient(rgba(15, 29, 49, .94), rgba(15, 29, 49, .94)),
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(177, 200, 230, .04) 30px 31px) !important;
}

body.nv-app-ui .nv-streak-card {
  border: 2px dashed var(--nv-orange) !important;
  background: color-mix(in srgb, var(--nv-card) 76%, #ffd9a8) !important;
  box-shadow: none !important;
}

body.nv-app-ui h1,
body.nv-app-ui h2 {
  color: var(--nv-ink) !important;
  font-family: "Noto Serif", "Times New Roman", Georgia, serif;
  letter-spacing: -.025em;
}

body.nv-app-ui h3,
body.nv-app-ui h4,
body.nv-app-ui [class*="font-black"],
body.nv-app-ui [class*="font-extrabold"] {
  letter-spacing: -.012em;
}

body.nv-app-ui .logo-gradient,
body.nv-app-ui .nv-gradient-text {
  background: linear-gradient(135deg, var(--nv-orange-dark), var(--nv-orange), var(--nv-mint-dark)) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

body.nv-app-ui [class~="text-slate-900"],
body.nv-app-ui [class~="text-slate-800"],
body.nv-app-ui [class~="dark:text-slate-100"],
body.nv-app-ui [class~="dark:text-slate-200"] {
  color: var(--nv-ink) !important;
}

body.nv-app-ui [class~="text-slate-700"],
body.nv-app-ui [class~="text-slate-600"],
body.nv-app-ui [class~="text-slate-500"],
body.nv-app-ui [class~="dark:text-slate-300"],
body.nv-app-ui [class~="dark:text-slate-400"] {
  color: var(--nv-muted) !important;
}

body.nv-app-ui [class~="text-indigo-500"],
body.nv-app-ui [class~="text-indigo-600"],
body.nv-app-ui [class~="text-indigo-700"],
body.nv-app-ui [class~="text-violet-500"],
body.nv-app-ui [class~="text-violet-600"],
body.nv-app-ui [class~="text-violet-700"],
body.nv-app-ui [class~="dark:text-indigo-300"],
body.nv-app-ui [class~="dark:text-indigo-400"],
body.nv-app-ui [class~="dark:text-violet-300"] {
  color: var(--nv-orange-dark) !important;
}

body.nv-app-ui [class~="bg-indigo-600"],
body.nv-app-ui [class~="bg-indigo-500"],
body.nv-app-ui [class~="bg-violet-600"],
body.nv-app-ui [class~="bg-violet-500"] {
  border-color: var(--nv-ink) !important;
  background: var(--nv-orange) !important;
}

body.nv-app-ui [class~="bg-indigo-50"],
body.nv-app-ui [class~="bg-indigo-50/50"],
body.nv-app-ui [class~="bg-indigo-50/60"],
body.nv-app-ui [class~="bg-indigo-50/70"],
body.nv-app-ui [class~="bg-indigo-50/80"],
body.nv-app-ui [class~="bg-indigo-100"],
body.nv-app-ui [class~="bg-indigo-100/70"],
body.nv-app-ui [class~="bg-indigo-100/80"],
body.nv-app-ui [class~="bg-violet-50"],
body.nv-app-ui [class~="bg-violet-100"],
body.nv-app-ui [class~="bg-violet-100/60"],
body.nv-app-ui [class~="dark:bg-indigo-500/10"],
body.nv-app-ui [class~="dark:bg-indigo-500/15"],
body.nv-app-ui [class~="dark:bg-indigo-500/20"],
body.nv-app-ui [class~="dark:bg-violet-500/10"],
body.nv-app-ui [class~="dark:bg-violet-500/15"] {
  background-color: color-mix(in srgb, var(--nv-mint) 24%, var(--nv-card)) !important;
}

body.nv-app-ui [class~="border-indigo-100"],
body.nv-app-ui [class~="border-indigo-200"],
body.nv-app-ui [class~="border-indigo-200/80"],
body.nv-app-ui [class~="border-indigo-300"],
body.nv-app-ui [class~="border-indigo-400"],
body.nv-app-ui [class~="border-indigo-500"],
body.nv-app-ui [class~="border-indigo-600"],
body.nv-app-ui [class~="border-violet-100"],
body.nv-app-ui [class~="border-violet-200"],
body.nv-app-ui [class~="dark:border-indigo-500"],
body.nv-app-ui [class~="dark:border-indigo-500/30"],
body.nv-app-ui [class~="dark:border-indigo-500/40"],
body.nv-app-ui [class~="dark:border-violet-500/30"],
body.nv-app-ui [class~="dark:border-violet-500/40"] {
  border-color: color-mix(in srgb, var(--nv-orange) 58%, var(--nv-line)) !important;
}

body.nv-app-ui [class~="ring-indigo-100"],
body.nv-app-ui [class~="ring-indigo-200"],
body.nv-app-ui [class~="ring-indigo-300"],
body.nv-app-ui [class~="dark:ring-indigo-500/40"],
body.nv-app-ui [class~="dark:ring-indigo-500/50"] {
  --tw-ring-color: rgba(239, 107, 58, .28) !important;
}

body.nv-app-ui [class~="from-indigo-400"],
body.nv-app-ui [class~="from-indigo-500"],
body.nv-app-ui [class~="from-indigo-600"],
body.nv-app-ui [class~="from-violet-400"],
body.nv-app-ui [class~="from-violet-500"] {
  --tw-gradient-from: var(--nv-mint-dark) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: color-mix(in srgb, var(--nv-mint-dark) 0%, transparent) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

body.nv-app-ui [class~="to-indigo-500"],
body.nv-app-ui [class~="to-violet-500"],
body.nv-app-ui [class~="to-violet-600"] {
  --tw-gradient-to: var(--nv-orange) var(--tw-gradient-to-position) !important;
}

body.nv-app-ui button[class~="bg-indigo-600"],
body.nv-app-ui button[class~="bg-indigo-500"],
body.nv-app-ui button[class~="bg-violet-600"],
body.nv-app-ui button[class~="bg-violet-500"] {
  border: 1.5px solid var(--nv-ink) !important;
  box-shadow: none !important;
  color: #fff !important;
  font-weight: 800;
  transform: translate(0, 0);
  transition: transform .16s ease, background-color .16s ease;
}

body.nv-app-ui button[class~="bg-indigo-600"] :where(span, p, strong, small, kbd),
body.nv-app-ui button[class~="bg-indigo-500"] :where(span, p, strong, small, kbd),
body.nv-app-ui button[class~="bg-violet-600"] :where(span, p, strong, small, kbd),
body.nv-app-ui button[class~="bg-violet-500"] :where(span, p, strong, small, kbd) {
  color: inherit !important;
}

body.nv-app-ui button[class~="bg-indigo-600"]:hover:not(:disabled),
body.nv-app-ui button[class~="bg-indigo-500"]:hover:not(:disabled),
body.nv-app-ui button[class~="bg-violet-600"]:hover:not(:disabled),
body.nv-app-ui button[class~="bg-violet-500"]:hover:not(:disabled) {
  background: var(--nv-orange-dark) !important;
  box-shadow: none !important;
  transform: translate(2px, 2px);
}

body.nv-app-ui button[class~="bg-indigo-600"]:active:not(:disabled),
body.nv-app-ui button[class~="bg-indigo-500"]:active:not(:disabled),
body.nv-app-ui button[class~="bg-violet-600"]:active:not(:disabled),
body.nv-app-ui button[class~="bg-violet-500"]:active:not(:disabled) {
  box-shadow: none;
  transform: translate(3px, 4px);
}

body.nv-app-ui button[class*="border-slate"],
body.nv-app-ui a[class*="border-slate"] {
  border-color: var(--nv-line) !important;
}

body.nv-app-ui button[class*="bg-slate-100"],
body.nv-app-ui button[class*="dark:bg-slate-800"] {
  background: color-mix(in srgb, var(--nv-mint) 20%, var(--nv-card)) !important;
}

body.nv-app-ui button[class~="bg-white"]:not([class*="rounded-full"]),
body.nv-app-ui button[class~="bg-slate-100"]:not([class*="rounded-full"]),
body.nv-app-ui a[class~="bg-white"]:not([class*="rounded-full"]) {
  border-color: var(--nv-line) !important;
  box-shadow: none !important;
}

body.nv-app-ui [class~="hover:bg-indigo-50"]:hover,
body.nv-app-ui [class~="hover:bg-indigo-100"]:hover,
body.nv-app-ui [class~="dark:hover:bg-indigo-500/10"]:hover,
body.nv-app-ui [class~="dark:hover:bg-indigo-500/15"]:hover,
body.nv-app-ui [class~="dark:hover:bg-indigo-500/20"]:hover {
  background-color: color-mix(in srgb, var(--nv-orange) 12%, var(--nv-card)) !important;
}

body.nv-app-ui [class~="hover:border-indigo-200"]:hover,
body.nv-app-ui [class~="hover:border-indigo-300"]:hover,
body.nv-app-ui [class~="hover:border-indigo-400"]:hover,
body.nv-app-ui [class~="dark:hover:border-indigo-500"]:hover,
body.nv-app-ui [class~="dark:hover:border-indigo-500/40"]:hover {
  border-color: var(--nv-orange) !important;
}

body.nv-app-ui button:not(:disabled):focus-visible,
body.nv-app-ui a:focus-visible,
body.nv-app-ui input:focus-visible,
body.nv-app-ui textarea:focus-visible,
body.nv-app-ui select:focus-visible {
  outline: 3px solid rgba(239, 107, 58, .28) !important;
  outline-offset: 2px;
}

body.nv-app-ui input,
body.nv-app-ui textarea,
body.nv-app-ui select {
  border: 1.5px solid var(--nv-line) !important;
  border-radius: 12px !important;
  background: var(--nv-card) !important;
  color: var(--nv-ink) !important;
  box-shadow: inset 0 2px 0 rgba(23, 50, 45, .05);
}

body.nv-app-ui input::placeholder,
body.nv-app-ui textarea::placeholder {
  color: color-mix(in srgb, var(--nv-muted) 72%, transparent) !important;
}

body.nv-app-ui input:focus,
body.nv-app-ui textarea:focus,
body.nv-app-ui select:focus {
  border-color: var(--nv-orange) !important;
  box-shadow:
    inset 0 2px 0 rgba(23, 50, 45, .04),
    0 0 0 3px rgba(239, 107, 58, .13) !important;
}

body.nv-app-ui [class*="border-slate-100"],
body.nv-app-ui [class*="border-slate-200"],
body.nv-app-ui [class*="dark:border-slate-700"],
body.nv-app-ui [class*="dark:border-slate-800"] {
  border-color: var(--nv-line) !important;
}

body.nv-app-ui [class~="bg-white"],
body.nv-app-ui [class~="bg-white/35"],
body.nv-app-ui [class~="bg-white/40"],
body.nv-app-ui [class~="bg-white/60"],
body.nv-app-ui [class~="bg-white/70"],
body.nv-app-ui [class~="bg-white/75"],
body.nv-app-ui [class~="bg-white/80"],
body.nv-app-ui [class~="bg-white/85"],
body.nv-app-ui [class~="bg-white/90"],
body.nv-app-ui [class~="bg-white/92"],
body.nv-app-ui [class~="dark:bg-slate-900"],
body.nv-app-ui [class~="dark:bg-slate-900/40"],
body.nv-app-ui [class~="dark:bg-slate-900/45"],
body.nv-app-ui [class~="dark:bg-slate-900/55"],
body.nv-app-ui [class~="dark:bg-slate-900/60"],
body.nv-app-ui [class~="dark:bg-slate-900/65"],
body.nv-app-ui [class~="dark:bg-slate-900/70"],
body.nv-app-ui [class~="dark:bg-slate-900/80"] {
  background-color: var(--nv-card) !important;
}

body.nv-app-ui [class~="bg-slate-50"],
body.nv-app-ui [class~="bg-slate-50/40"],
body.nv-app-ui [class~="bg-slate-50/50"],
body.nv-app-ui [class~="bg-slate-50/60"],
body.nv-app-ui [class~="bg-slate-50/70"],
body.nv-app-ui [class~="bg-slate-50/80"],
body.nv-app-ui [class~="bg-slate-50/90"],
body.nv-app-ui [class~="dark:bg-slate-800"],
body.nv-app-ui [class~="dark:bg-slate-800/40"],
body.nv-app-ui [class~="dark:bg-slate-800/50"],
body.nv-app-ui [class~="dark:bg-slate-800/60"],
body.nv-app-ui [class~="dark:bg-slate-800/70"],
body.nv-app-ui [class~="dark:bg-slate-800/80"] {
  background-color: color-mix(in srgb, var(--nv-mint) 14%, var(--nv-card)) !important;
}

body.nv-app-ui progress.nv-progress {
  height: 8px;
  border: 1px solid color-mix(in srgb, var(--nv-ink) 22%, transparent);
  background: color-mix(in srgb, var(--nv-mint) 26%, var(--nv-card));
}

body.nv-app-ui .nv-progress-primary {
  color: var(--nv-orange);
}

body.nv-app-ui .nv-progress-primary::-webkit-progress-value {
  background: linear-gradient(90deg, var(--nv-orange), #f1a35e);
}

body.nv-app-ui .nv-progress-primary::-moz-progress-bar {
  background: linear-gradient(90deg, var(--nv-orange), #f1a35e);
}

.nv-grammar-result-progress {
  position: relative;
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0)),
    color-mix(in srgb, #0f172a 12%, #e2e8f0);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.16),
    inset 0 -1px 2px rgba(15,23,42,.20);
}

.nv-grammar-detail-modal {
  max-height: 90vh;
  max-width: min(52rem, calc(100vw - 2rem));
}

@media (max-width: 640px) {
  .nv-grammar-detail-modal {
    max-height: calc(100vh - 1rem);
    border-radius: 1.25rem;
  }
}

html.dark .nv-grammar-result-progress {
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0)),
    rgba(51,65,85,.65);
}

.nv-grammar-result-progress::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

.nv-grammar-result-progress-fill {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background:
    linear-gradient(90deg, #34d399 0%, #22c55e 44%, #6366f1 100%);
  box-shadow:
    0 0 14px rgba(52,211,153,.38),
    0 0 22px rgba(99,102,241,.28);
}

body.nv-app-ui .nv-grammar-result-progress-fill {
  background:
    linear-gradient(90deg, var(--nv-orange) 0%, #f1a35e 52%, #ffd7a0 100%);
  box-shadow:
    0 0 14px color-mix(in srgb, var(--nv-orange) 48%, transparent),
    0 0 24px rgba(241,163,94,.30);
}

.nv-grammar-result-progress-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.78), transparent);
  filter: blur(.5px);
  transform: translateX(-130%);
  will-change: transform, opacity;
  animation: nvGrammarProgressSweep 1.35s cubic-bezier(.4,0,.2,1) infinite;
}

@keyframes nvGrammarProgressSweep {
  0% { transform: translateX(-130%); opacity: 0; }
  18% { opacity: .88; }
  72% { opacity: .78; }
  100% { transform: translateX(250%); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .nv-grammar-result-progress-fill,
  .nv-grammar-result-progress-fill::after {
    animation: none !important;
  }
}

body.nv-app-ui table {
  border-color: var(--nv-line);
  background: var(--nv-card);
}

body.nv-app-ui thead {
  background: color-mix(in srgb, var(--nv-mint) 22%, var(--nv-card)) !important;
}

body.nv-app-ui tbody tr {
  border-color: var(--nv-line) !important;
}

body.nv-app-ui tbody tr:hover {
  background: rgba(159, 205, 189, .11) !important;
}

body.nv-app-ui [class*="fixed inset-0"][class*="bg-slate-9"] {
  background: rgba(23, 50, 45, .55) !important;
  backdrop-filter: blur(8px);
}

body.nv-app-ui .shimmer-bg {
  background: linear-gradient(90deg, #e7e4da 25%, #f8f4e9 50%, #e7e4da 75%);
  background-size: 800px 100%;
}

body.nv-app-ui ::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--nv-ink) 24%, transparent);
}

/* ─────────────────────── Dark Mode Depth Enhancements ─────────────────────── */
html.dark body.nv-app-ui .nv-app-atmosphere {
  position: fixed !important;
  inset: 0;
  z-index: -2;
}

html.dark body.nv-app-ui .nv-app-atmosphere > * {
  background: radial-gradient(circle, rgba(239, 129, 89, 0.16) 0%, transparent 70%) !important;
  width: 55rem !important;
  height: 55rem !important;
  filter: blur(140px) !important;
  opacity: 0.8;
}

html.dark body.nv-app-ui .nv-app-atmosphere > *:last-child {
  background: radial-gradient(circle, rgba(74, 125, 184, 0.24) 0%, transparent 70%) !important;
  width: 65rem !important;
  height: 65rem !important;
}

html.dark body.nv-app-ui .nv-paper-card,
html.dark body.nv-app-ui :where(section, article, div)[class*="rounded-3xl"][class*="bg-white"]:not(.nv-flashcard-face):not(.nv-announcement-dialog):not(.nv-focused-dialog),
html.dark body.nv-app-ui :where(section, article, div)[class*="rounded-[28px]"][class*="bg-white"]:not(.nv-flashcard-face),
html.dark body.nv-app-ui :where(section, article, div)[class*="rounded-2xl"][class*="bg-white"]:not(.nv-flashcard-face),
html.dark body.nv-app-ui :where(section, article, div)[class*="rounded-2xl"][class*="bg-slate-"]:not(.nv-flashcard-face),
html.dark body.nv-app-ui :where(section, article, div)[class*="rounded-2xl"][class*="dark:bg-slate-"]:not(.nv-flashcard-face) {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  background: var(--nv-card-soft) !important;
  box-shadow: none !important;
  backdrop-filter: blur(18px) !important;
  transition: border-color 0.25s ease, background-color 0.25s ease !important;
}

html.dark body.nv-app-ui .nv-paper-card:hover,
html.dark body.nv-app-ui :where(section, article, div)[class*="rounded-3xl"][class*="bg-white"]:not(.nv-flashcard-face):not(.nv-announcement-dialog):not(.nv-focused-dialog):hover,
html.dark body.nv-app-ui :where(section, article, div)[class*="rounded-[28px]"][class*="bg-white"]:not(.nv-flashcard-face):hover,
html.dark body.nv-app-ui :where(section, article, div)[class*="rounded-2xl"][class*="bg-white"]:not(.nv-flashcard-face):hover,
html.dark body.nv-app-ui :where(section, article, div)[class*="rounded-2xl"][class*="bg-slate-"]:not(.nv-flashcard-face):hover,
html.dark body.nv-app-ui :where(section, article, div)[class*="rounded-2xl"][class*="dark:bg-slate-"]:not(.nv-flashcard-face):hover {
  transform: none !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
}

body.nv-app-ui .nv-flashcard-face,
html.dark body.nv-app-ui .nv-flashcard-face,
html.dark body.nv-app-ui .nv-flashcard-face:hover {
  transform: none;
  border-color: var(--nv-line) !important;
  background: var(--nv-card) !important;
  box-shadow: none !important;
}

@media (min-width: 640px) {
  .nv-flashcard-back {
    transform: rotateY(180deg) !important;
    scrollbar-gutter: stable;
  }
}

@keyframes nv-flashcard-mobile-flip-forward {
  0% { opacity: 0.45; transform: rotateY(-82deg) scale(0.985); }
  72% { opacity: 1; transform: rotateY(5deg) scale(1); }
  100% { opacity: 1; transform: rotateY(0deg) scale(1); }
}

@keyframes nv-flashcard-mobile-flip-backward {
  0% { opacity: 0.45; transform: rotateY(82deg) scale(0.985); }
  72% { opacity: 1; transform: rotateY(-5deg) scale(1); }
  100% { opacity: 1; transform: rotateY(0deg) scale(1); }
}

@media (max-width: 639px) {
  .nv-flashcard-shell,
  .nv-flashcard-inner {
    height: 390px !important;
    height: clamp(360px, 46dvh, 400px) !important;
  }

  .nv-flashcard-inner {
    transform: none !important;
    transition: none !important;
  }

  .nv-flashcard-shell .nv-flashcard-face {
    position: absolute !important;
    inset: 0 !important;
    width: 100%;
    height: 100%;
    overflow: hidden !important;
    transform: none;
    transform-origin: center center;
    backface-visibility: visible !important;
    -webkit-backface-visibility: visible !important;
  }

  .nv-flashcard-shell .nv-flashcard-front {
    animation: nv-flashcard-mobile-flip-backward 650ms cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .nv-flashcard-shell .nv-flashcard-back {
    animation: nv-flashcard-mobile-flip-forward 650ms cubic-bezier(0.22, 0.61, 0.36, 1);
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    scroll-padding-block: 1.25rem;
  }

  .nv-flashcard-shell .nv-flashcard-back,
  .nv-flashcard-shell[data-flipped="true"] .nv-flashcard-front {
    display: none;
  }

  .nv-flashcard-shell[data-flipped="true"] .nv-flashcard-back {
    display: flex;
  }
}

@media (max-width: 639px) and (prefers-reduced-motion: reduce) {
  .nv-flashcard-shell .nv-flashcard-front,
  .nv-flashcard-shell .nv-flashcard-back {
    animation: none;
  }
}

html.dark body.nv-app-ui .nv-card-glow {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 20px -4px rgba(239, 107, 58, 0.12),
    0 12px 24px -8px rgba(0, 0, 0, 0.4) !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

html.dark body.nv-app-ui .nv-card-glow:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 8px 32px -4px rgba(239, 107, 58, 0.22),
    0 24px 48px -12px rgba(0, 0, 0, 0.6) !important;
}

html.dark body.nv-app-ui .nv-study-stage {
  border: 2px solid #050b14 !important;
  background:
    linear-gradient(rgba(15, 29, 49, 0.88), rgba(15, 29, 49, 0.88)),
    repeating-linear-gradient(0deg, transparent 0 30px, rgba(177, 200, 230, 0.02) 30px 31px) !important;
  box-shadow: none !important;
  backdrop-filter: blur(24px) !important;
}

html.dark body.nv-app-ui .nv-streak-card {
  background: rgba(239, 129, 89, 0.15) !important;
  border-color: var(--nv-orange) !important;
  box-shadow: none !important;
}

html.dark body.nv-app-ui .nv-topbar-surface {
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  background: rgba(15, 29, 49, 0.78) !important;
  box-shadow: none !important;
}

html.dark body.nv-app-ui .menu-popup {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  background: rgba(8, 18, 32, 0.96) !important;
  box-shadow: none !important;
}

html.dark body.nv-app-ui .menu-popup > :first-child {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(41, 77, 115, 0.32) !important;
}

html.dark body.nv-app-ui button[class~="bg-indigo-600"],
html.dark body.nv-app-ui button[class~="bg-indigo-500"],
html.dark body.nv-app-ui button[class~="bg-violet-600"],
html.dark body.nv-app-ui button[class~="bg-violet-500"] {
  border-color: #091426 !important;
  box-shadow: none !important;
}

html.dark body.nv-app-ui button[class~="bg-indigo-600"]:hover:not(:disabled),
html.dark body.nv-app-ui button[class~="bg-indigo-500"]:hover:not(:disabled),
html.dark body.nv-app-ui button[class~="bg-violet-600"]:hover:not(:disabled),
html.dark body.nv-app-ui button[class~="bg-violet-500"]:hover:not(:disabled) {
  box-shadow: none !important;
}

html.dark body.nv-app-ui button[class~="bg-white"]:not([class*="rounded-full"]),
html.dark body.nv-app-ui button[class~="bg-slate-100"]:not([class*="rounded-full"]),
html.dark body.nv-app-ui a[class~="bg-white"]:not([class*="rounded-full"]) {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background-color: rgba(15, 29, 49, 0.66) !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px);
}

html.dark body.nv-app-ui input,
html.dark body.nv-app-ui textarea,
html.dark body.nv-app-ui select {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(8, 18, 32, 0.58) !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45) !important;
}

html.dark body.nv-app-ui input:focus,
html.dark body.nv-app-ui textarea:focus,
html.dark body.nv-app-ui select:focus {
  border-color: var(--nv-orange) !important;
  background: rgba(8, 18, 32, 0.78) !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.45),
    0 0 0 3px rgba(239, 107, 58, 0.25) !important;
}

/* Bug reports remains readable in both UI styles regardless of Tailwind runtime order. */
.nv-bug-report-field,
body.nv-app-ui .nv-bug-report-field {
  border-color: rgb(226 232 240) !important;
  background: rgb(255 255 255) !important;
  color: rgb(30 41 59) !important;
  color-scheme: light;
}

.nv-bug-report-field::placeholder,
body.nv-app-ui .nv-bug-report-field::placeholder {
  color: rgb(148 163 184) !important;
}

html.dark .nv-bug-report-field,
html.dark body.nv-app-ui .nv-bug-report-field {
  border-color: rgb(51 65 85) !important;
  background: rgba(8, 18, 32, 0.72) !important;
  color: rgb(241 245 249) !important;
  color-scheme: dark;
}

html.dark .nv-bug-report-field::placeholder,
html.dark body.nv-app-ui .nv-bug-report-field::placeholder {
  color: rgb(100 116 139) !important;
}

body.nv-app-ui .nv-add-word-modal--modern .nv-add-word-field,
html.dark body.nv-app-ui .nv-add-word-modal--modern .nv-add-word-field {
  border-color: rgb(226 232 240) !important;
  background: rgb(255 255 255) !important;
  color: rgb(15 23 42) !important;
  box-shadow: none !important;
  caret-color: rgb(79 70 229);
}

body.nv-app-ui .nv-add-word-modal--modern .nv-add-word-field::placeholder,
html.dark body.nv-app-ui .nv-add-word-modal--modern .nv-add-word-field::placeholder {
  color: rgb(148 163 184) !important;
}

body.nv-app-ui .nv-add-word-modal--modern .nv-add-word-field:focus,
html.dark body.nv-app-ui .nv-add-word-modal--modern .nv-add-word-field:focus {
  border-color: rgb(129 140 248) !important;
  background: rgb(255 255 255) !important;
  box-shadow: 0 0 0 3px rgb(224 231 255) !important;
}

body.nv-app-ui .nv-add-word-modal--modern .nv-add-word-field:-webkit-autofill,
body.nv-app-ui .nv-add-word-modal--modern .nv-add-word-field:-webkit-autofill:hover,
body.nv-app-ui .nv-add-word-modal--modern .nv-add-word-field:-webkit-autofill:focus,
html.dark body.nv-app-ui .nv-add-word-modal--modern .nv-add-word-field:-webkit-autofill,
html.dark body.nv-app-ui .nv-add-word-modal--modern .nv-add-word-field:-webkit-autofill:hover,
html.dark body.nv-app-ui .nv-add-word-modal--modern .nv-add-word-field:-webkit-autofill:focus {
  -webkit-text-fill-color: rgb(15 23 42) !important;
  box-shadow: 0 0 0 1000px rgb(255 255 255) inset !important;
  -webkit-box-shadow: 0 0 0 1000px rgb(255 255 255) inset !important;
  caret-color: rgb(79 70 229);
}

html.dark body.nv-app-ui progress.nv-progress {
  border: 1px solid rgba(0, 0, 0, 0.4) !important;
  background: rgba(8, 18, 32, 0.68) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

html.dark body.nv-app-ui tbody tr:hover {
  background: rgba(120, 169, 209, 0.08) !important;
}

html.dark body.nv-app-ui [class*="fixed inset-0"][class*="bg-slate-9"] {
  background: rgba(3, 8, 17, 0.8) !important;
  backdrop-filter: blur(12px) !important;
}

html.dark body.nv-app-ui .shimmer-bg {
  background: linear-gradient(90deg, #0f1d31 25%, #1a3150 50%, #0f1d31 75%);
  background-size: 800px 100%;
}

html.dark body.nv-app-ui ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12) !important;
}

html.dark body.nv-app-ui ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

html.dark body.nv-app-ui .logo-gradient,
html.dark body.nv-app-ui .nv-gradient-text {
  background: linear-gradient(135deg, #ffad88, #ff6b35, #78a9d1) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html.dark body.nv-app-ui [class~="dark:border-indigo-500"][class*="dark:bg-indigo-500/20"] {
  border-color: var(--nv-orange) !important;
  background-color: rgba(239, 129, 89, 0.15) !important;
  color: #fffdf7 !important;
  box-shadow: 0 0 12px rgba(239, 107, 58, 0.25) !important;
}

/* Restoring hierarchy opacities */
html.dark body.nv-app-ui [class~="dark:bg-slate-900/40"],
html.dark body.nv-app-ui [class~="bg-white/35"],
html.dark body.nv-app-ui [class~="bg-white/40"] {
  background-color: rgba(15, 29, 49, 0.4) !important;
}
html.dark body.nv-app-ui [class~="dark:bg-slate-900/45"] {
  background-color: rgba(15, 29, 49, 0.45) !important;
}
html.dark body.nv-app-ui [class~="dark:bg-slate-900/55"] {
  background-color: rgba(15, 29, 49, 0.55) !important;
}
html.dark body.nv-app-ui [class~="dark:bg-slate-900/60"],
html.dark body.nv-app-ui [class~="bg-white/60"] {
  background-color: rgba(15, 29, 49, 0.6) !important;
}
html.dark body.nv-app-ui [class~="dark:bg-slate-900/65"] {
  background-color: rgba(15, 29, 49, 0.65) !important;
}
html.dark body.nv-app-ui [class~="dark:bg-slate-900/70"],
html.dark body.nv-app-ui [class~="bg-white/70"] {
  background-color: rgba(15, 29, 49, 0.7) !important;
}
html.dark body.nv-app-ui [class~="dark:bg-slate-900/80"],
html.dark body.nv-app-ui [class~="bg-white/80"] {
  background-color: rgba(15, 29, 49, 0.8) !important;
}

html.dark body.nv-app-ui [class~="dark:bg-slate-800/40"],
html.dark body.nv-app-ui [class~="bg-slate-50/40"] {
  background-color: rgba(41, 77, 115, 0.1) !important;
}
html.dark body.nv-app-ui [class~="dark:bg-slate-800/50"],
html.dark body.nv-app-ui [class~="bg-slate-50/50"] {
  background-color: rgba(41, 77, 115, 0.12) !important;
}
html.dark body.nv-app-ui [class~="dark:bg-slate-800/60"],
html.dark body.nv-app-ui [class~="bg-slate-50/60"] {
  background-color: rgba(41, 77, 115, 0.14) !important;
}
html.dark body.nv-app-ui [class~="dark:bg-slate-800/70"],
html.dark body.nv-app-ui [class~="bg-slate-50/70"] {
  background-color: rgba(41, 77, 115, 0.16) !important;
}
html.dark body.nv-app-ui [class~="dark:bg-slate-800/80"],
html.dark body.nv-app-ui [class~="bg-slate-50/80"] {
  background-color: rgba(41, 77, 115, 0.18) !important;
}

@media (max-width: 780px) {
  body.nv-app-ui .nv-app-page,
  body.nv-app-ui .nv-study-page {
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  body.nv-app-ui .nv-app-topbar-slot {
    top: max(10px, env(safe-area-inset-top));
    padding-right: 12px !important;
    padding-left: 12px !important;
  }

  body.nv-app-ui .nv-topbar-surface {
    min-height: 54px;
    border-radius: 15px !important;
    box-shadow: none !important;
  }

  body.nv-app-ui .nv-study-stage {
    border-radius: 20px !important;
    box-shadow:
      5px 6px 0 color-mix(in srgb, var(--nv-mint) 52%, transparent),
      0 18px 38px rgba(23, 50, 45, .09) !important;
  }

  html.dark body.nv-app-ui .nv-topbar-surface {
    box-shadow:
      3px 4px 0 rgba(0, 0, 0, 0.25),
      0 12px 26px rgba(0, 0, 0, 0.3) !important;
  }

  html.dark body.nv-app-ui .nv-study-stage {
    box-shadow:
      5px 6px 0 #030711,
      0 18px 38px rgba(0, 0, 0, 0.4) !important;
  }
}

body.nv-app-ui :where(
  .nv-paper-card,
  .nv-topbar-surface,
  .nv-study-stage,
  .nv-streak-card,
  .menu-popup,
  button,
  a,
  input,
  textarea,
  select,
  progress,
  [class*="rounded-"]
) {
  box-shadow: none !important;
}

body.nv-app-ui :where(
  .nv-paper-card,
  .nv-topbar-surface,
  .nv-study-stage,
  .nv-streak-card,
  .menu-popup,
  button,
  a,
  input,
  textarea,
  select,
  progress,
  [class*="rounded-"]
):is(:hover, :focus, :focus-visible, :active),
body.nv-app-ui :where(
  .nv-paper-card,
  .nv-topbar-surface,
  .nv-study-stage,
  .nv-streak-card,
  .menu-popup,
  button,
  a,
  input,
  textarea,
  select,
  progress,
  [class*="rounded-"]
)::before,
body.nv-app-ui :where(
  .nv-paper-card,
  .nv-topbar-surface,
  .nv-study-stage,
  .nv-streak-card,
  .menu-popup,
  button,
  a,
  input,
  textarea,
  select,
  progress,
  [class*="rounded-"]
)::after {
  box-shadow: none !important;
}

body.nv-app-ui .nv-friends-tab.is-active,
body.nv-app-ui .nv-friends-tab.is-active:hover,
body.nv-app-ui .nv-friends-tab.is-active:focus,
body.nv-app-ui .nv-friends-tab.is-active:focus-visible {
  border-color: var(--nv-ink) !important;
  background: var(--nv-orange) !important;
  color: #fff !important;
}

html.dark body.nv-app-ui .nv-friends-tab.is-active,
html.dark body.nv-app-ui .nv-friends-tab.is-active:hover,
html.dark body.nv-app-ui .nv-friends-tab.is-active:focus,
html.dark body.nv-app-ui .nv-friends-tab.is-active:focus-visible {
  border-color: var(--nv-orange-soft) !important;
  background: var(--nv-orange) !important;
  color: #fff !important;
}

body.nv-app-ui .nv-friends-tab.is-active .nv-friends-tab-inner,
body.nv-app-ui .nv-friends-tab.is-active .nv-friends-tab-label {
  color: inherit !important;
}

body.nv-app-ui .nv-friends-chip {
  white-space: nowrap;
  vertical-align: middle;
}

body.nv-app-ui .nv-streak-restore-cost {
  border-color: var(--nv-orange) !important;
  background: #ffe7d4 !important;
}

body.nv-app-ui .nv-streak-restore-cost-label {
  color: #d35c2b !important;
}

body.nv-app-ui .nv-streak-restore-cost-value {
  color: var(--nv-orange) !important;
}

html.dark body.nv-app-ui .nv-streak-restore-cost {
  border-color: #f39a74 !important;
  background: rgba(239, 107, 58, 0.18) !important;
}

html.dark body.nv-app-ui .nv-streak-restore-cost-label {
  color: #ffb18f !important;
}

html.dark body.nv-app-ui .nv-streak-restore-cost-value {
  color: #ffd8c4 !important;
}

/* Classic controls must stay flat, including non-button interactive elements. */
body.nv-app-ui :is(
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
),
body.nv-app-ui :is(
  button,
  [role="button"],
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
):is(:hover, :focus, :focus-visible, :active),
body.nv-app-ui :is(button, [role="button"])::before,
body.nv-app-ui :is(button, [role="button"])::after {
  box-shadow: none !important;
  filter: none !important;
  --tw-shadow: 0 0 #0000 !important;
  --tw-shadow-colored: 0 0 #0000 !important;
  --tw-drop-shadow: drop-shadow(0 0 #0000) !important;
}

/* Theme state changes synchronously; this short transition only softens the repaint. */
html.nv-theme-transition-fallback body:is(.nv-app-ui, .nv-modern-ui),
html.nv-theme-transition-fallback body:is(.nv-app-ui, .nv-modern-ui) * {
  transition-property: color, background-color, border-color, box-shadow, fill, stroke !important;
  transition-duration: .34s !important;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1) !important;
}

@media (prefers-reduced-motion: reduce) {
  html.nv-theme-transition-fallback body:is(.nv-app-ui, .nv-modern-ui),
  html.nv-theme-transition-fallback body:is(.nv-app-ui, .nv-modern-ui) * {
    transition: none !important;
  }

  body.nv-app-ui *,
  body.nv-app-ui *::before,
  body.nv-app-ui *::after {
    scroll-behavior: auto !important;
  }
}

body.nv-app-ui { -ms-overflow-style: none; scrollbar-width: none; }
body.nv-app-ui ::-webkit-scrollbar { display: none; }

/* Shared modal field baseline. Dark mode is overridden below with the app surface token. */
.nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field,
html.dark .nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field,
body.nv-app-ui .nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field,
html.dark body.nv-app-ui .nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field {
  --tw-bg-opacity: 1 !important;
  --tw-text-opacity: 1 !important;
  --tw-border-opacity: 1 !important;
  background: rgb(255 255 255) !important;
  background-color: rgb(255 255 255) !important;
  background-image: none !important;
  border-color: rgb(226 232 240) !important;
  color: rgb(15 23 42) !important;
  caret-color: rgb(79 70 229) !important;
  box-shadow: none !important;
}

.nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field::placeholder,
html.dark .nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field::placeholder,
body.nv-app-ui .nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field::placeholder,
html.dark body.nv-app-ui .nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field::placeholder {
  color: rgb(148 163 184) !important;
  opacity: 1 !important;
}

.nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field:focus,
html.dark .nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field:focus,
body.nv-app-ui .nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field:focus,
html.dark body.nv-app-ui .nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field:focus {
  background: rgb(255 255 255) !important;
  background-color: rgb(255 255 255) !important;
  border-color: rgb(129 140 248) !important;
  color: rgb(15 23 42) !important;
  box-shadow: 0 0 0 3px rgb(224 231 255) !important;
}

.nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field:-webkit-autofill,
.nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field:-webkit-autofill:hover,
.nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field:-webkit-autofill:focus,
html.dark .nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field:-webkit-autofill,
html.dark .nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field:-webkit-autofill:hover,
html.dark .nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field:-webkit-autofill:focus {
  -webkit-text-fill-color: rgb(15 23 42) !important;
  box-shadow: 0 0 0 1000px rgb(255 255 255) inset !important;
  -webkit-box-shadow: 0 0 0 1000px rgb(255 255 255) inset !important;
  caret-color: rgb(79 70 229) !important;
}

/* Modern dark must not inherit the light modal field override above. */
html.dark .nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field,
html.dark body.nv-app-ui .nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field {
  --tw-bg-opacity: 1 !important;
  --tw-text-opacity: 1 !important;
  --tw-border-opacity: 1 !important;
  background: rgb(8 18 32) !important;
  background-color: rgb(8 18 32) !important;
  background-image: none !important;
  border-color: rgb(51 65 85) !important;
  color: rgb(241 245 249) !important;
  color-scheme: dark;
  caret-color: rgb(165 180 252) !important;
}

html.dark .nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field::placeholder,
html.dark body.nv-app-ui .nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field::placeholder {
  color: rgb(100 116 139) !important;
  opacity: 1 !important;
}

html.dark .nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field:focus,
html.dark body.nv-app-ui .nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field:focus {
  background: rgb(15 27 46) !important;
  background-color: rgb(15 27 46) !important;
  border-color: rgb(129 140 248) !important;
  color: rgb(248 250 252) !important;
  box-shadow: 0 0 0 3px rgb(99 102 241 / 22%) !important;
}

html.dark .nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field:-webkit-autofill,
html.dark .nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field:-webkit-autofill:hover,
html.dark .nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field:-webkit-autofill:focus,
html.dark body.nv-app-ui .nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field:-webkit-autofill,
html.dark body.nv-app-ui .nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field:-webkit-autofill:hover,
html.dark body.nv-app-ui .nv-add-word-modal--modern :is(input, textarea, select).nv-add-word-field:-webkit-autofill:focus {
  -webkit-text-fill-color: rgb(241 245 249) !important;
  box-shadow: 0 0 0 1000px rgb(8 18 32) inset !important;
  -webkit-box-shadow: 0 0 0 1000px rgb(8 18 32) inset !important;
  caret-color: rgb(165 180 252) !important;
}

/* Keep the modern dark primary action calm and readable instead of neon-cyan. */
html.dark body.nv-modern-ui .nv-add-word-modal--modern .nv-add-word-save {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 1px solid rgb(196 181 253 / 24%) !important;
  background: rgb(67 56 202 / 32%) !important;
  background-image: none !important;
  color: rgb(245 243 255) !important;
  text-shadow: none !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 9%),
    inset 0 -1px 0 rgb(15 23 42 / 30%),
    0 8px 20px rgb(2 6 23 / 24%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  backdrop-filter: blur(16px) saturate(145%);
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease !important;
}

html.dark body.nv-modern-ui .nv-add-word-modal--modern .nv-add-word-save__icon {
  display: inline-grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  border: 1px solid rgb(221 214 254 / 20%);
  border-radius: 999px;
  background: rgb(221 214 254 / 11%);
  color: rgb(221 214 254);
  font-size: .7rem;
  line-height: 1;
}

html.dark body.nv-modern-ui .nv-add-word-modal--modern .nv-add-word-save:hover:not(:disabled),
html.dark body.nv-modern-ui .nv-add-word-modal--modern .nv-add-word-save:focus-visible {
  border-color: rgb(196 181 253 / 38%) !important;
  background: rgb(79 70 229 / 42%) !important;
  color: rgb(255 255 255) !important;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 13%),
    inset 0 -1px 0 rgb(15 23 42 / 24%),
    0 10px 24px rgb(30 27 75 / 25%) !important;
  transform: translateY(-1px);
}

html.dark body.nv-modern-ui .nv-add-word-modal--modern .nv-add-word-save:focus-visible {
  outline: 2px solid rgb(165 180 252 / 72%);
  outline-offset: 3px;
}

html.dark body.nv-modern-ui .nv-add-word-modal--modern .nv-add-word-save:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%) !important;
}

html.dark body.nv-modern-ui .nv-add-word-modal--modern .nv-add-word-save:disabled {
  cursor: not-allowed;
  opacity: .52 !important;
  transform: none;
}

/* Grammar lecture controls need semantic colors because classic overrides Tailwind dark utilities. */
.nv-grammar-lecture-language {
  background: transparent !important;
  color: rgb(100 116 139) !important;
  box-shadow: none !important;
}

.nv-grammar-lecture-language.is-active {
  background: rgb(15 23 42) !important;
  color: #fff !important;
}

.nv-grammar-lecture-language:hover:not(.is-active) {
  color: rgb(15 23 42) !important;
}

html.dark .nv-grammar-lecture-language {
  color: rgb(203 213 225) !important;
}

html.dark .nv-grammar-lecture-language:hover:not(.is-active) {
  color: #fff !important;
}

html.dark .nv-grammar-lecture-language.is-active {
  background: rgb(241 245 249) !important;
  color: rgb(15 23 42) !important;
}

body.nv-app-ui .nv-grammar-lecture-language-switch {
  border-color: var(--nv-line) !important;
  background: color-mix(in srgb, var(--nv-mint) 16%, var(--nv-card)) !important;
}

body.nv-app-ui .nv-grammar-lecture-language {
  background: transparent !important;
  color: var(--nv-muted) !important;
}

body.nv-app-ui .nv-grammar-lecture-language:hover:not(.is-active),
html.dark body.nv-app-ui .nv-grammar-lecture-language:hover:not(.is-active) {
  color: var(--nv-ink) !important;
}

body.nv-app-ui .nv-grammar-lecture-language.is-active,
html.dark body.nv-app-ui .nv-grammar-lecture-language.is-active {
  background: var(--nv-orange) !important;
  color: #fffdf7 !important;
}

/* A small ruled-paper surface for personal grammar notes. */
.nv-grammar-notes-paper {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #e1c994 !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, .72), transparent 11rem),
    #fff7e3 !important;
  color: #413529 !important;
}

.nv-grammar-notes-paper::before {
  position: absolute;
  z-index: 2;
  top: 7.2rem;
  left: 1.15rem;
  width: .55rem;
  height: .55rem;
  border: 1px solid rgba(112, 88, 58, .2);
  border-radius: 999px;
  background: #dfcfad;
  box-shadow: 0 4rem 0 #dfcfad, 0 8rem 0 #dfcfad;
  content: "";
  pointer-events: none;
}

.nv-grammar-notes-paper::after {
  position: absolute;
  z-index: 3;
  top: -.45rem;
  left: 50%;
  width: 5.4rem;
  height: 1.35rem;
  border: 1px solid rgba(176, 131, 46, .14);
  background: rgba(246, 207, 120, .68);
  content: "";
  pointer-events: none;
  transform: translateX(-50%) rotate(-1.5deg);
}

.nv-grammar-notes-content {
  position: relative;
  z-index: 4;
}

.nv-grammar-notes-kicker {
  margin: 0 0 .1rem;
  color: #b85d3d !important;
  font-family: "Segoe Print", "Bradley Hand", cursive;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nv-grammar-notes-title {
  color: #413529 !important;
}

.nv-grammar-notes-count,
.nv-grammar-notes-status {
  color: #8d7b65 !important;
}

.nv-grammar-notes-status.is-error {
  color: #c2413b !important;
}

.nv-grammar-notes-paper textarea.nv-grammar-notes-input,
body.nv-app-ui .nv-grammar-notes-paper textarea.nv-grammar-notes-input,
html.dark body.nv-app-ui .nv-grammar-notes-paper textarea.nv-grammar-notes-input {
  position: relative;
  z-index: 1;
  border: 0 !important;
  border-radius: .75rem !important;
  background:
    linear-gradient(90deg, transparent 0 2.25rem, rgba(217, 100, 88, .35) 2.25rem 2.34rem, transparent 2.34rem),
    repeating-linear-gradient(to bottom, transparent 0 calc(2rem - 1px), rgba(77, 120, 163, .22) calc(2rem - 1px) 2rem),
    rgba(255, 255, 255, .18) !important;
  color: #3f3228 !important;
  caret-color: #c25536 !important;
  line-height: 2rem !important;
  padding: .25rem .75rem .25rem 3rem !important;
  box-shadow: none !important;
}

.nv-grammar-notes-paper textarea.nv-grammar-notes-input::placeholder,
body.nv-app-ui .nv-grammar-notes-paper textarea.nv-grammar-notes-input::placeholder,
html.dark body.nv-app-ui .nv-grammar-notes-paper textarea.nv-grammar-notes-input::placeholder {
  color: #9a8972 !important;
  opacity: .9 !important;
}

.nv-grammar-notes-paper textarea.nv-grammar-notes-input:focus,
body.nv-app-ui .nv-grammar-notes-paper textarea.nv-grammar-notes-input:focus,
html.dark body.nv-app-ui .nv-grammar-notes-paper textarea.nv-grammar-notes-input:focus {
  border: 0 !important;
  background:
    linear-gradient(90deg, transparent 0 2.25rem, rgba(217, 100, 88, .42) 2.25rem 2.34rem, transparent 2.34rem),
    repeating-linear-gradient(to bottom, transparent 0 calc(2rem - 1px), rgba(77, 120, 163, .28) calc(2rem - 1px) 2rem),
    rgba(255, 255, 255, .3) !important;
  box-shadow: 0 0 0 2px rgba(194, 85, 54, .13) !important;
}

.nv-grammar-notes-save,
body.nv-app-ui .nv-grammar-notes-save,
html.dark body.nv-app-ui .nv-grammar-notes-save {
  border: 1px solid #9f472f !important;
  background: #cf6242 !important;
  color: #fffaf0 !important;
  box-shadow: none !important;
}

.nv-grammar-notes-save:hover:not(:disabled),
body.nv-app-ui .nv-grammar-notes-save:hover:not(:disabled) {
  background: #b84f34 !important;
}

html.dark .nv-grammar-notes-paper,
html.dark body.nv-app-ui .nv-grammar-notes-paper {
  border-color: #c9a96d !important;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 255, 255, .5), transparent 11rem),
    #f1e2c1 !important;
  color: #392e24 !important;
}

/* Disabled import actions stay visible in their original grid slot. */
.nv-import-action-disabled,
body.nv-app-ui .nv-import-action-disabled,
html.dark body.nv-app-ui .nv-import-action-disabled {
  pointer-events: none !important;
  cursor: not-allowed !important;
  border-color: #cbd5e1 !important;
  background: #e2e8f0 !important;
  background-image: none !important;
  color: #64748b !important;
  box-shadow: none !important;
  filter: grayscale(1) !important;
  opacity: .72 !important;
  transform: none !important;
}

.nv-import-action-disabled :where(p, span),
body.nv-app-ui .nv-import-action-disabled :where(p, span),
html.dark body.nv-app-ui .nv-import-action-disabled :where(p, span) {
  color: #64748b !important;
}

.nv-import-action-disabled span[class~="rounded-full"],
body.nv-app-ui .nv-import-action-disabled span[class~="rounded-full"] {
  border-color: #94a3b8 !important;
  background: #cbd5e1 !important;
}

.nv-import-action-disabled img,
body.nv-app-ui .nv-import-action-disabled img {
  opacity: .68 !important;
}

html.dark .nv-import-action-disabled,
html.dark body.nv-app-ui .nv-import-action-disabled {
  border-color: #475569 !important;
  background: #334155 !important;
  color: #94a3b8 !important;
}

html.dark .nv-import-action-disabled :where(p, span),
html.dark body.nv-app-ui .nv-import-action-disabled :where(p, span) {
  color: #94a3b8 !important;
}

html.dark .nv-import-action-disabled span[class~="rounded-full"],
html.dark body.nv-app-ui .nv-import-action-disabled span[class~="rounded-full"] {
  border-color: #64748b !important;
  background: #475569 !important;
}

/**
 * Modern liquid-glass visual system.
 * `nv-modern-ui` is mutually exclusive with the classic `nv-app-ui` scope.
 */
.nv-liquid-glass-preview,
.nv-liquid-glass-control {
  border-color: rgba(255, 255, 255, .78) !important;
  background: rgba(235, 246, 252, .64) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(100, 116, 139, .08),
    0 16px 36px rgba(30, 64, 92, .12) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}

html.dark .nv-liquid-glass-preview,
html.dark .nv-liquid-glass-control {
  border-color: rgba(226, 232, 240, .18) !important;
  background: rgba(17, 36, 55, .62) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -1px 0 rgba(2, 6, 23, .3),
    0 18px 42px rgba(2, 6, 23, .34) !important;
}

body.nv-modern-ui {
  --nv-liquid-bg: #edf3f8;
  --nv-liquid-surface: rgba(255, 255, 255, .54);
  --nv-liquid-surface-strong: rgba(255, 255, 255, .7);
  --nv-liquid-surface-soft: rgba(244, 250, 253, .42);
  --nv-liquid-border: rgba(255, 255, 255, .82);
  --nv-liquid-border-cool: rgba(125, 211, 252, .34);
  --nv-liquid-highlight: rgba(255, 255, 255, .92);
  --nv-liquid-accent: rgba(14, 165, 233, .2);
  --nv-liquid-accent-hover: rgba(14, 165, 233, .29);
  --nv-liquid-accent-border: rgba(14, 165, 233, .34);
  --nv-liquid-accent-text: #075f82;
  --nv-liquid-text: #14283d;
  --nv-liquid-muted: #53687a;
  --nv-liquid-shadow:
    inset 0 1px 0 var(--nv-liquid-highlight),
    inset 0 -1px 0 rgba(100, 116, 139, .08),
    0 18px 48px rgba(30, 64, 92, .11),
    0 3px 12px rgba(30, 64, 92, .07);
  background-color: var(--nv-liquid-bg) !important;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.015'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 58% 48% at 50% 44%, rgba(59, 130, 246, .07), transparent 76%) !important;
  background-attachment: fixed !important;
  background-size: 180px 180px, 100% 100% !important;
  color: var(--nv-liquid-text);
}

html.dark body.nv-modern-ui {
  --nv-liquid-bg: #061421;
  --nv-liquid-panel-base: #071725;
  --nv-liquid-surface: rgba(7, 23, 37, .62);
  --nv-liquid-surface-strong: rgba(7, 23, 37, .76);
  --nv-liquid-surface-soft: rgba(12, 35, 52, .44);
  --nv-liquid-border: rgba(226, 232, 240, .16);
  --nv-liquid-border-cool: rgba(103, 232, 249, .22);
  --nv-liquid-highlight: rgba(255, 255, 255, .15);
  --nv-liquid-accent: rgba(56, 189, 248, .17);
  --nv-liquid-accent-hover: rgba(56, 189, 248, .25);
  --nv-liquid-accent-border: rgba(103, 232, 249, .27);
  --nv-liquid-accent-text: #b6efff;
  --nv-liquid-text: #edf8ff;
  --nv-liquid-muted: #a8bdcb;
  --nv-liquid-shadow:
    inset 0 1px 0 var(--nv-liquid-highlight),
    inset 0 -1px 0 rgba(2, 6, 23, .32),
    0 20px 52px rgba(2, 6, 23, .36),
    0 4px 14px rgba(2, 6, 23, .24);
  background-color: var(--nv-liquid-bg) !important;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.015'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 56% 48% at 50% 45%, rgba(59, 130, 246, .06), transparent 78%) !important;
}

body.nv-modern-ui::before,
body.nv-modern-ui::after {
  position: fixed;
  z-index: -1;
  width: min(64rem, 92vw);
  height: min(64rem, 92vw);
  border-radius: 999px;
  content: "";
  pointer-events: none;
  opacity: 1;
}

body.nv-modern-ui::before {
  top: -40rem;
  left: -31rem;
  background: rgba(34, 211, 238, .12);
  filter: blur(180px);
}

body.nv-modern-ui::after {
  right: -34rem;
  bottom: -42rem;
  background: rgba(45, 212, 191, .1);
  filter: blur(210px);
}

html.dark body.nv-modern-ui::before {
  background: rgba(34, 211, 238, .095);
}

html.dark body.nv-modern-ui::after {
  background: rgba(45, 212, 191, .08);
}

body.nv-modern-ui .nv-app-page,
body.nv-modern-ui .nv-study-page {
  background: transparent !important;
  color: var(--nv-liquid-text);
}

body.nv-modern-ui .nv-app-atmosphere > * {
  display: none !important;
}

body.nv-modern-ui :is(
  .nv-topbar-surface,
  .menu-popup,
  .nv-paper-card,
  .nv-study-stage,
  .nv-liquid-glass
),
body.nv-modern-ui :where(section, article, div)[class*="rounded-3xl"]:not(.nv-announcement-dialog):not(.nv-focused-dialog):is(
  [class~="bg-white"],
  [class~="bg-white/40"],
  [class~="bg-white/60"],
  [class~="bg-white/70"],
  [class~="bg-white/80"]
),
body.nv-modern-ui :where(section, article)[class*="rounded-2xl"]:is(
  [class~="bg-white"],
  [class~="bg-white/60"],
  [class~="bg-white/70"],
  [class~="bg-white/80"]
) {
  border-color: var(--nv-liquid-border) !important;
  background-color: var(--nv-liquid-surface) !important;
  background-image: none !important;
  box-shadow: var(--nv-liquid-shadow) !important;
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  backdrop-filter: blur(24px) saturate(165%);
}

body.nv-modern-ui .nv-liquid-glass-soft {
  border: 1px solid var(--nv-liquid-border) !important;
  background: var(--nv-liquid-surface-soft) !important;
  box-shadow:
    inset 0 1px 0 var(--nv-liquid-highlight),
    0 10px 26px rgba(30, 64, 92, .08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  backdrop-filter: blur(18px) saturate(155%);
}

/* Home streak summary keeps its warm identity while remaining translucent glass. */
body.nv-modern-ui .nv-streak-card {
  border-color: rgba(251, 146, 60, .42) !important;
  background-color: rgba(255, 237, 213, .66) !important;
  background-image: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .94),
    inset 0 -1px 0 rgba(249, 115, 22, .1),
    0 18px 42px rgba(249, 115, 22, .14) !important;
  -webkit-backdrop-filter: blur(24px) saturate(168%);
  backdrop-filter: blur(24px) saturate(168%);
}

html.dark body.nv-modern-ui .nv-streak-card {
  border-color: rgba(251, 146, 60, .34) !important;
  background-color: rgba(91, 45, 22, .48) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 237, 213, .16),
    inset 0 -1px 0 rgba(2, 6, 23, .3),
    0 20px 46px rgba(2, 6, 23, .34),
    0 10px 32px rgba(249, 115, 22, .1) !important;
}

/* Account settings uses one continuous glass sheet instead of an opaque card stack. */
body.nv-modern-ui .nv-settings-profile-header {
  border-color: var(--nv-liquid-border) !important;
  background: rgba(255, 255, 255, .46) !important;
  box-shadow: inset 0 -1px 0 rgba(100, 116, 139, .06);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  backdrop-filter: blur(20px) saturate(155%);
}

body.nv-modern-ui .nv-settings-body {
  background: rgba(244, 250, 253, .34) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}

html.dark body.nv-modern-ui .nv-settings-profile-header {
  background: rgba(7, 23, 37, .7) !important;
  box-shadow: inset 0 -1px 0 rgba(2, 6, 23, .28);
}

html.dark body.nv-modern-ui .nv-settings-body {
  background: rgba(2, 12, 22, .36) !important;
}

/* Keep every empty-library import action on a flat tinted-glass material. */
body.nv-modern-ui .nv-import-action-card {
  --nv-import-glass-rgb: 59, 130, 246;
  isolation: isolate;
  overflow: hidden;
  border-color: rgba(var(--nv-import-glass-rgb), .42) !important;
  background-color: rgba(var(--nv-import-glass-rgb), .17) !important;
  background-image: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .78),
    inset 0 0 0 1px rgba(255, 255, 255, .12),
    0 12px 28px rgba(var(--nv-import-glass-rgb), .1) !important;
  -webkit-backdrop-filter: blur(20px) saturate(145%);
  backdrop-filter: blur(20px) saturate(145%);
}

body.nv-modern-ui .nv-import-action-card--emerald {
  --nv-import-glass-rgb: 16, 185, 129;
}

body.nv-modern-ui .nv-import-action-card--sky {
  --nv-import-glass-rgb: 14, 165, 233;
}

body.nv-modern-ui .nv-import-action-card--amber {
  --nv-import-glass-rgb: 245, 158, 11;
}

body.nv-modern-ui .nv-import-action-card:hover:not(:disabled) {
  border-color: rgba(var(--nv-import-glass-rgb), .58) !important;
  background-color: rgba(var(--nv-import-glass-rgb), .22) !important;
  background-image: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .86),
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    0 16px 34px rgba(var(--nv-import-glass-rgb), .15) !important;
}

html.dark body.nv-modern-ui .nv-import-action-card {
  border-color: rgba(var(--nv-import-glass-rgb), .4) !important;
  background-color: rgba(var(--nv-import-glass-rgb), .16) !important;
  background-image: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    inset 0 0 0 1px rgba(255, 255, 255, .05),
    0 14px 32px rgba(2, 6, 23, .28) !important;
}

html.dark body.nv-modern-ui .nv-import-action-card:hover:not(:disabled) {
  border-color: rgba(var(--nv-import-glass-rgb), .56) !important;
  background-color: rgba(var(--nv-import-glass-rgb), .22) !important;
  background-image: none !important;
}

body.nv-modern-ui .nv-import-action-card.nv-import-action-disabled {
  border-color: #cbd5e1 !important;
  background: #e2e8f0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

html.dark body.nv-modern-ui .nv-import-action-card.nv-import-action-disabled {
  border-color: #475569 !important;
  background: #334155 !important;
}

html.dark body.nv-modern-ui .nv-liquid-glass-soft {
  box-shadow:
    inset 0 1px 0 var(--nv-liquid-highlight),
    0 12px 30px rgba(2, 6, 23, .26) !important;
}

body.nv-modern-ui .nv-liquid-glass--hero {
  border-color: var(--nv-liquid-border-cool) !important;
  background: var(--nv-liquid-surface-strong) !important;
  color: var(--nv-liquid-text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 -1px 0 rgba(14, 165, 233, .09),
    0 24px 58px rgba(30, 64, 92, .14) !important;
}

html.dark body.nv-modern-ui .nv-liquid-glass--hero {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -1px 0 rgba(2, 6, 23, .34),
    0 24px 62px rgba(2, 6, 23, .42) !important;
}

body.nv-modern-ui .nv-liquid-glass--hero :where(h1, h2, h3) {
  color: var(--nv-liquid-text) !important;
}

body.nv-modern-ui .nv-liquid-glass--hero :where(p, label, label > span) {
  color: var(--nv-liquid-muted) !important;
}

body.nv-modern-ui .nv-liquid-glass--hero :is([class~="bg-white/12"], [class~="bg-white/15"]) {
  border: 1px solid var(--nv-liquid-border) !important;
  background: var(--nv-liquid-surface-soft) !important;
  box-shadow: inset 0 1px 0 var(--nv-liquid-highlight) !important;
}

body.nv-modern-ui .nv-liquid-glass--hero button[class~="bg-white"],
body.nv-modern-ui .nv-liquid-glass--hero select {
  border-color: var(--nv-liquid-border) !important;
  background: var(--nv-liquid-surface-strong) !important;
  color: var(--nv-liquid-text) !important;
  box-shadow: inset 0 1px 0 var(--nv-liquid-highlight) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}

body.nv-modern-ui .menu-popup.menu-popup {
  border-color: var(--nv-liquid-border-cool) !important;
  background: rgba(248, 252, 255, .9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 28px 68px rgba(30, 64, 92, .2) !important;
  -webkit-backdrop-filter: blur(32px) saturate(175%);
  backdrop-filter: blur(32px) saturate(175%);
}

html.dark body.nv-modern-ui .menu-popup.menu-popup {
  background: rgba(9, 25, 41, .9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .13),
    0 30px 72px rgba(2, 6, 23, .54) !important;
}

body.nv-modern-ui .nv-liquid-glass--cover {
  border: 0 !important;
  border-bottom: 1px solid var(--nv-liquid-border-cool) !important;
  background: rgba(224, 245, 252, .42) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -1px 0 rgba(14, 165, 233, .12) !important;
}

html.dark body.nv-modern-ui .nv-liquid-glass--cover {
  background: rgba(16, 47, 66, .45) !important;
}

body.nv-modern-ui .nv-liquid-glass--avatar {
  background: var(--nv-liquid-accent) !important;
  color: var(--nv-liquid-accent-text) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 18px 40px rgba(30, 64, 92, .18) !important;
}

body.nv-modern-ui .nv-liquid-glass-sheen {
  background: rgba(255, 255, 255, .14) !important;
  box-shadow:
    inset 7rem 4rem 7rem rgba(255, 255, 255, .28),
    inset -6rem -3rem 8rem rgba(14, 165, 233, .12) !important;
}

body.nv-modern-ui .nv-liquid-glass-vignette {
  background: rgba(15, 23, 42, .06) !important;
  box-shadow: inset 0 -4rem 5rem rgba(15, 23, 42, .16) !important;
}

html.dark body.nv-modern-ui .nv-liquid-glass-sheen {
  background: rgba(255, 255, 255, .04) !important;
  box-shadow:
    inset 7rem 4rem 7rem rgba(103, 232, 249, .08),
    inset -6rem -3rem 8rem rgba(14, 116, 144, .12) !important;
}

html.dark body.nv-modern-ui .nv-liquid-glass-vignette {
  background: rgba(2, 6, 23, .05) !important;
  box-shadow: inset 0 -4rem 5rem rgba(2, 6, 23, .28) !important;
}

/* Purple and indigo blocks become cool translucent glass instead of flat paint. */
body.nv-modern-ui :is(
  [class~="bg-indigo-400"],
  [class~="bg-indigo-500"],
  [class~="bg-indigo-600"],
  [class~="bg-indigo-700"],
  [class~="bg-violet-400"],
  [class~="bg-violet-500"],
  [class~="bg-violet-600"],
  [class~="bg-purple-500"],
  [class~="bg-purple-600"]
) {
  background-color: var(--nv-liquid-accent) !important;
  background-image: none !important;
  color: var(--nv-liquid-accent-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}

body.nv-modern-ui :is(button, a):is(
  [class~="bg-indigo-400"],
  [class~="bg-indigo-500"],
  [class~="bg-indigo-600"],
  [class~="bg-indigo-700"],
  [class~="bg-violet-400"],
  [class~="bg-violet-500"],
  [class~="bg-violet-600"],
  [class~="bg-purple-500"],
  [class~="bg-purple-600"]
) {
  border: 1px solid var(--nv-liquid-accent-border) !important;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

body.nv-modern-ui :is(button, a):is(
  [class~="bg-indigo-400"],
  [class~="bg-indigo-500"],
  [class~="bg-indigo-600"],
  [class~="bg-indigo-700"],
  [class~="bg-violet-400"],
  [class~="bg-violet-500"],
  [class~="bg-violet-600"],
  [class~="bg-purple-500"],
  [class~="bg-purple-600"]
):hover:not(:disabled) {
  background-color: var(--nv-liquid-accent-hover) !important;
  border-color: color-mix(in srgb, var(--nv-liquid-accent-border) 76%, #fff) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .82),
    0 10px 24px rgba(14, 116, 144, .14) !important;
}

body.nv-modern-ui :is(button, a):is(
  [class~="bg-indigo-400"],
  [class~="bg-indigo-500"],
  [class~="bg-indigo-600"],
  [class~="bg-indigo-700"],
  [class~="bg-violet-400"],
  [class~="bg-violet-500"],
  [class~="bg-violet-600"],
  [class~="bg-purple-500"],
  [class~="bg-purple-600"]
) :where(span, p, strong, small, kbd) {
  color: inherit !important;
}

body.nv-modern-ui :is(
  [class~="bg-indigo-50"],
  [class~="bg-indigo-50/30"],
  [class~="bg-indigo-50/40"],
  [class~="bg-indigo-50/50"],
  [class~="bg-indigo-50/60"],
  [class~="bg-indigo-50/70"],
  [class~="bg-indigo-50/80"],
  [class~="bg-indigo-100"],
  [class~="bg-indigo-100/60"],
  [class~="bg-indigo-100/70"],
  [class~="bg-indigo-100/80"],
  [class~="bg-indigo-500/5"],
  [class~="bg-indigo-500/10"],
  [class~="bg-indigo-500/15"],
  [class~="bg-indigo-500/20"],
  [class~="bg-indigo-500/30"],
  [class~="bg-violet-50"],
  [class~="bg-violet-50/80"],
  [class~="bg-violet-100"],
  [class~="bg-violet-100/50"],
  [class~="bg-violet-100/60"],
  [class~="bg-violet-500/10"],
  [class~="bg-violet-500/15"],
  [class~="bg-violet-500/20"]
) {
  background-color: var(--nv-liquid-surface-soft) !important;
  background-image: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58) !important;
  -webkit-backdrop-filter: blur(14px) saturate(145%);
  backdrop-filter: blur(14px) saturate(145%);
}

body.nv-modern-ui :where([class*="bg-gradient"]):is(
  [class*="from-indigo-"],
  [class*="from-violet-"],
  [class*="from-purple-"],
  [class*="from-fuchsia-"],
  [class*="via-indigo-"],
  [class*="via-violet-"],
  [class*="via-purple-"],
  [class*="via-fuchsia-"],
  [class*="to-indigo-"],
  [class*="to-violet-"],
  [class*="to-purple-"],
  [class*="to-fuchsia-"]
):not([class*="bg-clip-text"]):not(.nv-mascot-color-swatch):not(.nv-liquid-glass):not(.nv-liquid-glass-soft):not(.nv-liquid-rate) {
  background-color: var(--nv-liquid-accent) !important;
  background-image: none !important;
  color: var(--nv-liquid-accent-text) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .66) !important;
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  backdrop-filter: blur(18px) saturate(155%);
}

body.nv-modern-ui :where([class*="bg-gradient"]):is(
  [class*="from-indigo-"],
  [class*="from-violet-"],
  [class*="from-purple-"],
  [class*="from-fuchsia-"],
  [class*="via-indigo-"],
  [class*="via-violet-"],
  [class*="via-purple-"],
  [class*="via-fuchsia-"],
  [class*="to-indigo-"],
  [class*="to-violet-"],
  [class*="to-purple-"],
  [class*="to-fuchsia-"]
):not([class*="bg-clip-text"]):not(.nv-mascot-color-swatch):not(.nv-liquid-glass):not(.nv-liquid-glass-soft):not(.nv-liquid-rate) :where(span, p, strong, small, kbd) {
  color: inherit !important;
}

body.nv-modern-ui :is(
  [class~="text-indigo-100"],
  [class~="text-indigo-200"],
  [class~="text-indigo-500"],
  [class~="text-indigo-600"],
  [class~="text-indigo-700"],
  [class~="text-indigo-800"],
  [class~="text-indigo-900"],
  [class~="text-violet-100"],
  [class~="text-violet-200"],
  [class~="text-violet-500"],
  [class~="text-violet-600"],
  [class~="text-violet-700"],
  [class~="text-purple-500"],
  [class~="text-purple-600"],
  [class~="text-purple-700"]
) {
  color: var(--nv-liquid-accent-text) !important;
}

html.dark body.nv-modern-ui :is(
  [class~="dark:text-indigo-200"],
  [class~="dark:text-indigo-300"],
  [class~="dark:text-indigo-400"],
  [class~="dark:text-violet-200"],
  [class~="dark:text-violet-300"],
  [class~="dark:text-violet-400"],
  [class~="dark:text-purple-200"],
  [class~="dark:text-purple-300"]
) {
  color: var(--nv-liquid-accent-text) !important;
}

body.nv-modern-ui :is(
  [class~="border-indigo-100"],
  [class~="border-indigo-200"],
  [class~="border-indigo-200/70"],
  [class~="border-indigo-200/80"],
  [class~="border-indigo-300"],
  [class~="border-indigo-400"],
  [class~="border-indigo-500"],
  [class~="border-violet-100"],
  [class~="border-violet-200"],
  [class~="border-violet-200/70"],
  [class~="border-violet-200/80"],
  [class~="border-violet-500"]
) {
  border-color: var(--nv-liquid-accent-border) !important;
}

html.dark body.nv-modern-ui :is(
  [class~="dark:border-indigo-500"],
  [class~="dark:border-indigo-500/30"],
  [class~="dark:border-indigo-500/40"],
  [class~="dark:border-violet-500"],
  [class~="dark:border-violet-500/20"],
  [class~="dark:border-violet-500/30"],
  [class~="dark:border-violet-500/40"]
) {
  border-color: var(--nv-liquid-accent-border) !important;
}

body.nv-modern-ui :is(
  [class~="ring-indigo-100"],
  [class~="ring-indigo-200"],
  [class~="ring-indigo-300"],
  [class~="ring-indigo-400"],
  [class~="ring-indigo-500"],
  [class~="ring-violet-400"],
  [class~="ring-violet-500"]
) {
  --tw-ring-color: var(--nv-liquid-accent-border) !important;
}

body.nv-modern-ui :is(.logo-gradient, .nv-gradient-text) {
  background: none !important;
  color: var(--nv-liquid-accent-text) !important;
  -webkit-text-fill-color: currentColor !important;
}

body.nv-modern-ui .nv-gradient-border::before {
  background: var(--nv-liquid-accent-border) !important;
}

body.nv-modern-ui .nv-section-line::after {
  background: var(--nv-liquid-accent-border) !important;
}

body.nv-modern-ui .nv-progress-primary::-webkit-progress-value {
  background: rgba(14, 165, 233, .58) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58);
}

body.nv-modern-ui .nv-progress-primary::-moz-progress-bar {
  background: rgba(14, 165, 233, .58) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58);
}

body.nv-modern-ui .nv-friends-search-input {
  border-color: rgba(148, 163, 184, .38) !important;
  background: rgba(255, 255, 255, .78) !important;
  color: rgb(15 23 42) !important;
  color-scheme: light;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88), 0 8px 24px rgba(15, 23, 42, .04);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}

body.nv-modern-ui .nv-friends-search-input::placeholder {
  color: rgb(100 116 139) !important;
  opacity: 1;
}

html.dark body.nv-modern-ui .nv-friends-search-input {
  border-color: rgba(148, 163, 184, .2) !important;
  background: rgba(8, 18, 32, .62) !important;
  color: rgb(241 245 249) !important;
  color-scheme: dark;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 8px 24px rgba(0, 0, 0, .16);
}

html.dark body.nv-modern-ui .nv-friends-search-input::placeholder {
  color: rgb(100 116 139) !important;
}

body.nv-modern-ui .nv-progress-boost {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  contain: paint;
}

body.nv-modern-ui .nv-progress-boost::after {
  content: "";
  position: absolute;
  inset: -45% auto -45% 0;
  width: 36%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
  filter: blur(.5px);
  pointer-events: none;
  transform: translateX(-190%) skewX(-18deg);
  will-change: transform, opacity;
  animation: nvProgressBoostSweep 1.9s linear infinite;
}

body.nv-modern-ui .nv-progress-boost--reverse::after {
  animation-direction: reverse;
}

html.dark body.nv-modern-ui .nv-progress-boost::after {
  background: linear-gradient(90deg, transparent, rgba(224, 242, 254, .52), transparent);
}

body.nv-modern-ui progress.nv-progress::-webkit-progress-value {
  background-image: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .7) 48%, transparent 66%) !important;
  background-size: 220% 100% !important;
  animation: nvProgressBoostNative 1.9s linear infinite;
}

body.nv-modern-ui progress.nv-progress::-moz-progress-bar {
  background-image: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .7) 48%, transparent 66%) !important;
  background-size: 220% 100% !important;
  animation: nvProgressBoostNative 1.9s linear infinite;
}

@keyframes nvProgressBoostSweep {
  0% { opacity: 0; transform: translateX(-190%) skewX(-18deg); }
  10% { opacity: .16; }
  22% { opacity: .82; }
  82% { opacity: .62; }
  94%, 100% { opacity: 0; transform: translateX(430%) skewX(-18deg); }
}

@keyframes nvProgressBoostNative {
  0% { background-position: 155% 0; }
  100% { background-position: -155% 0; }
}

@media (prefers-reduced-motion: reduce) {
  body.nv-modern-ui .nv-progress-boost::after {
    animation: none !important;
  }

  body.nv-modern-ui progress.nv-progress::-webkit-progress-value {
    animation: none !important;
  }

  body.nv-modern-ui progress.nv-progress::-moz-progress-bar {
    animation: none !important;
  }
}

html.nv-reduce-motion body.nv-modern-ui .nv-progress-boost::after {
  animation: none !important;
}

html.nv-reduce-motion body.nv-modern-ui progress.nv-progress::-webkit-progress-value {
  animation: none !important;
}

html.nv-reduce-motion body.nv-modern-ui progress.nv-progress::-moz-progress-bar {
  animation: none !important;
}

body.nv-modern-ui .nv-liquid-rate {
  --nv-rate-color: #0b7da5;
  border: 1px solid color-mix(in srgb, var(--nv-rate-color) 56%, transparent) !important;
  background: color-mix(in srgb, var(--nv-rate-color) 19%, var(--nv-liquid-surface-strong)) !important;
  color: color-mix(in srgb, var(--nv-rate-color) 82%, #082f49) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .84),
    0 12px 28px color-mix(in srgb, var(--nv-rate-color) 16%, transparent) !important;
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  backdrop-filter: blur(18px) saturate(155%);
}

body.nv-modern-ui .nv-liquid-rate:hover:not(:disabled) {
  background: color-mix(in srgb, var(--nv-rate-color) 29%, var(--nv-liquid-surface-strong)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 16px 34px color-mix(in srgb, var(--nv-rate-color) 18%, transparent) !important;
}

body.nv-modern-ui .nv-liquid-rate :where(p, span, kbd) {
  color: inherit !important;
}

body.nv-modern-ui .nv-liquid-rate kbd {
  border: 1px solid color-mix(in srgb, var(--nv-rate-color) 58%, transparent) !important;
  background: color-mix(in srgb, var(--nv-rate-color) 23%, var(--nv-liquid-surface-strong)) !important;
  color: color-mix(in srgb, var(--nv-rate-color) 82%, #082f49) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.nv-modern-ui .nv-liquid-rate--again { --nv-rate-color: #dc4c64; }
body.nv-modern-ui .nv-liquid-rate--hard { --nv-rate-color: #c66b13; }
body.nv-modern-ui .nv-liquid-rate--good { --nv-rate-color: #07875f; }
body.nv-modern-ui .nv-liquid-rate--easy { --nv-rate-color: #0b7da5; }

html.dark body.nv-modern-ui .nv-liquid-rate {
  color: color-mix(in srgb, var(--nv-rate-color) 54%, #fff) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 14px 32px rgba(2, 6, 23, .28) !important;
}

html.dark body.nv-modern-ui .nv-liquid-rate kbd {
  border-color: color-mix(in srgb, var(--nv-rate-color) 60%, transparent) !important;
  background: color-mix(in srgb, var(--nv-rate-color) 22%, #071725) !important;
  color: color-mix(in srgb, var(--nv-rate-color) 44%, #fff) !important;
}

/* Pack actions keep their own hue while sharing one liquid-glass material. */
body.nv-modern-ui .nv-liquid-cta {
  --nv-liquid-cta-color: #2563eb;
  border: 1px solid color-mix(in srgb, var(--nv-liquid-cta-color) 48%, transparent) !important;
  background: color-mix(in srgb, var(--nv-liquid-cta-color) 22%, var(--nv-liquid-surface-strong)) !important;
  background-image: none !important;
  color: color-mix(in srgb, var(--nv-liquid-cta-color) 80%, #082f49) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .82),
    0 10px 24px color-mix(in srgb, var(--nv-liquid-cta-color) 13%, transparent) !important;
  -webkit-backdrop-filter: blur(16px) saturate(155%);
  backdrop-filter: blur(16px) saturate(155%);
}

body.nv-modern-ui .nv-liquid-cta:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--nv-liquid-cta-color) 66%, transparent) !important;
  background: color-mix(in srgb, var(--nv-liquid-cta-color) 30%, var(--nv-liquid-surface-strong)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 13px 28px color-mix(in srgb, var(--nv-liquid-cta-color) 18%, transparent) !important;
}

body.nv-modern-ui .nv-liquid-cta--emerald { --nv-liquid-cta-color: #059669; }
body.nv-modern-ui .nv-liquid-cta--blue { --nv-liquid-cta-color: #2563eb; }
body.nv-modern-ui .nv-liquid-cta--orange { --nv-liquid-cta-color: #ea580c; }
body.nv-modern-ui .nv-liquid-cta--violet { --nv-liquid-cta-color: #7c3aed; }
body.nv-modern-ui .nv-liquid-cta--indigo { --nv-liquid-cta-color: #4f46e5; }
body.nv-modern-ui .nv-liquid-cta--red { --nv-liquid-cta-color: #dc2626; }

html.dark body.nv-modern-ui .nv-liquid-cta {
  color: color-mix(in srgb, var(--nv-liquid-cta-color) 48%, #fff) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 12px 28px rgba(2, 6, 23, .28) !important;
}

/* Popup navigation uses one flat, tinted liquid material instead of pastel fills. */
body.nv-modern-ui .nv-popup-header,
body.nv-modern-ui .nv-popup-progress,
body.nv-modern-ui .nv-popup-footer {
  border-color: var(--nv-liquid-border) !important;
  background: var(--nv-liquid-surface-soft) !important;
  box-shadow: inset 0 1px 0 var(--nv-liquid-highlight);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  backdrop-filter: blur(20px) saturate(155%);
}

body.nv-modern-ui .nv-popup-avatar,
body.nv-modern-ui .nv-popup-progress-chip {
  border: 1px solid color-mix(in srgb, #f97316 30%, var(--nv-liquid-border)) !important;
  background: color-mix(in srgb, #f97316 12%, var(--nv-liquid-surface-strong)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72) !important;
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
}

body.nv-modern-ui .nv-popup-action {
  --nv-popup-tone: #64748b;
  isolation: isolate;
  overflow: visible;
  border-color: color-mix(in srgb, var(--nv-popup-tone) 38%, var(--nv-liquid-border)) !important;
  background: color-mix(in srgb, var(--nv-popup-tone) 12%, var(--nv-liquid-surface-strong)) !important;
  background-image: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    inset 0 0 0 1px rgba(255, 255, 255, .08),
    0 10px 24px color-mix(in srgb, var(--nv-popup-tone) 10%, transparent) !important;
  -webkit-backdrop-filter: blur(18px) saturate(155%);
  backdrop-filter: blur(18px) saturate(155%);
}

body.nv-modern-ui .nv-popup-action:hover {
  border-color: color-mix(in srgb, var(--nv-popup-tone) 58%, var(--nv-liquid-border)) !important;
  background: color-mix(in srgb, var(--nv-popup-tone) 18%, var(--nv-liquid-surface-strong)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 0 0 1px rgba(255, 255, 255, .12),
    0 14px 30px color-mix(in srgb, var(--nv-popup-tone) 15%, transparent) !important;
}

.nv-popup-action--opening {
  z-index: 8;
  transform-origin: center;
  pointer-events: none;
  will-change: transform, opacity;
  animation: nvPopupFeatureOpen 230ms cubic-bezier(.2, .86, .28, 1) both;
}

.nv-popup-action--opening .nv-popup-action__icon {
  animation: nvPopupFeatureIconOpen 230ms cubic-bezier(.2, .86, .28, 1) both;
}

body.nv-modern-ui .nv-popup-action--opening {
  border-color: color-mix(in srgb, var(--nv-popup-tone) 72%, var(--nv-liquid-border)) !important;
  background: color-mix(in srgb, var(--nv-popup-tone) 24%, var(--nv-liquid-surface-strong)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    0 18px 38px color-mix(in srgb, var(--nv-popup-tone) 24%, transparent) !important;
}

@keyframes nvPopupFeatureOpen {
  0% { transform: scale(1); opacity: 1; }
  42% { transform: scale(.985); opacity: 1; }
  100% { transform: scale(1.075); opacity: .88; }
}

@keyframes nvPopupFeatureIconOpen {
  0% { transform: scale(1) rotate(0deg); }
  42% { transform: scale(.94) rotate(0deg); }
  100% { transform: scale(1.16) rotate(-4deg); }
}

html.nv-feature-transition-fallback .nv-app-page {
  transform-origin: var(--nv-feature-origin-x, 50%) var(--nv-feature-origin-y, 50%);
  animation: nvFeatureRouteFallback 420ms cubic-bezier(.18, .82, .24, 1) both;
}

@keyframes nvFeatureRouteFallback {
  0% {
    clip-path: circle(0 at var(--nv-feature-origin-x, 50%) var(--nv-feature-origin-y, 50%));
    opacity: .4;
    transform: scale(.975);
    filter: blur(3px);
  }
  72% { opacity: 1; }
  100% {
    clip-path: circle(150vmax at var(--nv-feature-origin-x, 50%) var(--nv-feature-origin-y, 50%));
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .nv-popup-action--opening,
  .nv-popup-action--opening .nv-popup-action__icon,
  html.nv-feature-transition-fallback .nv-app-page {
    animation: none !important;
  }
}

html.nv-reduce-motion .nv-popup-action--opening,
html.nv-reduce-motion .nv-popup-action--opening .nv-popup-action__icon,
html.nv-reduce-motion.nv-feature-transition-fallback .nv-app-page {
  animation: none !important;
}

body.nv-modern-ui .nv-reward-illustration-stage {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.nv-modern-ui .nv-popup-action__icon {
  border: 1px solid color-mix(in srgb, var(--nv-popup-tone) 26%, var(--nv-liquid-border)) !important;
  background: color-mix(in srgb, var(--nv-popup-tone) 14%, var(--nv-liquid-surface-strong)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72) !important;
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  backdrop-filter: blur(12px) saturate(150%);
}

body.nv-modern-ui .nv-popup-action--indigo { --nv-popup-tone: #4f46e5; }
body.nv-modern-ui .nv-popup-action--emerald { --nv-popup-tone: #059669; }
body.nv-modern-ui .nv-popup-action--orange { --nv-popup-tone: #ea580c; }
body.nv-modern-ui .nv-popup-action--amber { --nv-popup-tone: #d97706; }
body.nv-modern-ui .nv-popup-action--violet { --nv-popup-tone: #7c3aed; }
body.nv-modern-ui .nv-popup-action--sky { --nv-popup-tone: #0284c7; }
body.nv-modern-ui .nv-popup-action--rose { --nv-popup-tone: #e11d48; }
body.nv-modern-ui .nv-popup-action--slate { --nv-popup-tone: #64748b; }

body.nv-modern-ui .nv-popup-footer-action {
  --nv-popup-footer-tone: #64748b;
  border-color: color-mix(in srgb, var(--nv-popup-footer-tone) 34%, var(--nv-liquid-border)) !important;
  background: color-mix(in srgb, var(--nv-popup-footer-tone) 11%, var(--nv-liquid-surface-strong)) !important;
  background-image: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .78),
    0 9px 20px color-mix(in srgb, var(--nv-popup-footer-tone) 9%, transparent) !important;
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}

body.nv-modern-ui .nv-popup-footer-action:hover {
  background: color-mix(in srgb, var(--nv-popup-footer-tone) 17%, var(--nv-liquid-surface-strong)) !important;
}

body.nv-modern-ui .nv-popup-footer-action--logout {
  --nv-popup-footer-tone: #dc2626;
}

html.dark body.nv-modern-ui :is(.nv-popup-action, .nv-popup-footer-action) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 0 0 1px rgba(255, 255, 255, .04),
    0 12px 28px rgba(2, 6, 23, .28) !important;
}

html.dark body.nv-modern-ui :is(.nv-popup-action__icon, .nv-popup-avatar, .nv-popup-progress-chip) {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16) !important;
}

/* These two compact study details are intentionally plain, not glass cards. */
body.nv-modern-ui :is(.nv-study-translation, .nv-study-plan-icon) {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

body.nv-modern-ui .nv-nexi-hub-header {
  padding: .25rem .125rem 0;
}

body.nv-modern-ui .nv-nexi-tabs {
  gap: .75rem;
  overflow: visible;
  padding: .45rem .5rem .65rem;
  border: 0 !important;
  border-bottom: 1px solid color-mix(in srgb, var(--nv-liquid-border) 72%, transparent) !important;
  background: transparent;
}

body.nv-modern-ui .nv-nexi-tab {
  position: relative;
  min-height: 3rem;
  overflow: visible;
  isolation: isolate;
  border: 0 !important;
  border-radius: .75rem !important;
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  transition: color .18s ease, background-color .18s ease, transform .18s ease !important;
}

body.nv-modern-ui .nv-nexi-tab-scribble {
  position: absolute;
  z-index: 0;
  inset: -.55rem -.5rem -.65rem;
  width: calc(100% + 1rem);
  height: calc(100% + 1.2rem);
  overflow: visible;
  color: rgba(8, 145, 178, .78);
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 5px 12px rgba(8, 145, 178, .1));
  transform: scale(.97);
  transform-origin: center;
  transition: opacity .2s ease, transform .22s ease;
}

body.nv-modern-ui .nv-nexi-tab-scribble path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.nv-modern-ui .nv-nexi-tab[data-active="true"] {
  background: rgba(8, 145, 178, .045) !important;
}

body.nv-modern-ui .nv-nexi-tab[data-active="true"] .nv-nexi-tab-scribble {
  opacity: 1;
  transform: scale(1);
}

html.dark body.nv-modern-ui .nv-nexi-tab-scribble {
  color: rgba(34, 211, 238, .74);
  filter: drop-shadow(0 5px 14px rgba(34, 211, 238, .12));
}

html.dark body.nv-modern-ui .nv-nexi-tab[data-active="true"] {
  background: rgba(34, 211, 238, .035) !important;
}

body.nv-modern-ui .nv-nexi-stat {
  border-color: color-mix(in srgb, var(--nv-liquid-border) 72%, transparent);
}

/* Miniature UI-style previews stay readable even when Settings itself is dark. */
.nv-ui-style-preview {
  position: relative;
  display: grid;
  grid-template-rows: 18px 1fr;
  gap: 7px;
  padding: 9px;
  border: 1px solid transparent;
  isolation: isolate;
}

.nv-ui-style-preview__topbar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  border-radius: 8px;
}

.nv-ui-style-preview__topbar i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 999px;
}

.nv-ui-style-preview__topbar i:last-child {
  width: 30%;
  height: 4px;
  margin-left: auto;
  border-radius: 999px;
}

.nv-ui-style-preview__layout {
  display: grid;
  grid-template-columns: 19% 1fr 31%;
  gap: 6px;
  min-height: 0;
}

.nv-ui-style-preview__layout i {
  display: block;
  min-height: 0;
}

.nv-ui-style-preview--modern {
  border-color: rgba(148, 163, 184, .38);
  background: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .56), 0 10px 24px rgba(15, 23, 42, .08);
}

.nv-ui-style-preview--modern::before {
  content: '';
  position: absolute;
  inset: 1px 44% 1px 1px;
  border-radius: inherit;
  background: rgba(255, 255, 255, .14);
  pointer-events: none;
}

.nv-ui-style-preview--modern .nv-ui-style-preview__topbar,
.nv-ui-style-preview--modern .nv-ui-style-preview__layout i {
  border: 1px solid rgba(148, 163, 184, .34);
  background: rgba(255, 255, 255, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42);
  -webkit-backdrop-filter: blur(8px) saturate(145%);
  backdrop-filter: blur(8px) saturate(145%);
}

.nv-ui-style-preview--modern .nv-ui-style-preview__topbar i {
  border: 0;
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 0 8px rgba(255, 255, 255, .38);
}

.nv-ui-style-preview--modern .nv-ui-style-preview__layout i { border-radius: 9px; }
.nv-ui-style-preview--modern .nv-ui-style-preview__layout .nv-ui-style-preview__card--primary { background: rgba(255, 255, 255, .26); }
.nv-ui-style-preview--modern .nv-ui-style-preview__layout .nv-ui-style-preview__card--secondary { background: rgba(255, 255, 255, .12); }

.nv-ui-style-preview--classic {
  border: 2px solid rgba(90, 52, 33, .72);
  background: #f4dfb9;
  box-shadow: 4px 4px 0 rgba(239, 107, 58, .38);
}

.nv-ui-style-preview--classic .nv-ui-style-preview__topbar {
  border: 1px solid rgba(90, 52, 33, .42);
  border-radius: 5px;
  background: #fff4dd;
}

.nv-ui-style-preview--classic .nv-ui-style-preview__topbar i {
  background: #ef6b3a;
}

.nv-ui-style-preview--classic .nv-ui-style-preview__layout i {
  border: 1px solid rgba(90, 52, 33, .48);
  border-radius: 5px;
  background: #fff8ea;
}

.nv-ui-style-preview--classic .nv-ui-style-preview__card--primary { background: #f39a74; }
.nv-ui-style-preview--classic .nv-ui-style-preview__card--secondary { background: #d8ece4; }

/* Focused action dialogs need denser glass than page cards. */
body.nv-modern-ui .nv-focused-overlay {
  background: rgba(15, 23, 42, .38) !important;
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
}

body.nv-modern-ui .nv-focused-dialog {
  max-height: calc(100dvh - 2rem);
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-backdrop-filter: blur(30px) saturate(168%);
  backdrop-filter: blur(30px) saturate(168%);
}

html.dark body.nv-modern-ui .nv-focused-overlay {
  background: rgba(2, 6, 23, .58) !important;
}

/* Lost-streak recovery keeps a warm orange material. */
body.nv-modern-ui .nv-lost-streak-dialog {
  border-color: rgba(251, 146, 60, .46) !important;
  background: rgba(255, 250, 244, .94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(249, 115, 22, .1),
    0 32px 80px rgba(30, 64, 92, .24),
    0 12px 38px rgba(249, 115, 22, .12) !important;
}

body.nv-modern-ui .nv-lost-streak-icon {
  border: 1px solid rgba(251, 146, 60, .34);
  background: rgba(255, 237, 213, .76) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    0 10px 24px rgba(249, 115, 22, .12);
}

body.nv-modern-ui .nv-lost-streak-balance,
body.nv-modern-ui .nv-lost-streak-dialog .nv-streak-restore-cost {
  border: 1px solid rgba(148, 163, 184, .2) !important;
  background: rgba(255, 255, 255, .7) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
  backdrop-filter: blur(16px) saturate(145%);
}

body.nv-modern-ui .nv-lost-streak-dialog .nv-streak-restore-cost {
  border-color: rgba(251, 146, 60, .36) !important;
  background: rgba(255, 237, 213, .66) !important;
}

body.nv-modern-ui .nv-lost-streak-dialog .nv-streak-restore-cost-label {
  color: #c2410c !important;
}

body.nv-modern-ui .nv-lost-streak-dialog .nv-streak-restore-cost-value {
  color: #ea580c !important;
}

body.nv-modern-ui .nv-lost-streak-action:not(:disabled) {
  border: 1px solid rgba(194, 65, 12, .54);
  background: rgba(234, 88, 12, .92) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 237, 213, .38),
    0 12px 26px rgba(234, 88, 12, .2) !important;
}

body.nv-modern-ui .nv-lost-streak-action:not(:disabled):hover {
  background: rgba(194, 65, 12, .94) !important;
}

body.nv-modern-ui .nv-lost-streak-later {
  border: 1px solid rgba(100, 116, 139, .16);
  background: rgba(255, 255, 255, .42) !important;
  color: #475569 !important;
}

body.nv-modern-ui .nv-lost-streak-later:hover {
  border-color: rgba(100, 116, 139, .28);
  background: rgba(255, 255, 255, .72) !important;
}

body.nv-modern-ui .nv-lost-streak-note {
  color: #64748b !important;
}

html.dark body.nv-modern-ui .nv-lost-streak-dialog {
  border-color: rgba(251, 146, 60, .32) !important;
  background: rgba(9, 24, 38, .95) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 237, 213, .12),
    inset 0 -1px 0 rgba(2, 6, 23, .38),
    0 32px 84px rgba(2, 6, 23, .58),
    0 12px 38px rgba(249, 115, 22, .09) !important;
}

html.dark body.nv-modern-ui .nv-lost-streak-icon {
  border-color: rgba(251, 146, 60, .28);
  background: rgba(124, 58, 20, .38) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 237, 213, .12),
    0 12px 28px rgba(2, 6, 23, .28);
}

html.dark body.nv-modern-ui .nv-lost-streak-balance {
  border-color: rgba(148, 163, 184, .16) !important;
  background: rgba(30, 41, 59, .64) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

html.dark body.nv-modern-ui .nv-lost-streak-dialog .nv-streak-restore-cost {
  border-color: rgba(251, 146, 60, .3) !important;
  background: rgba(124, 58, 20, .28) !important;
  box-shadow: inset 0 1px 0 rgba(255, 237, 213, .08);
}

html.dark body.nv-modern-ui .nv-lost-streak-dialog .nv-streak-restore-cost-label {
  color: #fdba74 !important;
}

html.dark body.nv-modern-ui .nv-lost-streak-dialog .nv-streak-restore-cost-value {
  color: #fed7aa !important;
}

html.dark body.nv-modern-ui .nv-lost-streak-later {
  border-color: rgba(148, 163, 184, .16);
  background: rgba(30, 41, 59, .42) !important;
  color: #cbd5e1 !important;
}

html.dark body.nv-modern-ui .nv-lost-streak-later:hover {
  border-color: rgba(148, 163, 184, .28);
  background: rgba(51, 65, 85, .64) !important;
}

html.dark body.nv-modern-ui .nv-lost-streak-note {
  color: #94a3b8 !important;
}

/* Goal completion uses the same focused glass with a cooler cyan accent. */
body.nv-modern-ui .nv-goal-reached-dialog {
  border: 1px solid rgba(56, 189, 248, .4) !important;
  background: rgba(246, 252, 255, .94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    inset 0 -1px 0 rgba(14, 165, 233, .1),
    0 32px 80px rgba(30, 64, 92, .24),
    0 12px 38px rgba(14, 165, 233, .12) !important;
}

body.nv-modern-ui .nv-goal-reached-dialog [data-goal-action="rest"] {
  border-color: rgba(148, 163, 184, .28) !important;
  background: rgba(255, 255, 255, .68) !important;
  color: #334155 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .94);
}

body.nv-modern-ui .nv-goal-reached-dialog [data-goal-action="rest"]:hover {
  border-color: rgba(100, 116, 139, .34) !important;
  background: rgba(255, 255, 255, .86) !important;
}

body.nv-modern-ui .nv-goal-reached-rest-hint {
  color: #64748b !important;
}

body.nv-modern-ui .nv-goal-reached-dialog [data-goal-action="continue"] {
  border: 1px solid rgba(8, 145, 178, .5) !important;
  background: rgba(8, 145, 178, .82) !important;
  background-image: none !important;
  color: #ecfeff !important;
  box-shadow:
    inset 0 1px 0 rgba(207, 250, 254, .38),
    0 12px 26px rgba(8, 145, 178, .2) !important;
}

body.nv-modern-ui .nv-goal-reached-dialog [data-goal-action="continue"]:hover {
  background: rgba(14, 116, 144, .9) !important;
}

html.dark body.nv-modern-ui .nv-goal-reached-dialog {
  border-color: rgba(34, 211, 238, .28) !important;
  background: rgba(7, 23, 37, .95) !important;
  box-shadow:
    inset 0 1px 0 rgba(207, 250, 254, .12),
    inset 0 -1px 0 rgba(2, 6, 23, .38),
    0 32px 84px rgba(2, 6, 23, .58),
    0 12px 38px rgba(6, 182, 212, .08) !important;
}

html.dark body.nv-modern-ui .nv-goal-reached-dialog [data-goal-action="rest"] {
  border-color: rgba(148, 163, 184, .18) !important;
  background: rgba(30, 41, 59, .64) !important;
  color: #e2e8f0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

html.dark body.nv-modern-ui .nv-goal-reached-dialog [data-goal-action="rest"]:hover {
  border-color: rgba(148, 163, 184, .28) !important;
  background: rgba(51, 65, 85, .72) !important;
}

html.dark body.nv-modern-ui .nv-goal-reached-rest-hint {
  color: #94a3b8 !important;
}

html.dark body.nv-modern-ui .nv-goal-reached-dialog [data-goal-action="continue"] {
  border-color: rgba(34, 211, 238, .34) !important;
  background: rgba(8, 145, 178, .48) !important;
  color: #cffafe !important;
  box-shadow:
    inset 0 1px 0 rgba(207, 250, 254, .12),
    0 12px 28px rgba(2, 6, 23, .28) !important;
}

/* Announcement media always follows the source ratio, regardless of active theme. */
.nv-announcement-media {
  display: flex;
  min-height: 0;
  align-items: center;
  justify-content: center;
  padding: .75rem;
}

.nv-announcement-image {
  display: block;
  width: auto !important;
  max-width: 100%;
  height: auto !important;
  max-height: min(22rem, 40dvh);
  border-radius: 1rem;
  object-fit: contain !important;
}

/* Announcements are focused dialogs, not another translucent page card. */
body.nv-modern-ui .nv-announcement-dialog {
  max-height: calc(100dvh - 1rem);
  overflow-y: auto !important;
  overscroll-behavior: contain;
  border-color: var(--nv-liquid-border-cool) !important;
  background: rgba(248, 252, 255, .96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .98),
    0 28px 72px rgba(30, 64, 92, .24) !important;
  -webkit-backdrop-filter: blur(30px) saturate(165%);
  backdrop-filter: blur(30px) saturate(165%);
}

html.dark body.nv-modern-ui .nv-announcement-dialog {
  background: rgba(7, 23, 37, .96) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 30px 78px rgba(2, 6, 23, .54) !important;
}

body.nv-modern-ui .nv-announcement-media {
  background: rgba(224, 245, 252, .5) !important;
}

html.dark body.nv-modern-ui .nv-announcement-media {
  background: rgba(12, 37, 55, .72) !important;
}

body.nv-modern-ui .nv-announcement-image {
  box-shadow: 0 10px 28px rgba(30, 64, 92, .12);
}

@media (min-width: 640px) {
  body.nv-modern-ui .nv-announcement-overlay {
    align-items: flex-end;
  }

  body.nv-modern-ui .nv-announcement-dialog {
    max-height: calc(100dvh - 3rem);
  }
}

@media (max-height: 720px) {
  body.nv-modern-ui .nv-announcement-content {
    padding: 1.25rem !important;
  }
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.nv-modern-ui {
    --nv-liquid-surface: rgba(255, 255, 255, .9);
    --nv-liquid-surface-strong: rgba(255, 255, 255, .94);
    --nv-liquid-surface-soft: rgba(241, 248, 252, .9);
  }

  html.dark body.nv-modern-ui {
    --nv-liquid-surface: rgba(15, 31, 48, .94);
    --nv-liquid-surface-strong: rgba(18, 39, 59, .96);
    --nv-liquid-surface-soft: rgba(23, 49, 72, .92);
  }
}

@media (max-width: 640px) {
  body.nv-modern-ui :is(.nv-topbar-surface, .menu-popup, .nv-paper-card, .nv-study-stage, .nv-liquid-glass) {
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    backdrop-filter: blur(18px) saturate(150%);
  }
}

@media (prefers-reduced-transparency: reduce) {
  body.nv-modern-ui {
    --nv-liquid-surface: rgba(255, 255, 255, .9);
    --nv-liquid-surface-strong: rgba(255, 255, 255, .94);
    --nv-liquid-surface-soft: rgba(241, 248, 252, .9);
  }

  html.dark body.nv-modern-ui {
    --nv-liquid-surface: rgba(15, 31, 48, .94);
    --nv-liquid-surface-strong: rgba(18, 39, 59, .96);
    --nv-liquid-surface-soft: rgba(23, 49, 72, .92);
  }
}

/* Matchmaking waiting room: arena layout with two explicit contender slots. */
.nv-matchmaking-arena {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(14, 165, 233, .26);
  background: rgba(248, 252, 255, .78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 22px 60px rgba(14, 116, 144, .1);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
}

html.dark .nv-matchmaking-arena {
  border-color: rgba(34, 211, 238, .2);
  background: rgba(5, 22, 37, .8);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 24px 64px rgba(0, 0, 0, .28);
}

.nv-arena-live {
  border: 1px solid rgba(16, 185, 129, .32);
  background: rgba(236, 253, 245, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82);
}

html.dark .nv-arena-live {
  background: rgba(6, 78, 59, .2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.nv-arena-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
}

.nv-arena-contender {
  position: relative;
  display: flex;
  min-width: 0;
  min-height: 224px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 24px;
  background: rgba(255, 255, 255, .62);
  padding: 38px 16px 18px;
  text-align: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
}

.nv-arena-contender--self {
  border-color: rgba(14, 165, 233, .38);
  background: rgba(224, 242, 254, .58);
}

.nv-arena-contender--searching {
  border-color: rgba(56, 189, 248, .38);
  border-style: dashed;
  background: rgba(240, 249, 255, .52);
}

html.dark .nv-arena-contender {
  border-color: rgba(148, 163, 184, .18);
  background: rgba(15, 35, 52, .68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

html.dark .nv-arena-contender--self {
  border-color: rgba(34, 211, 238, .32);
  background: rgba(8, 47, 73, .48);
}

html.dark .nv-arena-contender--searching {
  border-color: rgba(56, 189, 248, .3);
  background: rgba(7, 34, 53, .54);
}

.nv-arena-contender__state {
  position: absolute;
  left: 12px;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .86;
}

.nv-arena-contender__avatar {
  position: relative;
  display: grid;
  width: 88px;
  height: 88px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(14, 165, 233, .36);
  border-radius: 50%;
  background: rgba(255, 255, 255, .7);
  box-shadow:
    0 0 0 8px rgba(14, 165, 233, .08),
    0 0 0 16px rgba(14, 165, 233, .04),
    inset 0 1px 0 rgba(255, 255, 255, .9);
}

html.dark .nv-arena-contender__avatar {
  background: rgba(8, 23, 39, .82);
  box-shadow:
    0 0 0 8px rgba(34, 211, 238, .08),
    0 0 0 16px rgba(34, 211, 238, .035),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}

.nv-arena-contender__avatar-core {
  position: relative;
  z-index: 2;
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgba(14, 165, 233, .25);
  border-radius: 18px;
  background: rgba(255, 255, 255, .82);
  color: rgb(8 47 73);
  font-size: 22px;
  font-weight: 950;
  box-shadow: 0 12px 30px rgba(14, 116, 144, .12);
}

html.dark .nv-arena-contender__avatar-core {
  border-color: rgba(34, 211, 238, .2);
  background: rgba(12, 36, 55, .94);
  color: rgb(224 242 254);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .24);
}

.nv-arena-scanner {
  position: absolute;
  z-index: 1;
  left: 10px;
  right: 10px;
  top: 18px;
  height: 2px;
  border-radius: 999px;
  background: rgba(6, 182, 212, .85);
  box-shadow: 0 0 14px rgba(6, 182, 212, .72);
  animation: nvArenaScanner 1.8s ease-in-out infinite alternate;
}

.nv-arena-versus {
  position: relative;
  display: flex;
  min-height: 224px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: rgb(8 145 178);
}

.nv-arena-versus strong {
  position: relative;
  z-index: 2;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  border: 1px solid rgba(14, 165, 233, .36);
  border-radius: 20px;
  background: rgba(255, 255, 255, .78);
  font-size: 17px;
  font-weight: 950;
  letter-spacing: .08em;
  box-shadow: 0 14px 32px rgba(14, 116, 144, .16);
}

html.dark .nv-arena-versus strong {
  background: rgba(10, 30, 47, .9);
  color: rgb(103 232 249);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .28);
}

.nv-arena-versus__ring {
  position: absolute;
  width: 74px;
  height: 74px;
  border: 1px solid rgba(14, 165, 233, .28);
  border-radius: 50%;
  animation: nvArenaVersusPulse 1.8s ease-out infinite;
}

.nv-arena-versus__signal {
  display: flex;
  gap: 4px;
  margin-top: 15px;
}

.nv-arena-versus__signal i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  animation: nvArenaSignal 1.1s ease-in-out infinite;
}

.nv-arena-versus__signal i:nth-child(2) { animation-delay: .16s; }
.nv-arena-versus__signal i:nth-child(3) { animation-delay: .32s; }

.nv-arena-console {
  border: 1px solid rgba(148, 163, 184, .24);
  border-radius: 20px;
  background: rgba(255, 255, 255, .52);
  padding: 14px 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
}

html.dark .nv-arena-console {
  border-color: rgba(148, 163, 184, .16);
  background: rgba(8, 25, 41, .56);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}

.nv-arena-search-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, .2);
}

.nv-arena-search-progress {
  display: block;
  width: 36%;
  height: 100%;
  border-radius: inherit;
  background: rgba(6, 182, 212, .78);
  box-shadow: 0 0 16px rgba(6, 182, 212, .44);
  will-change: transform;
  animation: nvArenaSearch 1.65s cubic-bezier(.45, 0, .2, 1) infinite alternate;
}

.nv-arena-action {
  border: 1px solid rgba(148, 163, 184, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .76);
}

.nv-arena-action--secondary {
  background: rgba(255, 255, 255, .62);
  color: rgb(51 65 85);
}

.nv-arena-action--cancel {
  border-color: rgba(244, 63, 94, .28);
  background: rgba(255, 228, 230, .68);
  color: rgb(190 18 60);
}

html.dark .nv-arena-action {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
}

html.dark .nv-arena-action--secondary {
  border-color: rgba(148, 163, 184, .18);
  background: rgba(15, 35, 52, .72);
  color: rgb(203 213 225);
}

html.dark .nv-arena-action--cancel {
  border-color: rgba(251, 113, 133, .28);
  background: rgba(136, 19, 55, .22);
  color: rgb(253 164 175);
}

.nv-arena-action:hover { transform: translateY(-1px); }

@keyframes nvArenaScanner {
  from { transform: translateY(0); opacity: .45; }
  to { transform: translateY(50px); opacity: 1; }
}

@keyframes nvArenaVersusPulse {
  0% { opacity: .55; transform: scale(.82); }
  100% { opacity: 0; transform: scale(1.28); }
}

@keyframes nvArenaSignal {
  0%, 100% { opacity: .25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}

@keyframes nvArenaSearch {
  from { transform: translateX(-12%); }
  to { transform: translateX(188%); }
}

@media (max-width: 639px) {
  .nv-arena-stage {
    grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr);
    gap: 7px;
  }

  .nv-arena-contender,
  .nv-arena-versus {
    min-height: 204px;
  }

  .nv-arena-contender {
    border-radius: 20px;
    padding-inline: 9px;
  }

  .nv-arena-contender__avatar {
    width: 72px;
    height: 72px;
  }

  .nv-arena-contender__avatar-core {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    font-size: 18px;
  }

  .nv-arena-versus strong {
    width: 46px;
    height: 46px;
    border-radius: 16px;
    font-size: 13px;
  }

  .nv-arena-versus__ring {
    width: 58px;
    height: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nv-arena-scanner,
  .nv-arena-versus__ring,
  .nv-arena-versus__signal i,
  .nv-arena-search-progress {
    animation: none !important;
  }
}

html.nv-reduce-motion :is(.nv-arena-scanner, .nv-arena-versus__ring, .nv-arena-versus__signal i, .nv-arena-search-progress) {
  animation: none !important;
}
:root {
  --nv-flashcard-font-scale: 1;
}

.nv-settings-tabs--modern {
  background: color-mix(in srgb, var(--nv-liquid-surface, #f8fbff) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}

.nv-settings-tabs {
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  scroll-padding-inline: 1rem;
}

.nv-settings-tabs::-webkit-scrollbar {
  display: none;
}

.nv-settings-tabs--page {
  top: calc(env(safe-area-inset-top, 0px) + 5.75rem);
}

.nv-settings-shell--page,
.nv-settings-body--page {
  overflow: visible !important;
}

.nv-settings-tabs--modal {
  top: 0;
}

.nv-settings-tabs__track {
  box-sizing: border-box;
  min-width: 100%;
  width: max-content;
}

.nv-settings-tabs__track::before,
.nv-settings-tabs__track::after {
  content: "";
  flex: 0 0 max(.5rem, calc(50vw - 5rem));
}

.nv-settings-section,
[data-settings-anchor="notifications"] {
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 10.25rem);
}

@media (max-width: 639px) {
  .nv-settings-tabs--page {
    display: none;
  }

  .nv-settings-section,
  [data-settings-anchor="notifications"] {
    scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 6.5rem);
  }
}

@media (min-width: 640px) {
  .nv-settings-tabs__track::before,
  .nv-settings-tabs__track::after {
    display: none;
  }
}

.nv-flashcard-front .nv-flashcard-term {
  font-size: calc(2.25rem * var(--nv-flashcard-font-scale));
}

.nv-flashcard-back .nv-flashcard-term {
  font-size: calc(1.5rem * var(--nv-flashcard-font-scale));
}

@media (min-width: 640px) {
  .nv-flashcard-front .nv-flashcard-term {
    font-size: calc(3rem * var(--nv-flashcard-font-scale));
  }
}

html.nv-high-contrast .nv-settings-shell,
html.nv-high-contrast .nv-flashcard-face,
html.nv-high-contrast .nv-liquid-glass {
  border-color: currentColor !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 24%, transparent), var(--nv-card-shadow, 0 18px 45px rgb(15 23 42 / 0.18)) !important;
}

html.nv-high-contrast body {
  --nv-muted-opacity: 0.9;
}