/* VerbyGo global UI theme.
   This file applies the white neumorphism interface across the live app and public pages. */

:root {
  --neu-bg: #ffffff;
  --neu-surface: #ffffff;
  --neu-surface-soft: #fbfcfd;
  --neu-ink: #111827;
  --neu-muted: #64748b;
  --neu-green: #0f806f;
  --neu-red: #ef4a32;
  --neu-yellow: #f6c344;
  --neu-light: rgba(255, 255, 255, 1);
  --neu-dark: rgba(148, 163, 184, 0.22);
  --neu-shadow: 12px 12px 26px var(--neu-dark), -12px -12px 26px var(--neu-light);
  --neu-shadow-small: 7px 7px 16px rgba(148, 163, 184, 0.18), -7px -7px 16px rgba(255, 255, 255, 1);
  --neu-pressed: inset 7px 7px 16px rgba(148, 163, 184, 0.18), inset -7px -7px 16px rgba(255, 255, 255, 1);
}

html,
body {
  background: var(--neu-bg) !important;
  color: var(--neu-ink) !important;
}

.auth-screen,
.app-view,
.vocabulary-view,
.spanish-interface,
.layout,
.app-shell,
.vocabulary-shell {
  background: var(--neu-bg) !important;
}

.auth-left,
.auth-right,
.auth-panel,
.app-topbar,
.sidebar,
.topic-panel,
.practice-panel,
.help-panel,
.verb-search-panel,
.conjugator-options,
.prompt-card,
.help-card,
.mistake-history-panel,
.settings-menu,
.vocabulary-card-list-panel,
.vocabulary-overlay-card,
.vocabulary-folder-card,
.vocabulary-list-row,
.vocabulary-word-card,
.vocabulary-ai-panel,
.premium-dialog,
.pricing-card,
.result-modal,
.tour-card {
  background: var(--neu-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.48) !important;
  box-shadow: var(--neu-shadow) !important;
}

.auth-panel,
.settings-menu,
.vocabulary-overlay-card,
.premium-dialog,
.result-modal,
.tour-card {
  border-radius: 28px !important;
}

.topic-panel,
.practice-panel,
.help-panel,
.verb-search-panel,
.conjugator-options,
.prompt-card,
.help-card,
.mistake-history-panel,
.vocabulary-card-list-panel {
  border-radius: 24px !important;
}

.app-topbar,
.sidebar {
  background: var(--neu-surface) !important;
}

.aside-section,
.conjugator-section,
.options-section {
  background: var(--neu-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  border-radius: 24px !important;
  box-shadow: var(--neu-shadow) !important;
}

.aside-title {
  color: var(--neu-ink) !important;
  font-weight: 950 !important;
}

.menu {
  padding: 8px 8px 8px 4px !important;
}

.menu-button {
  background: var(--neu-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  color: var(--neu-ink) !important;
  box-shadow: var(--neu-shadow-small) !important;
}

.menu-button:hover {
  transform: translateX(0) translateY(-1px) !important;
  border-color: rgba(15, 128, 111, 0.22) !important;
  box-shadow: 9px 9px 20px rgba(126, 145, 164, 0.28), -9px -9px 20px rgba(255, 255, 255, 0.98) !important;
}

.menu-button.active {
  background: #e8f8f1 !important;
  border: 1px solid rgba(15, 128, 111, 0.48) !important;
  color: var(--neu-green) !important;
  box-shadow: var(--neu-pressed), 0 12px 28px rgba(15, 128, 111, 0.16) !important;
}

.menu-button.active::after {
  opacity: 0.18 !important;
}

.menu-number {
  background: var(--neu-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  color: var(--neu-muted) !important;
  box-shadow: 4px 4px 9px rgba(148, 163, 184, 0.16), -4px -4px 9px rgba(255, 255, 255, 1) !important;
}

.menu-button.active .menu-number {
  background: var(--neu-green) !important;
  color: #ffffff !important;
  border-color: rgba(15, 128, 111, 0.48) !important;
  box-shadow: var(--neu-pressed) !important;
}

.option-row input,
.mobile-tense-select {
  background: var(--neu-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  box-shadow: var(--neu-pressed) !important;
}

.auth-right {
  background:
    radial-gradient(circle at 50% 43%, rgba(255, 255, 255, 0.38), transparent 18rem),
    var(--neu-surface) !important;
}

.tense-button,
.topic-button,
.round-option,
.login-button,
.action-button,
.accent-button,
.vocabulary-add-button,
.vocabulary-primary-button,
.vocabulary-secondary-button,
.vocabulary-icon-button,
.settings-icon-button,
.premium-button,
.payment-button,
.plan-button,
.check-button,
.help-action,
.close-help-button,
.vocabulary-flip-all-button,
.vocabulary-trash-button,
.vocabulary-study-delete {
  background: var(--neu-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  color: var(--neu-ink) !important;
  box-shadow: var(--neu-shadow-small) !important;
}

.vocabulary-add-button {
  border-color: #22c55e !important;
  color: #22c55e !important;
  box-shadow:
    var(--neu-shadow-small),
    0 0 0 2px rgba(34, 197, 94, 0.16) !important;
}

.tense-button:hover,
.topic-button:hover,
.login-button:hover,
.action-button:hover,
.vocabulary-icon-button:hover,
.settings-icon-button:hover,
.vocabulary-flip-all-button:hover {
  transform: translateY(-1px);
  box-shadow: 9px 9px 20px rgba(126, 145, 164, 0.32), -9px -9px 20px rgba(255, 255, 255, 0.95) !important;
}

.tense-button:active,
.topic-button:active,
.login-button:active,
.action-button:active,
.vocabulary-icon-button:active,
.settings-icon-button:active {
  transform: translateY(0);
  box-shadow: var(--neu-pressed) !important;
}

.tense-button.active,
.topic-button.active,
.round-option.active,
.vocabulary-mode-button.active {
  background: #e8f8f1 !important;
  color: var(--neu-green) !important;
  border-color: rgba(15, 128, 111, 0.48) !important;
  box-shadow: var(--neu-pressed), 0 12px 28px rgba(15, 128, 111, 0.16) !important;
}

.topic-button.active .topic-dot {
  background: var(--neu-green) !important;
  border-color: rgba(15, 128, 111, 0.48) !important;
  color: #ffffff !important;
  box-shadow: var(--neu-pressed) !important;
}

.auth-panel.gmail-panel,
.auth-panel.create-account-panel,
.auth-panel.sign-in-panel {
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: var(--neu-shadow) !important;
}

.auth-panel.gmail-panel {
  border-top: 4px solid var(--neu-green) !important;
}

.auth-panel.create-account-panel {
  border-top: 4px solid var(--neu-red) !important;
}

.auth-panel.sign-in-panel {
  border-top: 4px solid var(--neu-green) !important;
}

.auth-panel .login-button {
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: var(--neu-shadow-small) !important;
}

input,
textarea,
select,
.answer-input,
#verbSearchInput,
#vocabularyListInput,
.vocabulary-entry-fields input {
  background: var(--neu-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.55) !important;
  box-shadow: var(--neu-pressed) !important;
}

input:focus,
textarea:focus,
select:focus,
.answer-input:focus,
#verbSearchInput:focus,
#vocabularyListInput:focus {
  border-color: rgba(15, 128, 111, 0.35) !important;
  outline: none !important;
}

.prompt-card,
.help-card,
.vocabulary-list-row,
.vocabulary-word-card,
.vocabulary-folder-card,
.pricing-card {
  background: var(--neu-surface-soft) !important;
  box-shadow: var(--neu-shadow-small) !important;
}

.verb-prompt-card strong,
.prompt-card strong,
.help-card strong,
.vocabulary-card-face,
.vocabulary-study-face {
  color: #0f5f55 !important;
}

.panel-head,
.vocabulary-card-list-head,
.help-panel-head,
.vocabulary-overlay-head {
  border-color: rgba(126, 145, 164, 0.18) !important;
}

.progress,
.round-progress-track,
.question-progress,
.vocabulary-count,
#vocabularyCardCount {
  background: var(--neu-surface) !important;
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow: var(--neu-pressed) !important;
}

.progress-fill,
.round-progress-fill,
#roundProgressFill {
  background: linear-gradient(90deg, #0f806f, #24a18e) !important;
  box-shadow: 4px 4px 10px rgba(15, 128, 111, 0.18), -3px -3px 8px rgba(255, 255, 255, 0.75);
}

.brand-mark,
.app-logo-mark {
  background: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: var(--neu-shadow-small) !important;
}

.version-banner,
body > div:first-child {
  background: var(--neu-surface) !important;
  color: var(--neu-muted) !important;
  border-bottom: 1px solid rgba(126, 145, 164, 0.16) !important;
  box-shadow: 0 7px 16px rgba(126, 145, 164, 0.14) !important;
}

.feedback.success,
.vocabulary-local-notice,
.verb-vocabulary-toast {
  background: #ffffff !important;
  box-shadow: var(--neu-shadow-small) !important;
}

.feedback.error,
.auth-message,
.vocabulary-danger-button {
  background: #ffffff !important;
}

.pricing-card.featured,
.premium-dialog {
  border-color: rgba(15, 128, 111, 0.25) !important;
}

@media (max-width: 760px) {
  .auth-left,
  .auth-right,
  .app-topbar,
  .sidebar,
  .topic-panel,
  .practice-panel,
  .help-panel,
  .vocabulary-card-list-panel {
    border-radius: 18px !important;
    box-shadow: var(--neu-shadow-small) !important;
  }
}

/* Public SEO, legal, and premium pages use a lighter HTML structure. */
.page,
main,
footer {
  background: var(--neu-bg) !important;
}

header,
.hero,
.hero-copy,
.hero-art,
article,
.sidebar-card,
.cta-panel,
.section,
.feature-card,
.faq-card,
.price-card,
.legal-card,
.legal-section,
.image-strip img,
table,
.button,
.button.secondary,
.nav-link,
nav a {
  background: var(--neu-surface) !important;
  border-color: rgba(255, 255, 255, 0.55) !important;
  box-shadow: var(--neu-shadow-small) !important;
}

.hero,
.hero-copy,
.hero-art,
article,
.sidebar-card,
.cta-panel,
.feature-card,
.faq-card,
.price-card,
.legal-card,
.legal-section {
  border-radius: 24px !important;
}

.hero,
.hero-copy,
.price-card.featured,
.cta-panel {
  box-shadow: var(--neu-shadow) !important;
}

.button,
.nav-link,
nav a,
.cta,
.price-card .cta {
  background: var(--neu-surface) !important;
  color: var(--neu-green) !important;
  border: 1px solid rgba(255, 255, 255, 0.62) !important;
  box-shadow: var(--neu-shadow-small) !important;
}

.button:hover,
.nav-link:hover,
nav a:hover,
.cta:hover,
.price-card .cta:hover {
  transform: translateY(-1px);
  box-shadow: 9px 9px 20px rgba(126, 145, 164, 0.32), -9px -9px 20px rgba(255, 255, 255, 0.95) !important;
}

.price-card.featured,
.button:not(.secondary),
.cta:not(.secondary),
.price-card .cta {
  background: #e8f8f1 !important;
  color: var(--neu-green) !important;
}

th,
.plan-tag,
.check,
.kicker {
  background: #e8f8f1 !important;
  color: var(--neu-green) !important;
}

.example {
  background: #ffffff !important;
  border-left-color: var(--neu-yellow) !important;
  box-shadow: var(--neu-shadow-small) !important;
}