/* Reset y base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f8fafc;
  font-weight: 400;
}

html.dark body {
  background-color: #111827;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 0.5em;
  color: #1a202c;
}

h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.75rem;
}
h3 {
  font-size: 1.5rem;
}
h4 {
  font-size: 1.25rem;
}
h5 {
  font-size: 1.125rem;
}
h6 {
  font-size: 1rem;
}

p {
  margin-bottom: 1em;
  color: #4a5568;
}

a {
  color: #3182ce;
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: #2c5aa0;
  text-decoration: underline;
}

/* Layout base */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header/Navigation */
/* nav {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 100;
} */

.nav-brand {
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a202c;
}

/* Main content */
main {
  min-height: calc(100vh - 120px);
  padding: 2rem 0;
}

/* Footer */
/* footer { */
/* background: #2d3748; */
/* color: #a0aec0; */
/* text-align: center; */
/* padding: 1rem 0; */
/* border-top: 1px solid #4a5568; */
/* } */

/* Utilities */
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.text-left {
  text-align: left;
}

.mb-0 {
  margin-bottom: 0;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.mb-8 {
  margin-bottom: 2rem;
}

.mt-0 {
  margin-top: 0;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-8 {
  margin-top: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden;
  }

  .container {
    padding: 0 0.75rem;
  }

  main {
    padding: 1rem 0;
  }

  h1 {
    font-size: 1.75rem;
  }
  h2 {
    font-size: 1.5rem;
  }
}

/* Loading states */
.loading {
  opacity: 0.7;
  pointer-events: none;
}

/* Smooth transitions */
* {
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

/* ================================================================================================ */
/* INACTIVE SUBSCRIPTION                                                                            */
/* ================================================================================================ */

/* It affects welcome.html, collections.html, navbar.html, sidebar.html and more components */

body.inactive-sub > main {
  margin-top: 115px;
}

body.inactive-sub > nav {
  top: 2.5rem;
}

body.inactive-sub > aside {
  top: 115px;
  height: calc(100vh - 115px);
}

/* ================================================================================================ */
/* TOAST SYSTEM                                                                                     */
/* ================================================================================================ */

.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  padding: 12px 16px;
  border-radius: 8px;
  color: white;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-width: 300px;
  animation: toast-slide-in 0.3s ease-out;
  display: flex;
  align-items: center;
  gap: 8px;
}

.toast-spinner {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  animation: toast-spin 1s linear infinite;
}

@keyframes toast-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.toast-info {
  background: #3b82f6;
}

.toast-success {
  background: #10b981;
}

.toast-warning {
  background: #f59e0b;
}

.toast-error {
  background: #ef4444;
}

.toast-loading {
  background: #6366f1;
}

.toast-fade-out {
  animation: toast-fade-out 0.3s ease-out forwards;
}

@keyframes toast-slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes toast-fade-out {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* Dark mode support */
html.dark .toast-info {
  background: #1e40af;
}

html.dark .toast-success {
  background: #047857;
}

html.dark .toast-warning {
  background: #d97706;
}

html.dark .toast-error {
  background: #dc2626;
}

html.dark .toast-loading {
  background: #4f46e5;
}

[x-cloak] {
  display: none !important;
}

/* ================================================================================================ */
/* DEVELOPMENT ONLY STYLES - These styles should only be used in development mode                  */
/* Remove or comment out these styles in production builds                                          */
/* ================================================================================================ */

.dev-theme-toggle {
  position: fixed;
  bottom: 80px;
  right: 25px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #e5e7eb;
  background: #ffffff;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dev-theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.dev-theme-toggle:active {
  transform: scale(0.95);
}

html.dark .dev-theme-toggle {
  background: #374151;
  border-color: #4b5563;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

html.dark .dev-theme-toggle:hover {
  background: #4b5563;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* ================================================================================================ */

.home main {
  padding: 0;
}

.ui-home-navbar {
  position: fixed;
  width: 100%;
  z-index: 50;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background-color: rgba(255, 255, 255, 0.4);
}

html.dark .ui-home-navbar {
  border-bottom-color: rgba(55, 65, 81, 0.3);
  background-color: rgba(31, 41, 55, 0.4);
}

.ui-home-navbar-container {
  /* max-width: 80rem; */
  margin: 0 auto;
  padding: 1rem 1.5rem;
}

.ui-home-navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ui-home-navbar-brand {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
}

.ui-home-navbar-title-link:hover {
  text-decoration: none;
  color: inherit;
}

.ui-home-navbar-title {
  font-size: 1.875rem;
  line-height: 1.2;
  font-weight: 400;
  color: #111827;
  margin: 0;
}

html.dark .ui-home-navbar-title {
  color: #f3f4f6;
}

.ui-home-navbar-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 0.375rem;
  background-color: #1d4ed8;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
  margin-bottom: 0.125rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.ui-home-navbar-badge-icon {
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
}

.ui-home-navbar-badge-text {
  font-size: 0.75rem;
}

.ui-home-navbar-badge-pro {
  background: linear-gradient(90deg, #dcfce7 0%, #bbf7d0 100%);
  color: #15803d;
  border: 1px solid #15803d;
  text-decoration: none;
}

.ui-home-navbar-badge-pro:hover {
  color: #15803d;
  text-decoration: none;
}

.ui-home-navbar-badge-premium {
  background: linear-gradient(90deg, #fef9c3 0%, #fde68a 100%);
  color: #92400e;
  border: 1px solid #92400e;
  text-decoration: none;
}

.ui-home-navbar-badge-premium:hover {
  color: #92400e;
  text-decoration: none;
}

html.dark .ui-home-navbar-badge-pro {
  background: linear-gradient(
    90deg,
    rgba(20, 83, 45, 0.5) 0%,
    rgba(20, 83, 45, 0.7) 100%
  );
  color: #86efac;
  border-color: #86efac;
}

html.dark .ui-home-navbar-badge-pro:hover {
  color: #86efac;
}

html.dark .ui-home-navbar-badge-premium {
  background: linear-gradient(
    90deg,
    rgba(120, 53, 15, 0.4) 0%,
    rgba(120, 53, 15, 0.6) 100%
  );
  color: #fcd34d;
  border-color: #fcd34d;
}

html.dark .ui-home-navbar-badge-premium:hover {
  color: #fcd34d;
}

.ui-home-navbar-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
  background: linear-gradient(to right, #2563eb, #9333ea, #4f46e5);
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: background 0.15s ease;
  border: none;
  cursor: pointer;
}

.ui-home-navbar-cta:hover {
  background: linear-gradient(to right, #1d4ed8, #7e22ce, #4338ca);
  text-decoration: none;
  color: #fff;
}

.ui-home-navbar-cta-icon {
  width: 1rem;
  height: 1rem;
  /* margin-left: 0.5rem; */
  flex-shrink: 0;
}

.ui-home-navbar-auth {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ui-home-navbar-cta-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
  text-decoration: none;
  background-color: transparent;
  border: 1px solid #d1d5db;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
}

.ui-home-navbar-cta-outline:hover {
  background-color: #f3f4f6;
  text-decoration: none;
  color: #111827;
}

html.dark .ui-home-navbar-cta-outline {
  color: #e5e7eb;
  border-color: #4b5563;
}

html.dark .ui-home-navbar-cta-outline:hover {
  background-color: #374151;
  color: #f9fafb;
}

.ui-home-navbar-right {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ui-home-navbar-theme-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.375rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background-color: rgba(255, 255, 255, 0.7);
  color: #374151;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
  flex-shrink: 0;
}

.ui-home-navbar-theme-btn:hover {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.2);
}

html.dark .ui-home-navbar-theme-btn {
  background-color: rgba(55, 65, 81, 0.7);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e5e7eb;
}

html.dark .ui-home-navbar-theme-btn:hover {
  background-color: rgba(75, 85, 99, 0.9);
}

.ui-home-navbar-lang {
  position: relative;
}

.ui-home-navbar-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background-color: rgba(255, 255, 255, 0.7);
  color: #374151;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
  text-transform: uppercase;
}

.ui-home-navbar-lang-btn:hover {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.2);
}

html.dark .ui-home-navbar-lang-btn {
  background-color: rgba(55, 65, 81, 0.7);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e5e7eb;
}

html.dark .ui-home-navbar-lang-btn:hover {
  background-color: rgba(75, 85, 99, 0.9);
}

.ui-home-navbar-lang-flag {
  width: 1.125rem;
  height: 0.875rem;
  object-fit: cover;
  border-radius: 0.125rem;
  flex-shrink: 0;
}

.ui-home-navbar-lang-code {
  line-height: 1;
}

.ui-home-navbar-lang-chevron {
  opacity: 0.6;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.ui-home-navbar-lang-chevron-open {
  transform: rotate(180deg);
}

.ui-home-navbar-lang-dropdown {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  min-width: 7rem;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  z-index: 100;
}

html.dark .ui-home-navbar-lang-dropdown {
  background-color: #1f2937;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.ui-home-navbar-lang-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: #374151;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  transition: background-color 0.1s ease;
}

.ui-home-navbar-lang-option:hover {
  background-color: #f3f4f6;
  color: #111827;
  text-decoration: none;
}

html.dark .ui-home-navbar-lang-option {
  color: #e5e7eb;
}

html.dark .ui-home-navbar-lang-option:hover {
  background-color: #374151;
  color: #f9fafb;
}

.ui-home-navbar-lang-option-active {
  background-color: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}

html.dark .ui-home-navbar-lang-option-active {
  background-color: rgba(29, 78, 216, 0.15);
  color: #93c5fd;
}

.ui-home-navbar-lang-option-active:hover {
  background-color: #dbeafe;
}

html.dark .ui-home-navbar-lang-option-active:hover {
  background-color: rgba(29, 78, 216, 0.25);
}

.ui-home-navbar-title-short {
  display: none;
}

.ui-home-navbar-text-mobile {
  display: none;
}

@media (max-width: 900px) {
  .ui-home-navbar-text-desktop {
    display: none;
  }

  .ui-home-navbar-text-mobile {
    display: inline;
  }
}

@media (max-width: 640px) {
  .ui-home-navbar-title {
    font-size: 1.25rem;
  }

  .ui-home-navbar-title-full {
    display: none;
  }

  .ui-home-navbar-title-short {
    display: inline;
  }

  .ui-home-navbar-badge-text {
    display: none;
  }

  .ui-home-navbar-auth {
    display: none;
  }

  .ui-home-navbar-container {
    padding: 1rem;
  }

  .ui-home-navbar-theme-btn,
  .ui-home-navbar-lang-btn,
  .ui-home-navbar-lang-dropdown {
    transform: scale(0.925);
  }
}

/* ===== Container ===== */
.ui-home-hero {
  position: relative;
  overflow: hidden;
  top: 70px;
}

/* ===== Background orbs ===== */
.ui-home-hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ui-home-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
}

.ui-home-hero-orb-blue {
  top: 80px;
  left: 40px;
  width: 288px;
  height: 288px;
  background: rgba(59, 130, 246, 0.33);
  animation: ui-home-hero-orb-1 8s ease-in-out infinite;
}

html.dark .ui-home-hero-orb-blue {
  background: rgba(59, 130, 246, 0.1);
}

.ui-home-hero-orb-purple {
  bottom: 80px;
  right: 40px;
  width: 384px;
  height: 384px;
  background: rgba(192, 132, 252, 0.2);
  animation: ui-home-hero-orb-2 8s ease-in-out infinite;
}

html.dark .ui-home-hero-orb-purple {
  background: rgba(168, 85, 247, 0.1);
}

.ui-home-hero-orb-indigo {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 384px;
  height: 384px;
  background: rgba(129, 140, 248, 0.1);
  animation: ui-home-hero-orb-3 10s ease-in-out infinite;
}

html.dark .ui-home-hero-orb-indigo {
  background: rgba(99, 102, 241, 0.05);
}

/* ===== Floating words (desktop only) ===== */
.ui-home-hero-floating {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  display: none;
}

@media (min-width: 1024px) {
  .ui-home-hero-floating {
    display: block;
  }
}

.ui-home-hero-float {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 2px;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.15);
}

html.dark .ui-home-hero-float {
  border: 1px solid rgba(75, 85, 99, 0.4);
  background: rgba(31, 41, 55, 0.4);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.3);
}

.ui-home-hero-float-word {
  font-size: 1.125rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
}

html.dark .ui-home-hero-float-word {
  color: #f3f4f6;
}

.ui-home-hero-float-translation {
  font-size: 0.7rem;
  font-weight: 400;
  color: #6b7280;
  line-height: 1;
}

html.dark .ui-home-hero-float-translation {
  color: #9ca3af;
}

.ui-home-hero-float-1 {
  top: 12%;
  left: 6%;
  animation: ui-home-hero-float 4s ease-in-out infinite;
  animation-delay: 0s;
}

.ui-home-hero-float-2 {
  top: 38%;
  left: 10%;
  animation: ui-home-hero-float 4s ease-in-out infinite;
  animation-delay: 0.3s;
}

.ui-home-hero-float-3 {
  top: 62%;
  left: 5%;
  animation: ui-home-hero-float 4s ease-in-out infinite;
  animation-delay: 0.6s;
}

.ui-home-hero-float-4 {
  top: 18%;
  right: 8%;
  animation: ui-home-hero-float 4s ease-in-out infinite;
  animation-delay: 0.15s;
}

.ui-home-hero-float-5 {
  top: 44%;
  right: 12%;
  animation: ui-home-hero-float 4s ease-in-out infinite;
  animation-delay: 0.45s;
}

.ui-home-hero-float-6 {
  top: 68%;
  right: 7%;
  animation: ui-home-hero-float 4s ease-in-out infinite;
  animation-delay: 0.75s;
}

/* ===== Main content ===== */
.ui-home-hero-content {
  position: relative;
  z-index: 10;
  max-width: 80rem;
  margin: 0 auto;
  padding: 6rem 1.5rem;
  text-align: center;
}

@media (min-width: 640px) {
  .ui-home-hero-content {
    padding: 8rem 1.5rem;
  }
}

@media (min-width: 1024px) {
  .ui-home-hero-content {
    padding: 10rem 1.5rem;
  }
}

/* ===== Badge ===== */
.ui-home-hero-badge-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
  animation: ui-home-hero-fade-down 0.5s ease-out both;
}

.ui-home-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.1);
}

html.dark .ui-home-hero-badge {
  border: 1px solid rgba(75, 85, 99, 0.4);
  background: rgba(31, 41, 55, 0.3);
}

.ui-home-hero-badge-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  color: #9333ea;
}

html.dark .ui-home-hero-badge-icon {
  color: #c084fc;
}

.ui-home-hero-badge-text {
  font-size: 0.875rem;
  color: #374151;
}

html.dark .ui-home-hero-badge-text {
  color: #d1d5db;
}

/* ===== Heading ===== */
.ui-home-hero-heading {
  font-weight: 500;
  color: #111827;
  margin: 0 0 1.5rem 0;
  animation: ui-home-hero-fade-up 0.5s ease-out 0.1s both;
}

html.dark .ui-home-hero-heading {
  color: #f3f4f6;
}

.ui-home-hero-heading-line {
  display: block;
}

.ui-home-hero-heading-line-lg {
  font-size: 3rem;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

@media (min-width: 640px) {
  .ui-home-hero-heading-line-lg {
    font-size: 3.75rem;
  }
}

@media (min-width: 1024px) {
  .ui-home-hero-heading-line-lg {
    font-size: 4.5rem;
  }
}

.ui-home-hero-heading-line-md {
  font-size: 2.5rem;
  line-height: 1.1;
  margin-top: 1rem;
}

@media (min-width: 640px) {
  .ui-home-hero-heading-line-md {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  .ui-home-hero-heading-line-md {
    font-size: 3.75rem;
  }
}

.ui-home-hero-heading-gradient-blue {
  background: linear-gradient(to right, #2563eb, #9333ea, #4f46e5);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

html.dark .ui-home-hero-heading-gradient-blue {
  background: linear-gradient(to right, #60a5fa, #c084fc, #818cf8);
  -webkit-background-clip: text;
  background-clip: text;
}

.ui-home-hero-heading-gradient-purple {
  background: linear-gradient(to right, #9333ea, #4f46e5, #2563eb);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

html.dark .ui-home-hero-heading-gradient-purple {
  background: linear-gradient(to right, #c084fc, #818cf8, #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
}

/* ===== Description ===== */
.ui-home-hero-description {
  max-width: 42rem;
  margin: 0 auto 3rem auto;
  font-size: 1.25rem;
  line-height: 1.625;
  color: #4b5563;
  animation: ui-home-hero-fade-up 0.5s ease-out 0.2s both;
}

html.dark .ui-home-hero-description {
  color: #9ca3af;
}

/* ===== CTA buttons ===== */
.ui-home-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 5rem;
  animation: ui-home-hero-fade-up 0.5s ease-out 0.3s both;
}

@media (min-width: 640px) {
  .ui-home-hero-actions {
    flex-direction: row;
  }
}

.ui-home-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  font-size: 1.125rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.ui-home-hero-btn-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.ui-home-hero-btn-primary {
  background: linear-gradient(to right, #2563eb, #9333ea, #4f46e5);
  color: #ffffff;
  box-shadow:
    0 10px 25px -5px rgba(37, 99, 235, 0.3),
    0 4px 10px -6px rgba(147, 51, 234, 0.2);
}

.ui-home-hero-btn-primary:hover {
  background: linear-gradient(to right, #1d4ed8, #7e22ce, #4338ca);
  box-shadow:
    0 20px 40px -5px rgba(37, 99, 235, 0.4),
    0 8px 16px -6px rgba(147, 51, 234, 0.3);
  color: #ffffff;
  text-decoration: none;
}

.ui-home-hero-btn-outline {
  border: 2px solid #93c5fd;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  color: #1d4ed8;
}

html.dark .ui-home-hero-btn-outline {
  border: 2px solid #1e3a8a;
  background: rgba(31, 41, 55, 0.5);
  color: #93c5fd;
}

.ui-home-hero-btn-outline:hover {
  background: rgba(239, 246, 255, 0.8);
  text-decoration: none;
}

html.dark .ui-home-hero-btn-outline:hover {
  background: rgba(30, 58, 138, 0.3);
}

/* ===== Tour dropdown ===== */
.ui-home-hero-dropdown {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.ui-home-hero-dropdown-menu {
  position: absolute;
  bottom: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  min-width: 180px;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.925);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
  overflow: hidden;
  z-index: 20;
}

html.dark .ui-home-hero-dropdown-menu {
  border: 1px solid rgba(75, 85, 99, 0.4);
  background: rgba(17, 24, 39, 0.925);
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
}

.ui-home-hero-dropdown-item {
  display: block;
  padding: 0.625rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #1d4ed8;
  text-decoration: none;
  transition: background 0.15s ease;
  border-bottom: 1px solid rgba(147, 197, 253, 0.2);
}

.ui-home-hero-dropdown-item:last-child {
  border-bottom: none;
}

.ui-home-hero-dropdown-item:hover {
  background: rgba(239, 246, 255, 0.9);
  text-decoration: none;
}

html.dark .ui-home-hero-dropdown-item {
  color: #93c5fd;
  border-bottom: 1px solid rgba(30, 58, 138, 0.3);
}

html.dark .ui-home-hero-dropdown-item:hover {
  background: rgba(30, 58, 138, 0.3);
}

/* ===== Feature cards ===== */
.ui-home-hero-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 56rem;
  margin: 0 auto;
  animation: ui-home-hero-fade-up 0.5s ease-out 0.4s both;
}

@media (min-width: 768px) {
  .ui-home-hero-features {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ui-home-hero-feature {
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 1rem;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
  transition: background 0.2s ease;
}

html.dark .ui-home-hero-feature {
  border: 1px solid rgba(75, 85, 99, 0.4);
  background: rgba(31, 41, 55, 0.3);
}

.ui-home-hero-feature:hover {
  background: rgba(255, 255, 255, 0.45);
}

html.dark .ui-home-hero-feature:hover {
  background: rgba(31, 41, 55, 0.45);
}

.ui-home-hero-feature-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem auto;
}

.ui-home-hero-feature-icon-blue {
  background: linear-gradient(135deg, #3b82f6, #9333ea);
}

.ui-home-hero-feature-icon-purple {
  background: linear-gradient(135deg, #9333ea, #4f46e5);
}

.ui-home-hero-feature-icon-indigo {
  background: linear-gradient(135deg, #4f46e5, #3b82f6);
}

.ui-home-hero-feature-svg {
  width: 1.5rem;
  height: 1.5rem;
  color: #ffffff;
}

.ui-home-hero-feature-title {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 0.5rem 0;
}

html.dark .ui-home-hero-feature-title {
  color: #f3f4f6;
}

.ui-home-hero-feature-desc {
  font-size: 0.875rem;
  color: #4b5563;
  margin: 0;
  line-height: 1.5;
}

html.dark .ui-home-hero-feature-desc {
  color: #9ca3af;
}

/* ===== Mobile variants (hidden by default) ===== */
.ui-home-hero-heading-mobile,
.ui-home-hero-description-mobile {
  display: none;
}

/* ===== Mobile View ===== */
@media (max-width: 480px) {
  .ui-home-hero-heading-desktop,
  .ui-home-hero-description-desktop,
  .ui-home-hero-heading-line-md {
    display: none;
  }

  .ui-home-hero-heading-mobile,
  .ui-home-hero-description-mobile {
    display: block;
  }

  .ui-home-hero-heading-line-lg {
    font-size: 2.5rem;
  }

  .ui-home-hero-description {
    font-size: 1rem;
  }

  .ui-home-hero-btn {
    font-size: 0.9rem;
    padding: 0.625rem 1.5rem;
  }
}

@keyframes ui-home-hero-orb-1 {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
}

@keyframes ui-home-hero-orb-2 {
  0%,
  100% {
    transform: scale(1.2);
    opacity: 0.5;
  }
  50% {
    transform: scale(1);
    opacity: 0.3;
  }
}

@keyframes ui-home-hero-orb-3 {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.2;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.4;
  }
}

@keyframes ui-home-hero-float {
  0%,
  100% {
    opacity: 0.5;
    transform: translateY(0);
  }
  50% {
    opacity: 0.9;
    transform: translateY(-10px);
  }
}

@keyframes ui-home-hero-fade-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ui-home-hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ui-home-demo {
  position: relative;
  padding: 128px 0;
  background: linear-gradient(to bottom, #f9fafb, #ffffff, #f9fafb);
  overflow: hidden;
}

html.dark .ui-home-demo {
  background: linear-gradient(to bottom, #111827, #000000, #111827);
}

/* Background orbs */
.ui-home-demo-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.ui-home-demo-orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(48px);
}

.ui-home-demo-orb-blue {
  top: 80px;
  left: 40px;
  width: 384px;
  height: 384px;
  background: rgba(59, 130, 246, 0.2);
  animation: ui-home-demo-pulse-1 8s ease-in-out infinite;
}

html.dark .ui-home-demo-orb-blue {
  background: rgba(59, 130, 246, 0.1);
}

.ui-home-demo-orb-purple {
  bottom: 80px;
  right: 40px;
  width: 384px;
  height: 384px;
  background: rgba(168, 85, 247, 0.2);
  animation: ui-home-demo-pulse-2 8s ease-in-out infinite;
}

html.dark .ui-home-demo-orb-purple {
  background: rgba(168, 85, 247, 0.1);
}

.ui-home-demo-orb-indigo {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
  background: rgba(99, 102, 241, 0.1);
  animation: ui-home-demo-pulse-3 20s linear infinite;
}

html.dark .ui-home-demo-orb-indigo {
  background: rgba(99, 102, 241, 0.05);
}

@keyframes ui-home-demo-pulse-1 {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
}

@keyframes ui-home-demo-pulse-2 {
  0%,
  100% {
    transform: scale(1.2);
    opacity: 0.5;
  }
  50% {
    transform: scale(1);
    opacity: 0.3;
  }
}

@keyframes ui-home-demo-pulse-3 {
  0% {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3) rotate(180deg);
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(360deg);
  }
}

/* Container */
.ui-home-demo-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 10;
}

/* Section header */
.ui-home-demo-header {
  text-align: center;
  margin-bottom: 64px;
}

/* Badge */
.ui-home-demo-badge-wrapper {
  display: inline-flex;
  margin-bottom: 32px;
}

.ui-home-demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(
    to right,
    rgba(37, 99, 235, 0.2),
    rgba(147, 51, 234, 0.2),
    rgba(79, 70, 229, 0.2)
  );
  backdrop-filter: blur(12px);
  border: 1px solid rgba(59, 130, 246, 0.3);
  border-radius: 9999px;
}

.ui-home-demo-badge-icon-wrapper {
  position: relative;
}

.ui-home-demo-badge-icon {
  color: #2563eb;
}

html.dark .ui-home-demo-badge-icon {
  color: #60a5fa;
}

.ui-home-demo-badge-text {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #1d4ed8;
}

html.dark .ui-home-demo-badge-text {
  color: #93c5fd;
}

/* Heading */
.ui-home-demo-heading {
  font-size: 60px;
  font-weight: 500;
  color: #111827;
  margin-bottom: 24px;
  line-height: 1.1;
}

html.dark .ui-home-demo-heading {
  color: #ffffff;
}

@media (max-width: 768px) {
  .ui-home-demo-heading {
    font-size: 40px;
  }
}

@media (max-width: 480px) {
  .ui-home-demo-heading {
    font-size: 32px;
  }
}

.ui-home-demo-heading-gradient {
  background: linear-gradient(to right, #2563eb, #9333ea, #4f46e5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html.dark .ui-home-demo-heading-gradient {
  background: linear-gradient(to right, #60a5fa, #c084fc, #818cf8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Description */
.ui-home-demo-description {
  font-size: 20px;
  color: #4b5563;
  max-width: 768px;
  margin: 0 auto;
  line-height: 1.75;
}

html.dark .ui-home-demo-description {
  color: #d1d5db;
}

@media (max-width: 768px) {
  .ui-home-demo-description {
    font-size: 18px;
  }
}

.ui-home-demo-description-highlight {
  color: #111827;
  font-weight: 500;
}

html.dark .ui-home-demo-description-highlight {
  color: #ffffff;
}

.ui-home-demo-description-gradient {
  background: linear-gradient(to right, #2563eb, #9333ea);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 500;
}

html.dark .ui-home-demo-description-gradient {
  background: linear-gradient(to right, #60a5fa, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Bento Grid */
.ui-home-demo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
}

@media (min-width: 1024px) {
  .ui-home-demo-grid {
    grid-template-columns: repeat(12, 1fr);
  }
}

/* Bento Card base */
.ui-home-demo-card {
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(24px);
  border: 1px solid rgba(229, 231, 235, 0.6);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.6);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

html.dark .ui-home-demo-card {
  border-color: rgba(55, 65, 81, 0.6);
  background: rgba(31, 41, 55, 0.6);
}

.ui-home-demo-card-large {
  padding: 32px;
  min-height: 400px;
}

@media (min-width: 1024px) {
  .ui-home-demo-card-large {
    grid-column: span 7;
    min-height: 500px;
  }
}

/* Gradient overlay */
.ui-home-demo-card-gradient {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ui-home-demo-card-gradient-blue {
  background: linear-gradient(
    to bottom right,
    rgba(59, 130, 246, 0.05),
    rgba(168, 85, 247, 0.05),
    rgba(99, 102, 241, 0.05)
  );
}

html.dark .ui-home-demo-card-gradient-blue {
  background: linear-gradient(
    to bottom right,
    rgba(59, 130, 246, 0.1),
    rgba(168, 85, 247, 0.1),
    rgba(99, 102, 241, 0.1)
  );
}

/* Card inner */
.ui-home-demo-card-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Pills / badges */
.ui-home-demo-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  border: none;
  margin-bottom: 24px;
}

.ui-home-demo-pill-blue {
  background: #dbeafe;
  color: #1d40af;
}

html.dark .ui-home-demo-pill-blue {
  background: rgba(30, 58, 138, 0.3);
  color: #93c5fd;
}

.ui-home-demo-pill-green {
  background: #dcfce7;
  color: #166534;
}

html.dark .ui-home-demo-pill-green {
  background: rgba(20, 83, 45, 0.3);
  color: #86efac;
}

.ui-home-demo-pill-sm {
  font-size: 11px;
  padding: 2px 8px;
  margin-bottom: 0;
}

/* Flashcard scene */
.ui-home-demo-flashcard-scene {
  width: 100%;
  max-width: 384px;
  perspective: 1000px;
}

.ui-home-demo-flashcard {
  position: relative;
  width: 100%;
  height: 280px;
  animation: ui-home-demo-flip 6s ease-in-out infinite;
  transform-style: preserve-3d;
}

@keyframes ui-home-demo-flip {
  0% {
    transform: rotateY(0deg);
  }
  30% {
    transform: rotateY(180deg);
  }
  70% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.ui-home-demo-flashcard-face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backdrop-filter: blur(24px);
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 32px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

html.dark .ui-home-demo-flashcard-face {
  border-color: #4b5563;
  background: rgba(31, 41, 55, 0.9);
}

.ui-home-demo-flashcard-back {
  transform: rotateY(180deg);
}

.ui-home-demo-flashcard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ui-home-demo-flashcard-volume {
  color: #6b7280;
}

html.dark .ui-home-demo-flashcard-volume {
  color: #9ca3af;
}

.ui-home-demo-flashcard-word-block {
  text-align: center;
  margin-bottom: 24px;
}

.ui-home-demo-flashcard-word {
  font-size: 36px;
  color: #111827;
  margin-bottom: 8px;
}

html.dark .ui-home-demo-flashcard-word {
  color: #ffffff;
}

.ui-home-demo-flashcard-pronunciation {
  font-size: 14px;
  color: #6b7280;
}

html.dark .ui-home-demo-flashcard-pronunciation {
  color: #9ca3af;
}

.ui-home-demo-flashcard-word-original {
  font-size: 16px;
  color: #6b7280;
  margin-top: 4px;
}

html.dark .ui-home-demo-flashcard-word-original {
  color: #9ca3af;
}

.ui-home-demo-flashcard-translation-block {
  margin-bottom: 16px;
}

.ui-home-demo-flashcard-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #6b7280;
  margin-bottom: 4px;
}

html.dark .ui-home-demo-flashcard-label {
  color: #9ca3af;
}

.ui-home-demo-flashcard-translation {
  color: #1f2937;
}

html.dark .ui-home-demo-flashcard-translation {
  color: #e5e7eb;
}

/* Progress bars */
.ui-home-demo-flashcard-progress {
  display: flex;
  gap: 4px;
  padding-top: 8px;
}

.ui-home-demo-flashcard-bar {
  flex: 1;
  height: 6px;
  border-radius: 9999px;
}

.ui-home-demo-flashcard-bar-filled {
  background: linear-gradient(to right, #4ade80, #22c55e);
}

.ui-home-demo-flashcard-bar-empty {
  background: #e5e7eb;
}

html.dark .ui-home-demo-flashcard-bar-empty {
  background: #374151;
}

/* Caption */
.ui-home-demo-flashcard-caption {
  font-size: 14px;
  color: #4b5563;
  margin-top: 24px;
  text-align: center;
  max-width: 448px;
}

html.dark .ui-home-demo-flashcard-caption {
  color: #9ca3af;
}

/* Right column */
.ui-home-demo-col-right {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 1024px) {
  .ui-home-demo-col-right {
    grid-column: span 5;
  }
}

.ui-home-demo-card-sm {
  padding: 24px;
  min-height: 240px;
}

/* Card inner (top-aligned) */
.ui-home-demo-card-inner-top {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Purple gradient */
.ui-home-demo-card-gradient-purple {
  background: linear-gradient(
    to bottom right,
    rgba(168, 85, 247, 0.05),
    rgba(236, 72, 153, 0.05)
  );
}

html.dark .ui-home-demo-card-gradient-purple {
  background: linear-gradient(
    to bottom right,
    rgba(168, 85, 247, 0.1),
    rgba(236, 72, 153, 0.1)
  );
}

/* Indigo gradient */
.ui-home-demo-card-gradient-indigo {
  background: linear-gradient(
    to bottom right,
    rgba(99, 102, 241, 0.05),
    rgba(59, 130, 246, 0.05)
  );
}

html.dark .ui-home-demo-card-gradient-indigo {
  background: linear-gradient(
    to bottom right,
    rgba(99, 102, 241, 0.1),
    rgba(59, 130, 246, 0.1)
  );
}

/* Purple pill */
.ui-home-demo-pill-purple {
  background: #f3e8ff;
  color: #7e22ce;
}

html.dark .ui-home-demo-pill-purple {
  background: rgba(88, 28, 135, 0.3);
  color: #d8b4fe;
}

/* Indigo pill */
.ui-home-demo-pill-indigo {
  background: #e0e7ff;
  color: #3730a3;
}

html.dark .ui-home-demo-pill-indigo {
  background: rgba(55, 48, 163, 0.3);
  color: #a5b4fc;
}

/* Chat */
.ui-home-demo-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ui-home-demo-chat-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.ui-home-demo-chat-row-user {
  justify-content: flex-end;
}

.ui-home-demo-chat-avatar {
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-home-demo-chat-avatar-ai {
  background: linear-gradient(to bottom right, #3b82f6, #9333ea);
  color: #ffffff;
}

.ui-home-demo-chat-avatar-user {
  background: #d1d5db;
}

html.dark .ui-home-demo-chat-avatar-user {
  background: #4b5563;
}

.ui-home-demo-chat-bubble {
  border-radius: 16px;
  padding: 12px;
  font-size: 14px;
  max-width: 80%;
}

.ui-home-demo-chat-bubble-ai {
  background: #f3f4f6;
  border-top-left-radius: 4px;
  color: #374151;
}

html.dark .ui-home-demo-chat-bubble-ai {
  background: rgba(55, 65, 81, 0.5);
  color: #d1d5db;
}

.ui-home-demo-chat-bubble-user {
  background: #3b82f6;
  border-top-right-radius: 4px;
  color: #ffffff;
}

/* Typing dots */
.ui-home-demo-chat-typing {
  animation: ui-home-demo-typing-appear 5s ease-in-out infinite;
}

@keyframes ui-home-demo-typing-appear {
  0%,
  20% {
    opacity: 0;
    transform: translateY(4px);
  }
  30%,
  85% {
    opacity: 1;
    transform: translateY(0);
  }
  95%,
  100% {
    opacity: 0;
    transform: translateY(4px);
  }
}

.ui-home-demo-chat-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px;
}

.ui-home-demo-chat-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  background: #9ca3af;
  display: block;
  animation: ui-home-demo-dot-pulse 1s ease-in-out infinite;
}

html.dark .ui-home-demo-chat-dot {
  background: #6b7280;
}

.ui-home-demo-chat-dot-1 {
  animation-delay: 0s;
}
.ui-home-demo-chat-dot-2 {
  animation-delay: 0.2s;
}
.ui-home-demo-chat-dot-3 {
  animation-delay: 0.4s;
}

@keyframes ui-home-demo-dot-pulse {
  0%,
  100% {
    opacity: 0.3;
  }
  50% {
    opacity: 1;
  }
}

/* Bar chart */
.ui-home-demo-bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex: 1;
  margin-bottom: 16px;
  min-height: 80px;
}

.ui-home-demo-bar {
  flex: 1;
  height: var(--bar-h);
  background: linear-gradient(to top, #3b82f6, #9333ea);
  border-radius: 4px 4px 0 0;
  animation: ui-home-demo-bar-grow 1s ease-out both;
}

.ui-home-demo-bar:nth-child(1) {
  animation-delay: 0.1s;
}
.ui-home-demo-bar:nth-child(2) {
  animation-delay: 0.2s;
}
.ui-home-demo-bar:nth-child(3) {
  animation-delay: 0.3s;
}
.ui-home-demo-bar:nth-child(4) {
  animation-delay: 0.4s;
}
.ui-home-demo-bar:nth-child(5) {
  animation-delay: 0.5s;
}
.ui-home-demo-bar:nth-child(6) {
  animation-delay: 0.6s;
}
.ui-home-demo-bar:nth-child(7) {
  animation-delay: 0.7s;
}

@keyframes ui-home-demo-bar-grow {
  from {
    height: 0;
  }
  to {
    height: var(--bar-h);
  }
}

/* Stats */
.ui-home-demo-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ui-home-demo-stat {
  background: #f3f4f6;
  border-radius: 12px;
  padding: 12px;
}

html.dark .ui-home-demo-stat {
  background: rgba(55, 65, 81, 0.3);
}

.ui-home-demo-stat-value {
  font-size: 24px;
  color: #111827;
  margin-bottom: 4px;
}

html.dark .ui-home-demo-stat-value {
  color: #ffffff;
}

.ui-home-demo-stat-label {
  font-size: 11px;
  color: #4b5563;
}

html.dark .ui-home-demo-stat-label {
  color: #9ca3af;
}

/* Bottom row cards */
.ui-home-demo-card-bottom {
  padding: 24px;
  min-height: 200px;
}

@media (min-width: 1024px) {
  .ui-home-demo-card-bottom {
    grid-column: span 4;
  }
}

/* Orange gradient */
.ui-home-demo-card-gradient-orange {
  background: linear-gradient(
    to bottom right,
    rgba(249, 115, 22, 0.05),
    rgba(239, 68, 68, 0.05)
  );
}

html.dark .ui-home-demo-card-gradient-orange {
  background: linear-gradient(
    to bottom right,
    rgba(249, 115, 22, 0.1),
    rgba(239, 68, 68, 0.1)
  );
}

/* Green gradient */
.ui-home-demo-card-gradient-green {
  background: linear-gradient(
    to bottom right,
    rgba(34, 197, 94, 0.05),
    rgba(16, 185, 129, 0.05)
  );
}

html.dark .ui-home-demo-card-gradient-green {
  background: linear-gradient(
    to bottom right,
    rgba(34, 197, 94, 0.1),
    rgba(16, 185, 129, 0.1)
  );
}

/* Pink gradient */
.ui-home-demo-card-gradient-pink {
  background: linear-gradient(
    to bottom right,
    rgba(236, 72, 153, 0.05),
    rgba(244, 63, 94, 0.05)
  );
}

html.dark .ui-home-demo-card-gradient-pink {
  background: linear-gradient(
    to bottom right,
    rgba(236, 72, 153, 0.1),
    rgba(244, 63, 94, 0.1)
  );
}

/* Orange pill */
.ui-home-demo-pill-orange {
  background: #ffedd5;
  color: #c2410c;
}

html.dark .ui-home-demo-pill-orange {
  background: rgba(154, 52, 18, 0.3);
  color: #fdba74;
}

/* Pink pill */
.ui-home-demo-pill-pink {
  background: #fce7f3;
  color: #be185d;
}

html.dark .ui-home-demo-pill-pink {
  background: rgba(131, 24, 67, 0.3);
  color: #f9a8d4;
}

/* Audio card */
.ui-home-demo-audio {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ui-home-demo-audio-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ui-home-demo-audio-icon {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background: linear-gradient(to bottom right, #fb923c, #ef4444);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  flex-shrink: 0;
}

.ui-home-demo-audio-word {
  color: #111827;
  margin-bottom: 4px;
}

html.dark .ui-home-demo-audio-word {
  color: #ffffff;
}

.ui-home-demo-audio-ipa {
  font-size: 12px;
  color: #6b7280;
}

html.dark .ui-home-demo-audio-ipa {
  color: #9ca3af;
}

/* Waveform */
.ui-home-demo-waveform-track {
  position: relative;
  height: 32px;
  background: #f3f4f6;
  border-radius: 8px;
  overflow: hidden;
}

html.dark .ui-home-demo-waveform-track {
  background: rgba(55, 65, 81, 0.3);
}

.ui-home-demo-waveform-fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  background: linear-gradient(to right, #fb923c, #ef4444);
  animation: ui-home-demo-waveform-sweep 2s linear infinite;
}

@keyframes ui-home-demo-waveform-sweep {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

.ui-home-demo-waveform-bars {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0 8px;
}

.ui-home-demo-waveform-bar {
  flex: 1;
  height: var(--wh);
  background: rgba(255, 255, 255, 0.5);
  border-radius: 9999px;
  animation: ui-home-demo-waveform-pulse 0.4s ease-in-out infinite alternate;
}

.ui-home-demo-waveform-bar:nth-child(odd) {
  animation-delay: 0s;
}
.ui-home-demo-waveform-bar:nth-child(even) {
  animation-delay: 0.2s;
}

@keyframes ui-home-demo-waveform-pulse {
  from {
    opacity: 0.5;
    transform: scaleY(0.7);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}

/* Collections card */
.ui-home-demo-collections {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ui-home-demo-collection-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f3f4f6;
  border-radius: 12px;
}

html.dark .ui-home-demo-collection-row {
  background: rgba(55, 65, 81, 0.3);
}

.ui-home-demo-collection-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.ui-home-demo-collection-icon-blue {
  background: linear-gradient(to bottom right, #60a5fa, #2563eb);
}

.ui-home-demo-collection-icon-purple {
  background: linear-gradient(to bottom right, #c084fc, #9333ea);
}

.ui-home-demo-collection-name {
  font-size: 14px;
  color: #111827;
}

html.dark .ui-home-demo-collection-name {
  color: #ffffff;
}

.ui-home-demo-collection-count {
  font-size: 12px;
  color: #6b7280;
}

html.dark .ui-home-demo-collection-count {
  color: #9ca3af;
}

/* Smart Review card */
.ui-home-demo-srs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ui-home-demo-srs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ui-home-demo-srs-label {
  font-size: 14px;
  color: #4b5563;
}

html.dark .ui-home-demo-srs-label {
  color: #9ca3af;
}

.ui-home-demo-srs-value {
  font-size: 24px;
  color: #111827;
}

html.dark .ui-home-demo-srs-value {
  color: #ffffff;
}

.ui-home-demo-srs-track {
  position: relative;
  height: 8px;
  background: #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
}

html.dark .ui-home-demo-srs-track {
  background: #374151;
}

.ui-home-demo-srs-fill {
  position: absolute;
  inset-block: 0;
  left: 0;
  background: linear-gradient(to right, #f472b6, #f43f5e);
  border-radius: 9999px;
  animation: ui-home-demo-srs-fill-grow 1s ease-out 0.5s both;
}

@keyframes ui-home-demo-srs-fill-grow {
  from {
    width: 0%;
  }
  to {
    width: 65%;
  }
}

.ui-home-demo-srs-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #6b7280;
}

html.dark .ui-home-demo-srs-hint {
  color: #9ca3af;
}

/* Feature pills row */
.ui-home-demo-pills {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 48px;
}

.ui-home-demo-feature-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  font-size: 14px;
  color: #111827;
}

html.dark .ui-home-demo-feature-pill {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.ui-home-demo-feature-pill-icon-blue {
  color: #2563eb;
}
.ui-home-demo-feature-pill-icon-purple {
  color: #9333ea;
}
.ui-home-demo-feature-pill-icon-indigo {
  color: #4f46e5;
}

html.dark .ui-home-demo-feature-pill-icon-blue {
  color: #60a5fa;
}
html.dark .ui-home-demo-feature-pill-icon-purple {
  color: #c084fc;
}
html.dark .ui-home-demo-feature-pill-icon-indigo {
  color: #818cf8;
}

.ui-home-stats {
  position: relative;
  padding: 80px 0;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
}

html.dark .ui-home-stats {
  background: rgba(31, 41, 55, 0.5);
}

.ui-home-stats-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.ui-home-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}

@media (min-width: 768px) {
  .ui-home-stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.ui-home-stats-item {
  text-align: center;
}

.ui-home-stats-value {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 8px;
  -webkit-text-fill-color: transparent;
}

@media (min-width: 1024px) {
  .ui-home-stats-value {
    font-size: 48px;
  }
}

.ui-home-stats-value-blue-purple {
  background: linear-gradient(to right, #2563eb, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
}

html.dark .ui-home-stats-value-blue-purple {
  background: linear-gradient(to right, #60a5fa, #c084fc);
  -webkit-background-clip: text;
  background-clip: text;
}

.ui-home-stats-value-purple-indigo {
  background: linear-gradient(to right, #9333ea, #4f46e5);
  -webkit-background-clip: text;
  background-clip: text;
}

html.dark .ui-home-stats-value-purple-indigo {
  background: linear-gradient(to right, #c084fc, #818cf8);
  -webkit-background-clip: text;
  background-clip: text;
}

.ui-home-stats-value-indigo-blue {
  background: linear-gradient(to right, #4f46e5, #2563eb);
  -webkit-background-clip: text;
  background-clip: text;
}

html.dark .ui-home-stats-value-indigo-blue {
  background: linear-gradient(to right, #818cf8, #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
}

.ui-home-stats-label {
  font-size: 14px;
  color: #4b5563;
}

html.dark .ui-home-stats-label {
  color: #9ca3af;
}

.ui-home-steps {
  position: relative;
  padding: 96px 0;
}

.ui-home-steps-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
.ui-home-steps-header {
  text-align: center;
  margin-bottom: 64px;
}

.ui-home-steps-title {
  font-size: 36px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 16px;
}

html.dark .ui-home-steps-title {
  color: #f3f4f6;
}

.ui-home-steps-subtitle {
  font-size: 20px;
  color: #4b5563;
  max-width: 672px;
  margin: 0 auto;
}

html.dark .ui-home-steps-subtitle {
  color: #9ca3af;
}

/* Grid */
.ui-home-steps-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .ui-home-steps-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Step item */
.ui-home-steps-item {
  position: relative;
  text-align: center;
}

/* Icon box */
.ui-home-steps-icon-box {
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
}

html.dark .ui-home-steps-icon-box {
  border-color: rgba(75, 85, 99, 0.4);
  background: rgba(31, 41, 55, 0.3);
}

.ui-home-steps-icon {
  flex-shrink: 0;
}

.ui-home-steps-icon-blue {
  color: #2563eb;
}

html.dark .ui-home-steps-icon-blue {
  color: #60a5fa;
}

.ui-home-steps-icon-purple {
  color: #9333ea;
}

html.dark .ui-home-steps-icon-purple {
  color: #c084fc;
}

.ui-home-steps-icon-indigo {
  color: #4f46e5;
}

html.dark .ui-home-steps-icon-indigo {
  color: #818cf8;
}

/* Step number badge */
.ui-home-steps-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 16px;
}

.ui-home-steps-number-blue-purple {
  background: linear-gradient(to right, #2563eb, #9333ea);
}

.ui-home-steps-number-purple-indigo {
  background: linear-gradient(to right, #9333ea, #4f46e5);
}

.ui-home-steps-number-indigo-blue {
  background: linear-gradient(to right, #4f46e5, #2563eb);
}

/* Item text */
.ui-home-steps-item-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 12px;
}

html.dark .ui-home-steps-item-title {
  color: #f3f4f6;
}

.ui-home-steps-item-desc {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
}

html.dark .ui-home-steps-item-desc {
  color: #9ca3af;
}

/* =============================================
   Home Features Section
   ============================================= */

.ui-home-features {
  padding: 80px 24px;
  background: rgba(255, 255, 255, 0.5);
}

html.dark .ui-home-features {
  background: rgba(30, 41, 59, 0.5);
}

.ui-home-features-container {
  max-width: 1100px;
  margin: 0 auto;
}

/* Header */
.ui-home-features-header {
  text-align: center;
  margin-bottom: 56px;
}

.ui-home-features-title {
  font-size: 2.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 12px 0;
  line-height: 1.2;
}

html.dark .ui-home-features-title {
  color: #f1f5f9;
}

.ui-home-features-subtitle {
  font-size: 1.125rem;
  color: #64748b;
  margin: 0;
}

html.dark .ui-home-features-subtitle {
  color: #94a3b8;
}

/* Grid */
.ui-home-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 900px) {
  .ui-home-features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .ui-home-features-grid {
    grid-template-columns: 1fr;
  }
}

/* Card */
.ui-home-features-card {
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  padding: 24px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
  transition:
    background 0.2s,
    transform 0.2s,
    box-shadow 0.2s;
}

.ui-home-features-card:hover {
  background: rgba(255, 255, 255, 0.45);
  transform: translateY(-4px);
  box-shadow: 0 16px 40px 0 rgba(31, 38, 135, 0.14);
}

html.dark .ui-home-features-card {
  background: rgba(30, 41, 59, 0.3);
  border-color: rgba(100, 116, 139, 0.4);
}

html.dark .ui-home-features-card:hover {
  background: rgba(30, 41, 59, 0.45);
}

/* Icon box */
.ui-home-features-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: #ffffff;
}

.ui-home-features-icon-box-blue-purple {
  background: linear-gradient(135deg, #3b82f6, #a855f7);
}

.ui-home-features-icon-box-purple-indigo {
  background: linear-gradient(135deg, #a855f7, #6366f1);
}

.ui-home-features-icon-box-indigo-blue {
  background: linear-gradient(135deg, #6366f1, #3b82f6);
}

.ui-home-features-icon-box-blue-cyan {
  background: linear-gradient(135deg, #3b82f6, #06b6d4);
}

.ui-home-features-icon-box-cyan-teal {
  background: linear-gradient(135deg, #06b6d4, #14b8a6);
}

.ui-home-features-icon-box-teal-green {
  background: linear-gradient(135deg, #14b8a6, #22c55e);
}

/* Card text */
.ui-home-features-card-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px 0;
}

html.dark .ui-home-features-card-title {
  color: #f1f5f9;
}

.ui-home-features-card-desc {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0;
  line-height: 1.6;
}

html.dark .ui-home-features-card-desc {
  color: #94a3b8;
}

/* =============================================
   Home Pricing Section
   ============================================= */

.ui-home-pricing {
  padding: 80px 24px;
  background: #f8fafc;
}

html.dark .ui-home-pricing {
  background: #0f172a;
}

.ui-home-pricing-container {
  max-width: 1100px;
  margin: 0 auto;
}

/* Header */
.ui-home-pricing-header {
  text-align: center;
  margin-bottom: 40px;
}

.ui-home-pricing-title {
  font-size: 2.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 12px 0;
  line-height: 1.2;
}

html.dark .ui-home-pricing-title {
  color: #f1f5f9;
}

.ui-home-pricing-subtitle {
  font-size: 1.125rem;
  color: #64748b;
  margin: 0;
}

html.dark .ui-home-pricing-subtitle {
  color: #94a3b8;
}

/* Billing Toggle */
.ui-home-pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 48px;
}

.ui-home-pricing-toggle-label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 6px;
}

html.dark .ui-home-pricing-toggle-label {
  color: #94a3b8;
}

.ui-home-pricing-toggle-save {
  background: linear-gradient(to right, #2563eb, #9333ea);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}

.ui-home-pricing-toggle-btn {
  width: 52px;
  height: 28px;
  background: #e2e8f0;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  transition: background 0.25s;
  padding: 0;
  flex-shrink: 0;
}

html.dark .ui-home-pricing-toggle-btn {
  background: #334155;
}

.ui-home-pricing-toggle-btn.is-active {
  background: linear-gradient(to right, #2563eb, #9333ea);
}

.ui-home-pricing-toggle-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: #ffffff;
  border-radius: 50%;
  transition: transform 0.25s;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.ui-home-pricing-toggle-btn.is-active .ui-home-pricing-toggle-slider {
  transform: translateX(24px);
}

/* Plans Grid */
.ui-home-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

@media (max-width: 900px) {
  .ui-home-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }
}

/* Mobile feature name variants */
.ui-home-pricing-fname-mobile {
  display: none;
}

@media (max-width: 480px) {
  .ui-home-pricing-fname-desktop {
    display: none;
  }

  .ui-home-pricing-fname-mobile {
    display: inline;
  }
}

/* Per-month note */
.ui-home-pricing-per-month-note {
  text-align: center;
  font-size: 0.8125rem;
  color: #94a3b8;
  margin: 20px 0 0 0;
}

html.dark .ui-home-pricing-per-month-note {
  color: #64748b;
}

/* Full comparison link */
.ui-home-pricing-full-link {
  text-align: center;
  margin-top: 20px;
}

.ui-home-pricing-full-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #6366f1;
  text-decoration: none;
  transition: gap 0.15s;
}

html.dark .ui-home-pricing-full-link-btn {
  color: #a5b4fc;
}

.ui-home-pricing-full-link-btn:hover {
  gap: 10px;
  text-decoration: none;
  color: #4f46e5;
}

html.dark .ui-home-pricing-full-link-btn:hover {
  color: #c7d2fe;
}

.ui-home-pricing-full-link-arrow {
  transition: transform 0.15s;
}

.ui-home-pricing-full-link-btn:hover .ui-home-pricing-full-link-arrow {
  transform: translateX(3px);
}

/* Card */
.ui-home-pricing-card {
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 20px;
  padding: 32px 28px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  position: relative;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  cursor: pointer;
}

.ui-home-pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

html.dark .ui-home-pricing-card {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(51, 65, 85, 0.8);
}

/* Pro card highlight */
.ui-home-pricing-card-pro {
  border: 2px solid #2563eb;
  box-shadow: 0 8px 32px rgba(37, 99, 235, 0.15);
  transform: translateY(-8px);
}

.ui-home-pricing-card-pro:hover {
  transform: translateY(-12px);
  box-shadow: 0 24px 48px rgba(37, 99, 235, 0.2);
}

html.dark .ui-home-pricing-card-pro {
  border-color: #3b82f6;
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.2);
}

/* Popular badge */
.ui-home-pricing-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(to right, #2563eb, #9333ea);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Limited offer badge */
.ui-home-pricing.is-annually .ui-home-pricing-badge-offer {
  display: none;
}

.ui-home-pricing-badge-offer {
  position: absolute;
  top: 30px;
  right: 20px;
  background: linear-gradient(to right, #f59e0b, #ef4444);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Card header */
.ui-home-pricing-card-header {
  margin-bottom: 24px;
}

.ui-home-pricing-plan-name {
  font-size: 1.375rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px 0;
}

html.dark .ui-home-pricing-plan-name {
  color: #f1f5f9;
}

.ui-home-pricing-plan-desc {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0 0 20px 0;
}

html.dark .ui-home-pricing-plan-desc {
  color: #94a3b8;
}

/* Price */
.ui-home-pricing-price {
  margin-bottom: 20px;
  min-height: 52px;
}

.ui-home-pricing-price-monthly,
.ui-home-pricing-price-annually {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.ui-home-pricing-price-original {
  font-size: 1.5rem;
  font-weight: 600;
  color: #94a3b8;
  text-decoration: line-through;
  align-self: center;
}

html.dark .ui-home-pricing-price-original {
  color: #64748b;
}

/* Toggle visibility */
.ui-home-pricing .ui-home-pricing-price-annually {
  display: none;
}

.ui-home-pricing.is-annually .ui-home-pricing-price-monthly {
  display: none;
}

.ui-home-pricing.is-annually .ui-home-pricing-price-annually {
  display: flex;
}

.ui-home-pricing-price-amount {
  font-size: 2.5rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}

html.dark .ui-home-pricing-price-amount {
  color: #f1f5f9;
}

.ui-home-pricing-card-pro .ui-home-pricing-price-amount {
  color: #2563eb;
}

html.dark .ui-home-pricing-card-pro .ui-home-pricing-price-amount {
  color: #60a5fa;
}

.ui-home-pricing-price-period {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #94a3b8;
}

/* CTA Buttons */
.ui-home-pricing-cta {
  display: block;
  text-align: center;
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    opacity 0.2s,
    transform 0.15s,
    filter 0.2s,
    box-shadow 0.2s;
}

.ui-home-pricing-cta:hover {
  color: #fff;
  text-decoration: none;
  opacity: 0.95;
  transform: translateY(-3px);
  filter: brightness(1.1);
}

.ui-home-pricing-cta-free {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.ui-home-pricing-cta-free:hover {
  color: #475569;
  filter: brightness(1.05);
}

html.dark .ui-home-pricing-cta-free {
  background: #1e293b;
  color: #94a3b8;
  border-color: #334155;
}

html.dark .ui-home-pricing-cta-free:hover {
  color: #94a3b8;
  filter: brightness(1.1);
}

.ui-home-pricing-cta-pro {
  background: linear-gradient(to right, #3b82f6, #a855f7);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35);
}

.ui-home-pricing-cta-pro:hover {
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.5);
}

.ui-home-pricing-cta-premium {
  background: linear-gradient(to right, #8b5cf6, #ec4899);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35);
}

.ui-home-pricing-cta-premium:hover {
  box-shadow: 0 8px 24px rgba(124, 58, 237, 0.5);
}

html.dark .ui-home-pricing-cta-pro:hover,
html.dark .ui-home-pricing-cta-premium:hover {
  color: #ffffff;
}

.ui-home-pricing-cta-current:hover,
.ui-home-pricing-cta-inactive:hover {
  transform: none;
  filter: none;
  opacity: 1;
}

.ui-home-pricing-cta-current {
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
  cursor: default;
  pointer-events: none;
}

html.dark .ui-home-pricing-cta-current {
  background: rgba(22, 163, 74, 0.12);
  color: #4ade80;
  border-color: rgba(74, 222, 128, 0.25);
}

.ui-home-pricing-cta-inactive {
  background: transparent;
  color: #cbd5e1;
  border: 1px solid #e2e8f0;
  cursor: default;
  pointer-events: none;
  letter-spacing: 0.1em;
}

html.dark .ui-home-pricing-cta-inactive {
  color: #334155;
  border-color: #1e293b;
}

/* Features list */
.ui-home-pricing-features {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

html.dark .ui-home-pricing-features {
  border-top-color: rgba(51, 65, 85, 0.8);
}

.ui-home-pricing-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
}

.ui-home-pricing-feature-check {
  width: 18px;
  height: 18px;
  background: #e2e8f0;
  color: #64748b;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  flex-shrink: 0;
}

html.dark .ui-home-pricing-feature-check {
  background: #334155;
  color: #94a3b8;
}

.ui-home-pricing-feature-check-pro {
  background: rgba(37, 99, 235, 0.12);
  color: #2563eb;
}

html.dark .ui-home-pricing-feature-check-pro {
  background: rgba(59, 130, 246, 0.15);
  color: #60a5fa;
}

.ui-home-pricing-feature-name {
  flex: 1;
  color: #475569;
}

html.dark .ui-home-pricing-feature-name {
  color: #94a3b8;
}

.ui-home-pricing-feature-value {
  font-weight: 600;
  color: #0f172a;
  white-space: nowrap;
}

html.dark .ui-home-pricing-feature-value {
  color: #f1f5f9;
}

.ui-home-pricing-card-pro .ui-home-pricing-feature-value {
  color: #2563eb;
}

html.dark .ui-home-pricing-card-pro .ui-home-pricing-feature-value {
  color: #60a5fa;
}

/* =============================================
   Home FAQ Section
   ============================================= */

.ui-home-faq {
  padding: 80px 24px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

html.dark .ui-home-faq {
  background: rgba(30, 41, 59, 0.5);
}

.ui-home-faq-container {
  max-width: 760px;
  margin: 0 auto;
}

/* Header */
.ui-home-faq-header {
  text-align: center;
  margin-bottom: 48px;
}

.ui-home-faq-title {
  font-size: 2.25rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 12px 0;
  line-height: 1.2;
}

html.dark .ui-home-faq-title {
  color: #f1f5f9;
}

.ui-home-faq-subtitle {
  font-size: 1.125rem;
  color: #64748b;
  margin: 0;
}

html.dark .ui-home-faq-subtitle {
  color: #94a3b8;
}

/* Accordion wrapper */
.ui-home-faq-accordion {
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 20px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
  overflow: hidden;
}

html.dark .ui-home-faq-accordion {
  background: rgba(30, 41, 59, 0.3);
  border-color: rgba(100, 116, 139, 0.4);
}

/* Item */
.ui-home-faq-item {
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

.ui-home-faq-item-last {
  border-bottom: none;
}

html.dark .ui-home-faq-item {
  border-bottom-color: rgba(51, 65, 85, 0.8);
}

/* Trigger button */
.ui-home-faq-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0f172a;
  transition: color 0.15s;
}

.ui-home-faq-trigger:hover {
  color: #2563eb;
}

html.dark .ui-home-faq-trigger {
  color: #f1f5f9;
}

html.dark .ui-home-faq-trigger:hover {
  color: #60a5fa;
}

.ui-home-faq-item.is-open .ui-home-faq-trigger {
  color: #2563eb;
}

html.dark .ui-home-faq-item.is-open .ui-home-faq-trigger {
  color: #60a5fa;
}

/* Chevron icon */
.ui-home-faq-chevron {
  flex-shrink: 0;
  color: #94a3b8;
  transition: transform 0.25s ease;
}

.ui-home-faq-chevron-open {
  transform: rotate(180deg);
  color: #2563eb;
}

html.dark .ui-home-faq-chevron-open {
  color: #60a5fa;
}

/* Content — grid trick: animates height without display:none toggling */
.ui-home-faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.28s ease;
}

.ui-home-faq-item.is-open .ui-home-faq-content {
  grid-template-rows: 1fr;
}

.ui-home-faq-content-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0 24px;
  transition: padding 0.28s ease;
}

.ui-home-faq-item.is-open .ui-home-faq-content-inner {
  padding: 0 24px 20px 24px;
}

.ui-home-faq-answer {
  font-size: 0.9375rem;
  color: #64748b;
  line-height: 1.7;
  margin: 0;
}

html.dark .ui-home-faq-answer {
  color: #94a3b8;
}

/* =============================================
   Home Footer
   ============================================= */

.ui-home-footer {
  border-top: 1px solid #e2e8f0;
  background: rgba(248, 250, 252, 0.8);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

html.dark .ui-home-footer {
  border-top-color: #1e293b;
  background: rgba(15, 23, 42, 0.8);
}

.ui-home-footer-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 24px 32px 24px;
}

/* Top grid */
.ui-home-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 40px;
}

@media (max-width: 768px) {
  .ui-home-footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .ui-home-footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Brand */
.ui-home-footer-brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.ui-home-footer-brand-name {
  font-size: 1.375rem;
  font-weight: 800;
  color: #0f172a;
}

html.dark .ui-home-footer-brand-name {
  color: #f1f5f9;
}

.ui-home-footer-brand-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #1d4ed8;
  color: #ffffff;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
}

.ui-home-footer-brand-desc {
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.65;
  margin: 0;
  max-width: 360px;
}

html.dark .ui-home-footer-brand-desc {
  color: #94a3b8;
}

/* Columns */
.ui-home-footer-col-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 16px 0;
}

html.dark .ui-home-footer-col-title {
  color: #f1f5f9;
}

.ui-home-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ui-home-footer-link {
  font-size: 0.875rem;
  color: #64748b;
  text-decoration: none;
  transition: color 0.15s;
}

.ui-home-footer-link:hover {
  color: #0f172a;
}

html.dark .ui-home-footer-link {
  color: #94a3b8;
}

html.dark .ui-home-footer-link:hover {
  color: #f1f5f9;
}

/* Bottom bar */
.ui-home-footer-bottom {
  border-top: 1px solid #e2e8f0;
  padding-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

html.dark .ui-home-footer-bottom {
  border-top-color: #1e293b;
}

.ui-home-footer-copy {
  font-size: 0.8125rem;
  color: #94a3b8;
  margin: 0;
}

.ui-home-footer-legal {
  display: flex;
  gap: 24px;
}

.ui-home-footer-legal-link {
  font-size: 0.8125rem;
  color: #64748b;
  text-decoration: none;
  transition: color 0.15s;
}

.ui-home-footer-legal-link:hover {
  color: #0f172a;
}

html.dark .ui-home-footer-legal-link {
  color: #94a3b8;
}

html.dark .ui-home-footer-legal-link:hover {
  color: #f1f5f9;
}

.pricing-page main {
  position: relative;
  overflow: hidden;
  /* top: 70px; */
  top: 50px;
  padding: 0;
  background: #f8fafc;
}

html.dark .pricing-page main {
  background: #0f172a;
}

/* =============================================
   Hero
   ============================================= */

.pricing-page-hero {
  padding: 80px 24px 48px;
  text-align: center;
  background: linear-gradient(160deg, #f0f9ff 0%, #f8fafc 100%);
  border-bottom: 1px solid #e2e8f0;
}

html.dark .pricing-page-hero {
  background: linear-gradient(160deg, #0c1a2e 0%, #0f172a 100%);
  border-bottom-color: #1e293b;
}

.pricing-page-hero-inner {
  max-width: 680px;
  margin: 0 auto;
}

.pricing-page-hero-eyebrow {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6366f1;
  background: #eef2ff;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
}

html.dark .pricing-page-hero-eyebrow {
  background: #1e1b4b;
  color: #a5b4fc;
}

.pricing-page-hero-title {
  font-size: 2.75rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
  margin: 0 0 16px 0;
  letter-spacing: -0.02em;
}

html.dark .pricing-page-hero-title {
  color: #f1f5f9;
}

.pricing-page-hero-subtitle {
  font-size: 1.125rem;
  color: #64748b;
  line-height: 1.6;
  margin: 0;
}

html.dark .pricing-page-hero-subtitle {
  color: #94a3b8;
}

/* =============================================
   Billing Toggle
   ============================================= */

.pricing-page-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 24px 0;
}

.pricing-page-toggle-label {
  font-size: 0.9375rem;
  font-weight: 500;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 8px;
}

html.dark .pricing-page-toggle-label {
  color: #94a3b8;
}

.pricing-page-toggle-save {
  font-size: 0.75rem;
  font-weight: 600;
  color: #16a34a;
  background: #dcfce7;
  padding: 2px 8px;
  border-radius: 999px;
}

html.dark .pricing-page-toggle-save {
  background: #14532d;
  color: #86efac;
}

.pricing-page-toggle-btn {
  position: relative;
  width: 48px;
  height: 26px;
  border-radius: 999px;
  background: #cbd5e1;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
}

html.dark .pricing-page-toggle-btn {
  background: #334155;
}

.pricing-page-toggle-btn.is-active {
  background: #6366f1;
}

.pricing-page-toggle-slider {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s;
}

.pricing-page-toggle-btn.is-active .pricing-page-toggle-slider {
  transform: translateX(22px);
}

/* =============================================
   Plan Cards
   ============================================= */

.pricing-page-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1000px;
  margin: 40px auto 0;
  padding: 0 24px;
}

.pricing-page-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 32px;
  position: relative;
  cursor: pointer;
  transition:
    box-shadow 0.2s,
    transform 0.2s;
}

html.dark .pricing-page-card {
  background: #1e293b;
  border-color: #334155;
}

.pricing-page-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

html.dark .pricing-page-card:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.pricing-page-card-pro {
  border-color: #6366f1;
  background: linear-gradient(160deg, #faf5ff 0%, #fff 60%);
  box-shadow: 0 4px 24px rgba(99, 102, 241, 0.12);
}

html.dark .pricing-page-card-pro {
  background: linear-gradient(160deg, #1a1040 0%, #1e293b 60%);
  border-color: #6366f1;
  box-shadow: 0 4px 24px rgba(99, 102, 241, 0.2);
}

.pricing-page-card-pro:hover {
  box-shadow: 0 8px 40px rgba(99, 102, 241, 0.2);
}

.pricing-page-card-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: #6366f1;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Limited offer badge */
#pricing-main.is-annually .pricing-page-card-badge-offer {
  display: none;
}

.pricing-page-card-badge-offer {
  position: absolute;
  top: 30px;
  right: 20px;
  background: linear-gradient(to right, #f59e0b, #ef4444);
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Original strikethrough price */
.pricing-page-price-original {
  font-size: 1.5rem;
  font-weight: 600;
  color: #94a3b8;
  text-decoration: line-through;
  align-self: center;
}

html.dark .pricing-page-price-original {
  color: #64748b;
}

.pricing-page-card-name {
  font-size: 1.375rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px 0;
}

html.dark .pricing-page-card-name {
  color: #f1f5f9;
}

.pricing-page-card-pro .pricing-page-card-name {
  color: #4f46e5;
}

html.dark .pricing-page-card-pro .pricing-page-card-name {
  color: #a5b4fc;
}

.pricing-page-card-desc {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0 0 24px 0;
  line-height: 1.5;
  min-height: 42px;
}

html.dark .pricing-page-card-desc {
  color: #94a3b8;
}

.pricing-page-card-price {
  margin-bottom: 24px;
}

.pricing-page-price-monthly,
.pricing-page-price-annually {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.pricing-page-price-amount {
  font-size: 2.5rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}

html.dark .pricing-page-price-amount {
  color: #f1f5f9;
}

.pricing-page-card-pro .pricing-page-price-amount {
  color: #4f46e5;
}

html.dark .pricing-page-card-pro .pricing-page-price-amount {
  color: #a5b4fc;
}

.pricing-page-price-amount span {
  font-size: 1.25rem;
  font-weight: 600;
  vertical-align: top;
  margin-top: 6px;
  display: inline-block;
}

.pricing-page-price-period {
  font-size: 0.875rem;
  color: #94a3b8;
  margin-left: 4px;
}

/* Billing toggle show/hide */
.pricing-page-price-annually {
  display: none;
}

#pricing-main.is-annually .pricing-page-price-monthly {
  display: none;
}

#pricing-main.is-annually .pricing-page-price-annually {
  display: flex;
}

/* =============================================
   CTA Buttons
   ============================================= */

.pricing-page-cta {
  display: block;
  text-align: center;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.15s,
    opacity 0.15s;
  cursor: pointer;
  border: none;
}

.pricing-page-cta-sm {
  padding: 8px 16px;
  font-size: 0.875rem;
  border-radius: 8px;
}

.pricing-page-cta-free {
  background: #f1f5f9;
  color: #0f172a;
}

html.dark .pricing-page-cta-free {
  background: #334155;
  color: #f1f5f9;
}

.pricing-page-cta-free:hover {
  background: #e2e8f0;
  color: #0f172a;
  text-decoration: none;
}

html.dark .pricing-page-cta-free:hover {
  background: #475569;
  color: #f1f5f9;
  text-decoration: none;
}

.pricing-page-cta-pro {
  background: #6366f1;
  color: #fff;
}

.pricing-page-cta-pro:hover {
  background: #4f46e5;
  color: #fff;
  text-decoration: none;
}

html.dark .pricing-page-cta-pro:hover {
  background: #4f46e5;
  color: #fff;
  text-decoration: none;
}

.pricing-page-cta-premium {
  background: #0f172a;
  color: #fff;
}

html.dark .pricing-page-cta-premium {
  background: #f1f5f9;
  color: #0f172a;
}

.pricing-page-cta-premium:hover {
  background: #1e293b;
  color: #fff;
  text-decoration: none;
}

html.dark .pricing-page-cta-premium:hover {
  background: #e2e8f0;
  color: #0f172a;
  text-decoration: none;
}

.pricing-page-cta-current {
  background: #dcfce7;
  color: #15803d;
  cursor: default;
  pointer-events: none;
}

html.dark .pricing-page-cta-current {
  background: #14532d;
  color: #86efac;
}

.pricing-page-cta-inactive {
  background: transparent;
  color: #94a3b8;
  cursor: default;
  pointer-events: none;
  letter-spacing: 0.05em;
}

/* =============================================
   Comparison Table
   ============================================= */

.pricing-page-table-section {
  max-width: 1000px;
  margin: 72px auto 80px;
  padding: 0 24px;
}

.pricing-page-table-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: #0f172a;
  text-align: center;
  margin: 0 0 8px 0;
}

html.dark .pricing-page-table-title {
  color: #f1f5f9;
}

.pricing-page-table-subtitle {
  font-size: 1rem;
  color: #64748b;
  text-align: center;
  margin: 0 0 8px 0;
}

html.dark .pricing-page-table-subtitle {
  color: #94a3b8;
}

.pricing-page-table-note {
  font-size: 0.8125rem;
  color: #94a3b8;
  text-align: center;
  margin: 0 0 40px 0;
}

html.dark .pricing-page-table-note {
  color: #64748b;
}

.pricing-page-table-wrapper {
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
}

html.dark .pricing-page-table-wrapper {
  border-color: #1e293b;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.pricing-page-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

html.dark .pricing-page-table {
  background: #1e293b;
}

.pricing-page-table thead tr {
  border-bottom: 2px solid #e2e8f0;
}

html.dark .pricing-page-table thead tr {
  border-bottom-color: #334155;
}

.pricing-page-table-feature-col {
  text-align: left;
  padding: 20px 24px;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  width: 40%;
}

html.dark .pricing-page-table-feature-col {
  color: #64748b;
}

.pricing-page-table-plan-col {
  text-align: center;
  padding: 20px 16px;
  font-size: 1rem;
  font-weight: 700;
  color: #0f172a;
  width: 20%;
}

html.dark .pricing-page-table-plan-col {
  color: #f1f5f9;
}

.pricing-page-table-plan-col-pro {
  color: #4f46e5;
  background: #faf5ff;
  border-left: 1px solid #e9d5ff;
  border-right: 1px solid #e9d5ff;
}

html.dark .pricing-page-table-plan-col-pro {
  color: #a5b4fc;
  background: #1a1040;
  border-left-color: #312e81;
  border-right-color: #312e81;
}

/* Group rows */
.pricing-page-table-group-row td {
  padding: 10px 24px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

html.dark .pricing-page-table-group-row td {
  background: #0f172a;
  color: #64748b;
  border-color: #1e293b;
}

/* Data rows */
.pricing-page-table-row {
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.1s;
}

.pricing-page-table-row:hover {
  background: #f8fafc;
}

html.dark .pricing-page-table-row {
  border-bottom-color: #1e293b;
}

html.dark .pricing-page-table-row:hover {
  background: #0f172a;
}

.pricing-page-table-feature {
  padding: 16px 24px;
  font-size: 0.9375rem;
  color: #334155;
}

html.dark .pricing-page-table-feature {
  color: #cbd5e1;
}

.pricing-page-table-value {
  text-align: center;
  padding: 16px 16px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: #475569;
}

html.dark .pricing-page-table-value {
  color: #94a3b8;
}

.pricing-page-table-value-pro {
  background: #faf5ff;
  border-left: 1px solid #e9d5ff;
  border-right: 1px solid #e9d5ff;
  color: #4f46e5;
}

html.dark .pricing-page-table-value-pro {
  background: #1a1040;
  border-left-color: #312e81;
  border-right-color: #312e81;
  color: #a5b4fc;
}

.pricing-page-unlimited {
  color: #16a34a;
  font-weight: 700;
}

html.dark .pricing-page-unlimited {
  color: #4ade80;
}

/* CTA row */
.pricing-page-table-cta-row td {
  padding: 24px 16px;
  border-top: 2px solid #e2e8f0;
  background: #f8fafc;
}

html.dark .pricing-page-table-cta-row td {
  border-top-color: #334155;
  background: #0f172a;
}

.pricing-page-table-cta-row td:first-child {
  padding-left: 24px;
}

.pricing-page-table-cta-cell {
  text-align: center;
}

.pricing-page-table-cta-cell-pro {
  background: #faf5ff;
  border-left: 1px solid #e9d5ff;
  border-right: 1px solid #e9d5ff;
}

html.dark .pricing-page-table-cta-cell-pro {
  background: #1a1040;
  border-left-color: #312e81;
  border-right-color: #312e81;
}

/* =============================================
   Responsive
   ============================================= */

@media (max-width: 768px) {
  .pricing-page-hero-title {
    font-size: 2rem;
  }

  .pricing-page-cards {
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  .pricing-page-card-pro {
    order: -1;
  }

  .pricing-page-table-section {
    padding: 0 16px;
    margin-top: 48px;
  }

  .pricing-page-table-feature {
    font-size: 0.875rem;
    padding: 14px 16px;
  }

  .pricing-page-table-value {
    font-size: 0.875rem;
    padding: 14px 8px;
  }
}

/* ===========================
   Contact Page
   =========================== */

.contact-page {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background: #f8fafc;
}

html.dark .contact-page {
  background: #0f172a;
}

/* ===========================
   Background orbs
   =========================== */

.contact-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.contact-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
}

.contact-bg-orb-blue {
  top: -80px;
  left: -80px;
  width: 480px;
  height: 480px;
  background: rgba(59, 130, 246, 0.15);
}

html.dark .contact-bg-orb-blue {
  background: rgba(59, 130, 246, 0.07);
}

.contact-bg-orb-purple {
  bottom: 0;
  right: -120px;
  width: 560px;
  height: 560px;
  background: rgba(168, 85, 247, 0.12);
}

html.dark .contact-bg-orb-purple {
  background: rgba(168, 85, 247, 0.06);
}

/* ===========================
   Nav
   =========================== */

.contact-nav {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 24px 0 24px;
}

.contact-nav-logo {
  font-size: 1.375rem;
  font-weight: 800;
  background: linear-gradient(to right, #2563eb, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
}

.contact-nav-logo:hover {
  text-decoration: none;
}

.contact-nav-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #64748b;
  text-decoration: none;
  transition: color 0.15s ease;
}

.contact-nav-back:hover {
  color: #2563eb;
  text-decoration: none;
}

html.dark .contact-nav-back {
  color: #94a3b8;
}

html.dark .contact-nav-back:hover {
  color: #60a5fa;
}

/* ===========================
   Header
   =========================== */

.contact-header {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 56px 24px 48px 24px;
}

.contact-header-content {
  max-width: 540px;
  margin: 0 auto;
}

.contact-header-badge {
  display: inline-block;
  padding: 4px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 9999px;
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
  margin-bottom: 16px;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

html.dark .contact-header-badge {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
  border-color: rgba(99, 102, 241, 0.3);
}

.contact-header-title {
  font-size: 2.75rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 14px 0;
  line-height: 1.15;
}

html.dark .contact-header-title {
  color: #f1f5f9;
}

@media (max-width: 600px) {
  .contact-header-title {
    font-size: 2rem;
  }
}

.contact-header-desc {
  font-size: 1.0625rem;
  color: #475569;
  margin: 0;
  line-height: 1.65;
}

html.dark .contact-header-desc {
  color: #94a3b8;
}

/* ===========================
   Main content
   =========================== */

.contact-content {
  position: relative;
  z-index: 10;
  padding: 0 24px 80px 24px;
}

.contact-container {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ===========================
   Cards
   =========================== */

.contact-card {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 20px;
  padding: 32px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 24px 0 rgba(15, 23, 42, 0.06);
}

html.dark .contact-card {
  background: rgba(30, 41, 59, 0.5);
  border-color: rgba(51, 65, 85, 0.6);
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.2);
}

@media (max-width: 560px) {
  .contact-card {
    flex-direction: column;
    gap: 16px;
    padding: 24px 20px;
  }
}

/* ===========================
   Card icon
   =========================== */

.contact-card-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.contact-card-icon-blue {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
}

.contact-card-icon-purple {
  background: linear-gradient(135deg, #a855f7, #6366f1);
}

/* ===========================
   Card body
   =========================== */

.contact-card-body {
  flex: 1;
  min-width: 0;
}

.contact-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 8px 0;
}

html.dark .contact-card-title {
  color: #f1f5f9;
}

.contact-card-desc {
  font-size: 0.9375rem;
  color: #475569;
  margin: 0 0 20px 0;
  line-height: 1.65;
}

html.dark .contact-card-desc {
  color: #94a3b8;
}

.contact-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
}

.contact-card-btn-primary {
  background: linear-gradient(135deg, #2563eb, #6366f1);
  color: #ffffff;
  box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.3);
}

.contact-card-btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8, #4f46e5);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 6px 20px 0 rgba(37, 99, 235, 0.4);
  transform: translateY(-1px);
}

.contact-card-btn-outline {
  border: 1.5px solid rgba(168, 85, 247, 0.4);
  color: #7c3aed;
  background: rgba(168, 85, 247, 0.06);
}

.contact-card-btn-outline:hover {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.6);
  color: #6d28d9;
  text-decoration: none;
  transform: translateY(-1px);
}

html.dark .contact-card-btn-outline {
  border-color: rgba(168, 85, 247, 0.35);
  color: #c084fc;
  background: rgba(168, 85, 247, 0.08);
}

html.dark .contact-card-btn-outline:hover {
  background: rgba(168, 85, 247, 0.15);
  border-color: rgba(168, 85, 247, 0.5);
  color: #d8b4fe;
}

/* ===========================
   Note
   =========================== */

.contact-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 20px;
  background: rgba(241, 245, 249, 0.7);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 12px;
}

html.dark .contact-note {
  background: rgba(15, 23, 42, 0.4);
  border-color: rgba(51, 65, 85, 0.5);
}

.contact-note-icon {
  flex-shrink: 0;
  color: #94a3b8;
  margin-top: 1px;
}

.contact-note-text {
  font-size: 0.875rem;
  color: #64748b;
  margin: 0;
  line-height: 1.6;
}

html.dark .contact-note-text {
  color: #64748b;
}

/* ===========================
   Footer
   =========================== */

.contact-footer {
  position: relative;
  z-index: 10;
  border-top: 1px solid rgba(226, 232, 240, 0.6);
  padding: 24px;
}

html.dark .contact-footer {
  border-top-color: rgba(51, 65, 85, 0.5);
}

.contact-footer-content {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.contact-footer-brand {
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(to right, #2563eb, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contact-footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.contact-footer-link {
  font-size: 0.875rem;
  color: #64748b;
  text-decoration: none;
  transition: color 0.15s ease;
}

.contact-footer-link:hover {
  color: #2563eb;
  text-decoration: none;
}

html.dark .contact-footer-link {
  color: #64748b;
}

html.dark .contact-footer-link:hover {
  color: #60a5fa;
}

/* UI Navbar Component Styles */
.ui-navbar {
  position: fixed;
  top: 0;
  display: flex;
  width: 100%;
  padding: 16px 16px 2px 16px;
  background: linear-gradient(90deg, #f9fafb, #ffffff);
  border-bottom: 2px solid #d1d5dc;
  transition: background 0.12s ease;
  z-index: 1024;
}

/* Dark Theme Navbar */
html.dark .ui-navbar {
  background: linear-gradient(to right, #151d2c, #151d2c, #222c3c);
  border-bottom-color: #374151;
}

.ui-navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 55px;
  position: relative;
  top: -5px;
}

/* Brand Section */
.ui-navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
  width: max-content;
  position: relative;
}

.ui-navbar-brand-title {
  font-size: 30px;
  font-weight: 400;
  line-height: 36px;
  color: #101828;
  margin: 0;
  letter-spacing: 0.3955px;
  font-family: "Inter", sans-serif;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  position: relative;
  cursor: default;
}

.ui-navbar-brand-home-link {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.ui-navbar-brand-home-link:hover {
  color: #586379;
  opacity: 0.8;
  text-decoration: none;
}

.ui-navbar-lang-trigger {
  font-size: 24px;
  color: #374151;
  cursor: pointer;
  /* text-decoration: underline; */
  text-decoration-style: dotted;
  text-underline-offset: 4px;
  transition: color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  user-select: none;
}

.ui-navbar-lang-trigger:hover {
  color: #2563eb;
}

.ui-navbar-lang-trigger-arrow {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.ui-navbar-lang-trigger-arrow-open {
  transform: rotate(180deg);
}

.ui-navbar-lang-list {
  position: absolute;
  top: calc(100% + 8px);
  left: 7.5rem;
  min-width: 180px;
  width: max-content;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow:
    0px 4px 6px -2px rgba(0, 0, 0, 0.05),
    0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.ui-navbar-lang-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ui-navbar-lang-item.lang-item-disabled {
  opacity: 0.65;
  cursor: not-allowed;
  pointer-events: none;
}

.ui-navbar-lang-item:hover {
  background-color: #f3f4f6;
}

.ui-navbar-lang-flag {
  width: 20px;
  height: 14px;
  display: block;
  object-fit: contain;
}

.ui-navbar-lang-text {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  font-family: "Inter", sans-serif;
}

.ui-navbar-lang-badge-soon {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0rem 0.65rem;
  border: 1px solid #d1d5db;
  border-radius: 20px;
  font-size: 0.75rem;
  color: #6b7280;
  background: #f3f4f6;
  white-space: nowrap;
}

.ui-navbar-ai-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  margin-top: 12px;
  padding: 0 8px;
  background: #1447e6;
  color: white;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  font-family: "Inter", sans-serif;
  box-shadow:
    0px 1px 3px 0px rgba(0, 0, 0, 0.1),
    0px 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.ui-navbar-ai-badge:hover {
  color: white;
  text-decoration: none;
}

.ui-navbar-ai-badge-pro {
  background: linear-gradient(90deg, #dcfce7 0%, #bbf7d0 100%);
  color: #15803d;
  border: 1px solid #15803d;
}

.ui-navbar-ai-badge-pro:hover {
  color: #15803d;
}

.ui-navbar-ai-badge-premium {
  background: linear-gradient(90deg, #fef9c3 0%, #fde68a 100%);
  color: #92400e;
  border: 1px solid #92400e;
}

.ui-navbar-ai-badge-premium:hover {
  color: #92400e;
}

html.dark .ui-navbar-ai-badge-pro {
  background: linear-gradient(
    90deg,
    rgba(20, 83, 45, 0.5) 0%,
    rgba(20, 83, 45, 0.7) 100%
  );
  color: #86efac;
}

html.dark .ui-navbar-ai-badge-pro:hover {
  color: #86efac;
}

html.dark .ui-navbar-ai-badge-premium {
  background: linear-gradient(
    90deg,
    rgba(120, 53, 15, 0.4) 0%,
    rgba(120, 53, 15, 0.6) 100%
  );
  color: #fcd34d;
}

html.dark .ui-navbar-ai-badge-premium:hover {
  color: #fcd34d;
}

.ui-navbar-ai-icon {
  width: 12px;
  height: 12px;
  display: block;
}

/* Actions Section */
.ui-navbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 36px;
}

.ui-navbar-btn {
  display: inline-flex;
  align-items: center;
  gap: 12.5px;
  height: 36px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  font-size: 14.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  justify-content: flex-start;
  font-family: ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -0.1504px;
  line-height: 20px;
}

.ui-navbar-btn:hover {
  color: white;
  transform: translateY(-1px);
  text-decoration: none;
}

.ui-navbar-btn-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.ui-navbar-practice-dropdown {
  position: relative;
  flex: 1;
}

.ui-navbar-btn-practice {
  background: linear-gradient(90deg, #9810fa, #615fff 50%, #2b7fff);
  color: white;
  box-shadow:
    0px 10px 15px -3px rgba(0, 0, 0, 0.1),
    0px 4px 6px -4px rgba(0, 0, 0, 0.1);
  width: 100%;
  justify-content: center;
}

.ui-navbar-btn-practice:hover {
  background: linear-gradient(90deg, #8a0ee6, #5548e6, #2570e6);
  transform: translateY(-1px);
}

.ui-navbar-dropdown-arrow {
  transition: transform 0.2s ease;
  margin-left: auto;
}

.ui-navbar-btn-practice[aria-expanded="true"] .ui-navbar-dropdown-arrow,
.ui-navbar-btn-learn[aria-expanded="true"] .ui-navbar-dropdown-arrow {
  transform: rotate(180deg);
}

.ui-navbar-learn-dropdown {
  position: relative;
  display: inline-flex;
}

.ui-navbar-learn-dropdown .ui-navbar-dropdown-content {
  left: auto;
  right: 0;
}

.ui-navbar-btn-learn {
  background: linear-gradient(90deg, #2b7fff, #615fff 50%, #9810fa);
  color: white;
  box-shadow:
    0px 10px 15px -3px rgba(0, 0, 0, 0.1),
    0px 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.ui-navbar-btn-learn:hover {
  background: linear-gradient(90deg, #2570e6, #5548e6, #8a0ee6);
  transform: translateY(-1px);
}

/* Dropdown Content */
.ui-navbar-dropdown-content {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  width: 225px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow:
    0px 4px 6px -2px rgba(0, 0, 0, 0.05),
    0px 10px 15px -3px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease,
    visibility 0.2s;
  z-index: 1000;
  overflow: hidden;
}

.ui-navbar-dropdown-content[x-show="isOpen"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ui-navbar-dropdown-option {
  display: block;
  padding: 12px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  border-bottom: 1px solid #f3f4f6;
  text-decoration: none;
  color: inherit;
}

.ui-navbar-dropdown-option:last-child {
  border-bottom: none;
}

.ui-navbar-dropdown-option:hover {
  background-color: #f3f4f6;
  text-decoration: none;
}

.ui-navbar-dropdown-option-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ui-navbar-dropdown-option-title {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
  line-height: 20px;
  font-family: "Inter", sans-serif;
}

.ui-navbar-dropdown-option-desc {
  font-size: 12px;
  font-weight: 400;
  color: #6b7280;
  line-height: 16px;
  font-family: "Inter", sans-serif;
}

/* Dark Theme Styles - Based on HTML class */
html.dark .ui-navbar-brand-title {
  color: #f3f4f6;
}

html.dark .ui-navbar-brand-home-link:hover {
  color: #c1c6cc;
}

html.dark .ui-navbar-lang-trigger {
  color: #d1d5db;
}

html.dark .ui-navbar-lang-trigger:hover {
  color: #60a5fa;
}

html.dark .ui-navbar-lang-list {
  background: #1f2937;
  border-color: #374151;
}

html.dark .ui-navbar-lang-item:hover {
  background-color: #374151;
}

html.dark .ui-navbar-lang-text {
  color: #f9fafb;
}

html.dark .ui-navbar-lang-badge-soon {
  background: #374151;
  border-color: #4b5563;
  color: #9ca3af;
}

html.dark .ui-navbar-dropdown-content {
  background: #1f2937;
  border-color: #374151;
}

html.dark .ui-navbar-dropdown-option {
  border-bottom-color: #374151;
}

html.dark .ui-navbar-dropdown-option:hover {
  background-color: #374151;
}

html.dark .ui-navbar-dropdown-option-title {
  color: #f9fafb;
}

html.dark .ui-navbar-dropdown-option-desc {
  color: #9ca3af;
}

/* Light theme (default) styles already defined above */

/* Responsive Design */
@media (max-width: 768px) {
  .ui-navbar {
    padding: 12px 16px;
  }

  .ui-navbar-brand {
    justify-content: center;
  }

  .ui-navbar-actions {
    justify-content: center;
  }

  .ui-navbar-brand-title {
    font-size: 20px;
    gap: 10px;
  }

  .ui-navbar-btn {
    min-width: 80px;
    padding: 8px 16px;
  }
}

/* Mobile icon variants */
.ui-navbar-home-icon {
  display: none;
  font-size: 20px;
  font-weight: 400;
  font-family: "Inter", sans-serif;
  color: #101828;
  letter-spacing: 0.3955px;
  line-height: 1;
}

html.dark .ui-navbar-home-icon {
  color: #f3f4f6;
}

.ui-navbar-lang-trigger-flag {
  display: none;
  width: 22px;
  height: 16px;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .ui-navbar-brand-home-text {
    display: none;
  }

  .ui-navbar-home-icon {
    display: inline-block;
  }

  .ui-navbar-lang-trigger-text {
    display: none;
  }

  .ui-navbar-lang-trigger-flag {
    display: inline-block;
    position: relative;
    top: 0.15rem;
  }

  .ui-navbar-ai-badge {
    display: none;
  }

  .ui-navbar-lang-list {
    left: 4rem;
  }

  .ui-navbar-practice-dropdown {
    flex: initial;
  }

  .ui-navbar-btn-practice {
    width: auto;
  }

  .ui-navbar-btn-label {
    display: none;
  }

  .ui-navbar-practice-dropdown .ui-navbar-dropdown-content {
    left: -9.75rem;
  }
}

@media (max-width: 480px) {
  .ui-navbar-ai-badge {
    font-size: 12px;
    padding: 4px 8px;
  }

  .ui-navbar-btn {
    font-size: 13px;
    padding: 6px 12px;
    min-width: 70px;
  }

  .ui-navbar-actions {
    gap: 8px;
  }
}

/* UI Sidebar Component Styles - Light Theme Only */
.ui-sidebar {
  display: flex;
  flex-direction: column;
  width: 256px;
  height: calc(100vh - 70px); /* Subtract navbar height (70px) */
  background: #f9fafb;
  border-right: 1px solid #e2e8f0;
  font-family: "Inter", sans-serif;
  position: fixed;
  left: 0;
  top: 75px; /* Start below navbar */
  z-index: 50;
  padding-bottom: 1rem;
}

/* Header Section */
.ui-sidebar-header {
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
  flex-shrink: 0;
  height: 69px; /* Match Figma height */
  box-sizing: border-box;
}

.ui-sidebar-header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 36px;
}

/* Brand Section */
.ui-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.ui-sidebar-brand:hover {
  text-decoration: none;
}

.ui-sidebar-brand-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  padding: 8px;
  box-sizing: border-box;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  /* Alternative gradient that matches the AI badge: */
  /* background: #1447e6; */
}

.ui-sidebar-icon {
  width: 20px;
  height: 20px;
}

/* Make app-icon white in Collections brand header */
.ui-sidebar-brand-icon img[src="/svg/app-icon.svg"] {
  filter: brightness(0) invert(1);
}

.ui-sidebar-brand-title {
  font-size: 20px;
  font-weight: 400;
  line-height: 28px;
  color: #101828;
  letter-spacing: -0.4492px;
}

/* Menu Button */
.ui-sidebar-menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 10px;
  cursor: pointer;
  color: #6b7280;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.ui-sidebar-menu-btn:hover {
  background: #f3f4f6;
  color: #374151;
}

.ui-sidebar-menu-icon {
  width: 20px;
  height: 20px;
}

/* Navigation Section */
.ui-sidebar-nav {
  flex: 1;
  padding: 8px;
  padding-top: 9px; /* Match Figma spacing */
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.ui-sidebar-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ui-sidebar-nav-item {
  margin: 0;
}

.ui-sidebar-nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  text-decoration: none;
  color: #6b7280;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.3125px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.ui-sidebar-nav-link:hover {
  background: #f3f4f6;
  color: #374151;
  text-decoration: none;
}

.ui-sidebar-nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}

.ui-sidebar-nav-text {
  flex: 1;
}

/* Active Link Style - Unified for both nav and footer */
.ui-sidebar-link--active {
  background: #e6e7e8 !important;
  color: #101828 !important;
}

/* Footer Section */
.ui-sidebar-footer {
  border-top: 1px solid #e2e8f0;
  padding: 9px 8px 0;
  flex-shrink: 0;
}

.ui-sidebar-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ui-sidebar-footer-item {
  margin: 0;
}

.ui-sidebar-footer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  text-decoration: none;
  color: #6b7280;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.3125px;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

.ui-sidebar-footer-link:hover {
  background: #f3f4f6;
  color: #374151;
  text-decoration: none;
}

.ui-sidebar-footer-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: block;
}

.ui-sidebar-footer-text {
  flex: 1;
}

/* Layout adjustments when sidebar is present */
.has-sidebar {
  margin-left: 256px;
  margin-top: 70px; /* Account for navbar height */
  min-height: calc(100vh - 70px); /* Full height minus navbar */
  transition: margin-left 0.3s ease;
}

/* ================================================================================================ */
/* COLLAPSED SIDEBAR STYLES                                                                        */
/* ================================================================================================ */

/* Add transition to sidebar width and opacity */
.ui-sidebar {
  transition: width 0.3s ease, opacity 0.3s ease;
}

/* Collapsed sidebar - narrower width */
.ui-sidebar--collapsed {
  width: 64px;
}

/* Hide text elements and brand icon when collapsed */
.ui-sidebar--collapsed .ui-sidebar-brand-title,
.ui-sidebar--collapsed .ui-sidebar-brand-icon,
.ui-sidebar--collapsed .ui-sidebar-nav-text,
.ui-sidebar--collapsed .ui-sidebar-footer-text {
  display: none;
}

/* Adjust brand section when collapsed - only show burger */
.ui-sidebar--collapsed .ui-sidebar-brand {
  justify-content: center;
}

/* Center nav links when collapsed */
.ui-sidebar--collapsed .ui-sidebar-nav-link,
.ui-sidebar--collapsed .ui-sidebar-footer-link {
  justify-content: center;
  padding: 0 8px;
}

/* Layout adjustments when sidebar is collapsed */
.has-sidebar--collapsed {
  margin-left: 64px;
  margin-top: 70px;
  min-height: calc(100vh - 70px);
  transition: margin-left 0.3s ease;
}

/* ================================================================================================ */
/* MOBILE OVERLAY STYLES                                                                           */
/* ================================================================================================ */

/* Overlay — hidden on desktop */
.ui-sidebar-overlay {
  display: none;
}

@media (max-width: 768px) {
  /* Sidebar overlays content — keep 64px offset matching collapsed sidebar width */
  .has-sidebar {
    margin-left: 64px;
  }

  /* Sidebar sits above content */
  .ui-sidebar {
    z-index: 200;
  }

  /* Dark backdrop */
  .ui-sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 199;
  }
}

/* ================================================================================================ */
/* DARK MODE STYLES                                                                                */
/* ================================================================================================ */

/* Dark Theme Sidebar */
html.dark .ui-sidebar {
  background: linear-gradient(to bottom, #151d2c, #222c3c);
  border-right-color: #374151;
}

/* Dark Theme Header */
html.dark .ui-sidebar-header {
  border-bottom-color: #364153;
}

/* Dark Theme Brand Title */
html.dark .ui-sidebar-brand-title {
  color: #f3f4f6;
}

/* Dark Theme Menu Button */
html.dark .ui-sidebar-menu-btn {
  color: #9ca3af;
}

html.dark .ui-sidebar-menu-btn:hover {
  background: #374151;
  color: #f3f4f6;
}

/* Dark Theme Navigation */
html.dark .ui-sidebar-nav-link {
  color: #9ca3af;
}

html.dark .ui-sidebar-nav-link:hover {
  background: #374151;
  color: #f3f4f6;
}

html.dark .ui-sidebar-nav-link--active {
  background: #374151;
  color: #f3f4f6;
}

/* Dark Theme Navigation Section */
html.dark .ui-sidebar-nav {
  border-top-color: #364153;
  border-bottom-color: #364153;
}

/* Dark Theme Footer */
html.dark .ui-sidebar-footer {
  border-top-color: #364153;
}

html.dark .ui-sidebar-footer-link {
  color: #9ca3af;
}

html.dark .ui-sidebar-footer-link:hover {
  background: #374151;
  color: #f3f4f6;
}

/* Dark Theme Active Link - Unified */
html.dark .ui-sidebar-link--active {
  background: #374151 !important;
  color: #ffffff !important;
}

/* Dark Theme Icons - Invert all icons except brand icon */
html.dark .ui-sidebar-nav-icon,
html.dark .ui-sidebar-footer-icon {
  filter: invert(1);
}

/* UI SearchBar Component Styles */
.ui-searchbar-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ui-searchbar {
  position: relative;
  display: flex;
  align-items: center;
  width: 624px;
  height: 36px;
  background: #f3f3f5;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 4px 12px 4px 40px;
  font-family: "Inter", sans-serif;
  box-sizing: border-box;
  box-shadow:
    0px 1px 3px 0px rgba(0, 0, 0, 0.1),
    0px 1px 2px -1px rgba(0, 0, 0, 0.1);
}

.ui-searchbar-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-searchbar-icon-svg {
  width: 20px;
  height: 20px;
}

.ui-searchbar-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  color: #0f0f23;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.1504px;
  font-family: inherit;
}

.ui-searchbar-input::placeholder {
  color: #6b7280;
}

.ui-searchbar-input:focus {
  outline: none;
}

.ui-searchbar:focus-within {
  border-color: #3b82f6;
}

.ui-searchbar:focus-visible {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
  outline: none;
}

.ui-searchbar-shortcut kbd {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
}

.ui-searchbar:not(:focus-within) .ui-searchbar-shortcut {
  opacity: 0.9;
}

/* Search in Collections Button Styles */
.ui-searchbar-collections-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 36px;
  background: #ffffff;
  border: 1px solid #d1d5dc;
  border-radius: 8px;
  padding: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.ui-searchbar-collections-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ui-searchbar-collections-icon {
  width: 1.1rem;
}

/* Plus Button Styles */
.ui-searchbar-plus-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 36px;
  background: #ffffff;
  border: 1px solid #d1d5dc;
  border-radius: 8px;
  padding: 1px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.ui-searchbar-plus-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.ui-searchbar-plus-icon {
  width: 18px;
  height: 18px;
  display: block;
}

/* Dark Mode Styles */
html.dark .ui-searchbar {
  background: #374151;
  border-color: #4b5563;
  box-shadow: none;
}

html.dark .ui-searchbar-icon {
  color: #9ca3af;
}

html.dark .ui-searchbar-input {
  color: #f3f4f6;
}

html.dark .ui-searchbar-input::placeholder {
  color: #9ca3af;
}

html.dark .ui-searchbar:focus-within {
  border-color: #60a5fa;
}

html.dark .ui-searchbar:focus-visible {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.5);
  outline: none;
}

html.dark .ui-searchbar-shortcut kbd {
  background: #4b5563;
  border: 1px solid #6b7280;
  color: #e6e7eb;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}

html.dark .ui-searchbar:not(:focus-within) .ui-searchbar-shortcut {
  opacity: 0.7;
}

html.dark .ui-searchbar-collections-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

html.dark .ui-searchbar-collections-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

html.dark .ui-searchbar-collections-icon {
  filter: invert(1);
}

html.dark .ui-searchbar-plus-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

html.dark .ui-searchbar-plus-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
}

html.dark .ui-searchbar-plus-icon {
  filter: invert(1);
}

/* Responsive Design */
@media (max-width: 1200px) {
  .ui-searchbar {
    width: 500px;
  }
}

/* Tablet */
@media (max-width: 768px) {
  .ui-searchbar-wrapper {
    width: calc(100vw - 200px);
    margin: 0 auto;
  }
  .ui-searchbar-shortcut {
    display: none;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .ui-searchbar-wrapper {
    margin: 0;
  }
  .ui-searchbar {
    width: 100%;
    max-width: 350px;
  }
  /* .ui-searchbar-input::placeholder {
    color: transparent !important;
  } */
}

/* UI Tooltip Component Styles */
.ui-tooltip-container {
  position: relative;
  display: inline-flex;
  z-index: 9999;
}

.ui-tooltip-trigger {
  display: inline-flex;
}

.ui-tooltip-content {
  position: absolute;
  padding: 6px 12px;
  background: #09090b;
  color: #fafafa;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
  /* opacity: 0;
  visibility: hidden; */
  transition: opacity 150ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 150ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 150ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 9999;
  width: fit-content;
}

.ui-tooltip-text {
  display: block;
}

.ui-tooltip-arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #09090b;
  border-radius: 2px;
  z-index: 9999;
}

/* Top Position (default) */
.ui-tooltip-top {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-2px);
  transform-origin: bottom center;
}

[x-show="visible"].ui-tooltip-top {
  transform: translateX(-50%) translateY(-8px) scale(1);
}

.ui-tooltip-top .ui-tooltip-arrow {
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(calc(-50% - 2px)) rotate(45deg);
}

/* Bottom Position */
.ui-tooltip-bottom {
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  transform-origin: top center;
}

[x-show="visible"].ui-tooltip-bottom {
  transform: translateX(-50%) translateY(8px) scale(1);
}

.ui-tooltip-bottom .ui-tooltip-arrow {
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(calc(50% + 2px)) rotate(45deg);
}

/* Left Position */
.ui-tooltip-left {
  right: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(-2px);
  transform-origin: right center;
}

[x-show="visible"].ui-tooltip-left {
  transform: translateY(-50%) translateX(-8px) scale(1);
}

.ui-tooltip-left .ui-tooltip-arrow {
  left: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(calc(-50% - 2px)) rotate(45deg);
}

/* Right Position */
.ui-tooltip-right {
  left: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(2px);
  transform-origin: left center;
}

[x-show="visible"].ui-tooltip-right {
  transform: translateY(-50%) translateX(8px) scale(1);
}

.ui-tooltip-right .ui-tooltip-arrow {
  right: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(calc(50% + 2px)) rotate(45deg);
}

/* Dark Mode Styles */
html.dark .ui-tooltip-content {
  background: #fafafa;
  color: #09090b;
}

html.dark .ui-tooltip-arrow {
  background: #fafafa;
}

/* UI Toggle Group Component Styles */
.ui-toggle-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 50px;
  width: fit-content;
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  padding: 1px 5px;
  font-family: "Inter", sans-serif;
  box-sizing: border-box;
  box-shadow:
    0px 1px 3px 0px rgba(0, 0, 0, 0.2),
    0px 1px 2px -1px rgba(0, 0, 0, 0.2);
  transform: scale(0.94);
}

/* Icon mode: fixed width to fit icons */
.ui-toggle-group[data-use-icons="true"] {
  width: 98px;
  gap: 4px;
}

/* Sliding background */
.ui-toggle-group-slider {
  position: absolute;
  top: 5px;
  left: 5px;
  height: 40px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow:
    0px 4px 6px -1px rgba(0, 0, 0, 0.1),
    0px 2px 4px -2px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

/* Slider positions for grid/list (icon mode) */
.ui-toggle-group[data-use-icons="true"].grid .ui-toggle-group-slider {
  transform: translateX(0);
  width: 40px !important;
}

.ui-toggle-group[data-use-icons="true"].list .ui-toggle-group-slider {
  transform: translateX(44px);
  width: 40px !important;
}

.ui-toggle-group-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  border: none;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: color 0.2s ease;
  box-sizing: border-box;
  padding: 8px 16px;
  z-index: 2;
}

/* Icon mode: equal width buttons */
.ui-toggle-group[data-use-icons="true"] .ui-toggle-group-button {
  width: 40px;
  padding: 8px;
  flex: 0 0 40px;
}

.ui-toggle-group[data-use-icons="true"] .ui-toggle-group-button:first-child,
.ui-toggle-group[data-use-icons="true"] .ui-toggle-group-button:last-child {
  width: 40px;
  flex: 0 0 40px;
}

.ui-toggle-group-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.3125px;
  transition: color 0.2s ease;
}

.ui-toggle-group-icon {
  width: 21px;
  height: 21px;
  display: block;
  transition: color 0.2s ease;
  pointer-events: none;
}

.ui-toggle-group-button.active .ui-toggle-group-text {
  color: #101828;
}

.ui-toggle-group-button:not(.active) .ui-toggle-group-text {
  color: #4a5565;
}

.ui-toggle-group-button.active .ui-toggle-group-icon {
  filter: brightness(0) saturate(100%) invert(9%) sepia(7%) saturate(736%)
    hue-rotate(174deg) brightness(97%) contrast(93%);
}

.ui-toggle-group-button:not(.active) .ui-toggle-group-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(6%) saturate(550%)
    hue-rotate(175deg) brightness(94%) contrast(87%);
}

/* Hover Effects */
.ui-toggle-group-button:not(.active):hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Dark Mode Styles */
html.dark .ui-toggle-group {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(74, 85, 101, 0.4);
  box-shadow: none;
}

html.dark .ui-toggle-group-slider {
  background: #1e293b;
  box-shadow:
    0px 4px 6px -1px rgba(0, 0, 0, 0.1),
    0px 2px 4px -2px rgba(0, 0, 0, 0.1);
}

html.dark .ui-toggle-group-button.active .ui-toggle-group-text {
  color: #f1f5f9;
}

html.dark .ui-toggle-group-button:not(.active) .ui-toggle-group-text {
  color: #99a1af;
}

html.dark .ui-toggle-group-button.active .ui-toggle-group-icon {
  filter: brightness(0) saturate(100%) invert(96%) sepia(4%) saturate(187%)
    hue-rotate(171deg) brightness(105%) contrast(95%);
}

html.dark .ui-toggle-group-button:not(.active) .ui-toggle-group-icon {
  filter: brightness(0) saturate(100%) invert(74%) sepia(6%) saturate(249%)
    hue-rotate(179deg) brightness(89%) contrast(88%);
}

html.dark .ui-toggle-group-button:not(.active):hover {
  background: rgba(255, 255, 255, 0.05);
}

html.dark .ui-toggle-group-button img {
  filter: invert(1) brightness(2);
}

/* Responsive Design */

/* Tablet */
@media (max-width: 768px) {
  #coll-switch {
    width: calc(100vw - 200px);
    justify-content: center;
    margin: 0 auto;
  }
  #coll-switch .ui-toggle-group-button,
  #coll-switch .ui-toggle-group-slider {
    width: 50%;
  }
}

/* Mobile */
@media (max-width: 480px) {
  #coll-switch {
    margin: 0;
    width: 100%;
  }
  #view-switch {
    display: none;
  }
}

/* UI Dashboard Layout Component Styles */
.ui-dashboard-layout {
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  padding: 32px;
  box-sizing: border-box;
}

.ui-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  width: 100%;
  position: relative;
}

.ui-dashboard-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 24px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .ui-dashboard-layout {
    padding: 16px;
    gap: 32px;
  }

  .ui-dashboard-header {
    flex-direction: column;
    height: auto;
    gap: 16px;
    align-items: stretch;
  }
}

.ui-welcome {
  padding: 32px;
}

.ui-welcome-inner {
  width: 90%;
  margin: 0 auto;
}

/* Header */
.ui-welcome-header {
  text-align: center;
  margin-bottom: 48px;
}

.ui-welcome-icon-wrapper {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background: linear-gradient(135deg, #3b82f6, #9333ea);
  margin-bottom: 24px;
}

.ui-welcome-icon {
  width: 40px;
  height: 40px;
  color: #ffffff;
}

.ui-welcome-title {
  font-size: 30px;
  color: #111827;
  margin-bottom: 16px;
  font-weight: 700;
}

html.dark .ui-welcome-title {
  color: #f3f4f6;
}

.ui-welcome-title-highlight {
  background: linear-gradient(to right, #2563eb, #9333ea);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ui-welcome-subtitle {
  font-size: 15px;
  color: #4b5563;
  max-width: 672px;
  margin: 0 auto;
  line-height: 1.6;
}

html.dark .ui-welcome-subtitle {
  color: #9ca3af;
}

/* Stats Buttons */
.ui-welcome-stats-btns {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 24px;
  position: relative;
  right: 10px;
}

.ui-welcome-stats-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition:
    box-shadow 0.2s,
    background 0.2s;
}

.ui-welcome-stats-btn-progress {
  background: #f3e8ff;
  border: 1px solid #d8b4fe;
  color: #7e22ce;
}

.ui-welcome-stats-btn-progress:hover {
  background: #ede9fe;
  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.15);
}

html.dark .ui-welcome-stats-btn-progress {
  background: rgba(107, 33, 168, 0.2);
  border-color: rgba(192, 132, 252, 0.3);
  color: #c084fc;
}

html.dark .ui-welcome-stats-btn-progress:hover {
  background: rgba(107, 33, 168, 0.3);
}

.ui-welcome-stats-btn-usage {
  background: #dbeafe;
  border: 1px solid #93c5fd;
  color: #1d4ed8;
}

.ui-welcome-stats-btn-usage:hover {
  background: #bfdbfe;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

html.dark .ui-welcome-stats-btn-usage {
  background: rgba(29, 78, 216, 0.2);
  border-color: rgba(96, 165, 250, 0.3);
  color: #60a5fa;
}

html.dark .ui-welcome-stats-btn-usage:hover {
  background: rgba(29, 78, 216, 0.3);
}

@media (max-width: 768px) {
  .ui-welcome-stats-btns {
    flex-direction: column;
    align-items: center;
  }
}

/* Cards Grid */
.ui-welcome-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 48px;
}

@media (max-width: 768px) {
  .ui-welcome-cards {
    grid-template-columns: 1fr;
  }
}

.ui-welcome-card {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  padding: 24px;
  transition: box-shadow 0.2s;
}

.ui-welcome-card:hover {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

html.dark .ui-welcome-card {
  background: #1f2937;
  border-color: #374151;
}

.ui-welcome-card-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.ui-welcome-card-icon {
  padding: 12px;
  border-radius: 8px;
  flex-shrink: 0;
}

.ui-welcome-card-icon-green {
  background: #dcfce7;
}

html.dark .ui-welcome-card-icon-green {
  background: rgba(21, 128, 61, 0.3);
}

.ui-welcome-card-icon-blue {
  background: #dbeafe;
}

html.dark .ui-welcome-card-icon-blue {
  background: rgba(29, 78, 216, 0.3);
}

.ui-welcome-card-icon-purple {
  background: #f3e8ff;
}

html.dark .ui-welcome-card-icon-purple {
  background: rgba(107, 33, 168, 0.3);
}

.ui-welcome-card-icon-orange {
  background: #ffedd5;
}

html.dark .ui-welcome-card-icon-orange {
  background: rgba(154, 52, 18, 0.3);
}

.ui-welcome-card-svg {
  width: 24px;
  height: 24px;
}

.ui-welcome-card-svg-green {
  color: #16a34a;
}

html.dark .ui-welcome-card-svg-green {
  color: #4ade80;
}

.ui-welcome-card-svg-blue {
  color: #2563eb;
}

html.dark .ui-welcome-card-svg-blue {
  color: #60a5fa;
}

.ui-welcome-card-svg-purple {
  color: #9333ea;
}

html.dark .ui-welcome-card-svg-purple {
  color: #c084fc;
}

.ui-welcome-card-svg-orange {
  color: #ea580c;
}

html.dark .ui-welcome-card-svg-orange {
  color: #fb923c;
}

.ui-welcome-card-info {
  flex: 1;
}

.ui-welcome-card-title {
  font-size: 20px;
  color: #111827;
  margin-bottom: 8px;
  font-weight: 600;
}

html.dark .ui-welcome-card-title {
  color: #f3f4f6;
}

.ui-welcome-card-desc {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.5;
}

html.dark .ui-welcome-card-desc {
  color: #9ca3af;
}

.ui-welcome-card-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ui-welcome-card-list-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #4b5563;
}

html.dark .ui-welcome-card-list-item {
  color: #9ca3af;
}

.ui-welcome-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ui-welcome-dot-green {
  background: #22c55e;
}

.ui-welcome-dot-blue {
  background: #3b82f6;
}

.ui-welcome-dot-purple {
  background: #a855f7;
}

.ui-welcome-dot-orange {
  background: #f97316;
}

/* Features Section */
.ui-welcome-features {
  background: linear-gradient(135deg, #f9fafb, #f3f4f6);
  border-radius: 16px;
  padding: 32px;
  border: 1px solid #e5e7eb;
}

html.dark .ui-welcome-features {
  background: linear-gradient(135deg, #1f2937, #111827);
  border-color: #374151;
}

.ui-welcome-features-title {
  font-size: 24px;
  color: #111827;
  margin-bottom: 24px;
  text-align: center;
  font-weight: 600;
}

html.dark .ui-welcome-features-title {
  color: #f3f4f6;
}

.ui-welcome-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 24px;
}

@media (max-width: 768px) {
  .ui-welcome {
    padding: 32px 0;
  }

  .ui-welcome-features-grid {
    grid-template-columns: 1fr;
  }

  .ui-welcome-card-desc {
    display: none;
  }
}

.ui-welcome-feature {
  text-align: center;
}

.ui-welcome-feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #ffffff;
  margin-bottom: 12px;
}

html.dark .ui-welcome-feature-icon {
  background: #374151;
}

.ui-welcome-feature-svg {
  width: 24px;
  height: 24px;
}

.ui-welcome-feature-svg-blue {
  color: #2563eb;
}

html.dark .ui-welcome-feature-svg-blue {
  color: #60a5fa;
}

.ui-welcome-feature-svg-purple {
  color: #9333ea;
}

html.dark .ui-welcome-feature-svg-purple {
  color: #c084fc;
}

.ui-welcome-feature-svg-green {
  color: #16a34a;
}

html.dark .ui-welcome-feature-svg-green {
  color: #4ade80;
}

.ui-welcome-feature-title {
  color: #111827;
  margin-bottom: 8px;
  font-weight: 600;
  font-size: 15px;
}

html.dark .ui-welcome-feature-title {
  color: #f3f4f6;
}

.ui-welcome-feature-desc {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.5;
}

html.dark .ui-welcome-feature-desc {
  color: #9ca3af;
}

/* CTA */
.ui-welcome-cta {
  margin-top: 48px;
  text-align: center;
}

.ui-welcome-cta-text {
  color: #4b5563;
  margin-bottom: 16px;
  font-size: 15px;
}

html.dark .ui-welcome-cta-text {
  color: #9ca3af;
}

.ui-welcome-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: linear-gradient(to right, #2563eb, #9333ea);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 500;
  transition: box-shadow 0.2s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.ui-welcome-cta-btn:hover {
  background: linear-gradient(to right, #1d4ed8, #7e22ce);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.15);
}

.ui-welcome-cta-btn-icon {
  width: 20px;
  height: 20px;
}

/* UI Others Component Styles */
.ui-others-message {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  letter-spacing: -0.3125px;
  color: #6a7282;
  text-align: center;
  margin-top: 50px;
}

/* Dark Mode Styles */
html.dark .ui-others-message {
  color: #6a7282;
}

/* Settings Item Styles (migrated from dropdown.css) */
.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 36px;
  gap: 16px;
}

.settings-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.settings-label-text {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
  color: #101828;
  letter-spacing: -0.1504px;
  cursor: pointer;
  margin-bottom: 0;
}

.settings-description {
  margin-top: 0;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #616469;
  letter-spacing: -0.1504px;
}
/* Settings Page Styles */

#sort-order-dropdown .ui-dropdown-value {
  padding: 0 6px;
}

.settings-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  padding: 32px;
  margin: 0 auto;
  width: 100%;
  min-height: 100vh;
  background: #ffffff;
}

/* Dark mode styles */
html.dark .settings-container {
  background: #151c28;
}

html.dark .settings-header .settings-title {
  color: #f3f4f6;
}
html.dark .settings-header .settings-subtitle {
  color: #99a1af;
}

html.dark .settings-section {
  background: #1e2939;
  border: 1px solid rgba(74, 85, 101, 0.5);
}

html.dark .section-title {
  color: #f3f4f6;
}

html.dark .setting-divider {
  background: #232e41;
}

html.dark .settings-label-text {
  color: #f3f4f6;
}
html.dark .settings-description {
  color: #99a1af;
}

html.dark .section-description {
  color: #99a1af;
}

html.dark .settings-reset-btn {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(251, 146, 60, 0.3);
  color: #fb923c;
}

html.dark .settings-reset-btn:hover {
  background: rgba(67, 20, 7, 0.3);
  border-color: rgba(251, 146, 60, 0.5);
  color: #fdba74;
}

html.dark .settings-reset-btn:focus-visible {
  border-color: #fb923c;
  box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.15);
}

/* Header Styles */
.settings-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-title {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  color: #101828;
  letter-spacing: -0.4492px;
  margin: 0;
}

.settings-subtitle {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #4a5565;
  letter-spacing: -0.3125px;
  margin: 0;
}

/* Sections Container */
.settings-sections {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Section Styles */
.settings-section {
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-title {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  color: #101828;
  letter-spacing: -0.4395px;
  margin: 0;
}

.section-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-description {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #616469;
  letter-spacing: -0.1504px;
  margin: 0;
}

/* Reset Settings Section */
.settings-section-reset {
  backdrop-filter: blur(24px);
  box-shadow: rgba(31, 38, 135, 0.1) 0px 8px 32px 0px;
}

.settings-reset-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #ea580c;
  background: #ffffff;
  border: 1px solid #fed7aa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.settings-reset-btn:hover {
  background: #fff7ed;
  border-color: #fb923c;
  color: #c2410c;
}

.settings-reset-btn:focus-visible {
  border-color: #fb923c;
  box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.2);
}

.settings-reset-btn svg {
  flex-shrink: 0;
}

.settings-button.danger {
  background: white;
  color: #e7000b;
}

.settings-button.danger:hover {
  background: #fef2f2;
}

.settings-button:focus {
  box-shadow: 0 0 0 2px #3b82f6;
}

.button-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Responsive design */
@media (max-width: 768px) {
  .settings-container {
    padding: 16px;
  }

  .settings-container {
    gap: 20px;
  }

  .settings-sections {
    gap: 20px;
  }

  .settings-section {
    padding: 20px;
  }

  .settings-title {
    font-size: 18px;
    line-height: 26px;
  }

  .settings-subtitle {
    font-size: 14px;
    line-height: 20px;
  }

  .section-title {
    font-size: 16px;
    line-height: 24px;
  }
}

@media (max-width: 480px) {
  .settings-container {
    padding: 12px;
  }

  .settings-section {
    padding: 16px;
  }

  .section-content {
    gap: 12px;
  }

  .setting-item {
    gap: 6px;
  }

  .settings-description {
    display: none;
  }
}

/* Animation for smooth scrolling */
@media (prefers-reduced-motion: no-preference) {
  .settings-container {
    scroll-behavior: smooth;
  }

  .settings-section {
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }

  .settings-section {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

.ui-dropdown {
  position: relative;
  display: inline-block;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ui-dropdown-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--dropdown-background);
  border: 1px solid transparent;
  border-radius: 8px;
  height: 36px;
  padding: 1px 13px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  outline: none;
  transition: all 0.2s ease;
  min-width: 140px;
}

.ui-dropdown-trigger:hover {
  background: var(--dropdown-background-hover);
}

.ui-dropdown-trigger:focus {
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.ui-dropdown-trigger[aria-expanded="true"] {
  background: var(--dropdown-background-active);
}

.ui-dropdown-value {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  overflow: hidden;
}

.ui-dropdown-value span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ui-dropdown-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.ui-dropdown-chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--text-secondary);
  transition: transform 0.2s ease;
}

.ui-dropdown-trigger[aria-expanded="true"] .ui-dropdown-chevron {
  transform: rotate(180deg);
}

.ui-dropdown-content {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--dropdown-content-background);
  border: 1px solid var(--dropdown-border);
  border-radius: 8px;
  box-shadow: var(--dropdown-shadow);
  z-index: 50;
  min-width: 140px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all 0.2s ease;
}

.ui-dropdown-content[data-position="bottom"] {
  top: calc(100% + 4px);
  bottom: auto;
  margin-top: 0;
}

.ui-dropdown-content[data-position="top"] {
  bottom: calc(100% + 4px);
  top: auto;
  margin-bottom: 0;
  transform: translateY(4px);
}

.ui-dropdown-content[x-show="open"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ui-dropdown-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.ui-dropdown-option:hover {
  background: var(--dropdown-option-hover);
}

.ui-dropdown-option-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.ui-dropdown-option[data-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}

.ui-dropdown-option[data-disabled="true"]:hover {
  background: transparent;
}

.ui-dropdown-option-badge {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  color: #6a7282;
  background: rgba(106, 114, 130, 0.1);
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}

html.dark .ui-dropdown-option-badge {
  color: #99a1af;
  background: rgba(153, 161, 175, 0.15);
}

.ui-dropdown-option:first-child {
  border-radius: 8px 8px 0 0;
}

.ui-dropdown-option:last-child {
  border-radius: 0 0 8px 8px;
}

.ui-dropdown-option:only-child {
  border-radius: 8px;
}

.ui-dropdown-order-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.2s ease;
  border: 1px solid #ccc;
  background: #fff;
  color: #000;
  width: 36px;
  height: 36px;
  border-radius: 6px;
  cursor: pointer;
}

.ui-dropdown-order-button:hover {
  background: #f2f2f2;
  color: #000;
}

.ui-dropdown-order-button:disabled {
  opacity: 0.5;
  pointer-events: none;
}

.ui-dropdown-order-button:focus-visible {
  outline: none;
  border-color: #4d90fe;
  box-shadow: 0 0 0 3px rgba(77, 144, 254, 0.5);
}

.ui-dropdown-order-icon {
  width: 16px;
  height: 16px;
  transform: rotate(180deg);
  transition: transform 0.2s ease;
}

/* aria-invalid */
.ui-dropdown-order-button[aria-invalid="true"] {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2);
}

/* Light theme variables */
:root {
  --dropdown-background: #f8f9fa;
  --dropdown-background-hover: #f1f3f5;
  --dropdown-background-active: #e9ecef;
  --dropdown-content-background: #ffffff;
  --dropdown-border: rgba(0, 0, 0, 0.1);
  --dropdown-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
  --dropdown-option-hover: #f1f3f5;
}

html.dark {
  --dropdown-background: #374151;
  --dropdown-background-hover: #4b5563;
  --dropdown-background-active: #1f2937;
  --dropdown-content-background: #1f2937;
  --dropdown-border: rgba(75, 85, 99, 0.5);
  --dropdown-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.25);
  --dropdown-option-hover: #4b5563;
}

html.dark .ui-dropdown-trigger:hover {
  background: rgba(35, 37, 39, 0.6);
  border-color: rgba(255, 255, 255, 0.2);
}

html.dark .ui-dropdown-trigger[aria-expanded="true"] {
  background: rgba(35, 37, 39, 0.6);
  border-color: rgba(255, 255, 255, 0.2);
}

/* Dark Theme Icons - Invert all icons except flags */
html.dark .ui-dropdown-value img:not([src*="flag-"]),
html.dark .ui-dropdown-option img:not([src*="flag-"]) {
  filter: invert(1);
}

/* Keep flag colors unchanged in dark mode */
html.dark .ui-dropdown-value img[src*="flag-"],
html.dark .ui-dropdown-option img[src*="flag-"] {
  filter: none;
}

html.dark .ui-dropdown-order-button {
  background: #4b5563;
  border-color: #475569;
  color: #f3f4f6;
}
html.dark .ui-dropdown-order-button:hover {
  background: #525f6f;
}

/* Full-width variant */
.ui-dropdown[data-full-width="true"] {
  width: 100%;
  display: block;
}

.ui-dropdown[data-full-width="true"] .ui-dropdown-trigger {
  width: 100%;
  min-width: unset;
  height: 54px;
  padding: 1px 17px;
  border-radius: 10px;
}

.ui-dropdown[data-full-width="true"] .ui-dropdown-content {
  width: 100%;
  min-width: unset;
  border-radius: 10px;
}

.ui-dropdown[data-full-width="true"] .ui-dropdown-option:first-child {
  border-radius: 10px 10px 0 0;
}

.ui-dropdown[data-full-width="true"] .ui-dropdown-option:last-child {
  border-radius: 0 0 10px 10px;
}

.ui-dropdown[data-full-width="true"] .ui-dropdown-option:only-child {
  border-radius: 10px;
}

/* Large size variant */
.ui-dropdown[data-size="large"] .ui-dropdown-trigger {
  height: 66px;
  padding: 1px 17px;
}

.ui-dropdown[data-size="large"] .ui-dropdown-icon {
  width: 40px;
  height: 40px;
}

.ui-dropdown[data-size="large"] .ui-dropdown-value {
  gap: 12px;
}

/* Responsive design */
@media (max-width: 768px) {
  .ui-dropdown-field {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .ui-dropdown {
    width: 100%;
  }

  .ui-dropdown-trigger {
    width: 100%;
    min-width: unset;
    max-width: 150px;
  }

  .account-container .ui-dropdown-trigger {
    max-width: 500px;
  }
}

/* UI Toggle Btn Component Styles */

.ui-toggle-btn {
  width: max-content;
}

.ui-toggle-btn-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 32px;
  height: 18.391px;
  background: #cbced4;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  outline: none;
  transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 1px;
  flex-shrink: 0;
}

.ui-toggle-btn-button:focus {
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.ui-toggle-btn-button {
  background: var(--toggle-background-unchecked);
  justify-content: flex-start;
}

.ui-toggle-btn-button.is-active {
  background: #030213;
  justify-content: flex-end;
}

.ui-toggle-btn-thumb {
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 999px;
  transition: all 2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.ui-toggle-btn-button .ui-toggle-btn-thumb {
  transform: translateX(0);
}

.ui-toggle-btn-button.is-active .ui-toggle-btn-thumb {
  transform: translateX(1px);
}

/* Light theme variables */
:root {
  --toggle-background-checked: #030213;
  --toggle-background-unchecked: #cbced4;
}

html.dark {
  --toggle-background-checked: oklch(0.985 0 0);
  --toggle-background-unchecked: #686b6f;
}

html.dark .ui-toggle-btn-button.is-active {
  background: var(--toggle-background-checked);
}
html.dark .ui-toggle-btn-thumb {
  background: #232e41;
}

/* Hover states */
.ui-toggle-btn-button:hover {
  opacity: 0.9;
}

.ui-toggle-btn-button:active .ui-toggle-btn-thumb {
  transform: scale(0.95);
}

/* Animation for smooth state transitions */
@keyframes toggle-on {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(1px);
  }
}

@keyframes toggle-off {
  0% {
    transform: translateX(1px);
  }
  100% {
    transform: translateX(0);
  }
}

/* Dashboard styles */
.dashboard-content {
  margin-top: 75px;
  padding: 0rem;
}

/* .dashboard-content h1 {
  color: #1f2937;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
} */

.welcome-text {
  color: #6b7280;
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}

/* Dark theme support */
html.dark .dashboard-content h1 {
  color: #f3f4f6;
}

html.dark .welcome-text {
  color: #9ca3af;
}

html.dark body {
  background-color: #111827;
  color: #f3f4f6;
}

/* Legacy styles (remove after migration) */
.dashboard-header {
  background: #667eea;
  color: white;
  padding: 2rem 0;
  margin-bottom: 2rem;
}

.dashboard-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dashboard-subtitle {
  font-size: 1.125rem;
  opacity: 0.9;
  font-weight: 400;
}

/* Stats cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: white;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  border: 1px solid #e2e8f0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: #1a202c;
  margin-bottom: 0.25rem;
}

.stat-label {
  color: #718096;
  font-size: 0.875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.stat-change {
  font-size: 0.75rem;
  margin-top: 0.5rem;
}

.stat-change.positive {
  color: #38a169;
}

.stat-change.negative {
  color: #e53e3e;
}

/* Dashboard content */

.sidebar-content {
  background: white;
  border-radius: 0.75rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid #e2e8f0;
}

/* Recent activity */
.activity-list {
  list-style: none;
  padding: 0;
}

.activity-item {
  padding: 0.75rem 0;
  border-bottom: 1px solid #edf2f7;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-icon {
  width: 2rem;
  height: 2rem;
  background: #edf2f7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: #4a5568;
}

.activity-text {
  font-size: 0.875rem;
  color: #4a5568;
}

.activity-time {
  font-size: 0.75rem;
  color: #a0aec0;
  margin-left: auto;
}

/* Botones de acción */
.btn {
  display: inline-flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
}

.btn-primary {
  background: #3182ce;
  color: white;
}

.btn-primary:hover {
  background: #2c5aa0;
  text-decoration: none;
}

.btn-secondary {
  background: #edf2f7;
  color: #4a5568;
}

.btn-secondary:hover {
  background: #e2e8f0;
  text-decoration: none;
}

/* Quick actions */
.quick-actions {
  display: flex;
  gap: 1rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

/* Base button */
.dashboard-folder-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.6);
  color: #374151;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  outline: none;
  transition: all 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

.dashboard-folder-btn-icon {
  width: 22px;
  height: 22px;
  pointer-events: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-folder-btn:hover {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

html.dark .dashboard-folder-btn {
  background: rgba(31, 41, 55, 0.6);
  border-color: #374151;
  color: #d1d5db;
}

html.dark .dashboard-folder-btn:hover {
  background: rgba(31, 41, 55, 0.8);
}

/* Responsive dashboard */
@media (max-width: 1024px) {
  .dashboard-content {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (max-width: 768px) {
  .dashboard-header {
    padding: 1.5rem 0;
  }

  .dashboard-title {
    font-size: 2rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .stat-card {
    padding: 1rem;
  }

  .quick-actions {
    flex-direction: column;
  }

  .btn {
    justify-content: center;
  }
}

/* Animaciones */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dashboard-content > * {
  animation: fadeInUp 0.6s ease forwards;
}

.stat-card:nth-child(1) {
  animation-delay: 0.1s;
}
.stat-card:nth-child(2) {
  animation-delay: 0.2s;
}
.stat-card:nth-child(3) {
  animation-delay: 0.3s;
}
.stat-card:nth-child(4) {
  animation-delay: 0.4s;
}

/* ================================================================================================ */
/* DEVELOPMENT ONLY STYLES - These styles should only be used in development mode                  */
/* Remove or comment out these styles in production builds                                          */
/* ================================================================================================ */

.dev-theme-toggle {
  position: fixed;
  bottom: 80px;
  right: 25px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #e5e7eb;
  background: #ffffff;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dev-theme-toggle:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.dev-theme-toggle:active {
  transform: scale(0.95);
}

html.dark .dev-theme-toggle {
  background: #374151;
  border-color: #4b5563;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

html.dark .dev-theme-toggle:hover {
  background: #4b5563;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

/* ================================================================================================ */

/* Collection Page Styles */
.collection-page {
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 220px);
}

.collection-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
  gap: 16px;
}

.collection-header-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.collection-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.collection-title {
  font-size: 22px;
  font-weight: 500;
  line-height: 32px;
  color: #111827;
  margin: 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.collection-expand-all-btn {
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
  background: none;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, sans-serif;
  white-space: nowrap;
  transition:
    color 0.15s,
    border-color 0.15s;
}

.collection-expand-all-btn:hover {
  color: #111827;
  border-color: #9ca3af;
}

html.dark .collection-expand-all-btn {
  color: #9ca3af;
  border: 1px solid #374151;
}

html.dark .collection-expand-all-btn:hover {
  color: #f3f4f6e3;
  border-color: #6b7280;
}

/* html.dark .collection-expand-all-btn {
  color: #9ca3af;
  background-color: rgba(255, 255, 255, 0.04);
}

html.dark .collection-expand-all-btn:hover {
  color: #f3f4f6;
  background-color: rgba(255, 255, 255, 0.08);
} */

.collection-subtitle {
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: #6b7280;
  margin: 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.collection-content {
  width: 100%;
  min-height: 200px;
  flex: 1;
}

/* Collection List */
.collection-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* Collection Card */
.collection-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52.5px;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(209, 213, 219, 0.5);
  box-shadow: rgba(31, 38, 135, 0.1) 0px 8px 32px 0px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: ui-sans-serif, system-ui, sans-serif;
  position: relative;
}

@keyframes collection-badge-float {
  0%,
  100% {
    transform: rotate(-12deg) translateY(0);
  }
  50% {
    transform: rotate(-12deg) translateY(-4px);
  }
}

.collection-group-badge {
  position: absolute;
  top: -11px;
  right: 14px;
  background: #6366f1;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  animation: collection-badge-float 2s ease-in-out infinite;
}

.collection-group-badge:hover {
  background: #e0e7ff;
  color: #4338ca;
  text-decoration: none;
}

.collection-group:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  transform: translateX(2px);
}

.collection-group-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.collection-group-name {
  font-size: 14px;
  font-weight: 500;
  line-height: 24px;
  color: #111827;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.collection-group-count {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #99a1af;
}

.collection-group-chevron {
  flex-shrink: 0;
  color: #9ca3af;
  transition:
    transform 0.2s ease,
    color 0.2s ease;
  transform: rotate(90deg);
}

.collection-group:hover .collection-group-chevron {
  color: #6b7280;
  transform: translateX(2px) rotate(90deg);
}

.collection-group.expanded .collection-group-chevron {
  transform: rotate(270deg);
}

.collection-group.expanded:hover .collection-group-chevron {
  transform: translateX(2px) rotate(270deg);
}

/* Sort Dropdown */
.collection-sort-dropdown {
  position: relative;
  margin-right: 8px;
  display: none;
}

.collection-group.expanded .collection-sort-dropdown {
  display: block;
}

.collection-sort-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 4px;
  background: transparent;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #6b7280;
}

.collection-sort-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
  color: #111827;
}

.collection-sort-btn svg {
  width: 16.5px;
  height: 16.5px;
}

.collection-sort-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 4px;
  /* animation: slideDown 0.15s ease; */
  z-index: 1000;
}

.collection-sort-option {
  display: block;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #374151;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  /* transition: all 0.15s ease; */
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.collection-sort-option:hover {
  background: #f3f4f6;
  color: #111827;
}

.collection-sort-option.selected {
  background: #e0e7ff;
  color: #4f46e5;
  font-weight: 500;
}

/* Put card items below sort-menu element when opened */
.collection-group.dropdown-open + .card-grid-target .card-grid.grid {
  z-index: -1;
}
.collection-group.dropdown-open + .card-grid-target .card-grid-list-item {
  z-index: -1;
}

/* Card Grid Target */
.card-grid-target {
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Collection Cards Container */
.collection-cards-container {
  margin-top: 12px;
}

.collection-cards-container.expanded {
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Collection Cards Grid */
.collection-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  padding: 16px;
  background: rgba(249, 250, 251, 0.5);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

/* Collection Empty State */
.collection-empty {
  padding: 32px 16px;
  text-align: center;
  background: rgba(249, 250, 251, 0.5);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.collection-empty-message {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #9ca3af;
  margin: 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

/* Collection Empty (no groups) */
.collection-empty {
  backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: rgba(31, 38, 135, 0.08) 0px 4px 20px 0px;
  background: rgba(255, 255, 255, 0.4);
}

.collection-empty-content {
  padding: 20px;
}

.collection-empty-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.collection-empty-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.2) 0%,
    rgba(168, 85, 247, 0.2) 100%
  );
}

.collection-empty-icon-svg {
  width: 20px;
  height: 20px;
  color: #2563eb;
}

.collection-empty-title {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #111827;
  margin: 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.collection-empty-input-form {
  position: relative;
}

.collection-empty-input {
  width: 100%;
  min-width: 0;
  border-radius: 6px;
  border: 1px solid #d1d5db;
  padding: 8px 40px 8px 12px;
  font-size: 14px;
  background: #f3f3f5;
  /* background: rgba(255, 255, 255, 0.8); */
  transition: all 0.2s ease;
  outline: none;
  font-family: ui-sans-serif, system-ui, sans-serif;
  color: #111827;
}

.collection-empty-input::placeholder {
  color: #9ca3af;
}

.collection-empty-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.collection-empty-button {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  padding: 6px;
  border-radius: 4px;
  background: linear-gradient(135deg, #3b82f6 0%, #a855f7 100%);
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.collection-empty-button:hover {
  background: linear-gradient(135deg, #2563eb 0%, #9333ea 100%);
}

.collection-empty-button-icon {
  width: 14px;
  height: 14px;
  color: #ffffff;
}

/* Dark Theme */
html.dark .collection-title {
  color: #f9fafb;
}

html.dark .collection-subtitle {
  color: #9ca3af;
}

html.dark .collection-group {
  border-color: rgba(69, 85, 108, 0.4);
  background: rgba(49, 65, 88, 0.6);
  box-shadow: rgba(29, 29, 29, 0.608) 0px 8px 32px 0px;
}

html.dark .collection-group-badge {
  background: #818cf8;
}

html.dark .collection-group-badge:hover {
  background: #4338ca;
  color: #e0e7ff;
}

html.dark .collection-group:hover {
  background: rgba(49, 65, 88, 0.9);
  border-color: rgba(69, 85, 108, 0.9);
}

html.dark .collection-group-name {
  color: #f1f5f9;
}

html.dark .collection-group-count {
  color: #99a1af;
}

html.dark .collection-group-chevron {
  color: #94a3b8;
}

html.dark .collection-group:hover .collection-group-chevron {
  color: #cbd5e1;
}

html.dark .collection-cards-grid {
  background: rgba(49, 65, 88, 0.3);
  border-color: rgba(69, 85, 108, 0.4);
}

html.dark .collection-empty {
  background: rgba(49, 65, 88, 0.3);
  border-color: rgba(69, 85, 108, 0.4);
}

html.dark .collection-empty-message {
  color: #9ca3af;
}

html.dark .collection-sort-btn {
  border-color: rgba(69, 85, 108, 0.6);
  color: #94a3b8;
}

html.dark .collection-sort-btn:hover {
  background: rgba(49, 65, 88, 0.6);
  border-color: rgba(69, 85, 108, 0.9);
  color: #cbd5e1;
}

html.dark .collection-sort-menu {
  background: #1e293b;
  border-color: rgba(69, 85, 108, 0.6);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.3),
    0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

html.dark .collection-sort-option {
  color: #cbd5e1;
}

html.dark .collection-sort-option:hover {
  background: rgba(49, 65, 88, 0.8);
  color: #f1f5f9;
}

html.dark .collection-sort-option.selected {
  background: rgba(79, 70, 229, 0.2);
  color: #a5b4fc;
  font-weight: 500;
}

html.dark .collection-empty {
  border-color: rgba(71, 85, 105, 0.4);
  background: rgba(51, 65, 85, 0.5);
}

html.dark .collection-empty-icon {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.3) 0%,
    rgba(168, 85, 247, 0.3) 100%
  );
}

html.dark .collection-empty-icon-svg {
  color: #60a5fa;
}

html.dark .collection-empty-title {
  color: #f1f5f9;
}

html.dark .collection-empty-input {
  background: rgba(51, 65, 85, 0.9);
  border-color: rgba(71, 85, 105, 0.6);
  color: #f1f5f9;
}

html.dark .collection-empty-input::placeholder {
  color: #94a3b8;
}

html.dark .collection-empty-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

/* YouTube Feature Banner */
.collection-yt-banner {
  position: sticky;
  bottom: 0;
  z-index: 512;
  background: linear-gradient(90deg, #f5f3ff 0%, #ede9fe 40%, #eef2ff 100%);
  border-top: 1px solid rgba(109, 40, 217, 0.18);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -4px 24px rgba(109, 40, 217, 0.1);
  padding: 14px 24px;
  margin-top: 2rem;
  cursor: pointer;
}

.collection-yt-banner-inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 900px;
  margin: 0 auto;
}

.collection-yt-banner-icon-wrap {
  flex-shrink: 0;
}

.collection-yt-banner-play {
  width: 56px;
  height: 40px;
  display: block;
  filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.4));
}

.collection-yt-banner-text {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1;
  flex-wrap: wrap;
}

.collection-yt-banner-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.1);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: 4px;
  padding: 1px 6px;
  white-space: nowrap;
  align-self: center;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.collection-yt-banner-title {
  font-size: 15px;
  font-weight: 600;
  color: #1e1b4b;
  white-space: nowrap;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.collection-yt-banner-sub {
  font-size: 13px;
  font-weight: 400;
  color: #6b7280;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.collection-yt-banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 8px 18px;
  background: #4f46e5;
  color: #ffffff;
  font-size: 13.5px;
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none;
  font-family: ui-sans-serif, system-ui, sans-serif;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
  white-space: nowrap;
}

.collection-yt-banner-cta:hover {
  background: #4338ca;
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
}

.collection-yt-banner-close {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 6px;
  color: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition:
    color 0.15s ease,
    background 0.15s ease;
  padding: 0;
}

.collection-yt-banner-close:hover {
  color: rgba(0, 0, 0, 0.7);
  background: rgba(0, 0, 0, 0.06);
}

html.dark .collection-yt-banner {
  background: linear-gradient(135deg, #0d0618 0%, #1a0840 50%, #0b1530 100%);
  border-top-color: rgba(167, 139, 250, 0.35);
  box-shadow: 0 -8px 32px rgba(109, 40, 217, 0.2);
}

html.dark .collection-yt-banner-badge {
  color: #fc8181;
  background: rgba(252, 129, 129, 0.12);
  border-color: rgba(252, 129, 129, 0.28);
}

html.dark .collection-yt-banner-title {
  color: #f3f0ff;
}

html.dark .collection-yt-banner-sub {
  color: rgba(196, 181, 253, 0.75);
}

html.dark .collection-yt-banner-cta {
  background: linear-gradient(90deg, #7c3aed, #2563eb);
  color: #ffffff;
  box-shadow: 0 2px 12px rgba(124, 58, 237, 0.4);
}

html.dark .collection-yt-banner-cta:hover {
  background: linear-gradient(90deg, #6d28d9, #1d4ed8);
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(124, 58, 237, 0.5);
}

html.dark .collection-yt-banner-close {
  color: rgba(196, 181, 253, 0.45);
}

html.dark .collection-yt-banner-close:hover {
  color: rgba(196, 181, 253, 0.9);
  background: rgba(167, 139, 250, 0.12);
}

@media (max-width: 640px) {
  .collection-yt-banner {
    padding: 12px 16px;
  }

  .collection-yt-banner-inner {
    gap: 12px;
  }

  .collection-yt-banner-sub {
    display: none;
  }

  .collection-yt-banner-title {
    font-size: 14px;
  }

  .collection-yt-banner-cta {
    padding: 7px 14px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .collection-yt-banner {
    padding: 12px 14px;
  }

  /* Two-row layout: [icon | text | close] then [cta full-width] */
  .collection-yt-banner-inner {
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: center;
  }

  .collection-yt-banner-icon-wrap {
    order: 1;
    flex-shrink: 0;
  }

  .collection-yt-banner-play {
    width: 42px;
    height: 30px;
  }

  .collection-yt-banner-text {
    order: 2;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .collection-yt-banner-title {
    font-size: 13px;
    white-space: normal;
    line-height: 1.3;
  }

  .collection-yt-banner-badge {
    display: none;
  }

  .collection-yt-banner-close {
    order: 3;
    flex-shrink: 0;
  }

  /* CTA drops to its own row full-width */
  .collection-yt-banner-cta {
    order: 4;
    width: 100%;
    justify-content: center;
    padding: 8px 0px;
    font-size: 13px;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .collection-header {
    flex-direction: column;
    align-items: stretch;
  }

  .collection-title {
    font-size: 20px;
    line-height: 28px;
  }

  .collection-subtitle {
    font-size: 13px;
    line-height: 18px;
  }

  .collection-list {
    gap: 10px;
  }

  .collection-group {
    padding: 14px 16px;
  }

  .collection-group-name {
    font-size: 15px;
  }

  .collection-group-count {
    font-size: 13px;
  }

  .collection-cards-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
    padding: 12px;
  }

  .collection-empty {
    padding: 24px 12px;
  }

  .collection-sort-btn {
    width: 28px;
    height: 28px;
  }

  .collection-sort-btn svg {
    width: 18px;
    height: 18px;
  }

  .collection-sort-menu {
    min-width: 180px;
  }

  .collection-sort-option {
    font-size: 13px;
    padding: 7px 10px;
  }
}

@media (max-width: 480px) {
  .collection-header {
    margin-bottom: 16px;
  }

  .collection-title {
    font-size: 18px;
    line-height: 24px;
  }

  .collection-subtitle {
    font-size: 12px;
    line-height: 16px;
  }

  .collection-list {
    gap: 8px;
  }

  .collection-group {
    padding: 12px 14px;
  }

  .collection-group-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .collection-group-name {
    font-size: 14px;
  }

  .collection-group-count {
    font-size: 12px;
  }

  .collection-group-chevron {
    width: 18px;
    height: 18px;
  }

  .collection-cards-grid {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
  }

  .collection-empty {
    padding: 20px 10px;
  }

  .collection-empty-message {
    font-size: 13px;
  }

  .collection-sort-dropdown {
    margin-right: 4px;
  }

  .collection-sort-btn {
    width: 26px;
    height: 26px;
  }

  .collection-sort-btn svg {
    width: 16px;
    height: 16px;
  }

  .collection-sort-menu {
    min-width: 160px;
  }

  .collection-sort-option {
    font-size: 12px;
    padding: 6px 8px;
  }
}

/* Card Grid Container */
.card-grid-container {
  margin-top: 12px;
  animation: slideDown 0.3s ease;
  max-height: 100vh;
  overflow-y: auto;
}

.card-grid-container::-webkit-scrollbar {
  display: none;
}

/* Scroll Buttons */
.card-grid-scroll-btn {
  position: fixed;
  right: 32px;
  padding: 12px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 0.2s ease;
  z-index: 20;
  opacity: 0.9;
}

.card-grid-scroll-btn:hover:not(:disabled) {
  opacity: 1;
  transform: scale(1.1);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.card-grid-scroll-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.card-grid-scroll-btn-up {
  top: 55%;
}

.card-grid-scroll-btn-down {
  top: 65%;
}

.card-grid-scroll-icon {
  width: 20px;
  height: 20px;
  display: block;
  color: #374151;
}

html.dark .card-grid-scroll-btn {
  background: #1f2937;
  border-color: #374151;
}

html.dark .card-grid-scroll-icon {
  color: #d1d5db;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Card Grid */
.card-grid {
  padding: 24px;
  background: rgba(249, 250, 251, 0.5);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.card-grid.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  position: relative;
  padding-bottom: 80px;
}

/* List View Layout Override */
.card-grid.list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

/* Individual Card */
.card-grid-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 21px;
  height: 200px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(229, 231, 235, 1);
  border-radius: 16px;
  backdrop-filter: blur(24px);
  box-shadow:
    0 2px 8px 0 rgba(0, 0, 0, 0.06),
    0 1px 3px 0 rgba(0, 0, 0, 0.04),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.6),
    inset 16px 16px 24px -16px rgba(255, 255, 255, 0.15);
  transition: all 0.2s ease;
  font-family: ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
}

.card-grid-card:hover {
  box-shadow:
    0 4px 16px 0 rgba(0, 0, 0, 0.08),
    0 2px 8px 0 rgba(0, 0, 0, 0.06),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.7),
    inset 16px 16px 24px -16px rgba(255, 255, 255, 0.2);
  border-color: rgba(209, 213, 219, 1); /* gris más claro en hover */
}

/* Card Header */
.card-grid-card-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0px;
  min-height: 32px;
}

.card-grid-card-word {
  font-size: 24px;
  font-weight: 400;
  line-height: 32px;
  color: #101828;
  margin: 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.0703px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-grid-card-info {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #6a7282;
  font-family: ui-sans-serif, system-ui, sans-serif;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 2px;
}

.card-grid-card-speaker-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 6px;
  background: transparent;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
}

.card-grid-card-speaker-btn:hover {
  opacity: 1;
}

.card-grid-card-speaker-icon {
  width: 16px;
  height: 16px;
  display: block;
  filter: brightness(0) saturate(100%) invert(24%) sepia(8%) saturate(1265%)
    hue-rotate(182deg) brightness(95%) contrast(90%);
  cursor: auto;
}

html.dark .card-grid-card-speaker-icon {
  filter: brightness(0) saturate(100%) invert(88%) sepia(6%) saturate(267%)
    hue-rotate(182deg) brightness(88%) contrast(88%);
}

/* Card Body */
.card-grid-card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.card-grid-card-label {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #6a7282;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.card-grid-card-translation {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #1e2939;
  margin: 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

/* Card Footer */
.card-grid-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 13px;
  border-top: 1px solid rgba(229, 231, 235, 0.5);
  min-height: 16px;
}

.card-grid-card-footer {
  margin-top: 82.5px;
}

.card-grid-card-footer.with-translation {
  margin-top: auto;
}

.card-grid-card-status {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #6a7282;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.card-grid-card-times {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #364153;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

/* Heat Indicator - Shared Styles */
.card-grid-card-heat-indicator,
.card-grid-list-heat-indicator {
  display: flex;
  gap: 2px;
  align-items: center;
}

.card-grid-card-heat-bar,
.card-grid-list-heat-bar {
  width: 8px;
  transition: all 0.3s ease;
}

.card-grid-card-heat-bar {
  height: 8px;
}

.card-grid-list-heat-indicator {
  flex-shrink: 0;
}

.card-grid-list-heat-bar {
  height: 12px;
}

.card-grid-card-heat-bar-1,
.card-grid-list-heat-bar-1 {
  background-color: #fbbf24;
  border-radius: 2px 0 0 2px;
}

.card-grid-card-heat-bar-2,
.card-grid-list-heat-bar-2 {
  background-color: #f59e0b;
}

.card-grid-card-heat-bar-3,
.card-grid-list-heat-bar-3 {
  background-color: #fb923c;
}

.card-grid-card-heat-bar-4,
.card-grid-list-heat-bar-4 {
  background-color: #f97316;
}

.card-grid-card-heat-bar-5,
.card-grid-list-heat-bar-5 {
  background-color: #ef4444;
}

.card-grid-card-heat-bar-6,
.card-grid-list-heat-bar-6 {
  background-color: #dc2626;
  border-radius: 0 2px 2px 0;
}

/* Gray modifier for inactive bars */
.card-grid-card-heat-bar-gray,
.card-grid-list-heat-bar-gray {
  background-color: rgba(229, 231, 235, 0.5);
}

/* List View */
.card-grid-list-item {
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.2s ease;
  backdrop-filter: blur(2px);
}

.card-grid-list-item:last-child {
  border-bottom: 0;
}

.card-grid-list-item:hover {
  background: rgba(255, 255, 255, 0.6);
}

.card-grid-list-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.card-grid-list-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.card-grid-list-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  text-transform: capitalize;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.card-grid-list-badge-nouns {
  background: #dbeafe;
  color: #1e40af;
}

.card-grid-list-badge-verbs {
  background: #d1fae5;
  color: #065f46;
}

.card-grid-list-badge-adjectives {
  background: #f3e8ff;
  color: #6b21a8;
}

.card-grid-list-badge-adverbs {
  background: #fed7aa;
  color: #9a3412;
}

/* Phrase group colors - cycle through 4 colors dynamically */
.card-grid-list-badge-color-0 {
  background: #dbeafe;
  color: #1e40af;
}

.card-grid-list-badge-color-1 {
  background: #d1fae5;
  color: #065f46;
}

.card-grid-list-badge-color-2 {
  background: #f3e8ff;
  color: #6b21a8;
}

.card-grid-list-badge-color-3 {
  background: #fed7aa;
  color: #9a3412;
}

.card-grid-list-word-section {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.card-grid-list-word {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #111827;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.card-grid-list-arrow {
  font-size: 14px;
  color: #9ca3af;
  flex-shrink: 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.card-grid-list-translation {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #4b5563;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.card-grid-list-right {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}

.card-grid-list-meta {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.card-grid-list-status {
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #6b7280;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.card-grid-list-times {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #374151;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.card-grid-list-speaker-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: auto;
  opacity: 0;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.card-grid-list-item:hover .card-grid-list-speaker-btn {
  opacity: 1;
}

.card-grid-list-speaker-btn:hover {
  background: rgba(255, 255, 255, 0.7);
}

.card-grid-list-speaker-icon {
  width: 20px;
  height: 20px;
  display: block;
  filter: brightness(0) saturate(100%) invert(24%) sepia(8%) saturate(1265%)
    hue-rotate(182deg) brightness(95%) contrast(90%);
}

/* Empty State */
.card-grid-empty {
  padding: 32px 16px;
  text-align: center;
  background: rgba(249, 250, 251, 0.5);
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.card-grid-empty-message {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #9ca3af;
  margin: 0 0 16px 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

/* Add Button in Grid */
.card-grid-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  background: transparent;
  border: 2px dashed #d1d5db;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 21px;
}

.card-grid-add-btn.is-full-row {
  min-height: 120px;
}

.card-grid-add-btn:hover {
  border-color: #60a5fa;
  background: rgba(96, 165, 250, 0.05);
}

/* Add Button in Empty State */
.card-grid-add-btn-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100px;
  background: transparent;
  border: 2px dashed #d1d5db;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 16px;
}

.card-grid-add-btn-empty.list-mode {
  min-height: 40px !important;
}

.card-grid-add-btn-empty:hover {
  border-color: #60a5fa;
  background: rgba(96, 165, 250, 0.05);
}

/* Add Button Icon */
.card-grid-add-btn-icon {
  width: 32px;
  height: 32px;
  display: block;
  color: #9ca3af;
  transition: color 0.2s ease;
}

.card-grid-add-btn:hover .card-grid-add-btn-icon,
.card-grid-add-btn-empty:hover .card-grid-add-btn-icon {
  color: #2563eb;
}

/* Load More Button */
.card-grid-load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 12px 24px;
  margin-top: 16px;
  background: #374151;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.card-grid.list .card-grid-load-more {
  margin-bottom: 16px;
}

.card-grid.grid .card-grid-load-more {
  position: absolute;
  bottom: 16px;
  width: max-content;
  right: 24px;
}

.card-grid-load-more:hover {
  background: #1f2937;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}

.card-grid-load-more:disabled {
  cursor: not-allowed;
  transform: none;
}

/* Dark Mode */
html.dark .card-grid {
  background: rgba(49, 65, 88, 0.3);
  border-color: rgba(69, 85, 108, 0.4);
}

html.dark .card-grid-card {
  border-color: rgba(69, 85, 108, 0.6);
  background-color: rgba(30, 41, 59, 0.8);
  box-shadow:
    0 8px 24px 0 rgba(0, 0, 0, 0.2),
    0 2px 8px 0 rgba(0, 0, 0, 0.3),
    0 1px 0 0 rgba(255, 255, 255, 0.05) inset,
    16px 16px 32px -16px rgba(255, 255, 255, 0.03) inset;
}

html.dark .card-grid-card:hover {
  box-shadow:
    0 12px 32px 0 rgba(0, 0, 0, 0.4),
    0 4px 12px 0 rgba(0, 0, 0, 0.3),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
  border-color: rgba(100, 116, 139, 0.8);
}

html.dark .card-grid-card-word {
  color: #f9fafb;
}

html.dark .card-grid-card-info {
  color: #99a1af;
}

html.dark .card-grid-card-label {
  color: #6a7282;
}

html.dark .card-grid-card-translation {
  color: #e5e7eb;
}

html.dark .card-grid-card-footer {
  border-top-color: rgba(54, 65, 83, 0.5);
}

html.dark .card-grid-card-status {
  color: #6a7282;
}

html.dark .card-grid-card-times {
  color: #99a1af;
}

html.dark .card-grid-card-heat-bar-1,
html.dark .card-grid-list-heat-bar-1 {
  background-color: #fbbf24;
}

html.dark .card-grid-card-heat-bar-2,
html.dark .card-grid-list-heat-bar-2 {
  background-color: #f59e0b;
}

html.dark .card-grid-card-heat-bar-3,
html.dark .card-grid-list-heat-bar-3 {
  background-color: #fb923c;
}

html.dark .card-grid-card-heat-bar-4,
html.dark .card-grid-list-heat-bar-4 {
  background-color: #f97316;
}

html.dark .card-grid-card-heat-bar-5,
html.dark .card-grid-list-heat-bar-5 {
  background-color: #ef4444;
}

html.dark .card-grid-card-heat-bar-6,
html.dark .card-grid-list-heat-bar-6 {
  background-color: #dc2626;
}

html.dark .card-grid-card-heat-bar-gray,
html.dark .card-grid-list-heat-bar-gray {
  background-color: rgba(55, 65, 81, 0.5);
}

html.dark .card-grid-empty {
  background: rgba(49, 65, 88, 0.3);
  border-color: rgba(69, 85, 108, 0.4);
}

html.dark .card-grid-empty-message {
  color: #9ca3af;
}

html.dark .card-grid-add-btn {
  border-color: #4b5563;
}

html.dark .card-grid-add-btn:hover {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

html.dark .card-grid-add-btn-empty {
  border-color: #4b5563;
}

html.dark .card-grid-add-btn-empty:hover {
  border-color: #3b82f6;
  background: rgba(59, 130, 246, 0.1);
}

html.dark .card-grid-add-btn-icon {
  color: #6b7280;
}

html.dark .card-grid-add-btn:hover .card-grid-add-btn-icon,
html.dark .card-grid-add-btn-empty:hover .card-grid-add-btn-icon {
  color: #60a5fa;
}

html.dark .card-grid-load-more {
  background: #0f172a;
}

html.dark .card-grid-load-more:hover {
  background: #0f172a;
}

html.dark .card-grid-list-item {
  border-bottom-color: rgba(75, 85, 99, 0.4);
}

html.dark .card-grid-list-item:hover {
  background: rgba(75, 85, 99, 0.4);
}

html.dark .card-grid-list-badge-nouns {
  background: rgba(30, 58, 138, 0.3);
  color: #93c5fd;
}

html.dark .card-grid-list-badge-verbs {
  background: rgba(6, 95, 70, 0.3);
  color: #86efac;
}

html.dark .card-grid-list-badge-adjectives {
  background: rgba(107, 33, 168, 0.3);
  color: #d8b4fe;
}

html.dark .card-grid-list-badge-adverbs {
  background: rgba(154, 52, 18, 0.3);
  color: #fdba74;
}

/* Dark mode - Phrase group colors */
html.dark .card-grid-list-badge-color-0 {
  background: rgba(30, 58, 138, 0.3);
  color: #93c5fd;
}

html.dark .card-grid-list-badge-color-1 {
  background: rgba(6, 95, 70, 0.3);
  color: #86efac;
}

html.dark .card-grid-list-badge-color-2 {
  background: rgba(107, 33, 168, 0.3);
  color: #d8b4fe;
}

html.dark .card-grid-list-badge-color-3 {
  background: rgba(154, 52, 18, 0.3);
  color: #fdba74;
}

html.dark .card-grid-list-word {
  color: #f3f4f6;
}

html.dark .card-grid-list-arrow {
  color: #6b7280;
}

html.dark .card-grid-list-translation {
  color: #9ca3af;
}

html.dark .card-grid-list-status {
  color: #6b7280;
}

html.dark .card-grid-list-times {
  color: #d1d5db;
}

html.dark .card-grid-list-speaker-btn:hover {
  background: rgba(51, 65, 85, 0.7);
}

html.dark .card-grid-list-speaker-icon {
  filter: brightness(0) saturate(100%) invert(88%) sepia(6%) saturate(267%)
    hue-rotate(182deg) brightness(88%) contrast(88%);
}

/* Responsive Design */
@media (max-width: 1200px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 968px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 16px;
  }

  .card-grid-card {
    padding: 18px;
  }

  .card-grid-card-word {
    font-size: 22px;
    line-height: 30px;
  }

  .card-grid-empty {
    padding: 24px 12px;
  }
}

@media (max-width: 580px) {
  .card-grid.grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
  }

  .card-grid-card {
    padding: 16px;
  }

  .card-grid-card-word {
    font-size: 20px;
    line-height: 28px;
  }

  .card-grid-empty {
    padding: 20px 10px;
  }

  .card-grid-empty-message {
    font-size: 13px;
  }

  .card-grid-load-more {
    padding: 10px 16px;
    font-size: 13px;
  }
}

/* Card Details Modal - Overlay */
.card-details-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9990;
  padding: 16px;
}

/* Container */
.card-details-container {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 1280px;
  max-height: 90vh;
  margin: 16px;
  view-transition-name: card-content-swap;
}

::view-transition-old(card-content-swap) {
  animation: fade-out 180ms ease-in both;
}

::view-transition-new(card-content-swap) {
  animation: fade-in 180ms ease-out both;
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Modal */
.card-details-modal {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  border: 1px solid #e5e7eb;
  position: relative;
}

/* Top Action Buttons */
.card-details-actions {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-details-edit-btn {
  padding: 8px;
  border-radius: 9999px;
  background: #f3e8ff;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.card-details-edit-btn:hover {
  background: #e9d5ff;
}

.card-details-edit-icon {
  width: 20px;
  height: 20px;
  color: #7c3aed;
}

.card-details-close-btn {
  padding: 8px;
  border-radius: 9999px;
  background: #f3f4f6;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.card-details-close-btn:hover {
  background: #e5e7eb;
}

.card-details-close-icon {
  width: 24px;
  height: 24px;
  color: #374151;
}

/* Bottom Navigation */
.card-details-navigation {
  position: absolute;
  bottom: 32px;
  right: 32px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-details-nav-btn {
  padding: 12px;
  border-radius: 8px;
  border: 2px solid #d1d5db;
  background: #ffffff;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
}

.card-details-nav-btn:not([disabled]):hover {
  background: #f9fafb;
  border-color: #a78bfa;
}

.card-details-nav-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.card-details-nav-icon {
  width: 20px;
  height: 20px;
  color: #374151;
}

.card-details-counter {
  padding: 6px 12px;
  border-radius: 6px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}

.card-details-counter-text {
  font-size: 14px;
  color: #6b7280;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

/* Main Content Area */
.card-details-content {
  display: flex;
  height: 100%;
}

/* Left Panel */
.card-details-left {
  flex: 1;
  padding: 48px;
  padding-right: 155px;
  overflow-y: auto;
  scrollbar-width: none;
}

.card-details-left::-webkit-scrollbar {
  display: none;
}

/* Badge */
.card-details-badge-container {
  margin-bottom: 24px;
}

.card-details-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  background: #dbeafe;
  color: #1e40af;
  text-transform: capitalize;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.card-details-badge-nouns {
  background: #dbeafe;
  color: #1e40af;
}

.card-details-badge-verbs {
  background: #d1fae5;
  color: #065f46;
}

.card-details-badge-adjectives {
  background: #d1fae5;
  color: #065f46;
}

.card-details-badge-adjectives {
  background: #f3e8ff;
  color: #6b21a8;
}

.card-details-badge-adverbs {
  background: #fed7aa;
  color: #9a3412;
}

/* Phrase group colors - cycle through 4 colors dynamically */
.card-details-badge-color-0 {
  background: #dbeafe;
  color: #1e40af;
}

.card-details-badge-color-1 {
  background: #d1fae5;
  color: #065f46;
}

.card-details-badge-color-2 {
  background: #f3e8ff;
  color: #6b21a8;
}

.card-details-badge-color-3 {
  background: #fed7aa;
  color: #9a3412;
}

/* Word Section */
.card-details-word-section {
  margin-bottom: 32px;
}

.card-details-word-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.card-details-label {
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin: 0;
  white-space: nowrap;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.card-details-word-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-details-visibility-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f3f4f6;
  border-radius: 9999px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.card-details-visibility-toggle:hover {
  background: #e5e7eb;
}

.card-details-eye-icon {
  width: 14px;
  height: 14px;
  color: #6b7280;
}

.card-details-toggle-label {
  font-size: 12px;
  color: #6b7280;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.card-details-switch {
  display: inline-flex;
  height: 18px;
  width: 32px;
  align-items: center;
  border-radius: 9999px;
  background: #bec0c2;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  transform: scale(0.75);
}

.card-details-switch:hover {
  background: #d1d5db;
}

.card-details-switch.active {
  /* background: #a855f7; */
  background: #1d1c1d;
}

.card-details-switch.active:hover {
  /* background: #9333ea; */
  background: #0f0e0f;
}

.card-details-switch-thumb {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 9999px;
  background: #ffffff;
  transition: transform 0.2s ease;
  transform: translateX(0);
}

.card-details-switch.active .card-details-switch-thumb {
  transform: translateX(14px);
}

.card-details-speaker-btn {
  padding: 8px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.card-details-speaker-btn:hover {
  background: #f3f4f6;
}

.card-details-speaker-icon {
  width: 20px;
  height: 20px;
  color: #374151;
}

.card-details-word {
  font-size: 48px;
  font-weight: 400;
  line-height: 1;
  color: #111827;
  margin: 0;
  word-break: break-word;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

/* IPA Section */
.card-details-ipa {
  margin-top: 12px;
}

.card-details-ipa.block {
  display: block;
}

.card-details-ipa.none {
  display: none;
}

.card-details-ipa-text {
  font-size: 20px;
  color: #4b5563;
  margin: 0;
  font-family:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
}

/* Word Translation Section */
.card-details-word-translation-section {
  margin-bottom: 32px;
}

.card-details-word-translation-section.block {
  display: block;
}

.card-details-word-translation-section.none {
  display: none;
}

.card-details-word-translation {
  font-size: 24px;
  line-height: 1.3;
  color: #1f2937;
  margin: 8px 0 0 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

/* Examples Section */
.card-details-examples {
  margin-bottom: 32px;
}

.card-details-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-details-examples-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.card-details-example {
  position: relative;
  padding-left: 16px;
  border-left: 2px solid #e9d5ff;
  transition: border-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 16px;
}

.card-details-example .card-details-speaker-btn {
  position: relative;
  top: -12.5px;
  display: none;
}

.card-details-example:hover .card-details-speaker-btn {
  display: block;
}

.card-details-example:hover {
  border-left-color: #c084fc;
}

.card-details-example-content {
  padding: 10px 12px;
}

.card-details-example-header {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  margin-bottom: 6px;
}

.card-details-example-lang {
  font-size: 12px;
  color: #a855f7;
  margin-top: 2px;
  flex-shrink: 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.card-details-example-text {
  font-size: 16px;
  line-height: 1.5;
  color: #111827;
  margin: 0;
  padding-left: 2px;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.card-details-example-translation-container {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  /* border-top: 1px solid #f3f4f6; */
}

.card-details-example-translation-container.block {
  display: flex;
}

.card-details-example-translation-container.none {
  display: none;
}

.card-details-example-translation-lang {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
  flex-shrink: 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.card-details-example-translation {
  font-size: 14px;
  line-height: 1.5;
  color: #6b7280;
  margin: 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

/* Info Rows */
.card-details-info-row {
  margin-bottom: 32px;
}

.card-details-info-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-details-frequency-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  background: #d1fae5;
  color: #065f46;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.card-details-frequency-badge.rank-0 {
  background: #e5e7eb;
  color: #4b5563;
}

.card-details-frequency-badge.rank-1 {
  background: #d1fae5;
  color: #065f46;
}

.card-details-frequency-badge.rank-2 {
  background: #dcfce7;
  color: #166534;
}

.card-details-frequency-badge.rank-3 {
  background: #fef9c3;
  color: #854d0e;
}

.card-details-frequency-badge.rank-4 {
  background: #fed7aa;
  color: #9a3412;
}

.card-details-frequency-badge.rank-5 {
  background: #fecaca;
  color: #991b1b;
}

.card-details-frequency-badge.rank-6 {
  background: #fca5a5;
  color: #7f1d1d;
}

.card-details-info-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  background: #dbeafe;
  color: #1e40af;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.card-details-info-badge.masculine {
  background: rgb(219, 234, 254);
  color: rgb(30, 64, 175);
}

.card-details-info-badge.feminine {
  background: rgb(252, 231, 243);
  color: rgb(157, 23, 77);
}

.card-details-info-badge.neuter {
  background: rgb(237, 233, 254);
  color: rgb(91, 33, 182);
}

.card-details-info-badge.unregelmäßig,
.card-details-info-badge.irregular {
  background: rgb(255, 237, 213);
  color: rgb(154, 52, 18);
}

.card-details-info-badge.regelmäßig,
.card-details-info-badge.regular {
  background: rgb(219, 234, 254);
  color: rgb(30, 64, 175);
}

.card-details-info-badge.unregelmäßig,
.card-details-info-badge.regelmäßig,
.card-details-info-badge.irregular,
.card-details-info-badge.regular {
  cursor: pointer;
}

.card-details-generic-box {
  padding: 6px 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.card-details-generic-text {
  font-size: 14px;
  color: #111827;
  margin: 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

/* Synonyms */
.card-details-synonyms {
  margin-bottom: 32px;
}

.card-details-synonyms-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.card-details-synonym-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #f3e8ff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  color: #7c3aed;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.card-details-synonym-btn:hover {
  background: #e9d5ff;
}

.card-details-synonym-icon {
  width: 14px;
  height: 14px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.card-details-synonym-btn:hover .card-details-synonym-icon {
  opacity: 1;
}

/* Learning Progress */
.card-details-progress {
  border-top: 1px solid #e5e7eb;
  padding-top: 24px;
}

.card-details-progress-header {
  display: flex;
  margin: 0;
}

.card-details-progress-trigger {
  display: flex;
  flex: 1;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  background: none;
  border: none;
  padding: 0 0 16px 0;
  cursor: pointer;
  outline: none;
  transition: all 0.2s;
}

.card-details-progress-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-details-progress-icon {
  width: 16px;
  height: 16px;
  color: #2563eb;
  flex-shrink: 0;
}

.card-details-progress-chevron {
  width: 16px;
  height: 16px;
  color: #9ca3af;
  flex-shrink: 0;
  transition: transform 0.2s;
}

.card-details-progress-chevron-open {
  transform: rotate(180deg);
}

/* Section toggle animation */
.card-details-section-enter {
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.card-details-section-enter-start {
  opacity: 0;
  transform: translateY(-6px);
}

.card-details-section-enter-end {
  opacity: 1;
  transform: translateY(0);
}

.card-details-section-leave {
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}

.card-details-section-leave-start {
  opacity: 1;
  transform: translateY(0);
}

.card-details-section-leave-end {
  opacity: 0;
  transform: translateY(-6px);
}

.card-details-progress-body {
  overflow: visible;
  font-size: 14px;
}

.card-details-progress-rows {
  padding-bottom: 16px;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-details-progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-details-progress-label {
  font-size: 14px;
  color: #374151;
}

.card-details-progress-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid transparent;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.card-details-progress-badge-new {
  background-color: #dbeafe;
  color: #1e40af;
}

.card-details-progress-badge-review {
  background-color: #d1fae5;
  color: #065f46;
}

.card-details-progress-badge-learning {
  background-color: #fef9c3;
  color: #854d0e;
}

.card-details-progress-badge-relearning {
  background-color: #ffedd5;
  color: #9a3412;
}

.card-details-progress-badge-suspended {
  background-color: #f3f4f6;
  color: #374151;
}

.card-details-progress-badge-buried {
  background-color: #e5e7eb;
  color: #1f2937;
}

.card-details-progress-badge-ease-very-hard {
  background-color: #fee2e2;
  color: #991b1b;
}

.card-details-progress-badge-ease-hard {
  background-color: #ffedd5;
  color: #9a3412;
}

.card-details-progress-badge-ease-medium {
  background-color: #fef9c3;
  color: #854d0e;
}

.card-details-progress-badge-ease-good {
  background-color: #ecfccb;
  color: #3f6212;
}

.card-details-progress-badge-ease-easy {
  background-color: #d1fae5;
  color: #065f46;
}

.card-details-progress-badge-ease-very-easy {
  background-color: #a7f3d0;
  color: #064e3b;
}

html.dark .card-details-progress {
  border-top-color: #374151;
}

html.dark .card-details-progress-trigger {
  color: #9ca3af;
}

html.dark .card-details-progress-icon {
  color: #60a5fa;
}

html.dark .card-details-progress-chevron {
  color: #6b7280;
}

html.dark .card-details-progress-label {
  color: #d1d5db;
}

html.dark .card-details-progress-badge-new {
  background-color: rgba(30, 58, 138, 0.3);
  color: #93c5fd;
}

html.dark .card-details-progress-badge-review {
  background-color: rgba(6, 78, 59, 0.3);
  color: #6ee7b7;
}

html.dark .card-details-progress-badge-learning {
  background-color: rgba(113, 63, 18, 0.3);
  color: #fde047;
}

html.dark .card-details-progress-badge-relearning {
  background-color: rgba(124, 45, 18, 0.3);
  color: #fdba74;
}

html.dark .card-details-progress-badge-suspended {
  background-color: rgba(55, 65, 81, 0.3);
  color: #d1d5db;
}

html.dark .card-details-progress-badge-buried {
  background-color: rgba(55, 65, 81, 0.3);
  color: #d1d5db;
}

html.dark .card-details-progress-badge-ease-very-hard {
  background-color: rgba(127, 29, 29, 0.3);
  color: #fca5a5;
}

html.dark .card-details-progress-badge-ease-hard {
  background-color: rgba(124, 45, 18, 0.3);
  color: #fdba74;
}

html.dark .card-details-progress-badge-ease-medium {
  background-color: rgba(113, 63, 18, 0.3);
  color: #fde047;
}

html.dark .card-details-progress-badge-ease-good {
  background-color: rgba(54, 83, 20, 0.3);
  color: #bef264;
}

html.dark .card-details-progress-badge-ease-easy {
  background-color: rgba(6, 78, 59, 0.3);
  color: #6ee7b7;
}

html.dark .card-details-progress-badge-ease-very-easy {
  background-color: rgba(6, 95, 70, 0.3);
  color: #34d399;
}

/* Review History */
.card-details-history {
  border-top: 1px solid #e5e7eb;
  padding-top: 24px;
}

.card-details-history-header {
  display: flex;
  margin: 0;
}

.card-details-history-trigger {
  display: flex;
  flex: 1;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  background: none;
  border: none;
  padding: 0 0 16px 0;
  cursor: pointer;
  outline: none;
  transition: all 0.2s;
}

.card-details-history-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-details-history-icon {
  width: 16px;
  height: 16px;
  color: #9333ea;
  flex-shrink: 0;
}

.card-details-history-body {
  overflow: hidden;
  font-size: 14px;
}

.card-details-history-rows {
  padding-bottom: 16px;
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.card-details-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-details-history-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid transparent;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  background-color: #f3f4f6;
  color: #1f2937;
}

/* Heat Indicator */
.card-details-stats-value {
  display: flex;
  align-items: center;
  gap: 12px;
}

.card-details-heat-indicator {
  display: flex;
  gap: 2px;
  align-items: center;
}

.card-details-heat-bar {
  width: 12px;
  height: 12px;
  transition: all 0.3s ease;
}

.card-details-heat-bar-1 {
  background-color: #fbbf24;
  border-radius: 2px 0 0 2px;
}

.card-details-heat-bar-2 {
  background-color: #f59e0b;
}

.card-details-heat-bar-3 {
  background-color: #fb923c;
}

.card-details-heat-bar-4 {
  background-color: #f97316;
}

.card-details-heat-bar-5 {
  background-color: #ef4444;
}

.card-details-heat-bar-6 {
  background-color: #dc2626;
  border-radius: 0 2px 2px 0;
}

.card-details-heat-bar-gray {
  background-color: rgba(229, 231, 235, 0.5);
}

html.dark .card-details-history {
  border-top-color: #374151;
}

html.dark .card-details-history-trigger {
  color: #9ca3af;
}

html.dark .card-details-history-icon {
  color: #c084fc;
}

html.dark .card-details-history-badge {
  background-color: #374151;
  color: #d1d5db;
}

html.dark .card-details-heat-bar-gray {
  background-color: rgba(55, 65, 81, 0.5);
}

/* Right Panel */
.card-details-right {
  width: 384px;
  background: linear-gradient(to bottom right, #f9fafb, #f3f4f6);
  border-left: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.card-details-right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px;
}

.card-details-right-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

/* Image Section */
.card-details-image-container {
  width: 100%;
}

.card-details-image-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 75%;
}

.card-details-image-placeholder {
  position: absolute;
  inset: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.card-details-image-bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, #e5e7eb, #d1d5db);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-details-image-icon {
  width: 80px;
  height: 80px;
  color: #9ca3af;
}

.card-details-image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-details-image-placeholder:hover .card-details-image-overlay {
  background: rgba(0, 0, 0, 0.5);
}

.card-details-generate-btn {
  padding: 12px 24px;
  background: #7c3aed;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  opacity: 0;
  transition: all 0.3s ease;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.card-details-image-placeholder:hover .card-details-generate-btn {
  opacity: 1;
}

.card-details-generate-btn:hover {
  background: #6d28d9;
}

.card-details-generate-icon {
  width: 20px;
  height: 20px;
}

/* Review Session */
.card-details-session {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: center;
}

.card-details-session-text {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.card-details-session-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(to right, #7c3aed, #3b82f6);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
  font-size: 16px;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.card-details-session-btn:hover {
  background: linear-gradient(to right, #6d28d9, #2563eb);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

/* Dark Mode */
html.dark .card-details-overlay {
  background: rgba(0, 0, 0, 0.7);
}

html.dark .card-details-modal {
  background: #1f2937;
  border-color: #374151;
}

html.dark .card-details-edit-btn {
  background: rgba(124, 58, 237, 0.3);
}

html.dark .card-details-edit-btn:hover {
  background: rgba(124, 58, 237, 0.5);
}

html.dark .card-details-edit-icon {
  color: #c4b5fd;
}

html.dark .card-details-close-btn {
  background: #374151;
}

html.dark .card-details-close-btn:hover {
  background: #4b5563;
}

html.dark .card-details-close-icon {
  color: #d1d5db;
}

html.dark .card-details-nav-btn {
  background: #374151;
  border-color: #4b5563;
}

html.dark .card-details-nav-btn:not([disabled]):hover {
  background: #475569;
  border-color: #8b5cf6;
}

html.dark .card-details-nav-icon {
  color: #d1d5db;
}

html.dark .card-details-counter {
  background: #374151;
  border-color: #4b5563;
}

html.dark .card-details-counter-text {
  color: #9ca3af;
}

html.dark .card-details-badge {
  background: rgba(30, 64, 175, 0.3);
  color: #93c5fd;
}

html.dark .card-details-badge-nouns {
  background: rgba(30, 58, 138, 0.3);
  color: #93c5fd;
}

html.dark .card-details-badge-verbs {
  background: rgba(6, 95, 70, 0.3);
  color: #86efac;
}

html.dark .card-details-badge-adjectives {
  background: rgba(107, 33, 168, 0.3);
  color: #d8b4fe;
}

html.dark .card-details-badge-adverbs {
  background: rgba(154, 52, 18, 0.3);
  color: #fdba74;
}

/* Phrase group colors - dark mode */
html.dark .card-details-badge-color-0 {
  background: rgba(30, 58, 138, 0.3);
  color: #93c5fd;
}

html.dark .card-details-badge-color-1 {
  background: rgba(6, 95, 70, 0.3);
  color: #86efac;
}

html.dark .card-details-badge-color-2 {
  background: rgba(107, 33, 168, 0.3);
  color: #d8b4fe;
}

html.dark .card-details-badge-color-3 {
  background: rgba(154, 52, 18, 0.3);
  color: #fdba74;
}

html.dark .card-details-info-badge.masculine {
  background: rgba(30, 64, 175, 0.3);
  color: #93c5fd;
}

html.dark .card-details-info-badge.feminine {
  background: rgba(131, 24, 67, 0.3);
  color: rgb(249, 168, 212);
}

html.dark .card-details-info-badge.neuter {
  background: rgba(91, 33, 182, 0.3);
  color: rgb(198, 185, 250);
}

html.dark .card-details-info-badge.unregelmäßig {
  background: rgba(124, 45, 18, 0.3);
  color: rgb(253, 186, 116);
}

html.dark .card-details-info-badge.regelmäßig {
  background: rgba(30, 64, 175, 0.3);
  color: #93c5fd;
}

html.dark .card-details-label {
  color: #9ca3af;
}

html.dark .card-details-visibility-toggle {
  background: rgba(55, 65, 81, 0.5);
}

html.dark .card-details-visibility-toggle:hover {
  background: rgba(55, 65, 81, 0.7);
}

html.dark .card-details-eye-icon {
  color: #9ca3af;
}

html.dark .card-details-toggle-label {
  color: #9ca3af;
}

html.dark .card-details-switch-thumb {
  background: #1f2937;
}

html.dark .card-details-switch {
  background: #4b5563;
}

html.dark .card-details-switch:hover {
  background: #6b7280;
}

html.dark .card-details-switch.active {
  /* background: #a855f7; */
  background: #ddd9dd;
}

html.dark .card-details-switch.active:hover {
  /* background: #9333ea; */
  background: #f4f2f4;
}

html.dark .card-details-speaker-btn:hover {
  background: #374151;
}

html.dark .card-details-speaker-icon {
  color: #d1d5db;
}

html.dark .card-details-word {
  color: #f3f4f6;
}

html.dark .card-details-ipa-text {
  color: #9ca3af;
}

html.dark .card-details-word-translation {
  color: #e5e7eb;
}

html.dark .card-details-example {
  border-left-color: rgba(124, 58, 237, 0.5);
}

html.dark .card-details-example:hover {
  border-left-color: #a78bfa;
}

html.dark .card-details-example-lang {
  color: #b47cec;
}

html.dark .card-details-example-text {
  color: #f3f4f6;
}

/* html.dark .card-details-example-translation-container {
  border-top-color: #374151;
} */

html.dark .card-details-example-translation-lang {
  color: #9ca3af;
}

html.dark .card-details-example-translation {
  color: #9ca3af;
}

html.dark .card-details-frequency-badge {
  background: rgba(6, 95, 70, 0.3);
  color: #86efac;
}

html.dark .card-details-frequency-badge.rank-0 {
  background: rgba(75, 85, 99, 0.3);
  color: #d1d5db;
}

html.dark .card-details-frequency-badge.rank-1 {
  background: rgba(6, 95, 70, 0.3);
  color: #86efac;
}

html.dark .card-details-frequency-badge.rank-2 {
  background: rgba(22, 101, 52, 0.3);
  color: #bbf7d0;
}

html.dark .card-details-frequency-badge.rank-3 {
  background: rgba(133, 77, 14, 0.3);
  color: #fde047;
}

html.dark .card-details-frequency-badge.rank-4 {
  background: rgba(154, 52, 18, 0.3);
  color: #fdba74;
}

html.dark .card-details-frequency-badge.rank-5 {
  background: rgba(153, 27, 27, 0.3);
  color: #fca5a5;
}

html.dark .card-details-frequency-badge.rank-6 {
  background: rgba(127, 29, 29, 0.3);
  color: #f87171;
}

html.dark .card-details-info-badge {
  background: rgba(30, 64, 175, 0.3);
  color: #93c5fd;
}

html.dark .card-details-generic-box {
  background: #1f2937;
  border-color: #4b5563;
}

html.dark .card-details-generic-text {
  color: #f3f4f6;
}

html.dark .card-details-synonym-btn {
  background: rgba(124, 58, 237, 0.3);
  color: #c4b5fd;
}

html.dark .card-details-synonym-btn:hover {
  background: rgba(124, 58, 237, 0.5);
}

html.dark .card-details-right {
  background: linear-gradient(to bottom right, #111827, #1f2937);
  border-left-color: #374151;
}

html.dark .card-details-image-bg {
  background: linear-gradient(to bottom right, #374151, #1f2937);
}

html.dark .card-details-image-icon {
  color: #4b5563;
}

html.dark .card-details-session-text {
  color: #9ca3af;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .card-details-container {
    margin: 8px;
  }

  .card-details-content {
    flex-direction: column;
  }

  .card-details-left {
    padding: 32px 24px;
  }

  .card-details-right {
    display: none;
  }

  .card-details-navigation {
    bottom: 16px;
    right: 16px;
  }
}

@media (max-width: 768px) {
  .card-details-overlay {
    padding: 0;
  }

  .card-details-container {
    margin: 0;
    max-height: 100vh;
    border-radius: 0;
  }

  .card-details-modal {
    border-radius: 0;
  }

  .card-details-actions {
    top: 16px;
    right: 16px;
  }

  .card-details-left {
    padding: 24px 16px;
  }

  .card-details-word {
    font-size: 36px;
  }

  .card-details-right-content {
    padding: 24px 16px;
  }

  .card-details-navigation {
    bottom: 12px;
    right: 12px;
    gap: 8px;
  }

  .card-details-nav-btn {
    padding: 8px;
  }
}

/* ============================================
   MULTIPLE MEANINGS ACCORDION
   ============================================ */

.card-details-meanings {
  margin-bottom: 32px;
}

/* Meanings Header */
.card-details-meanings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  margin-top: 24px;
}

.card-details-meanings-count {
  color: #6b7280;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
  font-weight: 500;
}

html.dark .card-details-meanings-count {
  color: #9ca3af;
}

/* Accordion Container */
.card-details-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Accordion Item */
.card-details-accordion-item {
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  transition: border-color 0.2s ease;
}

html.dark .card-details-accordion-item {
  border-color: #374151;
  background: #111827;
}

/* Accordion Trigger (button) */
.card-details-accordion-trigger {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.2s ease;
  outline: none;
}

.card-details-accordion-trigger:hover {
  background: #f9fafb;
}

html.dark .card-details-accordion-trigger:hover {
  background: rgba(31, 41, 55, 0.5);
}

.card-details-accordion-trigger[data-state="open"] {
  background: #faf5ff;
}

html.dark .card-details-accordion-trigger[data-state="open"] {
  background: rgba(88, 28, 135, 0.2);
}

/* Accordion Header Content */
.card-details-accordion-header-content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  text-align: left;
}

/* Accordion Badge (number) */
.card-details-accordion-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  background: #ede9fe;
  color: #6b21a8;
  flex-shrink: 0;
  min-width: 24px;
}

html.dark .card-details-accordion-badge {
  background: rgba(88, 28, 135, 0.5);
  color: #d8b4fe;
}

/* Accordion Title */
.card-details-accordion-title {
  color: #111827;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

html.dark .card-details-accordion-title {
  color: #f9fafb;
}

/* Accordion Chevron */
.card-details-accordion-chevron {
  width: 16px;
  height: 16px;
  color: #6b7280;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

html.dark .card-details-accordion-chevron {
  color: #9ca3af;
}

.card-details-accordion-trigger[data-state="open"]
  .card-details-accordion-chevron {
  transform: rotate(180deg);
}

/* Accordion Content */
.card-details-accordion-content {
  display: block;
}

/* Accordion Examples */
.card-details-accordion-examples {
  padding: 0 20px 20px 20px;
}

.card-details-accordion-example {
  margin: 10px 0;
  padding-left: 16px;
  border-left: 2px solid #e9d5ff;
  transition: border-color 0.2s ease;
  /* border-bottom: 1px solid #f3f4f6; */
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 16px;
}

.card-details-accordion-example .card-details-speaker-btn {
  position: relative;
  top: -12.5px;
  display: none;
}

.card-details-accordion-example:hover .card-details-speaker-btn {
  display: block;
}

.card-details-accordion-example:hover {
  border-left-color: #c084fc;
}

.card-details-accordion-example:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

html.dark .card-details-accordion-example {
  border-left-color: rgba(124, 58, 237, 0.5);
}

html.dark .card-details-accordion-example:hover {
  border-left-color: #a78bfa;
}

/* html.dark .card-details-accordion-example {
  border-bottom-color: #374151;
} */

/* Responsive accordion */
@media (max-width: 768px) {
  .card-details-accordion-trigger {
    padding: 12px 16px;
  }

  .card-details-accordion-examples {
    padding: 0 16px 16px 16px;
  }

  .card-details-accordion-badge {
    font-size: 11px;
    padding: 3px 6px;
  }

  .card-details-accordion-title {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .card-details-visibility-toggle {
    display: none;
  }
  .card-details-example-text {
    font-size: 14px;
  }
  .card-details-examples-container {
    padding: 0rem !important;
  }
  .card-details-property-dropdown-content {
    left: -2.5rem !important;
  }
}

/* Modal on edit mode */
/* .card-details-modal.edition-mode {
} */

/* Edition Mode - Save Button */
.card-details-save-btn {
  padding: 8px;
  border-radius: 9999px;
  background: #7c3aed;
  border: none;
  cursor: pointer;
  transition: background 0.2s ease;
}

.card-details-save-btn:hover {
  background: #6d28d9;
}

.card-details-save-icon {
  width: 20px;
  height: 20px;
  color: #ffffff;
}

html.dark .card-details-save-btn {
  background: #7c3aed;
}

html.dark .card-details-save-btn:hover {
  background: #8b5cf6;
}

html.dark .card-details-save-icon {
  color: #ffffff;
}

/* Edition Mode - Right Panel */
.card-details-modal.edition-mode .card-details-right-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 32px;
  margin-top: 17px;
}

.card-details-right-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

/* Edition Mode - Image Section */
.card-details-edition-image-wrapper {
  width: 100%;
}

.card-details-edition-aspect-ratio {
  position: relative;
  width: 100%;
  padding-bottom: 75%;
}

.card-details-edition-image-container {
  position: absolute;
  inset: 0;
}

.card-details-edition-image-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.card-details-edition-image-bg {
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom right, #e5e7eb, #d1d5db);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-details-edition-image-icon {
  width: 80px;
  height: 80px;
  color: #9ca3af;
}

.card-details-edition-image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.card-details-edition-image-placeholder:hover
  .card-details-edition-image-overlay {
  background: rgba(0, 0, 0, 0.5);
}

.card-details-edition-generate-btn {
  padding: 12px 24px;
  background: #7c3aed;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: all 0.3s ease;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.card-details-edition-image-placeholder:hover
  .card-details-edition-generate-btn {
  opacity: 1;
}

.card-details-edition-generate-btn:hover {
  background: #6d28d9;
}

.card-details-edition-generate-icon {
  width: 20px;
  height: 20px;
}

/* Edition Mode - AI Assistant Button */
.card-details-edition-ai-wrapper {
  width: 100%;
}

.card-details-edition-ai-btn {
  width: 100%;
  padding: 16px;
  background: #f3e8ff;
  color: #7c3aed;
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s ease;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
}

.card-details-edition-ai-btn:hover {
  background: #e9d5ff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.card-details-edition-ai-icon {
  width: 20px;
  height: 20px;
}

/* Edition Mode - Delete Button */
.card-details-edition-delete-wrapper {
  width: 100%;
  padding-top: 16px;
}

.card-details-edition-delete-btn {
  width: 100%;
  padding: 8px;
  background: transparent;
  color: #dc2626;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.2s ease;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 400;
}

.card-details-edition-delete-btn:hover {
  color: #b91c1c;
  background: #fef2f2;
}

.card-details-edition-delete-icon {
  width: 14px;
  height: 14px;
}

/* Dark Mode - Edition Right Panel */
html.dark .card-details-edition-image-bg {
  background: linear-gradient(to bottom right, #374151, #1f2937);
}

html.dark .card-details-edition-image-icon {
  color: #4b5563;
}

html.dark .card-details-edition-generate-btn {
  background: #7c3aed;
}

html.dark .card-details-edition-generate-btn:hover {
  background: #6d28d9;
}

html.dark .card-details-edition-ai-btn {
  background: linear-gradient(to right, #7c3aed, #db2777);
  color: #ffffff;
}

html.dark .card-details-edition-ai-btn:hover {
  background: linear-gradient(to right, #6d28d9, #be185d);
}

html.dark .card-details-edition-delete-btn {
  color: #f87171;
}

html.dark .card-details-edition-delete-btn:hover {
  color: #fca5a5;
  background: rgba(239, 68, 68, 0.2);
}

/* Edition Mode - Badge Dropdown */
.card-details-edition-badge-container {
  position: relative;
  width: 192px;
}

.card-details-edition-badge-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #d8b4fe;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  color: #374151;
  white-space: nowrap;
}

.card-details-edition-badge-trigger:hover {
  background: #f9fafb;
}

.card-details-edition-badge-trigger:focus-visible {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2);
}

.card-details-edition-badge-trigger[data-state="open"]
  .card-details-edition-badge-icon,
[data-dropdown-trigger][data-state="open"] .card-details-edition-badge-icon {
  transform: rotate(180deg);
}

.card-details-edition-badge-value {
  flex: 1;
  text-align: left;
  line-height: 1;
  text-transform: capitalize;
}

.card-details-edition-badge-icon {
  width: 16px;
  height: 16px;
  color: #9ca3af;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.card-details-edition-badge-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  margin-top: 4px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  z-index: 50;
  display: block;
}

.card-details-edition-badge-dropdown.dropdown-above {
  margin-top: 0;
  margin-bottom: 4px;
  top: auto;
  bottom: 100%;
}

.card-details-edition-badge-options {
  padding: 4px;
  max-height: 300px;
  overflow-y: auto;
}

.card-details-edition-badge-option {
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.15s ease;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  color: #374151;
  text-transform: capitalize;
}

.card-details-edition-badge-option:hover {
  background: #f3f4f6;
}

.card-details-edition-badge-option[aria-selected="true"] {
  background: #f3e8ff;
  color: #7c3aed;
}

/* Edition Mode - Word header */
.card-details-modal.edition-mode .card-details-word-header {
  margin-top: 17px;
}

.card-details-modal.edition-mode .card-details-visibility-toggle {
  pointer-events: none;
  opacity: 0.75;
}

/* Dark Mode - Badge Dropdown */
html.dark .card-details-edition-badge-trigger {
  background: #1f2937;
  border-color: #4b5563;
  color: #d1d5db;
}

html.dark .card-details-edition-badge-trigger:hover {
  background: #374151;
}

html.dark .card-details-edition-badge-trigger:focus-visible {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.3);
}

html.dark .card-details-edition-badge-dropdown {
  background: #1f2937;
  border-color: #374151;
}

html.dark .card-details-edition-badge-option {
  color: #d1d5db;
}

html.dark .card-details-edition-badge-option:hover {
  background: #374151;
}

html.dark .card-details-edition-badge-option[aria-selected="true"] {
  background: rgba(124, 58, 237, 0.3);
  color: #c4b5fd;
}

/* Edition Mode - Word Input */
.card-details-edition-word-input {
  width: 100%;
  min-width: 0;
  padding: 12px;
  font-size: 48px;
  line-height: 1.2;
  font-weight: 400;
  color: #111827;
  background: #ffffff;
  border: 2px solid #d8b4fe;
  border-radius: 6px;
  outline: none;
  transition: all 0.2s ease;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.card-details-edition-word-input:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2);
}

.card-details-edition-word-input::placeholder {
  color: #9ca3af;
}

/* Edition Mode - Field Input Wrapper with AI Button */
.card-details-field-input-wrapper {
  position: relative;
  width: 100%;
}

.card-details-field-ai-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  padding: 6px;
  border-radius: 8px;
  background: #f3e8ff;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  flex-shrink: 0;
}

.card-details-field-ai-btn.plural-form {
  right: 0px;
}

/* Position AI button at top-right for textareas */
.card-details-field-input-wrapper:has(textarea) .card-details-field-ai-btn {
  top: 12px;
  transform: translateY(0);
}

.card-details-field-ai-btn:hover {
  background: #d7cde2;
}

.card-details-field-ai-btn:disabled {
  opacity: 1;
  pointer-events: auto;
  cursor: not-allowed;
}

.card-details-field-ai-icon {
  width: 14px;
  height: 14px;
  color: #a855f7;
  transition: color 0.2s ease;
}

.card-details-field-ai-spinner {
  width: 14px;
  height: 14px;
  color: #a855f7;
  animation: card-details-field-ai-spin 1s linear infinite;
}

@keyframes card-details-field-ai-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Show AI button when field input is focused or wrapper is hovered */
.card-details-field-input-wrapper:focus-within .card-details-field-ai-btn,
.card-details-field-input-wrapper:hover .card-details-field-ai-btn,
.card-details-field-ai-btn:disabled {
  opacity: 1;
  pointer-events: auto;
}

/* Edition Mode - IPA Input */
.card-details-edition-ipa-container {
  margin-top: 12px;
}

.card-details-edition-ipa-label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.card-details-edition-ipa-input {
  width: 100%;
  min-width: 0;
  padding: 8px 12px;
  font-size: 20px;
  line-height: 1.5;
  font-weight: 400;
  color: #111827;
  background: #ffffff;
  border: 2px solid #d8b4fe;
  border-radius: 6px;
  outline: none;
  transition: all 0.2s ease;
  font-family: ui-monospace, monospace;
}

.card-details-edition-ipa-input:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2);
}

.card-details-edition-ipa-input::placeholder {
  color: #9ca3af;
}

/* Dark Mode - Edition Inputs */
html.dark .card-details-edition-word-input {
  color: #f9fafb;
  background: #1f2937;
  border-color: #4b5563;
}

html.dark .card-details-edition-word-input:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.3);
}

html.dark .card-details-edition-word-input::placeholder {
  color: #6b7280;
}

/* Dark Mode - AI Button in Field Inputs */
html.dark .card-details-field-ai-btn {
  background: rgba(88, 28, 135, 0.3);
}

html.dark .card-details-field-ai-btn:hover {
  background: rgba(161, 73, 230, 0.3);
}

html.dark .card-details-field-ai-icon {
  color: #a855f7;
}

html.dark .card-details-field-ai-spinner {
  color: #a855f7;
}

html.dark .card-details-edition-ipa-label {
  color: #9ca3af;
}

html.dark .card-details-edition-ipa-input {
  color: #f9fafb;
  background: #1f2937;
  border-color: #4b5563;
}

html.dark .card-details-edition-ipa-input:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.3);
}

html.dark .card-details-edition-ipa-input::placeholder {
  color: #6b7280;
}

/* Edition Mode - Translation Input */
.card-details-modal.edition-mode .card-details-edition-translation-section {
  margin-top: 32px;
}

.card-details-edition-translation-label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.card-details-edition-translation-input {
  width: 100%;
  min-width: 0;
  padding: 8px 12px;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  color: #111827;
  background: #ffffff;
  border: 2px solid #d8b4fe;
  border-radius: 6px;
  outline: none;
  transition: all 0.2s ease;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.card-details-edition-translation-input:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2);
}

.card-details-edition-translation-input::placeholder {
  color: #9ca3af;
}

/* Dark Mode - Translation Input */
html.dark .card-details-edition-translation-label {
  color: #9ca3af;
}

html.dark .card-details-edition-translation-input {
  color: #f9fafb;
  background: #1f2937;
  border-color: #4b5563;
}

html.dark .card-details-edition-translation-input:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.3);
}

html.dark .card-details-edition-translation-input::placeholder {
  color: #6b7280;
}

/* Edition Mode - Meanings */
.card-details-modal.edition-mode .card-details-meanings-section {
  margin-top: 32px;
}

.card-details-meanings-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: #f3e8ff;
  color: #6d28d9;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  vertical-align: middle;
}

.card-details-meanings-btn:hover {
  background: #e9d5ff;
}

.card-details-meanings-btn-icon {
  width: 1rem;
  height: 1rem;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.dark .card-details-meanings-btn {
  background: rgba(76, 29, 149, 0.3);
  color: #d6bcfa;
}

html.dark .card-details-meanings-btn:hover {
  background: rgba(76, 29, 149, 0.5);
}

/* Meanings Dropdowns */
.card-details-meanings-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.card-details-meaning-item {
  display: flex;
  flex-direction: column;
}

.card-details-meaning-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.75rem;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.card-details-meaning-trigger:hover {
  /* border-color: #d1d5db; */
  background: #f9fafb;
}

.card-details-meaning-trigger[data-state="open"] {
  /* border-color: #d8b4fe; */
  background: #faf5ff;
}

.card-details-meaning-trigger-content {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  /* flex: 1; */
  width: 90%;
  text-align: left;
}

.card-details-meaning-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: 0 0 auto;
  background: #f3e8ff;
  color: #6d28d9;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
}

.card-details-meaning-input {
  flex: 1;
  width: 100%;
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #111827;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  outline: none;
  transition: all 0.2s ease;
}

.card-details-meaning-input:hover {
  background: #f9fafb;
  border-color: #e5e7eb;
}

.card-details-meaning-input:focus {
  background: #ffffff;
  border-color: #d8b4fe;
}

.card-details-meaning-delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: 0 0 auto;
  padding: 0.25rem;
  color: #6b7280;
  background: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.card-details-meaning-delete-btn[data-disabled="true"],
.card-details-example-delete-btn[data-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.card-details-meaning-delete-btn:hover {
  color: #ef4444;
  background: #fee2e2;
}

.card-details-meaning-delete-icon {
  width: 1rem;
  height: 1rem;
  stroke: rgb(231, 0, 11);
  fill: none;
}

.card-details-meaning-chevron {
  width: 1.25rem;
  height: 1.25rem;
  flex: 0 0 auto;
  stroke: #6b7280;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
}

.card-details-meaning-trigger[data-state="open"] .card-details-meaning-chevron {
  transform: rotate(180deg);
}

.card-details-meaning-content {
  display: block;
  padding: 1rem;
  background: #f9fafb;
  border: 2px solid #e5e7eb;
  border-top: none;
  border-radius: 0 0 0.5rem 0.5rem;
  margin-top: -0.5rem;
  padding-top: 1.5rem;
}

.card-details-meaning-content.dropdown-above {
  margin-top: 0;
  margin-bottom: -0.5rem;
  padding-top: 1rem;
  padding-bottom: 1.5rem;
  border-top: 2px solid #e5e7eb;
  border-bottom: none;
  border-radius: 0.5rem 0.5rem 0 0;
  order: -1;
}

/* Dark mode - Meanings Dropdowns */
html.dark .card-details-meaning-trigger {
  background: #101827;
  border-color: #374151;
}

html.dark .card-details-meaning-trigger:hover {
  /* border-color: #4b5563; */
  background: #18202f;
}

html.dark .card-details-meaning-trigger[data-state="open"] {
  /* border-color: #7c3aed; */
  background: rgba(76, 29, 149, 0.2);
}

html.dark .card-details-meaning-badge {
  background: rgba(76, 29, 149, 0.3);
  color: #d6bcfa;
}

html.dark .card-details-meaning-input {
  color: #f9fafb;
}

html.dark .card-details-meaning-input:hover {
  background: #111827;
  border-color: #374151;
}

html.dark .card-details-meaning-input:focus {
  background: #1f2937;
  border-color: #7c3aed;
}

html.dark .card-details-meaning-delete-icon {
  stroke: rgb(255, 100, 103);
}

html.dark .card-details-meaning-delete-btn:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.2);
}

html.dark .card-details-meaning-chevron {
  stroke: #9ca3af;
}

html.dark .card-details-meaning-content {
  /* background: #111827; */
  background: #14171f;
  border-color: #374151;
}

html.dark .card-details-meaning-content.dropdown-above {
  border-color: #374151;
}

/* Examples Content */
.card-details-examples-container {
  padding: 1.25rem;
  padding-top: 0.25rem;
}

.card-details-examples-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.card-details-example-item {
  position: relative;
  padding-left: 1rem;
  border-left: 2px solid #e9d5ff;
  transition: border-color 0.2s ease;
}

.card-details-example-item .card-details-speaker-btn {
  opacity: 0;
}

.card-details-example-item:hover .card-details-speaker-btn {
  opacity: 1;
}

.card-details-example-item:hover {
  border-left-color: #c084fc;
}

.card-details-example-body {
  padding: 0.625rem 0.75rem;
}

.card-details-example-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.375rem;
}

.card-details-example-row:last-child {
  margin-bottom: 0;
}

.card-details-example-language-label {
  font-size: 0.75rem;
  color: #7c3aed;
  margin-top: 0.125rem;
  flex-shrink: 0;
  font-weight: 500;
}

.card-details-translation-lang-container {
  position: relative;
  flex-shrink: 0;
}

.card-details-example-translation-label {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 0.125rem;
  flex-shrink: 0;
  font-weight: 500;
  text-transform: uppercase;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.card-details-example-translation-label:hover {
  color: #7c3aed;
  text-decoration: underline;
}

.card-details-translation-lang-dropdown {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 0.25rem;
  z-index: 120;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  padding: 0.25rem 0;
  min-width: 60px;
  max-height: 150px;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.card-details-translation-lang-dropdown::-webkit-scrollbar {
  display: none;
}

.card-details-translation-lang-option {
  width: 100%;
  text-align: left;
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  background: none;
  border: none;
  color: #374151;
  cursor: pointer;
  transition: background-color 0.15s ease;
  text-transform: uppercase;
}

.card-details-translation-lang-option:hover {
  background: #f3f4f6;
}

.card-details-translation-lang-option[data-selected="true"] {
  background: #f3e8ff;
  color: #7c3aed;
  font-weight: 600;
}

.card-details-example-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-details-example-textarea {
  width: 100%;
  flex: 1;
  min-height: 60px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #111827;
  background: #ffffff;
  border: 1px solid #d8b4fe;
  border-radius: 0.375rem;
  outline: none;
  resize: none;
  transition: all 0.2s ease;
  font-family: ui-sans-serif, system-ui, sans-serif;
  field-sizing: content;
}

.card-details-example-textarea:hover {
  border-color: #c084fc;
}

.card-details-example-textarea:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

.card-details-example-textarea::placeholder {
  color: #9ca3af;
}

.card-details-example-delete-btn {
  width: 37px;
  padding: 8px;
  align-self: flex-start;
  color: #ef4444;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.card-details-example-delete-btn:hover {
  background: #fee2e2;
}

.card-details-example-delete-icon {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
}

.card-details-example-add-btn {
  width: 100%;
  padding: 0.5rem;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: #7c3aed;
  background: transparent;
  border: 2px dashed #d8b4fe;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.card-details-example-add-btn:hover {
  border-color: #a855f7;
  background: #faf5ff;
  color: #6d28d9;
}

.card-details-example-add-icon {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
}

/* Dark mode - Examples */
html.dark .card-details-example-item {
  border-left-color: rgba(124, 58, 237, 0.5);
}

html.dark .card-details-example-item:hover {
  border-left-color: #7c3aed;
}

html.dark .card-details-example-language-label {
  color: #a78bfa;
}

html.dark .card-details-example-translation-label {
  color: #6b7280;
}

html.dark .card-details-example-translation-label:hover {
  color: #a78bfa;
}

html.dark .card-details-translation-lang-dropdown {
  background: #1f2937;
  border-color: #374151;
}

html.dark .card-details-translation-lang-option {
  color: #d1d5db;
}

html.dark .card-details-translation-lang-option:hover {
  background: #374151;
}

html.dark .card-details-translation-lang-option[data-selected="true"] {
  background: rgba(88, 28, 135, 0.3);
  color: #a78bfa;
}

html.dark .card-details-example-textarea {
  color: #f9fafb;
  background: #111827;
  border-color: #4b5563;
}

html.dark .card-details-example-textarea:hover {
  border-color: #6b7280;
}

html.dark .card-details-example-textarea:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

html.dark .card-details-example-textarea::placeholder {
  color: #6b7280;
}

html.dark .card-details-example-delete-btn {
  color: #ef4444;
}

html.dark .card-details-example-delete-btn:hover {
  background: rgba(239, 68, 68, 0.2);
}

html.dark .card-details-example-add-btn {
  color: #a78bfa;
  border-color: #4b5563;
}

html.dark .card-details-example-add-btn:hover {
  border-color: #7c3aed;
  background: rgba(124, 58, 237, 0.2);
  color: #d6bcfa;
}

/* Optional Properties */
.card-details-optional-properties {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 44px;
}

.card-details-property-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.card-details-property-label {
  width: 10rem;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  white-space: nowrap;
  flex-shrink: 0;
  text-overflow: ellipsis;
  overflow: hidden;
}

.card-details-property-dropdown {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-details-property-ai-btn {
  width: 26px;
  height: 26px;
  padding: 6px;
  border-radius: 8px;
  background: #f3e8ff;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  flex-shrink: 0;
}

.card-details-property-dropdown:hover .card-details-property-ai-btn,
.card-details-property-ai-btn:disabled {
  opacity: 1;
  pointer-events: auto;
}

.card-details-property-ai-btn:hover:not(:disabled) {
  background: #d7cde2;
}

.card-details-property-ai-btn:disabled {
  cursor: not-allowed;
}

.card-details-property-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  height: 2.25rem;
  font-size: 0.875rem;
  white-space: nowrap;
  color: #111827;
  background: #ffffff;
  border: 1px solid #d8b4fe;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s ease;
  outline: none;
}

.card-details-property-trigger:hover {
  background: #f9fafb;
}

.card-details-property-trigger:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

.card-details-property-value {
  flex: 1;
  text-align: left;
}

.card-details-property-chevron {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  opacity: 0.5;
}

.card-details-property-dropdown-content {
  display: block;
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  right: 0;
  z-index: 50;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.card-details-property-dropdown-content.dropdown-above {
  top: auto;
  bottom: calc(100% + 0.25rem);
}

.card-details-property-options {
  padding: 0.25rem;
}

.card-details-property-option {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: #111827;
  background: transparent;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.card-details-property-option:hover {
  background: #f3f4f6;
}

.card-details-property-option[aria-selected="true"] {
  background: #faf5ff;
  color: #7c3aed;
  font-weight: 500;
}

.card-details-property-input {
  flex: 1;
  width: 93.5%;
  padding: 0.5rem 0.75rem;
  height: 2.25rem;
  font-size: 0.875rem;
  color: #111827;
  background: #ffffff;
  border: 1px solid #d8b4fe;
  border-radius: 0.375rem;
  outline: none;
  transition: all 0.2s ease;
}

.card-details-property-input:hover {
  background: #f9fafb;
}

.card-details-property-input:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

.card-details-property-input::placeholder {
  color: #9ca3af;
}

/* Dark mode - Optional Properties */
html.dark .card-details-property-label {
  color: #9ca3af;
}

html.dark .card-details-property-trigger {
  color: #f9fafb;
  background: #111827;
  border-color: #4b5563;
}

html.dark .card-details-property-trigger:hover {
  background: #1f2937;
}

html.dark .card-details-property-trigger:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

html.dark .card-details-property-ai-btn {
  background: rgba(88, 28, 135, 0.3);
}

html.dark .card-details-property-ai-btn:hover:not(:disabled) {
  background: rgba(88, 28, 135, 0.5);
}

html.dark .card-details-property-dropdown-content {
  background: #111827;
  border-color: #374151;
}

html.dark .card-details-property-option {
  color: #f9fafb;
}

html.dark .card-details-property-option:hover {
  background: #1f2937;
}

html.dark .card-details-property-option[aria-selected="true"] {
  background: rgba(124, 58, 237, 0.2);
  color: #a78bfa;
}

html.dark .card-details-property-input {
  color: #f9fafb;
  background: #111827;
  border-color: #4b5563;
}

html.dark .card-details-property-input:hover {
  background: #1f2937;
}

html.dark .card-details-property-input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

html.dark .card-details-property-input::placeholder {
  color: #6b7280;
}

/* Edition Mode - Meanings */
.card-details-modal.edition-mode .card-details-synonyms {
  margin-top: 36px;
}

/* Synonyms Input List */
.card-details-synonyms-input-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.card-details-synonym-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.card-details-synonym-input {
  flex: 1;
  min-width: 0;
  height: 2.25rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #111827;
  background: #ffffff;
  border: 1px solid #d8b4fe;
  border-radius: 0.375rem;
  outline: none;
  transition: all 0.2s ease;
}

.card-details-synonym-input:hover {
  background: #f9fafb;
}

.card-details-synonym-input:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

.card-details-synonym-input::placeholder {
  color: #9ca3af;
}

.card-details-synonym-delete-btn {
  padding: 0.5rem;
  color: #ef4444;
  background: transparent;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.card-details-synonym-delete-btn:hover {
  background: #fee2e2;
}

.card-details-synonym-delete-icon {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
}

/* Dark mode - Synonyms */
html.dark .card-details-synonym-input {
  color: #f9fafb;
  background: #111827;
  border-color: #4b5563;
}

html.dark .card-details-synonym-input:hover {
  background: #1f2937;
}

html.dark .card-details-synonym-input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

html.dark .card-details-synonym-input::placeholder {
  color: #6b7280;
}

html.dark .card-details-synonym-delete-btn {
  color: #ef4444;
}

html.dark .card-details-synonym-delete-btn:hover {
  background: rgba(239, 68, 68, 0.2);
}

/* Add new synonym row */
.card-details-synonym-add-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

.card-details-synonym-add-input {
  flex: 1;
  width: 100%;
  height: 2.25rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: #111827;
  background: #ffffff;
  border: 1px solid #d8b4fe;
  border-radius: 0.5rem;
  outline: none;
  transition: all 0.2s ease;
}

.card-details-synonym-add-input:hover {
  background: #f9fafb;
}

.card-details-synonym-add-input:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

.card-details-synonym-add-input::placeholder {
  color: #9ca3af;
}

.card-details-synonym-add-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  color: #ffffff;
  background: #7c3aed;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.card-details-synonym-add-btn[data-disabled="true"] {
  opacity: 0.75;
  cursor: not-allowed;
}

.card-details-synonym-add-btn:hover {
  background: #6d28d9;
}

.card-details-synonym-add-icon {
  width: 1rem;
  height: 1rem;
  stroke: currentColor;
  fill: none;
}

/* Dark mode - Add synonym */
html.dark .card-details-synonym-add-input {
  color: #f9fafb;
  background: #111827;
  border-color: #4b5563;
}

html.dark .card-details-synonym-add-input:hover {
  background: #1f2937;
}

html.dark .card-details-synonym-add-input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2);
}

html.dark .card-details-synonym-add-input::placeholder {
  color: #6b7280;
}

html.dark .card-details-synonym-add-btn {
  background: #7c3aed;
}

html.dark .card-details-synonym-add-btn:hover {
  background: #6d28d9;
}

/* ================================================================================================ */
/* WORD HOVER EFFECTS                                                                              */
/* ================================================================================================ */

/* When hovering over a word, blur and fade other words */
.word-hoverable:has(.hoverable-word:hover) .hoverable-word:not(:hover) {
  filter: blur(0.3px);
  opacity: 0.6;
  transition: all 0.2s ease;
}

/* Base styles for hoverable words */
.hoverable-word {
  display: inline-block;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Light theme hover effect */
.hoverable-word:hover {
  font-weight: 500;
  color: #9333ea;
  transform: scale(1.15) translateY(-6px);
}

/* Dark theme hover effect */
html.dark .hoverable-word:hover {
  color: #d8b4fe;
}

/* Card Details Delete Modal - Overlay */
.card-details-delete-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Modal */
.card-details-delete-modal {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid #e5e7eb;
  max-width: 480px;
  width: 100%;
  animation: scaleIn 0.3s ease;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

html.dark .card-details-delete-modal {
  background: #1f2937;
  border-color: #374151;
}

/* Content */
.card-details-delete-content {
  padding: 24px;
}

/* Heading */
.card-details-delete-heading {
  font-size: 20px;
  font-weight: 500;
  color: #111827;
  margin: 0 0 12px 0;
}

html.dark .card-details-delete-heading {
  color: #f9fafb;
}

/* Message */
.card-details-delete-message {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 24px 0;
  line-height: 1.5;
}

html.dark .card-details-delete-message {
  color: #9ca3af;
}

/* Word */
.card-details-delete-word {
  color: #111827;
  font-weight: 600;
}

html.dark .card-details-delete-word {
  color: #f9fafb;
}

/* Actions */
.card-details-delete-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Buttons */
.card-details-delete-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  outline: none;
}

.card-details-delete-btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Cancel Button */
.card-details-delete-btn-cancel {
  background: #f3f4f6;
  color: #374151;
}

.card-details-delete-btn-cancel:hover {
  background: #e5e7eb;
}

html.dark .card-details-delete-btn-cancel {
  background: #374151;
  color: #d1d5db;
}

html.dark .card-details-delete-btn-cancel:hover {
  background: #4b5563;
}

/* Confirm Button */
.card-details-delete-btn-confirm {
  background: #ef4444;
  color: #ffffff;
}

.card-details-delete-btn-confirm:hover {
  background: #dc2626;
}

html.dark .card-details-delete-btn-confirm {
  background: #dc2626;
  color: #ffffff;
}

html.dark .card-details-delete-btn-confirm:hover {
  background: #b91c1c;
}

/* Responsive */
@media (max-width: 640px) {
  .card-details-delete-modal {
    max-width: 100%;
    margin: 16px;
  }

  .card-details-delete-content {
    padding: 20px;
  }

  .card-details-delete-heading {
    font-size: 18px;
  }

  .card-details-delete-message {
    font-size: 13px;
  }

  .card-details-delete-actions {
    flex-direction: column;
    gap: 8px;
  }

  .card-details-delete-btn {
    width: 100%;
  }
}

.card-details-modal.card-details-practice-mode {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Practice Header */
.card-details-practice-header {
  background: linear-gradient(
    to bottom right,
    #faf5ff,
    rgba(243, 232, 255, 0.5)
  );
  border-radius: 12px;
  padding: 16px;
  border: 1px solid #e9d5ff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

html.dark .card-details-practice-header {
  background: linear-gradient(
    to bottom right,
    rgba(88, 28, 135, 0.2),
    rgba(107, 33, 168, 0.1)
  );
  border-color: rgba(107, 33, 168, 0.5);
}

.card-details-practice-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.card-details-practice-header-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.card-details-practice-word {
  font-size: 24px;
  line-height: 32px;
  color: #111827;
  margin: 0;
  font-weight: 400;
}

html.dark .card-details-practice-word {
  color: #f9fafb;
}

.card-details-practice-pronounce-btn {
  padding: 4px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-details-practice-pronounce-btn:hover {
  background: #e9d5ff;
}

html.dark .card-details-practice-pronounce-btn:hover {
  background: rgba(107, 33, 168, 0.3);
}

.card-details-practice-pronounce-icon {
  width: 16px;
  height: 16px;
  stroke: #9333ea;
  transition: transform 0.2s;
}

.card-details-practice-pronounce-btn:hover
  .card-details-practice-pronounce-icon {
  transform: scale(1.1);
}

html.dark .card-details-practice-pronounce-icon {
  stroke: #a78bfa;
}

.card-details-practice-group-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid transparent;
  flex-shrink: 0;
  margin-left: auto;
}

html.dark .card-details-practice-group-badge {
  background: rgba(30, 64, 175, 0.3);
  color: #93c5fd;
}

.card-details-practice-back-btn {
  margin-left: 12px;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 16px;
  color: #4b5563;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.card-details-practice-back-btn:hover {
  color: #9333ea;
  background: #f3e8ff;
}

html.dark .card-details-practice-back-btn {
  color: #9ca3af;
}

html.dark .card-details-practice-back-btn:hover {
  color: #a78bfa;
  background: rgba(147, 51, 234, 0.3);
}

.card-details-practice-back-icon {
  width: 14px;
  height: 14px;
  transition: transform 0.2s;
}

.card-details-practice-back-btn:hover .card-details-practice-back-icon {
  transform: translateX(-2px);
}

.card-details-practice-header-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-details-practice-translation {
  font-size: 14px;
  line-height: 20px;
  color: #4b5563;
  margin: 0;
}

html.dark .card-details-practice-translation {
  color: #9ca3af;
}

.card-details-practice-mode-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 16px;
  margin-left: 12px;
}

.card-details-practice-mode-icon {
  width: 14px;
  height: 14px;
  stroke: #9333ea;
}

html.dark .card-details-practice-mode-icon {
  stroke: #a78bfa;
}

.card-details-practice-mode-text {
  color: #7e22ce;
  font-weight: 500;
}

html.dark .card-details-practice-mode-text {
  color: #d8b4fe;
}

/* Practice Chat Container */
.card-details-practice-chat {
  display: flex;
  flex-direction: column;
  margin: 12px 10px;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
  position: relative;
  transition: all 0.3s;
  flex: 1;
}

html.dark .card-details-practice-chat {
  background: #111827;
  border-color: #374151;
}

/* Chat Messages */
.card-details-practice-chat-messages {
  flex: 1;
  overflow-y: auto;
  background: linear-gradient(
    to bottom,
    #ffffff,
    rgba(249, 250, 251, 0.5),
    #ffffff
  );
}

html.dark .card-details-practice-chat-messages {
  background: linear-gradient(
    to bottom,
    #111827,
    rgba(17, 24, 39, 0.5),
    #111827
  );
}

/* Message Item */
.card-details-practice-message-item {
  padding: 20px 16px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(243, 244, 246, 0.5);
  transition: all 0.2s;
}

.card-details-practice-message-item:hover {
  background: rgba(249, 250, 251, 0.5);
}

html.dark .card-details-practice-message-item {
  background: rgba(31, 41, 55, 0.3);
  border-bottom-color: rgba(31, 41, 55, 0.5);
}

html.dark .card-details-practice-message-item:hover {
  background: rgba(31, 41, 55, 0.2);
}

@media (min-width: 768px) {
  .card-details-practice-message-item {
    padding: 20px 24px;
  }
}

.card-details-practice-message-container {
  max-width: 768px;
  margin: 0 auto;
  display: flex;
  gap: 12px;
}

/* Avatar */
.card-details-practice-message-avatar-wrapper {
  flex-shrink: 0;
  position: relative;
}

.card-details-practice-message-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.5);
  position: relative;
  overflow: hidden;
  background: linear-gradient(to bottom right, #10b981, #047857);
}

html.dark .card-details-practice-message-avatar {
  background: linear-gradient(to bottom right, #059669, #065f46);
  box-shadow: 0 10px 15px -3px rgba(5, 150, 105, 0.5);
}

.card-details-practice-message-avatar-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.2)
  );
}

.card-details-practice-message-avatar-icon {
  width: 20px;
  height: 20px;
  color: #ffffff;
  position: relative;
  z-index: 10;
}

/* .card-details-practice-message-avatar-ping {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: rgba(16, 185, 129, 0.2);
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
} */

/* html.dark .card-details-practice-message-avatar-ping {
  background: rgba(52, 211, 153, 0.2);
} */

@keyframes ping {
  75%,
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Message Content */
.card-details-practice-message-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.card-details-practice-message-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-details-practice-message-sender {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: #047857;
}

html.dark .card-details-practice-message-sender {
  color: #34d399;
}

.card-details-practice-message-time {
  font-size: 12px;
  line-height: 16px;
  color: #9ca3af;
}

html.dark .card-details-practice-message-time {
  color: #4b5563;
}

.card-details-practice-message-text {
  font-size: 15px;
  line-height: 1.6;
  color: #1f2937;
}

html.dark .card-details-practice-message-text {
  color: #e5e7eb;
}

/* Message Actions */
.card-details-practice-message-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s;
}

.card-details-practice-message-item:hover
  .card-details-practice-message-actions {
  opacity: 1;
}

.card-details-practice-message-action-btn {
  padding: 6px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
}

.card-details-practice-message-action-btn:hover {
  background: #e5e7eb;
  color: #374151;
}

html.dark .card-details-practice-message-action-btn {
  color: #9ca3af;
}

html.dark .card-details-practice-message-action-btn:hover {
  background: #374151;
  color: #d1d5db;
}

.card-details-practice-message-action-icon {
  width: 14px;
  height: 14px;
}

/* Chat Input */
.card-details-practice-chat-input {
  border-top: 1px solid rgba(229, 231, 235, 0.8);
  background: linear-gradient(to bottom, #ffffff, rgba(249, 250, 251, 0.5));
  padding: 16px;
  backdrop-filter: blur(4px);
}

html.dark .card-details-practice-chat-input {
  border-top-color: rgba(55, 65, 81, 0.5);
  background: linear-gradient(to bottom, #111827, rgba(17, 24, 39, 0.5));
}

.card-details-practice-input-wrapper {
  max-width: 768px;
  margin: 0 auto;
}

.card-details-practice-input-group {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border-radius: 16px;
  border: 2px solid #e5e7eb;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(229, 231, 235, 0.5);
  transition: all 0.3s;
}

html.dark .card-details-practice-input-group {
  background: #1f2937;
  border-color: #374151;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(3, 7, 18, 0.5);
}

.card-details-practice-input-group:focus-within {
  border-color: #a855f7;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 0 0 4px rgba(168, 85, 247, 0.2);
}

html.dark .card-details-practice-input-group:focus-within {
  border-color: #c084fc;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 0 0 4px rgba(88, 28, 135, 0.3);
}

.card-details-practice-input {
  flex: 1;
  padding: 16px 20px;
  background: transparent;
  border: none;
  outline: none;
  color: #111827;
  font-size: 15px;
}

html.dark .card-details-practice-input {
  color: #f3f4f6;
}

.card-details-practice-input::placeholder {
  color: #9ca3af;
}

html.dark .card-details-practice-input::placeholder {
  color: #6b7280;
}

.card-details-practice-send-btn {
  margin-right: 8px;
  padding: 12px;
  background: linear-gradient(to right, #9333ea, #7e22ce);
  color: #ffffff;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 10px 15px -3px rgba(147, 51, 234, 0.3),
    0 4px 6px -4px rgba(147, 51, 234, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-details-practice-send-btn:hover {
  background: linear-gradient(to right, #7e22ce, #6b21a8);
  box-shadow: 0 20px 25px -5px rgba(147, 51, 234, 0.4),
    0 8px 10px -6px rgba(147, 51, 234, 0.4);
  transform: scale(1.05);
}

.card-details-practice-send-btn:active {
  transform: scale(0.95);
}

.card-details-practice-send-btn:disabled {
  background: linear-gradient(to right, #e5e7eb, #e5e7eb);
  cursor: not-allowed;
  box-shadow: none;
  transform: scale(1);
}

html.dark .card-details-practice-send-btn:disabled {
  background: linear-gradient(to right, #374151, #374151);
}

.card-details-practice-send-icon {
  width: 20px;
  height: 20px;
}

.card-details-practice-input-hint {
  margin-top: 8px;
  font-size: 12px;
  line-height: 16px;
  color: #9ca3af;
  text-align: center;
}

html.dark .card-details-practice-input-hint {
  color: #4b5563;
}

.card-details-practice-kbd {
  padding: 2px 6px;
  background: #e5e7eb;
  border-radius: 4px;
  color: #374151;
  font-family: monospace;
}

html.dark .card-details-practice-kbd {
  background: #374151;
  color: #d1d5db;
}

/* Account Item Styles (migrated from dropdown.css) */

.account-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 24px;
  padding: 32px;
  margin: 0 auto;
  width: 100%;
  min-height: 100vh;
  background: #ffffff;
}

/* Dark mode styles */
html.dark .account-container {
  background: #151c28;
}

html.dark .account-header .account-title {
  color: #f3f4f6;
}
html.dark .account-header .account-subtitle {
  color: #99a1af;
}

/* Header Styles */
.account-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.account-title {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
  color: #101828;
  letter-spacing: -0.4492px;
  margin: 0;
}

.account-subtitle {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #4a5565;
  letter-spacing: -0.3125px;
  margin: 0;
}

/* Profile Information Container */
.account-profile-container {
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.account-profile-heading {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  color: #101828;
  letter-spacing: -0.4395px;
  margin: 0;
}

.account-profile-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

/* Profile Section */
.account-profile-section {
  display: flex;
  gap: 16px;
  align-items: center;
  height: 80px;
  width: 100%;
}

.account-profile-avatar {
  width: 80px;
  height: 80px;
  border-radius: 33554428px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2b7fff 0%, #ad46ff 100%);
}

.account-profile-avatar-icon {
  width: 40px;
  height: 40px;
}

.account-profile-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.account-profile-name {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #101828;
  letter-spacing: -0.3125px;
  margin: 0;
}

.account-profile-member-since {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
  letter-spacing: -0.1504px;
  margin: 0;
}

.account-profile-edit-btn {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  height: 32px;
  padding: 1px 13px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #09090b;
  letter-spacing: -0.1504px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}

.account-profile-edit-btn:hover {
  background: #f9fafb;
}

/* Divider */
.account-profile-divider {
  margin: 1rem 0;
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}

/* Details Section */
.account-profile-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.account-profile-detail-row {
  display: flex;
  gap: 12px;
  align-items: center;
  width: 100%;
}

.account-profile-detail-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.account-profile-detail-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.account-profile-detail-label {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
  letter-spacing: -0.1504px;
  margin: 0;
}

.account-profile-detail-value {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #101828;
  letter-spacing: -0.3125px;
  margin: 0;
}

/* Edit Form */
.account-profile-edit-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.account-profile-edit-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.account-profile-edit-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.account-profile-edit-label {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #374151;
  letter-spacing: -0.1504px;
}

.account-profile-edit-input {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #101828;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
}

.account-profile-edit-input:focus {
  border-color: #2b7fff;
  box-shadow: 0 0 0 3px rgba(43, 127, 255, 0.12);
}

.account-profile-edit-divider {
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}

.account-profile-edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.account-profile-edit-cancel-btn {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  height: 36px;
  padding: 0 16px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
}

.account-profile-edit-cancel-btn:hover {
  background: #f9fafb;
}

.account-profile-edit-save-btn {
  background: #2b7fff;
  border: none;
  border-radius: 8px;
  height: 36px;
  padding: 0 16px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
}

.account-profile-edit-save-btn:hover {
  background: #1d6ef0;
}

.account-profile-edit-save-btn:disabled,
.account-profile-edit-cancel-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Dark mode — edit form */
html.dark .account-profile-edit-label {
  color: #d1d5db;
}

html.dark .account-profile-edit-input {
  background: #1e2939;
  border-color: rgba(74, 85, 101, 0.5);
  color: #f3f4f6;
}

html.dark .account-profile-edit-input:focus {
  border-color: #2b7fff;
}

html.dark .account-profile-edit-divider {
  background: rgba(74, 85, 101, 0.5);
}

html.dark .account-profile-edit-cancel-btn {
  background: #1e2939;
  border-color: rgba(74, 85, 101, 0.5);
  color: #d1d5db;
}

html.dark .account-profile-edit-cancel-btn:hover {
  background: #263248;
}

/* Dark mode styles */
html.dark .account-profile-container {
  border: 1px solid rgba(74, 85, 101, 0.5);
  background: #1e2939;
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}

html.dark .account-profile-heading {
  color: #f3f4f6;
}

html.dark .account-profile-name {
  color: #f3f4f6;
}

html.dark .account-profile-member-since {
  color: #99a1af;
}

html.dark .account-profile-edit-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f3f4f6;
}

html.dark .account-profile-edit-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

html.dark .account-profile-divider {
  background: rgba(255, 255, 255, 0.1);
}

html.dark .account-profile-detail-label {
  color: #99a1af;
}

html.dark .account-profile-detail-value {
  color: #f3f4f6;
}

/* Subscription Container */
.account-subscription-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.account-subscription-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  height: 32px;
}

.account-subscription-title-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
}

.account-subscription-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.account-subscription-title {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #101828;
  letter-spacing: -0.3125px;
  margin: 0;
}

.account-subscription-badge {
  background: linear-gradient(90deg, #f3f4f6 0%, #e5e7eb 100%);
  border: 1px solid #d1d5dc;
  border-radius: 8px;
  padding: 3px 9px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #1e2939;
  box-sizing: border-box;
}

.account-subscription-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.account-subscription-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  width: 100%;
}

.account-subscription-plan-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.account-subscription-plan-label {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
  color: #09090b;
  letter-spacing: -0.1504px;
  margin: 0;
}

.account-subscription-plan-name {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #101828;
  letter-spacing: -0.3125px;
  margin: 0;
}

.account-subscription-plan-price {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #101828;
  letter-spacing: -0.3125px;
  margin: 0;
}

.account-subscription-info-box {
  background: #eff6ff;
  border: 1px solid #bedbff;
  border-radius: 10px;
  padding: 17px;
  width: 100%;
  box-sizing: border-box;
  min-height: 54px;
  display: flex;
  align-items: center;
}

.account-subscription-info-text {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #364153;
  letter-spacing: -0.1504px;
  margin: 0;
}

.account-subscription-upgrade-btn {
  background: linear-gradient(135deg, #2b7fff 0%, #ad46ff 100%);
  border: none;
  border-radius: 8px;
  height: 36px;
  padding: 8px 16px;
  width: 100%;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  letter-spacing: -0.1504px;
  cursor: pointer;
  box-shadow:
    0px 10px 15px -3px rgba(43, 127, 255, 0.3),
    0px 4px 6px -4px rgba(43, 127, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.account-subscription-upgrade-btn:hover {
  box-shadow:
    0px 10px 15px -3px rgba(43, 127, 255, 0.5),
    0px 4px 6px -4px rgba(43, 127, 255, 0.5);
}

/* Dark mode styles for subscription section */
html.dark .account-subscription-title {
  color: #f3f4f6;
}

html.dark .account-subscription-badge {
  background: linear-gradient(90deg, #364153 0%, #4a5565 100%);
  border: 1px solid #6a7282;
  color: #f3f4f6;
}

.account-subscription-badge-pro {
  background: linear-gradient(90deg, #dcfce7 0%, #bbf7d0 100%);
  border: 1px solid #86efac;
  border-radius: 8px;
  padding: 3px 9px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #15803d;
  box-sizing: border-box;
}

html.dark .account-subscription-badge-pro {
  background: linear-gradient(
    90deg,
    rgba(20, 83, 45, 0.4) 0%,
    rgba(20, 83, 45, 0.6) 100%
  );
  border: 1px solid #86efac;
  color: #86efac;
}

.account-subscription-badge-premium {
  background: linear-gradient(90deg, #f3e8ff 0%, #e9d5ff 100%);
  border: 1px solid #d8b4fe;
  border-radius: 8px;
  padding: 3px 9px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
  color: #7e22ce;
  box-sizing: border-box;
}

html.dark .account-subscription-badge-premium {
  background: linear-gradient(
    90deg,
    rgba(88, 28, 135, 0.4) 0%,
    rgba(88, 28, 135, 0.6) 100%
  );
  border: 1px solid #d8b4fe;
  color: #d8b4fe;
}

html.dark .account-subscription-plan-label {
  color: #fafafa;
}

html.dark .account-subscription-plan-name {
  color: #f3f4f6;
}

html.dark .account-subscription-plan-price {
  color: #f3f4f6;
}

html.dark .account-subscription-info-box {
  background: rgba(22, 36, 86, 0.3);
  border: 1px solid rgba(28, 57, 142, 0.4);
}

html.dark .account-subscription-info-text {
  color: #d1d5dc;
}

html.dark .account-subscription-upgrade-btn {
  box-shadow:
    0px 10px 15px -3px rgba(43, 127, 255, 0.5),
    0px 4px 6px -4px rgba(43, 127, 255, 0.5);
}

html.dark .account-subscription-upgrade-btn:hover {
  box-shadow:
    0px 10px 15px -3px rgba(43, 127, 255, 0.7),
    0px 4px 6px -4px rgba(43, 127, 255, 0.7);
}

/* Free subscription card */
.account-subscription-free-card {
  background: linear-gradient(135deg, #eff6ff 0%, #faf5ff 100%);
  border: 1px solid #bedbff;
  border-radius: 14px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

html.dark .account-subscription-free-card {
  border: 1px solid rgba(28, 57, 142, 0.4);
  background: linear-gradient(
    135deg,
    rgba(31, 49, 115, 0.3) 0%,
    rgba(65, 5, 109, 0.3) 100%
  );
}

/* Paid subscription card (Pro / Premium) */
.account-subscription-paid-card {
  border-radius: 0.75rem;
  border: 1px solid #bfdbfe;
  padding: 1.5rem;
  background: linear-gradient(
    to bottom right,
    rgba(239, 246, 255, 0.8),
    rgba(245, 243, 255, 0.5)
  );
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

html.dark .account-subscription-paid-card {
  border-color: rgba(30, 58, 138, 0.4);
  background: linear-gradient(
    to bottom right,
    rgba(23, 37, 84, 0.3),
    rgba(49, 46, 129, 0.2)
  );
}

.account-subscription-paid-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.account-subscription-paid-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.account-subscription-paid-crown {
  color: #ca8a04;
  flex-shrink: 0;
}

html.dark .account-subscription-paid-crown {
  color: #fbbf24;
}

.account-subscription-paid-title-text {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #101828;
  letter-spacing: -0.3125px;
  margin: 0;
}

html.dark .account-subscription-paid-title-text {
  color: #f3f4f6;
}

.account-subscription-badge-premium-gold {
  background: linear-gradient(90deg, #fef9c3 0%, #fde68a 100%);
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 3px 9px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: #92400e;
  box-sizing: border-box;
}

html.dark .account-subscription-badge-premium-gold {
  background: linear-gradient(
    90deg,
    rgba(120, 53, 15, 0.4) 0%,
    rgba(120, 53, 15, 0.6) 100%
  );
  border: 1px solid #fcd34d;
  color: #fcd34d;
}

.account-subscription-paid-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.account-subscription-paid-divider {
  height: 1px;
  background: #e5e7eb;
  width: 100%;
}

html.dark .account-subscription-paid-divider {
  background: rgba(75, 85, 99, 0.4);
}

.account-subscription-billing-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.account-subscription-billing-icon {
  color: #6b7280;
  flex-shrink: 0;
}

html.dark .account-subscription-billing-icon {
  color: #9ca3af;
}

.account-subscription-billing-label {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #6b7280;
  margin: 0;
}

html.dark .account-subscription-billing-label {
  color: #9ca3af;
}

.account-subscription-billing-date {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #101828;
  margin: 0;
}

html.dark .account-subscription-billing-date {
  color: #f3f4f6;
}

.account-subscription-paid-actions {
  display: flex;
  gap: 0.5rem;
  padding-top: 0.25rem;
}

.account-subscription-action-btn {
  flex: 1;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  border: 1px solid #d1d5db;
  background: #fff;
  color: #374151;
  font-family: "Inter", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}

.account-subscription-action-btn:hover {
  background: #f9fafb;
}

html.dark .account-subscription-action-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: #4b5563;
  color: #e5e7eb;
}

html.dark .account-subscription-action-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Language Settings Container */
.account-language-container {
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.account-language-header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
}

.account-language-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.account-language-title {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #101828;
  letter-spacing: -0.3125px;
  margin: 0;
}

.account-language-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.account-language-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.account-language-label {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
  color: #364153;
  letter-spacing: -0.1504px;
  margin: 0;
}

.account-language-description {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
  letter-spacing: -0.1504px;
  margin: 0;
}

.account-language-divider {
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}

/* Dark mode styles for language settings section */
html.dark .account-language-container {
  background: #1e2939;
  border: 1px solid rgba(74, 85, 101, 0.5);
}

html.dark .account-language-icon {
  filter: invert(1);
}

html.dark .account-language-title {
  color: #f3f4f6;
}

html.dark .account-language-label {
  color: #d1d5dc;
}

html.dark .account-language-description {
  color: #99a1af;
}

html.dark .account-language-divider {
  background: rgba(255, 255, 255, 0.1);
}

/* Language Level Container */
.account-level-container {
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.account-level-header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
}

.account-level-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.account-level-title {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #101828;
  letter-spacing: -0.3125px;
  margin: 0;
}

.account-level-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.account-level-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.account-level-label {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 14px;
  color: #364153;
  letter-spacing: -0.1504px;
  margin: 0;
}

.account-level-description {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #6a7282;
  letter-spacing: -0.1504px;
  margin: 0;
}

.account-level-info-box {
  background: #eff6ff;
  border: 1px solid #bedbff;
  border-radius: 10px;
  padding: 17px;
  width: 100%;
  box-sizing: border-box;
  min-height: 54px;
  display: flex;
  align-items: center;
}

.account-level-info-text {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #364153;
  letter-spacing: -0.1504px;
  margin: 0;
}

/* Dark mode styles for language level section */
html.dark .account-level-container {
  background: #1e2939;
  border: 1px solid rgba(74, 85, 101, 0.5);
}

html.dark .account-level-icon {
  filter: invert(1);
}

html.dark .account-level-title {
  color: #f3f4f6;
}

html.dark .account-level-label {
  color: #d1d5dc;
}

html.dark .account-level-description {
  color: #99a1af;
}

html.dark .account-level-info-box {
  background: rgba(22, 36, 86, 0.3);
  border: 1px solid rgba(28, 57, 142, 0.4);
}

html.dark .account-level-info-text {
  color: #d1d5dc;
}

/* Premium Features Container */
.account-premium-container {
  box-shadow:
    0 8px 32px 0 rgba(31, 38, 135, 0.1),
    0 0 40px rgba(255, 240, 133, 0.4);
  background: linear-gradient(135deg, #fffbf0 0%, #fff9e6 100%);
  border: 1px solid #fff085;
  border-radius: 14px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.account-premium-header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
}

.account-premium-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  filter: brightness(0) saturate(100%) invert(62%) sepia(73%) saturate(1547%)
    hue-rotate(2deg) brightness(98%) contrast(95%);
}

.account-premium-title {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #101828;
  letter-spacing: -0.3125px;
  margin: 0;
}

.account-premium-subtitle {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #364153;
  letter-spacing: -0.1504px;
  margin: 0;
}

.account-premium-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  width: 100%;
}

.account-premium-card {
  background: #ffffff;
  border: 1px solid #fff085;
  border-radius: 10px;
  padding: 13px 13px 13px 45px;
  position: relative;
  min-height: 62px;
  box-sizing: border-box;
}

.account-premium-badge {
  position: absolute;
  left: 13px;
  top: 15px;
  width: 20px;
  height: 20px;
  background: #f0b100;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.account-premium-badge-icon {
  width: 12px;
  height: 12px;
  filter: brightness(0) invert(1);
}

.account-premium-card-title {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #101828;
  letter-spacing: -0.1504px;
  margin: 0 0 4px 0;
}

.account-premium-card-description {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #4a5565;
  margin: 0;
}

.account-premium-upgrade-btn {
  background: linear-gradient(90deg, #f0b100 0%, #ff6900 100%);
  border: none;
  border-radius: 8px;
  height: 36px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  letter-spacing: -0.1504px;
  cursor: pointer;
  box-sizing: border-box;
  box-shadow: 0px 4px 12px rgba(240, 177, 0, 0.3);
}

.account-premium-upgrade-btn:hover {
  box-shadow: 0px 6px 16px rgba(240, 177, 0, 0.5);
}

.account-premium-btn-icon {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1);
}

/* Dark mode styles for premium features section */
html.dark .account-premium-container {
  background: linear-gradient(
    135deg,
    rgba(50, 45, 30, 0.4) 0%,
    rgba(45, 40, 25, 0.4) 100%
  );
  border: 1px solid rgba(69, 62, 39, 0.6);
  box-shadow:
    0 8px 32px 0 rgba(31, 38, 135, 0.1),
    0 0 40px rgba(255, 240, 133, 0.3);
}

html.dark .account-premium-icon {
  filter: brightness(0) saturate(100%) invert(62%) sepia(73%) saturate(1547%)
    hue-rotate(2deg) brightness(98%) contrast(95%);
}

html.dark .account-premium-title {
  color: #f3f4f6;
}

html.dark .account-premium-subtitle {
  color: #d1d5dc;
}

html.dark .account-premium-card {
  background: #2a3544;
  border: 1px solid rgba(121, 109, 62, 0.3);
}

html.dark .account-premium-card-title {
  color: #f3f4f6;
}

html.dark .account-premium-card-description {
  color: #99a1af;
}

html.dark .account-premium-badge-icon {
  filter: brightness(0) invert(1);
}

html.dark .account-premium-upgrade-btn {
  box-shadow: 0px 4px 12px rgba(240, 177, 0, 0.4);
}

html.dark .account-premium-btn-icon {
  filter: brightness(0) invert(1);
}

html.dark .account-premium-upgrade-btn:hover {
  box-shadow: 0px 6px 16px rgba(240, 177, 0, 0.6);
}

/* Progress & Analytics Container */
.account-analytics-container {
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.account-analytics-heading {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  color: #101828;
  letter-spacing: -0.4395px;
  margin: 0;
}

.account-analytics-btn {
  background: linear-gradient(90deg, #eff6ff 0%, #faf5ff 100%);
  border: 1px solid #bedbff;
  border-radius: 8px;
  height: 38px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 20px;
  color: #1447e6;
  letter-spacing: -0.1504px;
  cursor: pointer;
  box-sizing: border-box;
}

.account-analytics-btn:hover {
  background: linear-gradient(90deg, #e8f2ff 0%, #f5f0ff 100%);
}

.account-analytics-btn-icon {
  width: 16px;
  height: 16px;
}

/* Dark mode styles for analytics section */
html.dark .account-analytics-container {
  background: #1e2939;
  border: 1px solid rgba(74, 85, 101, 0.5);
}

html.dark .account-analytics-heading {
  color: #f3f4f6;
}

html.dark .account-analytics-btn {
  background: linear-gradient(
    90deg,
    rgba(31, 49, 115, 0.3) 0%,
    rgba(65, 5, 109, 0.2) 100%
  );
  border: 1px solid rgba(28, 57, 142, 0.4);
  color: #64b5f6;
}

html.dark .account-analytics-btn:hover {
  background: linear-gradient(
    90deg,
    rgba(31, 49, 115, 0.4) 0%,
    rgba(65, 5, 109, 0.3) 100%
  );
}

html.dark .account-analytics-btn-icon {
  filter: invert(63%) sepia(32%) saturate(455%) hue-rotate(177deg)
    brightness(97%) contrast(94%);
}

/* Security Container */
.account-security-container {
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
  background: rgba(255, 255, 255, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

.account-security-heading {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 27px;
  color: #101828;
  letter-spacing: -0.4395px;
  margin: 0;
}

.account-security-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.account-security-btn {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  height: 36px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  color: #09090b;
  letter-spacing: -0.1504px;
  cursor: pointer;
  box-sizing: border-box;
}

.account-security-btn:hover {
  background: #f9fafb;
}

.account-security-btn-icon {
  width: 16px;
  height: 16px;
}

.account-security-btn-danger {
  color: #e7000b;
}

/* Dark mode styles for security section */
html.dark .account-security-container {
  background: #1e2939;
  border: 1px solid rgba(74, 85, 101, 0.5);
}

html.dark .account-security-heading {
  color: #f3f4f6;
}

html.dark .account-security-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f3f4f6;
}

html.dark .account-security-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

html.dark .account-security-btn-danger {
  color: #dd2a33;
}

html.dark .account-security-btn-icon {
  filter: invert(1);
}

html.dark .account-security-btn-danger .account-security-btn-icon {
  filter: none;
}

/* Danger Zone Container */
.account-danger-container {
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
  background: rgba(249, 250, 251, 0.5);
  border: 1px solid rgba(229, 231, 235, 0.6);
  border-radius: 14px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.account-danger-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.account-danger-title {
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #1e2939;
  margin: 0;
}

.account-danger-description {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #4a5565;
  margin: 0;
}

.account-danger-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.account-danger-btn {
  background: #ffffff;
  border: 1px solid rgba(209, 213, 220, 0.5);
  border-radius: 8px;
  height: 36px;
  width: 100%;
  padding: 8px 13px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
  color: #364153;
  letter-spacing: -0.1504px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.account-danger-btn:hover {
  background: rgba(249, 250, 251, 0.8);
  border-color: rgba(209, 213, 220, 0.8);
}

/* Dark Theme - Danger Zone */
html.dark .account-danger-container {
  background: rgba(30, 41, 57, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

html.dark .account-danger-title {
  color: #f3f4f6;
}

html.dark .account-danger-description {
  color: #9ca3af;
}

html.dark .account-danger-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f3f4f6;
}

html.dark .account-danger-btn:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Responsive design */
@media (max-width: 768px) {
  .account-container {
    padding: 16px;
    gap: 20px;
  }

  .account-title {
    font-size: 18px;
    line-height: 26px;
  }

  .account-subtitle {
    font-size: 14px;
    line-height: 20px;
  }

  .account-profile-container {
    padding: 20px;
  }

  .account-profile-section {
    flex-wrap: wrap;
    height: auto;
    gap: 12px;
  }

  .account-profile-info {
    order: 2;
  }

  .account-profile-edit-btn {
    order: 3;
    width: 100%;
  }

  .account-premium-card-description {
    display: none;
  }
}

@media (max-width: 480px) {
  .account-premium-card {
    padding: 12px;
  }
  .account-premium-badge {
    display: none;
  }
}

/* UI Modal Component Styles */
.ui-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(1.5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9998;
  padding: 20px;
  box-sizing: border-box;
  animation: ui-modal-overlay-fade-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ui-modal-overlay[x-cloak] {
  display: none !important;
}

@keyframes ui-modal-overlay-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.ui-modal-container {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  max-height: 100%;
  animation: ui-modal-scale-in 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ui-modal-scale-in {
  from {
    transform: scale(0.95);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.ui-modal-content {
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  max-width: 100%;
  max-height: calc(100vh - 40px);
  overflow: auto;
  box-sizing: border-box;
}

.ui-modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 150ms ease;
  padding: 0;
  z-index: 10;
}

.ui-modal-close-btn:hover {
  background: rgba(0, 0, 0, 0.05);
}

.ui-modal-close-icon {
  width: 20px;
  height: 20px;
  display: block;
}

/* Dark Mode Styles */
html.dark .ui-modal-content {
  background: #1e2939;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3),
    0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

html.dark .ui-modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

html.dark .ui-modal-close-icon {
  filter: invert(1);
}

/* Responsive Design */
@media (max-width: 768px) {
  .ui-modal-overlay {
    padding: 12px;
  }

  .ui-modal-content {
    max-height: calc(100vh - 24px);
  }

  .ui-modal-close-btn {
    top: 12px;
    right: 12px;
  }
}

/* New Card Modal Component Styles */
.ui-new-card-modal {
  width: 500px;
  min-height: 440px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow: hidden;
}

/* Modal Header */
.ui-new-card-modal-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 32px;
}

.ui-new-card-modal-title-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.ui-new-card-modal-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  border-radius: 8px;
}

.ui-new-card-modal-icon-img {
  width: 24px;
  height: 24px;
  display: block;
  filter: brightness(0) invert(1);
}

.ui-new-card-modal-title {
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 26px;
  color: #0a0a0a;
  margin: 0;
}

.ui-new-card-modal-subtitle {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #6b7280;
  margin: 0;
}

/* Modal Body */
.ui-new-card-modal-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ui-new-card-modal-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ui-new-card-modal-label {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #0a0a0a;
}

.ui-new-card-modal-input {
  width: 100%;
  height: 40px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #d1d5dc;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #0a0a0a;
  box-sizing: border-box;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ui-new-card-modal-input::placeholder {
  color: #9ca3af;
}

.ui-new-card-modal-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Organization Section */
.ui-new-card-modal-organization {
  display: flex;
  flex-direction: column;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.ui-new-card-modal-organization-toggle {
  width: 100%;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background-color 150ms ease;
  background: transparent;
  border: none;
}

.ui-new-card-modal-organization-toggle.is-opened,
.ui-new-card-modal-organization-toggle:hover {
  background: rgba(0, 0, 0, 0.02);
}

.ui-new-card-modal-organization-toggle-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.ui-new-card-modal-organization-toggle-title {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #374151;
}

.ui-new-card-modal-organization-toggle-values {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #6b7280;
}

.ui-new-card-modal-organization-toggle-value {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-new-card-modal-organization-toggle-separator {
  color: #9ca3af;
}

.ui-new-card-modal-organization-toggle-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #6b7280;
  transition: transform 150ms ease;
  transform: rotate(0deg);
}

.ui-new-card-modal-organization-toggle-icon-expanded {
  transform: rotate(180deg);
}

.ui-new-card-modal-organization-fields {
  padding: 8px 16px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
  overflow: auto;
}

/* Controls (Collection & Group) */
.ui-new-card-modal-controls {
  display: flex;
  gap: 8px;
  height: 36px;
}

.ui-new-card-modal-dropdown {
  position: relative;
  flex: 1;
}

.ui-new-card-modal-dropdown-trigger {
  width: 100%;
  height: 36px;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid #d1d5dc;
  border-radius: 6px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  box-sizing: border-box;
}

.ui-new-card-modal-dropdown-trigger:hover {
  border-color: #9ca3af;
}

.ui-new-card-modal-dropdown-trigger:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ui-new-card-modal-dropdown-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0.5;
}

.ui-new-card-modal-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #d1d5dc;
  border-radius: 6px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  max-height: 200px;
  overflow-y: auto;
  z-index: 50;
}

.ui-new-card-modal-dropdown-option {
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 8px 12px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #0a0a0a;
  cursor: pointer;
  transition: background-color 150ms ease;
}

.ui-new-card-modal-dropdown-option .title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Option badge for phrases */
.ui-new-card-modal-dropdown-option .type {
  margin-left: 12px;
  font-size: 10px;
  font-weight: 500;
  opacity: 0.6;
  flex-shrink: 0;
}

.ui-new-card-modal-dropdown-option:hover {
  background: #f3f4f6;
}

.ui-new-card-modal-add-btn {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: #ffffff;
  border: 1px solid #d1d5dc;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
}

.ui-new-card-modal-add-btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.ui-new-card-modal-add-icon {
  width: 16px;
  height: 16px;
}

/* Add Input View */
.ui-new-card-modal-add-input {
  display: flex;
  gap: 8px;
  height: 36px;
}

.ui-new-card-modal-add-input-field {
  flex: 1;
  height: 36px;
  padding: 4px 12px;
  background: #ffffff;
  border: 1px solid #d1d5dc;
  border-radius: 6px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #0a0a0a;
  box-sizing: border-box;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ui-new-card-modal-add-input-field::placeholder {
  color: #9ca3af;
}

.ui-new-card-modal-add-input-field:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.ui-new-card-modal-add-input-btn {
  height: 36px;
  padding: 0 12px;
  background: #ffffff;
  border: 1px solid #d1d5dc;
  border-radius: 6px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #0a0a0a;
  cursor: pointer;
  transition: background-color 150ms ease, border-color 150ms ease;
  white-space: nowrap;
}

.ui-new-card-modal-add-input-btn:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.ui-new-card-modal-add-input-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ui-new-card-modal-add-input-btn:disabled:hover {
  background: #ffffff;
  border-color: #d1d5dc;
}

.ui-new-card-modal-add-input-btn-cancel {
  background: transparent;
  border: none;
}

.ui-new-card-modal-add-input-btn-cancel:hover {
  background: #f3f4f6;
  border: none;
}

.ui-new-card-modal-add-input-btn-wrapper {
  position: relative;
}

.ui-new-card-modal-add-type-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #ffffff;
  border: 1px solid #d1d5dc;
  border-radius: 6px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  min-width: 150px;
  z-index: 50;
}

/* Info Box */
.ui-new-card-modal-info {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  background: #e0f2fe;
  border-radius: 8px;
  height: 55px;
}

.ui-new-card-modal-info-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
  margin-top: 2px;
}

.ui-new-card-modal-info-text {
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  height: 55px;
  color: #0369a1;
  margin: 0;
  flex: 1;
}

/* Modal Footer */
.ui-new-card-modal-footer {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 10px;
}

.ui-new-card-modal-footer-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.ui-new-card-modal-redirect-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  cursor: pointer;
  user-select: none;
}

.ui-new-card-modal-redirect-checkbox {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: #7c3aed;
}

.ui-new-card-modal-redirect-label {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 20px;
  color: #6b7280;
}

.ui-new-card-modal-btn {
  height: 40px;
  padding: 10px 16px;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  cursor: pointer;
  transition: all 150ms ease;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  box-sizing: border-box;
}

.ui-new-card-modal-btn-cancel {
  background: #f3f4f6;
  color: #374151;
}

.ui-new-card-modal-btn-cancel:hover {
  background: #e5e7eb;
}

.ui-new-card-modal-btn-submit {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
  color: #ffffff;
}

.ui-new-card-modal-btn-submit:hover {
  background: linear-gradient(135deg, #6d28d9 0%, #9333ea 100%);
}

.ui-new-card-modal-btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ui-new-card-modal-btn-submit:disabled:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
}

.ui-new-card-modal-btn-icon {
  width: 16px;
  height: 16px;
  display: block;
  filter: brightness(0) invert(1);
}

.ui-new-card-modal-btn-spinner {
  width: 16px;
  height: 16px;
  display: block;
  animation: ui-new-card-modal-spin 1s linear infinite;
}

@keyframes ui-new-card-modal-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Dark Mode Styles */
html.dark .ui-new-card-modal-title {
  color: #f3f4f6;
}

html.dark .ui-new-card-modal-subtitle {
  color: #9ca3af;
}

html.dark .ui-new-card-modal-label {
  color: #f3f4f6;
}

html.dark .ui-new-card-modal-input {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

html.dark .ui-new-card-modal-input::placeholder {
  color: #6b7280;
}

html.dark .ui-new-card-modal-input:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

html.dark .ui-new-card-modal-info {
  background: rgba(59, 130, 246, 0.1);
}

html.dark .ui-new-card-modal-info-text {
  color: #60a5fa;
}

html.dark .ui-new-card-modal-redirect-label {
  color: #9ca3af;
}

html.dark .ui-new-card-modal-btn-cancel {
  background: rgba(255, 255, 255, 0.08);
  color: #f3f4f6;
}

html.dark .ui-new-card-modal-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.15);
}

html.dark .ui-new-card-modal-dropdown-trigger {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

html.dark .ui-new-card-modal-dropdown-trigger:hover {
  border-color: #6b7280;
}

html.dark .ui-new-card-modal-dropdown-trigger:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

html.dark .ui-new-card-modal-dropdown-menu {
  background: #374151;
  border-color: #4b5563;
}

html.dark .ui-new-card-modal-dropdown-option {
  color: #f3f4f6;
}

html.dark .ui-new-card-modal-dropdown-option:hover {
  background: #4b5563;
}

html.dark .ui-new-card-modal-add-btn {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

html.dark .ui-new-card-modal-add-btn:hover {
  background: #4b5563;
  border-color: #6b7280;
}

html.dark .ui-new-card-modal-add-input-field {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

html.dark .ui-new-card-modal-add-input-field::placeholder {
  color: #6b7280;
}

html.dark .ui-new-card-modal-add-input-field:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

html.dark .ui-new-card-modal-add-input-btn {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

html.dark .ui-new-card-modal-add-input-btn:hover {
  background: #4b5563;
  border-color: #6b7280;
}

html.dark .ui-new-card-modal-add-input-btn:disabled:hover {
  background: #374151;
  border-color: #4b5563;
}

html.dark .ui-new-card-modal-add-input-btn-cancel {
  background: transparent;
  border: none;
}

html.dark .ui-new-card-modal-add-input-btn-cancel:hover {
  background: #4b5563;
  border: none;
}

html.dark .ui-new-card-modal-add-type-dropdown {
  background: #374151;
  border-color: #4b5563;
}

html.dark .ui-new-card-modal-organization {
  border-color: #4b5563;
  background: #1f2937;
}

html.dark .ui-new-card-modal-organization-toggle.is-opened,
html.dark .ui-new-card-modal-organization-toggle:hover {
  background: rgba(75, 85, 99, 0.3);
}

html.dark .ui-new-card-modal-organization-toggle-title {
  color: #d1d5db;
}

html.dark .ui-new-card-modal-organization-toggle-values {
  color: #9ca3af;
}

html.dark .ui-new-card-modal-organization-toggle-separator {
  color: #6b7280;
}

html.dark .ui-new-card-modal-organization-toggle-icon {
  color: #9ca3af;
}

html.dark .ui-new-card-modal-organization-fields {
  border-top-color: #4b5563;
  background: #1f2937;
}

/* Responsive Design */
@media (max-width: 768px) {
  .ui-new-card-modal {
    width: 100%;
    padding: 20px;
  }

  .ui-new-card-modal-header {
    padding-right: 24px;
  }

  .ui-new-card-modal-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .ui-new-card-modal-footer-actions {
    width: 100%;
  }

  .ui-new-card-modal-redirect-toggle {
    margin-right: 0;
  }

  .ui-new-card-modal-btn {
    width: 100%;
    justify-content: center;
  }
}

.ui-collections-modal {
  width: 512px;
  height: max-content;
  max-height: 458px;
  max-width: 100%;
  padding: 24px;
  display: flex;
  flex-direction: column;
  background: #fff;
  overflow: auto;
}

.ui-collections-modal::-webkit-scrollbar {
  display: none;
}

html.dark .ui-collections-modal {
  background: #1e2939;
}

/* Modal Header */
.ui-collections-modal-header {
  text-align: left;
}

.ui-collections-modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #111;
}

html.dark .ui-collections-modal-title {
  color: #f3f4f6;
}

/* Modal Tabs */
/* Tab buttons */
.ui-collections-tabs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 10px;
}

.ui-collections-tabs-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #ececf0;
  border-radius: 12px;
  padding: 4px;
  height: 36px;
}

html.dark .ui-collections-tabs-list {
  background: #374151;
}

.ui-collections-tab-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: #555;
  transition: all 0.2s ease;
}

html.dark .ui-collections-tab-btn {
  color: #d1d1d1;
}

.ui-collections-tab-btn.is-active {
  background: #fff;
  color: #111;
}

html.dark .ui-collections-tab-btn.is-active {
  background: #4b5563;
  color: #f9fafb;
}

.ui-collections-tab-icon {
  width: 16px;
  height: 16px;
}

.ui-collections-tab-text {
  font-size: 15px;
  font-weight: 500;
}

/* Add new btn */
.ui-collections-modal-addnew {
  width: 100%;
  padding: 16px;
  background: #eff6ff;
  border: 1px solid #c2ddff;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s ease;
  border-radius: 10px;
}

.ui-collections-modal-addnew[aria-expanded="true"] {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.ui-collections-modal-addnew[aria-expanded="true"]
  .ui-collections-modal-addnew-chevron {
  transform: rotate(180deg);
}

html.dark .ui-collections-modal-addnew {
  background: rgba(30, 58, 138, 0.2);
  border: 1px solid rgba(96, 165, 250, 0.2);
}

.ui-collections-modal-addnew:hover {
  background: #dbeafe;
}

html.dark .ui-collections-modal-addnew:hover {
  background: rgba(30, 58, 138, 0.45);
}

.ui-collections-modal-addnew-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ui-collections-modal-addnew-title {
  font-size: 14px;
  margin: 0;
  color: #111827;
}

html.dark .ui-collections-modal-addnew-title {
  color: #f3f4f6;
}

.ui-collections-modal-addnew-iconplus {
  width: 16px;
  height: 16px;
  color: #2563eb;
}

html.dark .ui-collections-modal-addnew-iconplus {
  color: #60a5fa;
}

.ui-collections-modal-addnew-chevron {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
  color: #4b5563;
}

html.dark .ui-collections-modal-addnew-chevron {
  color: #9ca3af;
}

.ui-collections-modal-addnew.is-open .ui-collections-modal-addnew-chevron {
  transform: rotate(180deg);
}

.ui-collections-modal-addnew-content {
  position: relative;
  top: -16px;
}

.ui-collections-modal-addnew-form {
  padding: 1rem;
  background: #eff6ff;
  border-top: 1px solid #bfdbfe;
}

html.dark .ui-collections-modal-addnew-form {
  background: rgba(30, 58, 138, 0.2);
  border-top: 1px solid rgba(30, 58, 138, 0.6);
}

.ui-collections-modal-addnew-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ui-collections-modal-addnew-input {
  height: 2.25rem;
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 0 0.75rem;
  background: #f9fafb;
  color: #111827;
  font-size: 15px;
}

html.dark .ui-collections-modal-addnew-input {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

.ui-collections-modal-addnew-textarea {
  width: 100%;
  min-height: 4rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 0.75rem;
  background: #f9fafb;
  color: #111827;
  resize: none;
  font-size: 15px;
}

html.dark .ui-collections-modal-addnew-textarea {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

/* Submit Button Wrapper */
.ui-collections-modal-addnew-submit-wrapper {
  position: relative;
  width: 100%;
  margin-top: 0.5rem;
  display: flex;
}

.ui-collections-modal-addnew-submit-main {
  flex: 1;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: none;
  border-radius: 8px 0 0 8px;
  background: linear-gradient(to right, #2563eb, #7c3aed, #4f46e5);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ui-collections-modal-addnew-submit-main:hover {
  background: linear-gradient(to right, #1d4ed8, #6d28d9, #4338ca);
}

.ui-collections-modal-addnew-submit-icon {
  width: 17px;
  height: 17px;
}

.ui-collections-modal-addnew-submit-text {
  font-size: 14px;
}

.ui-collections-modal-addnew-submit-dropdown-btn {
  padding: 0 0.75rem;
  height: 2.5rem;
  background: linear-gradient(324deg, #2563eb, #7c3aed, #4f46e5);
  border: none;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
}

.ui-collections-modal-addnew-submit-dropdown-btn:hover {
  background: linear-gradient(to right, #1d4ed8, #6d28d9, #4338ca);
}

.ui-collections-modal-addnew-submit-chevron {
  width: 16px;
  height: 16px;
  color: white;
  transition: transform 0.2s ease;
}

.ui-collections-modal-addnew-submit-dropdown {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.5rem);
  width: 12rem;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  z-index: 20;
}

html.dark .ui-collections-modal-addnew-submit-dropdown {
  background: #374151;
  border-color: #4b5563;
}

.ui-collections-modal-addnew-submit-option {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #374151;
  text-align: left;
}

.ui-collections-modal-addnew-submit-option:hover {
  background: #f9fafb;
}

html.dark .ui-collections-modal-addnew-submit-option {
  color: #d1d5db;
}

html.dark .ui-collections-modal-addnew-submit-option:hover {
  background: #4b5563;
}

.ui-collections-modal-addnew-submit-option.is-active {
  background: #dbeafe;
  color: #2563eb;
}

html.dark .ui-collections-modal-addnew-submit-option.is-active {
  background: rgba(30, 58, 138, 0.2);
  color: #60a5fa;
}

.ui-collections-modal-addnew-submit-option-text {
  font-size: 14.5px;
}

.ui-collections-modal-addnew-submit-option-icon {
  width: 16px;
  height: 16px;
}

.ui-collections-modal-addnew-submit-option-check {
  width: 16px;
  height: 16px;
  margin-left: auto;
  display: none;
}

.ui-collections-modal-addnew-submit-option.is-active
  .ui-collections-modal-addnew-submit-option-check {
  display: block;
}

/* Modal Body */
/* .ui-collections-modal-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 16px;
  overflow: hidden;
} */

/* Modal collections list */
.ui-collections-modal-coll {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 26px;
}

.ui-collections-modal-coll-title {
  font-size: 14px;
  color: #4b5563;
  margin-bottom: 0px;
  pointer-events: none;
}

html.dark .ui-collections-modal-coll-title {
  color: #9ca3af;
}

/* List item wrapper */
.ui-collections-modal-coll-item {
  padding: 12px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  transition: border-color 0.2s ease;
  cursor: pointer;
}

html.dark .ui-collections-modal-coll-item {
  background: #4b5563;
  border-color: #4b5563;
}

.ui-collections-modal-coll-item:hover {
  border-color: #93c5fd;
}

html.dark .ui-collections-modal-coll-item:hover {
  border-color: #a855f7;
}

/* Top row */
.ui-collections-modal-coll-item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* Text section */
.ui-collections-modal-coll-item-content p {
  margin: 0;
}

.ui-collections-modal-coll-name {
  font-size: 16px;
  color: #111827;
}

html.dark .ui-collections-modal-coll-name {
  color: #f3f4f6;
}

.ui-collections-modal-coll-desc {
  margin-top: 4px;
  font-size: 14px;
  color: #4b5563;
}

html.dark .ui-collections-modal-coll-desc {
  color: #9ca3af;
}

.ui-collections-modal-coll-groups {
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}

html.dark .ui-collections-modal-coll-groups {
  color: #9ca3af;
}

/* Actions */
.ui-collections-modal-coll-actions {
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ui-collections-modal-coll-item:hover .ui-collections-modal-coll-actions {
  opacity: 1;
}

/* Edit button */
.ui-collections-modal-coll-btn-edit {
  border: 1px solid #d1d5db;
  background: #f9fafb;
  color: #374151;
  padding: 4px 8px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
}

html.dark .ui-collections-modal-coll-btn-edit {
  background: rgba(31, 41, 55, 0.3);
  border-color: #6b7280;
  color: #d1d5db;
}

.ui-collections-modal-coll-btn-edit:hover {
  background: #e5e7eb;
}

/* Delete button */
.ui-collections-modal-coll-btn-delete {
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #dc2626;
  padding: 4px 8px;
  height: 32px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

html.dark .ui-collections-modal-coll-btn-delete {
  background: rgba(31, 41, 55, 0.3);
  border-color: #6b7280;
  color: #f87171;
}

.ui-collections-modal-coll-btn-delete:hover {
  background: #fef2f2;
}

html.dark .ui-collections-modal-coll-btn-delete:hover {
  background: rgba(127, 29, 29, 0.3);
}

.ui-collections-modal-coll-btn-icon {
  width: 16px;
  height: 16px;
}

/* Edit mode on list */

.ui-collections-modal-coll-edit {
  margin-top: 8px;
}

.ui-collections-modal-coll-edit-fields {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ui-collections-modal-coll-edit-input {
  height: 38px;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
  /* outline: none; */
}

.ui-collections-modal-coll-edit-textarea {
  width: 100%;
  min-height: 64px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #cbd5e1;
  resize: none;
  font-size: 13px;
  /* outline: none; */
}

html.dark .ui-collections-modal-coll-edit-input,
html.dark .ui-collections-modal-coll-edit-textarea {
  border-color: #475569;
  background: #2d2e30;
  color: #e5e7eb;
}

.ui-collections-modal-coll-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.ui-collections-modal-coll-edit-save {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  background: #16a34a;
  color: white;
  border-radius: 6px;
  border: none;
  font-size: 14px;
  cursor: pointer;
}

.ui-collections-modal-coll-edit-save:hover {
  background: #15803d;
}

html.dark .ui-collections-modal-coll-edit-save {
  background: #22c55e;
}

html.dark .ui-collections-modal-coll-edit-save:hover {
  background: #16a34a;
}

.ui-collections-modal-coll-edit-cancel {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
}

html.dark .ui-collections-modal-coll-edit-cancel {
  border-color: #4a4a50;
  background: #66686c;
  color: #d1d5db;
}

.ui-collections-modal-coll-edit-cancel:hover {
  background: #f3f4f6;
}

html.dark .ui-collections-modal-coll-edit-cancel:hover {
  background: #252a34;
}

.ui-collections-modal-coll-edit-icon {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

html.dark .ui-collections-modal-coll-edit-icon {
  opacity: 0.9;
}

/* Modal group list */
.ui-collections-modal-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 26px;
}

/* Modal group addnew btn */
.ui-collections-modal-group-addnew {
  padding: 1rem;
  background: #faf5ff;
  border: 1px solid #e9d8fd;
  border-radius: 0.5rem;
}

html.dark .ui-collections-modal-group-addnew {
  background: rgba(88, 28, 135, 0.2);
  border-color: #553c9a;
}

.ui-collections-modal-group-addnew-title {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: #1a1a1a;
}

html.dark .ui-collections-modal-group-addnew-title {
  color: #f3f3f3;
}

.ui-collections-modal-group-addnew-form {
  display: flex;
  gap: 0.5rem;
}

.ui-collections-modal-group-addnew-input {
  flex: 1;
  height: 2.25rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.9rem;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0.375rem;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.ui-collections-modal-group-addnew-input:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.35);
}

html.dark .ui-collections-modal-group-addnew-input {
  background: #4b5563;
  border-color: #666;
  color: #f0f0f0;
}

.ui-collections-modal-group-addnew-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 2.25rem;
  padding: 0 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: #fff;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  background: linear-gradient(to right, #7c3aed, #4f46e5, #2563eb);
  transition:
    filter 0.2s,
    transform 0.15s;
}

.ui-collections-modal-group-addnew-btn:hover {
  filter: brightness(1.08);
}

.ui-collections-modal-group-addnew-btn:active {
  transform: scale(0.97);
}

.ui-collections-modal-group-addnew-btn-icon {
  width: 1rem;
  height: 1rem;
  pointer-events: none;
}

/* Modal group select dropdown */
.ui-collections-modal-group-select {
  margin-top: 16px;
  padding: 1rem;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
}

html.dark .ui-collections-modal-group-select {
  background: rgba(55, 65, 81, 0.5);
  border-color: #4b5563;
}

.ui-collections-modal-group-select-title {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: #1a1a1a;
}

html.dark .ui-collections-modal-group-select-title {
  color: #f0f0f0;
}

.ui-collections-modal-group-select-trigger {
  width: 100%;
  height: 2.25rem;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  border-radius: 0.375rem;
  border: 1px solid #ccc;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  cursor: pointer;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.ui-collections-modal-group-select-trigger:hover {
  background: #f3f4f6;
}

.ui-collections-modal-group-select-trigger:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.35);
}

html.dark .ui-collections-modal-group-select-trigger {
  background: #4b5563;
  border-color: #666;
  color: #e5e5e5;
}

.ui-collections-modal-group-select-value {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  pointer-events: none;
}

.ui-collections-modal-group-select-value-icon {
  width: 1rem;
  height: 1rem;
  color: #2563eb;
}

html.dark .ui-collections-modal-group-select-value-icon {
  color: #60a5fa;
}

.ui-collections-modal-group-select-chevron {
  width: 1rem;
  height: 1rem;
  opacity: 0.55;
  pointer-events: none;
}

.ui-collections-modal-group-select-dropdown {
  position: relative;
  width: 430px;
  margin-top: 0.25rem;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  height: max-content;
  overflow-y: auto;
  z-index: 50;
}

html.dark .ui-collections-modal-group-select-dropdown {
  background: #1f1f28;
  border-color: #3b3b45;
  color: #e5e5e5;
}

.ui-collections-modal-group-select-option {
  font-size: 15px;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

html.dark .ui-collections-modal-group-select-option {
  background: rgb(37, 40, 50);
  color: #e5e7eb;
}

.ui-collections-modal-group-select-option.is-selected {
  background: rgb(240, 240, 240);
}

html.dark .ui-collections-modal-group-select-option.is-selected {
  background: #374151;
}

.ui-collections-modal-group-select-option:hover {
  background: #f1f5f9;
}

html.dark .ui-collections-modal-group-select-option:hover {
  background: #2b2b36;
}

/* Modal groups list */

/* Container general */
.ui-collections-modal-group-existing {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Title */
.ui-collections-modal-group-existing-title {
  font-size: 0.9rem;
  color: #665;
  pointer-events: none;
}

html.dark .ui-collections-modal-group-existing-title {
  color: #d0d0c6;
}

/* Item */
.ui-collections-modal-group-existing-item {
  padding: 12px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 10px;

  display: flex;
  justify-content: space-between;
  align-items: center;

  transition: border-color 0.2s ease;

  cursor: pointer;
}

html.dark .ui-collections-modal-group-existing-item {
  /* background: #4b5563; */
  background: #232832;
  border-color: #334155;
}

.ui-collections-modal-group-existing-item:hover {
  border-color: #c084fc; /* violeta suave */
}

html.dark .ui-collections-modal-group-existing-item:hover {
  border-color: #a855f7;
  background: #232832;
}

/* Left side */
.ui-collections-modal-group-existing-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ui-collections-modal-group-existing-icon {
  width: 18px;
  height: 18px;
  color: #9333ea;
}

html.dark .ui-collections-modal-group-existing-icon {
  color: #c084fc;
}

.ui-collections-modal-group-existing-text {
  color: #222;
  font-size: 15px;
  text-transform: capitalize;
  margin: 0;
}

html.dark .ui-collections-modal-group-existing-text {
  color: #e5e7eb;
}

/* Actions */
.ui-collections-modal-group-existing-actions {
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ui-collections-modal-group-existing-item:hover
  .ui-collections-modal-group-existing-actions {
  opacity: 1;
}

/* Buttons */
.ui-collections-modal-group-existing-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #ccc;
  background: #fafafa;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

html.dark .ui-collections-modal-group-existing-btn {
  border-color: #475569;
  background: #111827;
  color: #e5e7eb;
}

.ui-collections-modal-group-existing-btn:hover {
  background: #eee;
}

html.dark .ui-collections-modal-group-existing-btn:hover {
  background: #1f2937;
}

/* Danger button */
.ui-collections-modal-group-existing-btn-danger {
  color: #d32f2f;
  border-color: #e57373;
}

.ui-collections-modal-group-existing-btn-danger:hover {
  background: #ffebee;
}

html.dark .ui-collections-modal-group-existing-btn-danger {
  color: #f87171;
  border-color: #7f1d1d;
}

html.dark .ui-collections-modal-group-existing-btn-danger:hover {
  background: rgba(127, 29, 29, 0.25);
}

.ui-collections-modal-group-existing-btn-icon {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

.ui-collections-modal-group-existing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.ui-collections-modal-group-edit-form {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.ui-collections-modal-group-edit-input {
  flex: 1;
  height: 34px;
  padding: 4px 8px;
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  background: #ffffff;
  color: #222;
  padding-left: 25px;
  font-size: 15px;
  /* font-weight: 500; */
}

html.dark .ui-collections-modal-group-edit-input {
  background: #020617;
  border-color: #475569;
  color: #f3f4f6;
}

.ui-collections-modal-group-edit-confirm,
.ui-collections-modal-group-edit-cancel {
  height: 32px;
  width: 32px;
  border-radius: 6px;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

.ui-collections-modal-group-edit-confirm {
  background: #16a34a;
  color: white;
}

.ui-collections-modal-group-edit-confirm:hover {
  background: #15803d;
}

.ui-collections-modal-group-edit-cancel {
  background: #e5e5e5;
  color: #111827;
}

html.dark .ui-collections-modal-group-edit-cancel {
  background: #374151;
  color: #e5e7eb;
}

html.dark .ui-collections-modal-group-edit-cancel:hover {
  background: #4b5563;
}

/* Collections Delete Modal - Overlay */
.collections-delete-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(1px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Modal */
.collections-delete-modal {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid #e5e7eb;
  max-width: 480px;
  width: 100%;
  animation: scaleIn 0.3s ease;
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

html.dark .collections-delete-modal {
  background: #1f2937;
  border-color: #374151;
}

/* Content */
.collections-delete-content {
  padding: 24px;
}

/* Heading */
.collections-delete-heading {
  font-size: 20px;
  font-weight: 500;
  color: #111827;
  margin: 0 0 12px 0;
}

html.dark .collections-delete-heading {
  color: #f9fafb;
}

/* Message */
.collections-delete-message {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 24px 0;
  line-height: 1.5;
}

.collections-delete-message span {
  display: block;
}

.collections-delete-message span:first-child {
  margin-bottom: 10px;
}

html.dark .collections-delete-message {
  color: #9ca3af;
}

/* Word */
.collections-delete-word {
  color: #111827;
  font-weight: 600;
}

.collections-delete-word::before,
.collections-delete-word::after {
  content: "“";
}

html.dark .collections-delete-word {
  color: #f9fafb;
}

/* Actions */
.collections-delete-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* Buttons */
.collections-delete-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  border: none;
  outline: none;
}

.collections-delete-btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
}

/* Cancel Button */
.collections-delete-btn-cancel {
  background: #f3f4f6;
  color: #374151;
}

.collections-delete-btn-cancel:hover {
  background: #e5e7eb;
}

html.dark .collections-delete-btn-cancel {
  background: #374151;
  color: #d1d5db;
}

html.dark .collections-delete-btn-cancel:hover {
  background: #4b5563;
}

/* Confirm Button */
.collections-delete-btn-confirm {
  background: #ef4444;
  color: #ffffff;
}

.collections-delete-btn-confirm:hover {
  background: #dc2626;
}

html.dark .collections-delete-btn-confirm {
  background: #dc2626;
  color: #ffffff;
}

html.dark .collections-delete-btn-confirm:hover {
  background: #b91c1c;
}

/* Responsive */
@media (max-width: 640px) {
  .collections-delete-modal {
    max-width: 100%;
    margin: 16px;
  }

  .collections-delete-content {
    padding: 20px;
  }

  .collections-delete-heading {
    font-size: 18px;
  }

  .collections-delete-message {
    font-size: 13px;
  }

  .collections-delete-actions {
    flex-direction: column;
    gap: 8px;
  }

  .collections-delete-btn {
    width: 100%;
  }
}

.ai-assistant-container {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
}

/* Header */
.ai-assistant-header {
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.ai-assistant-header-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.ai-assistant-icon-wrapper {
  padding: 0.5rem;
  background: linear-gradient(to right, #a855f7, #ec4899);
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-assistant-icon {
  width: 1.25rem;
  height: 1.25rem;
  stroke: #ffffff;
  fill: none;
}

.ai-assistant-title {
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: #111827;
  font-weight: 500;
  margin: 0;
  flex: 1;
}

/* Clear Messages Button - hidden by default, shown only when expanded */
.ai-assistant-clear-btn {
  display: none;
  position: relative;
  top: 0.2rem;
  right: 6rem;
  padding: 0.375rem;
  border-radius: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 150ms;
}

.ai-assistant-clear-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ai-assistant-clear-btn:hover:not(:disabled) {
  background-color: rgba(0, 0, 0, 0.05);
}

html.dark .ai-assistant-clear-btn:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.1);
}

.ai-assistant-clear-btn-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: #4b5563;
}

html.dark .ai-assistant-clear-btn-icon {
  color: #9ca3af;
}

.card-details-container.ai-assistant-expanded .ai-assistant-clear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-assistant-description {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #6b7280;
  margin: 0;
}

/* Dark mode */
html.dark .ai-assistant-header {
  border-bottom-color: #374151;
}

html.dark .ai-assistant-title {
  color: #f9fafb;
}

html.dark .ai-assistant-description {
  color: #9ca3af;
}

/* Messages Area */
.ai-assistant-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}

/* Empty State */
.ai-assistant-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 1rem;
}

.ai-assistant-empty-icon {
  padding: 1rem;
  background: #f3e8ff;
  border-radius: 9999px;
  margin-bottom: 1rem;
}

.ai-assistant-sparkles-large {
  width: 2rem;
  height: 2rem;
  stroke: #a855f7;
}

.ai-assistant-empty-title {
  font-size: 1rem;
  line-height: 1.5rem;
  color: #111827;
  margin: 0 0 0.5rem 0;
  font-weight: 500;
}

.ai-assistant-empty-subtitle {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #6b7280;
  margin: 0 0 1rem 0;
}

.ai-assistant-suggestions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.ai-assistant-suggestions-extra {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.ai-assistant-suggestion-btn {
  width: 100%;
  text-align: left;
  padding: 0.5rem 1rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ai-assistant-suggestion-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.ai-assistant-show-more-btn {
  width: 100%;
  text-align: center;
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  font-size: 0.813rem;
  line-height: 1.25rem;
  color: #6b7280;
  cursor: pointer;
  transition: color 0.2s ease;
}

.ai-assistant-show-more-btn:hover {
  color: #a855f7;
}

/* Dark mode - Empty State */
html.dark .ai-assistant-empty-icon {
  background: rgba(168, 85, 247, 0.2);
}

html.dark .ai-assistant-sparkles-large {
  stroke: #a78bfa;
}

html.dark .ai-assistant-empty-title {
  color: #f9fafb;
}

html.dark .ai-assistant-empty-subtitle {
  color: #9ca3af;
}

html.dark .ai-assistant-suggestion-btn {
  background: #1f2937;
  border-color: #374151;
  color: #d1d5db;
}

html.dark .ai-assistant-suggestion-btn:hover {
  background: #374151;
  border-color: #4b5563;
}

html.dark .ai-assistant-show-more-btn {
  color: #9ca3af;
}

html.dark .ai-assistant-show-more-btn:hover {
  color: #a78bfa;
}

/* Populated State (with messages) */
.ai-assistant-message-wrapper {
  display: flex;
  min-width: 0;
}

/* User messages */
.ai-assistant-message-user {
  justify-content: flex-end;
}

.ai-assistant-message-user .ai-assistant-message-bubble {
  max-width: 85%;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  background: #a855f7;
  overflow-wrap: break-word;
  min-width: 0;
}

.ai-assistant-message-user .ai-assistant-message-text {
  color: #ffffff;
  white-space: pre-wrap;
}

/* Assistant messages */
.ai-assistant-message-assistant {
  justify-content: flex-start;
}

.ai-assistant-message-assistant .ai-assistant-message-bubble {
  max-width: 85%;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  overflow-wrap: break-word;
  min-width: 0;
}

.ai-assistant-message-assistant .ai-assistant-message-text {
  color: #111827;
}

/* Common text for messages */
.ai-assistant-message-text {
  font-size: 0.875rem;
  line-height: 1.5rem;
  margin: 0;
}

/* Markdown elements inside messages */
.ai-assistant-message-text p {
  margin: 0.5rem 0;
}

.ai-assistant-message-text p:first-child {
  margin-top: 0;
}

.ai-assistant-message-text p:last-child {
  margin-bottom: 0;
}

.ai-assistant-message-text strong {
  font-weight: 600;
}

.ai-assistant-message-text em {
  font-style: italic;
}

.ai-assistant-message-text code {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-family: ui-monospace, monospace;
  font-size: 0.813rem;
}

.ai-assistant-message-text pre {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.75rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 0.5rem 0;
}

.ai-assistant-message-text pre code {
  background: none;
  padding: 0;
}

.ai-assistant-message-text ul,
.ai-assistant-message-text ol {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.ai-assistant-message-text li {
  margin: 0.25rem 0;
}

.ai-assistant-message-text a {
  color: #a855f7;
  text-decoration: underline;
}

.ai-assistant-message-text a:hover {
  color: #9333ea;
}

html.dark .ai-assistant-message-text code {
  background: rgba(255, 255, 255, 0.1);
}

html.dark .ai-assistant-message-text pre {
  background: rgba(255, 255, 255, 0.05);
}

html.dark .ai-assistant-message-text a {
  color: #a78bfa;
}

html.dark .ai-assistant-message-text a:hover {
  color: #c4b5fd;
}

/* Dark mode - Populated State (with messages) */
html.dark .ai-assistant-message-assistant .ai-assistant-message-bubble {
  background: #1f2937;
  border-color: #374151;
}

html.dark .ai-assistant-message-assistant .ai-assistant-message-text {
  color: #e5e7eb;
}

html.dark .ai-assistant-message-assistant .ai-assistant-message-text * {
  color: inherit;
}

/* Error messages */
.ai-assistant-message-error .ai-assistant-message-bubble {
  background: #fef2f2;
  border-color: #fecaca;
}

.ai-assistant-message-error .ai-assistant-message-text {
  color: #991b1b;
}

html.dark .ai-assistant-message-error .ai-assistant-message-bubble {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

html.dark .ai-assistant-message-error .ai-assistant-message-text {
  color: #fca5a5;
}

/* Summary Messages */
.ai-assistant-message-summary {
  justify-content: center;
}

.ai-assistant-summary-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.5rem;
  width: 100%;
}

.ai-assistant-summary-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto;
  padding: 0.375rem 0.75rem;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  font-size: 0.75rem;
  color: #6b7280;
}

html.dark .ai-assistant-summary-label {
  background: #374151;
  border-color: #4b5563;
  color: #9ca3af;
}

.ai-assistant-summary-icon {
  flex-shrink: 0;
  opacity: 0.7;
}

.ai-assistant-summary-label-text {
  white-space: nowrap;
}

.ai-assistant-summary-content {
  max-width: 85%;
  padding: 0.75rem 1rem;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: 0.75rem;
  font-size: 0.813rem;
  color: #6b7280;
  font-style: italic;
  overflow-wrap: break-word;
  min-width: 0;
}

/* Summary Content - Markdown Elements */
.ai-assistant-summary-content p {
  margin: 0.5rem 0;
  line-height: 1.5;
}

.ai-assistant-summary-content p:first-child {
  margin-top: 0;
}

.ai-assistant-summary-content p:last-child {
  margin-bottom: 0;
}

.ai-assistant-summary-content strong {
  font-weight: 600;
}

.ai-assistant-summary-content em {
  font-style: italic;
}

.ai-assistant-summary-content code {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
}

.ai-assistant-summary-content pre {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.75rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 0.5rem 0;
}

.ai-assistant-summary-content pre code {
  background: none;
  padding: 0;
}

.ai-assistant-summary-content ul,
.ai-assistant-summary-content ol {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.ai-assistant-summary-content li {
  margin: 0.25rem 0;
}

.ai-assistant-summary-content a {
  color: #7c3aed;
  text-decoration: underline;
}

.ai-assistant-summary-content a:hover {
  color: #6d28d9;
}

html.dark .ai-assistant-summary-content {
  background: #1f2937;
  border-color: #4b5563;
}

html.dark .ai-assistant-summary-content,
html.dark .ai-assistant-summary-content h1,
html.dark .ai-assistant-summary-content h2,
html.dark .ai-assistant-summary-content h3,
html.dark .ai-assistant-summary-content h4,
html.dark .ai-assistant-summary-content h5,
html.dark .ai-assistant-summary-content h6,
html.dark .ai-assistant-summary-content p,
html.dark .ai-assistant-summary-content strong,
html.dark .ai-assistant-summary-content em,
html.dark .ai-assistant-summary-content li {
  color: #9ca3af;
}

html.dark .ai-assistant-summary-content code {
  background: rgba(255, 255, 255, 0.1);
}

html.dark .ai-assistant-summary-content pre {
  background: rgba(255, 255, 255, 0.05);
}

html.dark .ai-assistant-summary-content a {
  color: #a78bfa;
}

html.dark .ai-assistant-summary-content a:hover {
  color: #c4b5fd;
}

/* Wave loader animation */
.ai-assistant-wave-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 1.5rem;
  padding: 0.5rem 0;
}

.ai-assistant-wave-bar {
  width: 0.25rem;
  height: 1rem;
  background: #a855f7;
  border-radius: 0.125rem;
  animation: ai-assistant-wave 1.2s ease-in-out infinite;
}

.ai-assistant-wave-bar:nth-child(1) {
  animation-delay: 0s;
}

.ai-assistant-wave-bar:nth-child(2) {
  animation-delay: 0.2s;
}

.ai-assistant-wave-bar:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes ai-assistant-wave {
  0%,
  100% {
    transform: scaleY(0.5);
  }
  50% {
    transform: scaleY(1);
  }
}

html.dark .ai-assistant-wave-bar {
  background: #a78bfa;
}

/* Scroll to bottom button */
.ai-assistant-scroll-bottom-btn {
  position: sticky;
  bottom: 1rem;
  align-self: flex-end;
  flex-shrink: 0;
  margin-right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  cursor: pointer;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
  z-index: 10;
}

.ai-assistant-scroll-bottom-btn:hover {
  background: #f9fafb;
  transform: translateY(-2px);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.ai-assistant-scroll-icon {
  color: #6b7280;
}

.ai-assistant-scroll-bottom-btn:hover .ai-assistant-scroll-icon {
  color: #a855f7;
}

html.dark .ai-assistant-scroll-bottom-btn {
  background: #1f2937;
  border-color: #374151;
}

html.dark .ai-assistant-scroll-bottom-btn:hover {
  background: #374151;
}

html.dark .ai-assistant-scroll-icon {
  color: #9ca3af;
}

html.dark .ai-assistant-scroll-bottom-btn:hover .ai-assistant-scroll-icon {
  color: #a78bfa;
}

/* Chat Input */
.ai-assistant-input-container {
  padding: 1.5rem;
  border-top: 1px solid #e5e7eb;
  margin-top: auto;
}

.ai-assistant-input-wrapper {
  display: flex;
  gap: 0.5rem;
}

.ai-assistant-input {
  flex: 1;
  padding: 0.75rem 1rem;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #111827;
  transition: all 0.2s ease;
  resize: none;
  min-height: 2.75rem;
  max-height: 9rem;
  overflow-y: auto;
  font-family: inherit;
}

.ai-assistant-input:focus {
  outline: none;
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

.ai-assistant-input::placeholder {
  color: #6b7280;
}

.ai-assistant-send-btn {
  padding: 0.75rem;
  background: #a855f7;
  border: none;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: background 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-assistant-send-btn:hover:not(:disabled) {
  background: #9333ea;
}

.ai-assistant-send-btn:disabled {
  background: #d1d5db;
  cursor: not-allowed;
}

.ai-assistant-send-icon {
  width: 1.25rem;
  height: 1.25rem;
  stroke: #ffffff;
}

.ai-assistant-loading-spinner {
  animation: ai-assistant-spin 1s linear infinite;
}

@keyframes ai-assistant-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Dark mode - Chat Input */
html.dark .ai-assistant-input-container {
  border-top-color: #374151;
}

html.dark .ai-assistant-input {
  background: #1f2937;
  border-color: #4b5563;
  color: #f9fafb;
}

html.dark .ai-assistant-input:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.1);
}

html.dark .ai-assistant-input::placeholder {
  color: #6b7280;
}

html.dark .ai-assistant-send-btn:disabled {
  background: #374151;
}

/* Toggle Button */
.ai-assistant-toggle-btn {
  position: absolute;
  top: 50%;
  left: calc(100% - 24rem);
  transform: translate(-50%, -50%);
  z-index: 9999;
  width: 2rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: background 0.2s ease;
}

.ai-assistant-toggle-btn:hover {
  background: #f9fafb;
}

.ai-assistant-toggle-icon {
  width: 1.25rem;
  height: 1.25rem;
  stroke: #6b7280;
  transition: all 0.2s ease;
}

.ai-assistant-toggle-btn:hover .ai-assistant-toggle-icon {
  stroke: #7c3aed;
}

/* Toggle button when expanded */
.ai-assistant-toggle-btn.ai-assistant-toggle-expanded
  .ai-assistant-toggle-icon {
  transform: rotate(180deg);
}

/* Dark mode - Toggle Button */
html.dark .ai-assistant-toggle-btn {
  background: #1f2937;
  border-color: #4b5563;
}

html.dark .ai-assistant-toggle-btn:hover {
  background: #374151;
}

html.dark .ai-assistant-toggle-icon {
  stroke: #9ca3af;
}

html.dark .ai-assistant-toggle-btn:hover .ai-assistant-toggle-icon {
  stroke: #a78bfa;
}

/* Expanded state - adjust both panels */
.card-details-container.ai-assistant-expanded .card-details-left {
  padding-right: 1rem;
}

.card-details-container.ai-assistant-expanded .card-details-right {
  width: 50%;
}

/* Move toggle button to left edge when expanded */
.card-details-container.ai-assistant-expanded .ai-assistant-toggle-btn {
  left: 50%;
}

/**
 * Verb Conjugation Modal Styles
 */

/* Overlay and Backdrop */
.verb-conjugation-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
  opacity: 0;
  animation: fadeIn 0.2s ease-out forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.verb-conjugation-container {
  position: relative;
  width: 100%;
  max-width: 896px;
  height: 85vh;
  max-height: 85vh;
  margin: 16px;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  border: 1px solid #e5e7eb;
  animation: slideUp 0.3s ease-out;
  display: flex;
  flex-direction: column;
}

html.dark .verb-conjugation-container {
  background: #1f2937;
  border-color: #374151;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Modal */
.verb-conjugation-modal {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* Header */
.verb-conjugation-header {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 24px 32px;
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
}

html.dark .verb-conjugation-header {
  border-bottom-color: #374151;
  background: #1f2937;
}

.verb-conjugation-header-content {
  margin-right: 80px;
}

/* Title Row */
.verb-conjugation-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.verb-conjugation-word {
  font-size: 18px;
  font-weight: 400;
  color: #111827;
  margin: 0;
}

html.dark .verb-conjugation-word {
  color: #f3f4f6;
}

/* Regularity Badge */
.verb-conjugation-regularity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 500;
  text-transform: lowercase;
  white-space: nowrap;
  border: 0;
  transition:
    color 0.2s,
    box-shadow 0.2s;
}

.verb-conjugation-regularity-badge.regelmäßig,
.verb-conjugation-regularity-badge.regular {
  background: #dbeafe;
  color: #1e40af;
}

html.dark .verb-conjugation-regularity-badge.regelmäßig,
html.dark .verb-conjugation-regularity-badge.regular {
  background: rgba(30, 64, 175, 0.3);
  color: #93c5fd;
}

.verb-conjugation-regularity-badge.unregelmäßig,
.verb-conjugation-regularity-badge.irregular {
  background: rgba(254, 215, 170, 0.7);
  color: #9a3412;
}

html.dark .verb-conjugation-regularity-badge.unregelmäßig,
html.dark .verb-conjugation-regularity-badge.irregular {
  background: rgba(154, 52, 18, 0.3);
  color: #fdba74;
}

/* Principal Parts */
.verb-conjugation-principal-parts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}

.verb-conjugation-principal-part {
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid;
}

.verb-conjugation-principal-part:nth-child(1) {
  background: rgba(219, 234, 254, 0.8);
  border-color: rgba(191, 219, 254, 0.5);
}

html.dark .verb-conjugation-principal-part:nth-child(1) {
  background: rgba(30, 58, 138, 0.25);
  border-color: rgba(30, 64, 175, 0.3);
}

.verb-conjugation-principal-part:nth-child(2) {
  background: rgba(243, 232, 255, 0.8);
  border-color: rgba(233, 213, 255, 0.5);
}

html.dark .verb-conjugation-principal-part:nth-child(2) {
  background: rgba(88, 28, 135, 0.25);
  border-color: rgba(107, 33, 168, 0.3);
}

.verb-conjugation-principal-part:nth-child(3) {
  background: rgba(252, 231, 243, 0.8);
  border-color: rgba(251, 207, 232, 0.5);
}

html.dark .verb-conjugation-principal-part:nth-child(3) {
  background: rgba(157, 23, 77, 0.25);
  border-color: rgba(190, 24, 93, 0.3);
}

.verb-conjugation-principal-part-label {
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  margin-bottom: 4px;
}

.verb-conjugation-principal-part:nth-child(1)
  .verb-conjugation-principal-part-label {
  color: #1d4ed8;
}

html.dark
  .verb-conjugation-principal-part:nth-child(1)
  .verb-conjugation-principal-part-label {
  color: #60a5fa;
}

.verb-conjugation-principal-part:nth-child(2)
  .verb-conjugation-principal-part-label {
  color: #7e22ce;
}

html.dark
  .verb-conjugation-principal-part:nth-child(2)
  .verb-conjugation-principal-part-label {
  color: #c084fc;
}

.verb-conjugation-principal-part:nth-child(3)
  .verb-conjugation-principal-part-label {
  color: #be185d;
}

html.dark
  .verb-conjugation-principal-part:nth-child(3)
  .verb-conjugation-principal-part-label {
  color: #f9a8d4;
}

.verb-conjugation-principal-part-value {
  font-size: 14px;
  font-weight: 400;
}

/* Input styles for principal parts in edit mode */
input.verb-conjugation-principal-part-value {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 4px 12px;
  border: 1px solid #d8b4fe;
  border-radius: 8px;
  background: #ffffff;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

input.verb-conjugation-principal-part-value:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

html.dark input.verb-conjugation-principal-part-value {
  background: #1f2937;
  border-color: #4b5563;
}

html.dark input.verb-conjugation-principal-part-value:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.1);
}

.verb-conjugation-principal-part:nth-child(1)
  .verb-conjugation-principal-part-value {
  color: #1e3a8a;
}

html.dark
  .verb-conjugation-principal-part:nth-child(1)
  .verb-conjugation-principal-part-value {
  color: #bfdbfe;
}

/* Präsens input border colors (blue) */
.verb-conjugation-principal-part:nth-child(1)
  input.verb-conjugation-principal-part-value {
  border-color: #93c5fd;
}

.verb-conjugation-principal-part:nth-child(1)
  input.verb-conjugation-principal-part-value:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

html.dark
  .verb-conjugation-principal-part:nth-child(1)
  input.verb-conjugation-principal-part-value {
  border-color: #1d4ed8;
}

html.dark
  .verb-conjugation-principal-part:nth-child(1)
  input.verb-conjugation-principal-part-value:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.verb-conjugation-principal-part:nth-child(2)
  .verb-conjugation-principal-part-value {
  color: #581c87;
}

html.dark
  .verb-conjugation-principal-part:nth-child(2)
  .verb-conjugation-principal-part-value {
  color: #e9d5ff;
}

/* Präteritum input border colors (purple) */
.verb-conjugation-principal-part:nth-child(2)
  input.verb-conjugation-principal-part-value {
  border-color: #d8b4fe;
}

.verb-conjugation-principal-part:nth-child(2)
  input.verb-conjugation-principal-part-value:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

html.dark
  .verb-conjugation-principal-part:nth-child(2)
  input.verb-conjugation-principal-part-value {
  border-color: #7e22ce;
}

html.dark
  .verb-conjugation-principal-part:nth-child(2)
  input.verb-conjugation-principal-part-value:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.1);
}

.verb-conjugation-principal-part:nth-child(3)
  .verb-conjugation-principal-part-value {
  color: #831843;
}

html.dark
  .verb-conjugation-principal-part:nth-child(3)
  .verb-conjugation-principal-part-value {
  color: #fbcfe8;
}

/* Partizip II input border colors (pink) */
.verb-conjugation-principal-part:nth-child(3)
  input.verb-conjugation-principal-part-value {
  border-color: #f9a8d4;
}

.verb-conjugation-principal-part:nth-child(3)
  input.verb-conjugation-principal-part-value:focus {
  border-color: #ec4899;
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.1);
}

html.dark
  .verb-conjugation-principal-part:nth-child(3)
  input.verb-conjugation-principal-part-value {
  border-color: #be185d;
}

html.dark
  .verb-conjugation-principal-part:nth-child(3)
  input.verb-conjugation-principal-part-value:focus {
  border-color: #f472b6;
  box-shadow: 0 0 0 3px rgba(244, 114, 182, 0.1);
}

/* Action Buttons */
.verb-conjugation-actions {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
}

.verb-conjugation-edit-btn,
.verb-conjugation-close-btn {
  padding: 8px;
  border-radius: 9999px;
  border: none;
  background: #f3f4f6;
  color: #374151;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 0.2s,
    color 0.2s;
}

html.dark .verb-conjugation-edit-btn,
html.dark .verb-conjugation-close-btn {
  background: #374151;
  color: #d1d5db;
}

.verb-conjugation-edit-btn:hover,
.verb-conjugation-close-btn:hover {
  background: #e5e7eb;
}

html.dark .verb-conjugation-edit-btn:hover,
html.dark .verb-conjugation-close-btn:hover {
  background: #4b5563;
}

.verb-conjugation-edit-icon,
.verb-conjugation-close-icon {
  width: 20px;
  height: 20px;
}

/* Edit mode buttons */
.verb-conjugation-ai-btn {
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  background-color: #7c3aed;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.75rem;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition:
    background-color 0.2s ease,
    color 0.2s ease;
  border: none;
  cursor: pointer;
}

.verb-conjugation-ai-btn:hover {
  background-color: #6d28d9;
}

.verb-conjugation-ai-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.verb-conjugation-ai-btn:disabled:hover {
  background-color: #7c3aed;
}

.verb-conjugation-ai-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.verb-conjugation-ai-spinner {
  width: 0.875rem;
  height: 0.875rem;
  animation: verb-conjugation-spin 1s linear infinite;
}

@keyframes verb-conjugation-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.verb-conjugation-ai-text {
  font-size: 0.75rem;
  font-weight: 500;
}

html.dark .verb-conjugation-ai-btn {
  background-color: #6d28d9;
  color: #f3e8ff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

html.dark .verb-conjugation-ai-btn:hover {
  background-color: #5b21b6;
}

html.dark .verb-conjugation-ai-icon {
  stroke: #f3e8ff;
}

.verb-conjugation-cancel-btn {
  padding: 8px;
  border-radius: 9999px;
  border: none;
  background: #f3f4f6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.verb-conjugation-cancel-btn:hover {
  background: #e5e7eb;
}

html.dark .verb-conjugation-cancel-btn {
  background: #374151;
}

html.dark .verb-conjugation-cancel-btn:hover {
  background: #4b5563;
}

.verb-conjugation-cancel-icon {
  width: 20px;
  height: 20px;
  stroke: #374151;
}

html.dark .verb-conjugation-cancel-icon {
  stroke: #d1d5db;
}

/* Save button with purple background */
.verb-conjugation-save-btn {
  padding: 8px;
  border-radius: 9999px;
  border: none;
  background: #9333ea;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.verb-conjugation-save-btn:hover {
  background: #7e22ce;
}

.verb-conjugation-save-icon {
  width: 20px;
  height: 20px;
  stroke: #ffffff;
}

/* Body */
.verb-conjugation-body {
  flex: 1;
  overflow-y: auto;
  padding: 24px 32px;
}

/* Conjugation Grid */
.verb-conjugation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* Tense Box */
.verb-conjugation-tense-box {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
}

html.dark .verb-conjugation-tense-box {
  background: rgba(17, 24, 39, 0.5);
  border-color: #374151;
}

.verb-conjugation-tense-title {
  font-size: 16px;
  font-weight: 600;
  color: #7c3aed;
  margin: 0 0 16px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid #e5e7eb;
}

html.dark .verb-conjugation-tense-title {
  color: #a78bfa;
  border-bottom-color: #374151;
}

/* Conjugation Rows */
.verb-conjugation-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.verb-conjugation-row {
  display: flex;
  align-items: center;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}

html.dark .verb-conjugation-row {
  background: transparent;
  border: none;
}

.verb-conjugation-pronoun {
  font-size: 14px;
  font-weight: 400;
  color: #6b7280;
  width: 96px;
  min-width: 96px;
}

html.dark .verb-conjugation-pronoun {
  color: #9ca3af;
}

.verb-conjugation-form {
  font-size: 14px;
  font-weight: 400;
  color: #111827;
  flex: 1;
  text-align: left;
}

html.dark .verb-conjugation-form {
  color: #f3f4f6;
}

/* Input styles for edit mode */
input.verb-conjugation-form {
  display: flex;
  width: 100%;
  min-width: 0;
  height: 32px;
  padding: 4px 12px;
  border: 1px solid #d8b4fe;
  border-radius: 6px;
  background: #ffffff;
  outline: none;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

input.verb-conjugation-form:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

html.dark input.verb-conjugation-form {
  background: #1f2937;
  border-color: #4b5563;
  color: #f3f4f6;
}

html.dark input.verb-conjugation-form:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
  .verb-conjugation-overlay {
    padding: 12px;
  }

  .verb-conjugation-container {
    max-height: 95vh;
  }

  .verb-conjugation-header {
    padding: 20px;
  }

  .verb-conjugation-header-content {
    margin-right: 60px;
  }

  .verb-conjugation-word {
    font-size: 24px;
  }

  .verb-conjugation-principal-parts {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .verb-conjugation-actions {
    top: 20px;
    right: 20px;
    gap: 6px;
  }

  .verb-conjugation-edit-btn,
  .verb-conjugation-close-btn {
    width: 36px;
    height: 36px;
  }

  .verb-conjugation-body {
    padding: 20px;
  }

  .verb-conjugation-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .verb-conjugation-tense-box {
    padding: 14px;
  }

  .verb-conjugation-pronoun {
    min-width: 60px;
    font-size: 13px;
  }

  .verb-conjugation-form {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .verb-conjugation-overlay {
    padding: 8px;
  }

  .verb-conjugation-header {
    padding: 16px;
  }

  .verb-conjugation-word {
    font-size: 20px;
  }

  .verb-conjugation-regularity-badge {
    font-size: 12px;
    padding: 3px 8px;
  }

  .verb-conjugation-body {
    padding: 16px;
  }

  .verb-conjugation-grid {
    gap: 12px;
  }

  .verb-conjugation-tense-box {
    padding: 12px;
  }

  .verb-conjugation-row {
    padding: 6px 10px;
  }
}

.ui-search-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
}

.ui-search-modal-content {
  background: #ffffff;
  border-radius: 1rem;
  width: 100%;
  max-width: 32rem;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.ui-search-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.ui-search-modal-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.ui-search-modal-title-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #6b7280;
}

.ui-search-modal-close {
  background: none;
  border: none;
  padding: 0.5rem;
  cursor: pointer;
  color: #9ca3af;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    color 0.15s,
    background-color 0.15s;
}

.ui-search-modal-close:hover {
  color: #6b7280;
  background: #f3f4f6;
}

.ui-search-modal-close svg {
  width: 1.25rem;
  height: 1.25rem;
}

.ui-search-modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  flex: 1;
}

.ui-search-modal-search-term {
  margin-bottom: 1.5rem;
}

.ui-search-modal-search-label {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0 0 0.25rem 0;
}

.ui-search-modal-search-value {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.ui-search-modal-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 0;
  gap: 1rem;
}

.ui-search-modal-loading > p {
  color: #6b7280;
}

.ui-search-modal-spinner {
  width: 2rem;
  height: 2rem;
  border: 3px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: ui-search-modal-spin 0.8s linear infinite;
}

@keyframes ui-search-modal-spin {
  to {
    transform: rotate(360deg);
  }
}

.ui-search-modal-results-count {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0 0 1rem 0;
}

.ui-search-modal-collection {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  overflow: hidden;
}

.ui-search-modal-collection:last-child {
  margin-bottom: 0;
}

.ui-search-modal-collection-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-bottom: 1px solid #e5e7eb;
  background: #ffffff;
}

.ui-search-modal-collection-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ui-search-modal-collection-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.ui-search-modal-collection-icon-blue {
  background: #dbeafe;
  color: #2563eb;
}

.ui-search-modal-collection-icon-green {
  background: #dcfce7;
  color: #16a34a;
}

.ui-search-modal-collection-icon-purple {
  background: #f3e8ff;
  color: #9333ea;
}

.ui-search-modal-collection-icon-orange {
  background: #ffedd5;
  color: #ea580c;
}

.ui-search-modal-collection-icon-pink {
  background: #fce7f3;
  color: #db2777;
}

.ui-search-modal-collection-icon-cyan {
  background: #cffafe;
  color: #0891b2;
}

.ui-search-modal-collection-info {
  flex: 1;
  min-width: 0;
}

.ui-search-modal-collection-name {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
}

.ui-search-modal-collection-count {
  font-size: 0.8125rem;
  color: #6b7280;
  margin: 0.125rem 0 0 0;
}

.ui-search-modal-groups {
  padding: 0.5rem;
}

.ui-search-modal-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.15s;
}

.ui-search-modal-group:hover {
  background: #ffffff;
}

.ui-search-modal-group-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 1;
}

.ui-search-modal-group-dot {
  width: 0.5rem;
  height: 0.5rem;
  background: #d1d5db;
  border-radius: 50%;
  flex-shrink: 0;
}

.ui-search-modal-group-name {
  font-size: 0.875rem;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
}

.ui-search-modal-group-cards {
  font-size: 0.8125rem;
  color: #9ca3af;
  flex-shrink: 0;
}

.ui-search-modal-empty {
  text-align: center;
  padding: 0 0 1rem 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.ui-search-modal-empty > p {
  color: #6b7280;
  margin: 0;
}

.ui-search-modal-ai-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #ffffff;
  border: none;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.4);
  transition:
    opacity 0.15s,
    transform 0.15s,
    box-shadow 0.15s;
}

.ui-search-modal-ai-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.5);
}

.ui-search-modal-ai-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.4);
}

html.dark .ui-search-modal-overlay {
  background: rgba(0, 0, 0, 0.7);
}

html.dark .ui-search-modal-content {
  background: #1f2937;
  border: 1px solid #374151;
}

html.dark .ui-search-modal-header {
  border-bottom-color: #374151;
}

html.dark .ui-search-modal-title {
  color: #f9fafb;
}

html.dark .ui-search-modal-title-icon {
  color: #9ca3af;
}

html.dark .ui-search-modal-close {
  color: #6b7280;
}

html.dark .ui-search-modal-close:hover {
  color: #d1d5db;
  background: #374151;
}

html.dark .ui-search-modal-search-label {
  color: #9ca3af;
}

html.dark .ui-search-modal-search-value {
  color: #f9fafb;
}

html.dark .ui-search-modal-loading > p {
  color: #9ca3af;
}

html.dark .ui-search-modal-spinner {
  border-color: #374151;
  border-top-color: #3b82f6;
}

html.dark .ui-search-modal-results-count {
  color: #9ca3af;
}

html.dark .ui-search-modal-collection {
  background: #111827;
  border-color: #374151;
}

html.dark .ui-search-modal-collection-header {
  background: #1f2937;
  border-bottom-color: #374151;
}

html.dark .ui-search-modal-collection-icon-blue {
  background: rgba(59, 130, 246, 0.2);
  color: #60a5fa;
}

html.dark .ui-search-modal-collection-icon-green {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
}

html.dark .ui-search-modal-collection-icon-purple {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
}

html.dark .ui-search-modal-collection-icon-orange {
  background: rgba(249, 115, 22, 0.2);
  color: #fb923c;
}

html.dark .ui-search-modal-collection-icon-pink {
  background: rgba(236, 72, 153, 0.2);
  color: #f472b6;
}

html.dark .ui-search-modal-collection-icon-cyan {
  background: rgba(6, 182, 212, 0.2);
  color: #22d3ee;
}

html.dark .ui-search-modal-collection-name {
  color: #f9fafb;
}

html.dark .ui-search-modal-collection-count {
  color: #9ca3af;
}

html.dark .ui-search-modal-group:hover {
  background: #1f2937;
}

html.dark .ui-search-modal-group-dot {
  background: #4b5563;
}

html.dark .ui-search-modal-group-name {
  color: #d1d5db;
}

html.dark .ui-search-modal-group-cards {
  color: #6b7280;
}

html.dark .ui-search-modal-empty > p {
  color: #9ca3af;
}

html.dark .ui-search-modal-ai-btn {
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3);
}

html.dark .ui-search-modal-ai-btn:hover {
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
}

@media (max-width: 640px) {
  .ui-search-modal-overlay {
    padding: 0.5rem;
    align-items: flex-end;
  }

  .ui-search-modal-content {
    max-height: 90vh;
    border-radius: 1rem 1rem 0 0;
  }

  .ui-search-modal-header {
    padding: 1rem;
  }

  .ui-search-modal-body {
    padding: 1rem;
  }
}

/* ── User deletion confirmation modal ── */

.ui-userdeletion-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s,
    visibility 0.25s;
}

.ui-userdeletion-modal-overlay.ui-userdeletion-modal-show {
  opacity: 1;
  visibility: visible;
}

.ui-userdeletion-modal-content {
  background-color: #ffffff;
  border-radius: 1rem;
  max-width: 26rem;
  width: 90%;
  padding: 2rem 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(220, 38, 38, 0.12);
}

html.dark .ui-userdeletion-modal-content {
  background-color: #1f2937;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(239, 68, 68, 0.15);
}

.ui-userdeletion-modal-icon-wrap {
  margin-bottom: 0.25rem;
}

.ui-userdeletion-modal-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  color: #dc2626;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
}

html.dark .ui-userdeletion-modal-icon {
  background: linear-gradient(
    135deg,
    rgba(127, 29, 29, 0.5),
    rgba(153, 27, 27, 0.4)
  );
  color: #f87171;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2);
}

.ui-userdeletion-modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
  line-height: 1.3;
}

html.dark .ui-userdeletion-modal-title {
  color: #f9fafb;
}

.ui-userdeletion-modal-description {
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
  font-size: 0.9375rem;
}

html.dark .ui-userdeletion-modal-description {
  color: #9ca3af;
}

.ui-userdeletion-modal-warnings {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
  margin: 0.25rem 0;
}

.ui-userdeletion-modal-warning {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #991b1b;
  text-align: left;
}

html.dark .ui-userdeletion-modal-warning {
  background-color: rgba(127, 29, 29, 0.2);
  border-color: rgba(239, 68, 68, 0.25);
  color: #fca5a5;
}

.ui-userdeletion-modal-warning svg {
  color: #ef4444;
  flex-shrink: 0;
}

html.dark .ui-userdeletion-modal-warning svg {
  color: #f87171;
}

.ui-userdeletion-modal-confirm {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.8125rem 1.5rem;
  margin-top: 0.25rem;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: #ffffff;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  border-radius: 0.625rem;
  cursor: pointer;
  transition:
    opacity 0.2s,
    transform 0.15s;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.4);
}

.ui-userdeletion-modal-confirm:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}

.ui-userdeletion-modal-confirm:active {
  transform: translateY(0);
}

html.dark .ui-userdeletion-modal-confirm {
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
}

.ui-userdeletion-modal-cancel {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: color 0.2s;
}

.ui-userdeletion-modal-cancel:hover {
  color: #6b7280;
}

html.dark .ui-userdeletion-modal-cancel {
  color: #6b7280;
}

html.dark .ui-userdeletion-modal-cancel:hover {
  color: #9ca3af;
}

/* ── Onboarding warning modal ── */

.ui-onboarding-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s,
    visibility 0.25s;
}

.ui-onboarding-modal-overlay.ui-onboarding-modal-show {
  opacity: 1;
  visibility: visible;
}

.ui-onboarding-modal-content {
  background-color: #ffffff;
  border-radius: 1rem;
  max-width: 26rem;
  width: 90%;
  padding: 2rem 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(0, 0, 0, 0.05);
}

html.dark .ui-onboarding-modal-content {
  background-color: #1f2937;
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

.ui-onboarding-modal-icon-wrap {
  margin-bottom: 0.25rem;
}

.ui-onboarding-modal-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #d97706;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

html.dark .ui-onboarding-modal-icon {
  background: linear-gradient(
    135deg,
    rgba(120, 53, 15, 0.5),
    rgba(146, 64, 14, 0.4)
  );
  color: #fbbf24;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

.ui-onboarding-modal-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
  line-height: 1.3;
}

html.dark .ui-onboarding-modal-title {
  color: #f9fafb;
}

.ui-onboarding-modal-description {
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
  font-size: 0.9375rem;
}

html.dark .ui-onboarding-modal-description {
  color: #9ca3af;
}

.ui-onboarding-modal-steps {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0.25rem 0;
}

.ui-onboarding-modal-step {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 2rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #374151;
}

html.dark .ui-onboarding-modal-step {
  background-color: #374151;
  border-color: #4b5563;
  color: #d1d5db;
}

.ui-onboarding-modal-step svg {
  color: #f59e0b;
  flex-shrink: 0;
}

html.dark .ui-onboarding-modal-step svg {
  color: #fbbf24;
}

.ui-onboarding-modal-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.8125rem 1.5rem;
  margin-top: 0.25rem;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: #ffffff;
  font-weight: 600;
  font-size: 1rem;
  border-radius: 0.625rem;
  text-decoration: none;
  transition:
    opacity 0.2s,
    transform 0.15s;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}

.ui-onboarding-modal-cta:hover {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.92;
  transform: translateY(-1px);
}

.ui-onboarding-modal-cta:active {
  transform: translateY(0);
}

html.dark .ui-onboarding-modal-cta {
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.2);
}

.ui-onboarding-modal-dismiss {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  transition: color 0.2s;
}

.ui-onboarding-modal-dismiss:hover {
  color: #6b7280;
}

html.dark .ui-onboarding-modal-dismiss {
  color: #6b7280;
}

html.dark .ui-onboarding-modal-dismiss:hover {
  color: #9ca3af;
}

.ui-inactive-sub-banner {
  position: fixed;
  top: 0;
  width: 100%;
  background: #fffbeb;
  border-bottom: 1px solid #fcd34d;
  padding: 10px 20px;
  box-sizing: border-box;
  z-index: 1100;
}

html.dark .ui-inactive-sub-banner {
  background: #1c1a0f;
  border-bottom-color: #92400e;
}

.ui-inactive-sub-banner-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  /* max-width: 1200px; */
  margin: 0 auto;
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
}

.ui-inactive-sub-banner-icon {
  flex-shrink: 0;
  font-size: 15px;
}

.ui-inactive-sub-banner-msg {
  flex: 1;
  color: #92400e;
  font-weight: 400;
}

html.dark .ui-inactive-sub-banner-msg {
  color: #fcd34d;
}

.ui-inactive-sub-banner-cta {
  flex-shrink: 0;
  background: transparent;
  color: #92400e;
  text-decoration: none;
  padding: 4px 13px;
  border-radius: 6px;
  border: 1.5px solid #d97706;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.ui-inactive-sub-banner-cta:hover {
  background: #d97706;
  color: #fff;
  text-decoration: none;
}

html.dark .ui-inactive-sub-banner-cta {
  color: #fcd34d;
  border-color: #92400e;
}

html.dark .ui-inactive-sub-banner-cta:hover {
  background: #92400e;
  color: #fff;
}

@media (max-width: 640px) {
  .ui-inactive-sub-banner-inner {
    flex-wrap: wrap;
    gap: 8px;
  }

  .ui-inactive-sub-banner-cta {
    width: 100%;
    text-align: center;
    padding: 7px 14px;
  }
}

.ui-learn-navbar {
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 10;
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  padding: 1rem 2rem;
}

html.dark .ui-learn-navbar {
  background-color: #1f2937;
  border-bottom-color: #374151;
}

.ui-learn-navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ui-learn-navbar-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ui-learn-navbar-back-btn {
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  color: #374151;
}

.ui-learn-navbar-back-btn:hover {
  background-color: #f3f4f6;
}

html.dark .ui-learn-navbar-back-btn {
  color: #d1d5db;
}

html.dark .ui-learn-navbar-back-btn:hover {
  background-color: #374151;
}

.ui-learn-navbar-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.ui-learn-navbar-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ui-learn-navbar-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ui-learn-navbar-title {
  font-size: 1.5rem;
  line-height: 2rem;
  color: #111827;
  margin: 0;
  font-weight: 400;
}

html.dark .ui-learn-navbar-title {
  color: #f9fafb;
}

.ui-learn-navbar-subtitle {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #6b7280;
  margin: 0;
}

html.dark .ui-learn-navbar-subtitle {
  color: #9ca3af;
}

.ui-learn-navbar-info-btn {
  padding: 0.375rem;
  border-radius: 9999px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.ui-learn-navbar-info-btn:hover {
  background-color: #f3f4f6;
}

html.dark .ui-learn-navbar-info-btn:hover {
  background-color: #374151;
}

.ui-learn-navbar-icon-small {
  width: 1.25rem;
  height: 1.25rem;
  color: #6b7280;
}

html.dark .ui-learn-navbar-icon-small {
  color: #9ca3af;
}

.ui-learn-navbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* AI Tools btn */

.ui-learn-navbar-aitools-toggle {
  padding: 0.5rem 1rem;
  background-color: #f3e8ff;
  color: #6b21a8;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.ui-learn-navbar-aitools-toggle:hover {
  opacity: 0.9;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.ui-learn-navbar-aitools-toggle .icon {
  width: 1rem;
  height: 1rem;
}

.ui-learn-navbar-aitools-toggle .icon.chevron.menu-open {
  transform: rotate(180deg);
}

html.dark .ui-learn-navbar-aitools-toggle {
  background-color: rgba(88, 28, 135, 0.3);
  color: #d8b4fe;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

html.dark .ui-learn-navbar-aitools-toggle:hover {
  opacity: 0.9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
}

/* variant: assistant */
.ui-learn-navbar-aitools-toggle.assistant {
  background-image: linear-gradient(to right, #7c3aed, #db2777);
  background-color: transparent;
  color: #ffffff;
}

html.dark .ui-learn-navbar-aitools-toggle.assistant {
  background-image: linear-gradient(to right, #6d28d9, #be185d);
  color: #f8fafc;
}

/* variant: quiz */

.ui-learn-navbar-aitools-toggle.quiz {
  background-image: linear-gradient(to right, #d94662, #fb923c);
  background-color: transparent;
  color: #ffffff;
}

html.dark .ui-learn-navbar-aitools-toggle.quiz {
  background-image: linear-gradient(to right, #c63658, #ea7c2f);
  color: #f1f5f9;
}

/* AI Tools menu */

.ui-learn-navbar-aitools-menu {
  position: absolute;
  top: 4.5rem;
  right: 2rem;
  min-width: 18rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.25rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  z-index: 50;
}

html.dark .ui-learn-navbar-aitools-menu {
  background-color: #1f2937;
  border-color: #374151;
}

.ui-learn-navbar-aitools-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 0.375rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s;
  color: #111827;
}

.ui-learn-navbar-aitools-item:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.ui-learn-navbar-aitools-item:hover {
  background-color: #f3f4f6;
}

html.dark .ui-learn-navbar-aitools-item {
  color: #f3f4f6;
}

html.dark .ui-learn-navbar-aitools-item:hover {
  background-color: #374151;
}

.ui-learn-navbar-aitools-item svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.ui-learn-navbar-aitools-text {
  display: flex;
  flex-direction: column;
}

.ui-learn-navbar-aitools-text .title {
  font-size: 0.875rem;
  font-weight: 500;
}

.ui-learn-navbar-aitools-text .desc {
  font-size: 0.75rem;
  color: #6b7280;
}

html.dark .ui-learn-navbar-aitools-text .desc {
  color: #9ca3af;
}

.ui-learn-navbar-translation-toggle {
  padding: 0.5rem 1rem;
  background-color: #f3f4f6;
  color: #374151;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s;
}

.ui-learn-navbar-translation-toggle:hover {
  background-color: #e5e7eb;
}

html.dark .ui-learn-navbar-translation-toggle {
  background-color: #374151;
  color: #d1d5db;
}

html.dark .ui-learn-navbar-translation-toggle:hover {
  background-color: #4b5563;
}

.ui-learn-navbar-type-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #f3f4f6;
  border-radius: 0.5rem;
  padding: 0.25rem;
}

html.dark .ui-learn-navbar-type-toggle {
  background-color: #1f2937;
}

.ui-learn-navbar-type-btn {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  transition: all 0.2s;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #6b7280;
}

.ui-learn-navbar-type-btn:hover {
  color: #111827;
}

html.dark .ui-learn-navbar-type-btn {
  color: #9ca3af;
}

html.dark .ui-learn-navbar-type-btn:hover {
  color: #f3f4f6;
}

.ui-learn-navbar-type-btn-active {
  background-color: #ffffff;
  color: #111827;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

html.dark .ui-learn-navbar-type-btn-active {
  background-color: #374151;
  color: #f9fafb;
}

/* Responsive Design */

/* Tablet */
/* @media (max-width: 768px) {
} */

/* Mobile */
@media (max-width: 480px) {
  .ui-learn-navbar {
    padding: 1rem;
  }
  .ui-learn-navbar-content {
    display: none;
  }
  .ui-learn-navbar-aitools-toggle .label {
    display: none;
  }
}

.learn-topics-main {
  position: relative;
  top: 89px;
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
  background-color: #ffffff;
}

html.dark .learn-topics-main {
  background-color: #111827;
}

.learn-topics-content {
  max-width: 80rem;
  margin: 0 auto;
}

.learn-topics-header {
  margin-bottom: 2rem;
  text-align: center;
}

.learn-topics-title {
  font-size: 1.875rem;
  line-height: 2.25rem;
  color: #111827;
  margin: 0 0 0.75rem 0;
  font-weight: 400;
}

html.dark .learn-topics-title {
  color: #f9fafb;
}

.learn-topics-subtitle {
  color: #4b5563;
  margin: 0;
}

html.dark .learn-topics-subtitle {
  color: #9ca3af;
}

.learn-topics-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .learn-topics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .learn-topics-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.learn-topic-card {
  position: relative;
  overflow: hidden;
  background-color: #f9fafb;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  padding: 1.5rem;
  cursor: pointer;
  transition: all 0.3s;
}

.learn-topic-card:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

.learn-topic-card:disabled::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(0, 0, 0, 0.05),
    rgba(0, 0, 0, 0.05) 10px,
    rgba(0, 0, 0, 0.1) 10px,
    rgba(0, 0, 0, 0.1) 20px
  );
  pointer-events: none;
}

.learn-topic-card:hover {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transform: scale(1.02);
}

.learn-topic-card:active {
  transform: scale(0.95);
}

html.dark .learn-topic-card {
  background-color: #1f2937;
  border-color: #374151;
}

html.dark .learn-topic-card:disabled::after {
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.04) 10px,
    rgba(255, 255, 255, 0.08) 10px,
    rgba(255, 255, 255, 0.08) 20px
  );
}

.learn-topic-card-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s;
}

.learn-topic-card:hover .learn-topic-card-hover {
  opacity: 1;
}

.learn-topic-card-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.learn-topic-card-icon-wrapper {
  padding: 0.75rem;
  border-radius: 0.5rem;
}

.ui-topic-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.learn-topic-card-label {
  color: #111827;
  transition: color 0.2s;
  font-size: 1rem;
  font-weight: 400;
}

html.dark .learn-topic-card-label {
  color: #f9fafb;
}

/* Blue */
.learn-topic-card-blue .learn-topic-card-hover {
  background-color: rgba(219, 234, 254, 0.5);
}

html.dark .learn-topic-card-blue .learn-topic-card-hover {
  background-color: rgba(30, 58, 138, 0.5);
}

.learn-topic-icon-bg-blue {
  background-color: #dbeafe;
}

html.dark .learn-topic-icon-bg-blue {
  background-color: rgba(30, 64, 175, 0.2);
}

.learn-topic-icon-bg-blue .ui-topic-icon {
  color: #2563eb;
}

html.dark .learn-topic-icon-bg-blue .ui-topic-icon {
  color: #60a5fa;
}

/* Orange */
.learn-topic-card-orange .learn-topic-card-hover {
  background-color: rgba(254, 215, 170, 0.5);
}

html.dark .learn-topic-card-orange .learn-topic-card-hover {
  background-color: rgba(124, 45, 18, 0.5);
}

.learn-topic-icon-bg-orange {
  background-color: #fed7aa;
}

html.dark .learn-topic-icon-bg-orange {
  background-color: rgba(194, 65, 12, 0.2);
}

.learn-topic-icon-bg-orange .ui-topic-icon {
  color: #ea580c;
}

html.dark .learn-topic-icon-bg-orange .ui-topic-icon {
  color: #fb923c;
}

/* Purple */
.learn-topic-card-purple .learn-topic-card-hover {
  background-color: rgba(243, 232, 255, 0.5);
}

html.dark .learn-topic-card-purple .learn-topic-card-hover {
  background-color: rgba(88, 28, 135, 0.5);
}

.learn-topic-icon-bg-purple {
  background-color: #e9d5ff;
}

html.dark .learn-topic-icon-bg-purple {
  background-color: rgba(107, 33, 168, 0.2);
}

.learn-topic-icon-bg-purple .ui-topic-icon {
  color: #9333ea;
}

html.dark .learn-topic-icon-bg-purple .ui-topic-icon {
  color: #c084fc;
}

/* Green */
.learn-topic-card-green .learn-topic-card-hover {
  background-color: rgba(220, 252, 231, 0.5);
}

html.dark .learn-topic-card-green .learn-topic-card-hover {
  background-color: rgba(20, 83, 45, 0.5);
}

.learn-topic-icon-bg-green {
  background-color: #bbf7d0;
}

html.dark .learn-topic-icon-bg-green {
  background-color: rgba(22, 101, 52, 0.2);
}

.learn-topic-icon-bg-green .ui-topic-icon {
  color: #16a34a;
}

html.dark .learn-topic-icon-bg-green .ui-topic-icon {
  color: #4ade80;
}

/* Indigo */
.learn-topic-card-indigo .learn-topic-card-hover {
  background-color: rgba(224, 231, 255, 0.5);
}

html.dark .learn-topic-card-indigo .learn-topic-card-hover {
  background-color: rgba(49, 46, 129, 0.5);
}

.learn-topic-icon-bg-indigo {
  background-color: #e0e7ff;
}

html.dark .learn-topic-icon-bg-indigo {
  background-color: rgba(67, 56, 202, 0.2);
}

.learn-topic-icon-bg-indigo .ui-topic-icon {
  color: #4f46e5;
}

html.dark .learn-topic-icon-bg-indigo .ui-topic-icon {
  color: #a5b4fc;
}

/* Pink */
.learn-topic-card-pink .learn-topic-card-hover {
  background-color: rgba(252, 231, 243, 0.5);
}

html.dark .learn-topic-card-pink .learn-topic-card-hover {
  background-color: rgba(131, 24, 67, 0.5);
}

.learn-topic-icon-bg-pink {
  background-color: #fbcfe8;
}

html.dark .learn-topic-icon-bg-pink {
  background-color: rgba(157, 23, 77, 0.2);
}

.learn-topic-icon-bg-pink .ui-topic-icon {
  color: #db2777;
}

html.dark .learn-topic-icon-bg-pink .ui-topic-icon {
  color: #f9a8d4;
}

/* Gray */
.learn-topic-card-gray .learn-topic-card-hover {
  background-color: rgba(249, 250, 251, 0.5);
}

html.dark .learn-topic-card-gray .learn-topic-card-hover {
  background-color: rgba(55, 65, 81, 0.5);
}

.learn-topic-icon-bg-gray {
  background-color: #f3f4f6;
}

html.dark .learn-topic-icon-bg-gray {
  background-color: rgba(55, 65, 81, 0.2);
}

.learn-topic-icon-bg-gray .ui-topic-icon {
  color: #4b5563;
}

html.dark .learn-topic-icon-bg-gray .ui-topic-icon {
  color: #9ca3af;
}

/* Red */
.learn-topic-card-red .learn-topic-card-hover {
  background-color: rgba(254, 226, 226, 0.5);
}

html.dark .learn-topic-card-red .learn-topic-card-hover {
  background-color: rgba(127, 29, 29, 0.5);
}

.learn-topic-icon-bg-red {
  background-color: #fecaca;
}

html.dark .learn-topic-icon-bg-red {
  background-color: rgba(153, 27, 27, 0.2);
}

.learn-topic-icon-bg-red .ui-topic-icon {
  color: #dc2626;
}

html.dark .learn-topic-icon-bg-red .ui-topic-icon {
  color: #f87171;
}

/* Violet */
.learn-topic-card-violet .learn-topic-card-hover {
  background-color: rgba(237, 233, 254, 0.5);
}

html.dark .learn-topic-card-violet .learn-topic-card-hover {
  background-color: rgba(76, 29, 149, 0.5);
}

.learn-topic-icon-bg-violet {
  background-color: #ddd6fe;
}

html.dark .learn-topic-icon-bg-violet {
  background-color: rgba(109, 40, 217, 0.2);
}

.learn-topic-icon-bg-violet .ui-topic-icon {
  color: #7c3aed;
}

html.dark .learn-topic-icon-bg-violet .ui-topic-icon {
  color: #c4b5fd;
}

/* Custom Topic Card */
.learn-topic-custom-card {
  background-color: #ffffff;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  grid-column: span 1;
}

html.dark .learn-topic-custom-card {
  background-color: #1f2937;
  border-color: #374151;
}

@media (min-width: 768px) {
  .learn-topic-custom-card {
    grid-column: span 2;
  }
}

.learn-topic-custom-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.learn-topic-custom-icon-wrapper {
  padding: 0.75rem;
  border-radius: 0.5rem;
  background: linear-gradient(to bottom right, #dbeafe, #e9d5ff);
}

html.dark .learn-topic-custom-icon-wrapper {
  background: linear-gradient(
    to bottom right,
    rgba(30, 58, 138, 0.3),
    rgba(88, 28, 135, 0.3)
  );
}

.learn-topic-custom-sparkle-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: #9333ea;
}

html.dark .learn-topic-custom-sparkle-icon {
  color: #c084fc;
}

.learn-topic-custom-title-group {
  flex: 1;
}

.learn-topic-custom-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: #111827;
}

html.dark .learn-topic-custom-title {
  color: #f3f4f6;
}

.learn-topic-custom-description {
  margin: 0;
  font-size: 0.75rem;
  color: #4b5563;
}

html.dark .learn-topic-custom-description {
  color: #9ca3af;
}

.learn-topic-custom-input-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

.learn-topic-custom-textarea {
  flex: 1;
  resize: none;
  height: 80px;
  min-height: 64px;
  border-radius: 0.375rem;
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #111827;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  font-family: inherit;
}

.learn-topic-custom-textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.learn-topic-custom-textarea::placeholder {
  color: #9ca3af;
}

html.dark .learn-topic-custom-textarea {
  background-color: rgba(55, 65, 81, 0.9);
  border-color: #4b5563;
  color: #f3f4f6;
}

html.dark .learn-topic-custom-textarea::placeholder {
  color: #9ca3af;
}

html.dark .learn-topic-custom-textarea:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.learn-topic-custom-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 0.375rem;
  padding: 0 1rem;
  height: 80px;
  cursor: pointer;
  background: #a855f7;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 500;
  transition: opacity 0.15s;
  flex-shrink: 0;
}

.learn-topic-custom-submit:hover:not(:disabled) {
  background-color: #9333ea;
}

.learn-topic-custom-submit:disabled {
  background-color: #d1d5db;
  cursor: not-allowed;
}

.learn-topic-custom-send-icon {
  width: 1.25rem;
  height: 1.25rem;
}

html.dark .learn-topic-custom-submit:disabled {
  background-color: #374151;
}

.learn-topic-custom-loading-spinner {
  animation: ui-learn-ai-assistant-spin 1s linear infinite;
}

@keyframes ui-learn-ai-assistant-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Teal */
.learn-topic-card-teal .learn-topic-card-hover {
  background-color: rgba(204, 251, 241, 0.5);
}

html.dark .learn-topic-card-teal .learn-topic-card-hover {
  background-color: rgba(19, 78, 74, 0.5);
}

.learn-topic-icon-bg-teal {
  background-color: #99f6e4;
}

html.dark .learn-topic-icon-bg-teal {
  background-color: rgba(19, 78, 74, 0.2);
}

.learn-topic-icon-bg-teal .ui-topic-icon {
  color: #0d9488;
}

html.dark .learn-topic-icon-bg-teal .ui-topic-icon {
  color: #5eead4;
}

/* Navbar wrapper */
.learn-text-navbar-wrapper {
  position: fixed;
  top: 0px;
  z-index: 100;
  width: 100%;
  transition: padding-right 0.3s ease-out;
}

.learn-text-navbar-sidebar-open {
  padding-right: 400px;
}

/* Main container */
.learn-text-main {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
  background-color: #ffffff;
  min-height: 100vh;
  margin-top: 89px;
}

html.dark .learn-text-main {
  background-color: #111827;
}

.learn-text-container {
  max-width: 56rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition:
    transform 0.3s ease-out,
    margin-right 0.3s ease-out;
}

.learn-text-container-expanded {
  max-width: 90rem;
}

.learn-text-container-sidebar-open,
.learn-text-container-chat-open {
  margin-right: 400px;
}

.learn-text-container-chat-expanded {
  margin-right: 500px;
}

/* Breadcrumbs */
.learn-text-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.875rem;
  flex: 1;
  max-width: min-content;
  cursor: default;
}

.learn-text-breadcrumb-item {
  display: flex;
  align-items: center;
  padding: 0.5rem 1rem;
  padding-right: 0.5rem;
  padding-left: 1.35rem;
  background-color: #d1d5db;
  color: #374151;
  text-decoration: none;
  transition: all 0.2s;
  position: relative;
  height: 2.5rem;
  margin-right: -0.75rem;
}

/* Arrow pointing right */
.learn-text-breadcrumb-item::after {
  content: "";
  position: absolute;
  right: -0.75rem;
  top: 0;
  width: 0;
  height: 0;
  border-top: 1.25rem solid transparent;
  border-bottom: 1.25rem solid transparent;
  border-left: 0.75rem solid #d1d5db;
  z-index: 2;
}

/* Inverted arrow on left (notch) */
.learn-text-breadcrumb-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  border-top: 1.25rem solid transparent;
  border-bottom: 1.25rem solid transparent;
  border-left: 0.75rem solid #ffffff;
  z-index: 1;
}

html.dark .learn-text-breadcrumb-item::before {
  border-left-color: #111827;
}

/* First item - no notch on left */
.learn-text-breadcrumb-item:first-child {
  padding-left: 1rem;
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.learn-text-breadcrumb-item:first-child::before {
  display: none;
}

/* Last item - round right corners */
/* .learn-text-breadcrumb-item:last-child {
  padding-right: 1rem;
  margin-right: 0;
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

.learn-text-breadcrumb-item:last-child::after {
  display: none;
} */

/* Link styling */
a.learn-text-breadcrumb-item {
  background-color: #d1d5db;
  color: #374151;
}

a.learn-text-breadcrumb-item::after {
  border-left-color: #d1d5db;
}

a.learn-text-breadcrumb-item:hover {
  background-color: #9ca3af;
  color: #111827;
}

a.learn-text-breadcrumb-item:hover::after {
  border-left-color: #9ca3af;
}

/* Current item styling */
.learn-text-breadcrumb-current {
  background-color: #6b7280;
  color: #ffffff;
  font-weight: 500;
}

.learn-text-breadcrumb-current::after {
  border-left-color: #6b7280;
}

/* Dark mode */
html.dark .learn-text-breadcrumb-item {
  background-color: #4b5563;
  color: #d1d5db;
}

html.dark .learn-text-breadcrumb-item::after {
  border-left-color: #4b5563;
}

html.dark a.learn-text-breadcrumb-item {
  background-color: #4b5563;
  color: #d1d5db;
}

html.dark a.learn-text-breadcrumb-item::after {
  border-left-color: #4b5563;
}

html.dark a.learn-text-breadcrumb-item:hover {
  background-color: #6b7280;
  color: #f3f4f6;
}

html.dark a.learn-text-breadcrumb-item:hover::after {
  border-left-color: #6b7280;
}

html.dark .learn-text-breadcrumb-current {
  background-color: #374151;
  color: #ffffff;
}

html.dark .learn-text-breadcrumb-current::after {
  border-left-color: #374151;
}

.learn-text-breadcrumb-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  position: relative;
  z-index: 3;
}

.learn-text-breadcrumb-arrow {
  display: none;
}

/* Collapsible Header */
.learn-text-header-collapsible {
  margin-bottom: 2rem;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  overflow: hidden;
}

html.dark .learn-text-header-collapsible {
  background-color: #1f2937;
  border-color: #374151;
}

.learn-text-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  gap: 1rem;
  cursor: pointer;
}

.learn-text-header-toggle {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  color: #6b7280;
  transition: all 0.2s;
}

.learn-text-header-toggle:hover,
.learn-text-header-top:hover .learn-text-header-toggle {
  background-color: #e5e7eb;
  color: #111827;
}

html.dark .learn-text-header-toggle {
  color: #9ca3af;
}

html.dark .learn-text-header-toggle:hover,
html.dark .learn-text-header-top:hover .learn-text-header-toggle {
  background-color: #374151;
  color: #f9fafb;
}

.learn-text-header-content {
  padding: 0 1rem 1.5rem 1rem;
  border-top: 1px solid #e5e7eb;
  margin-top: 1rem;
  padding-top: 1rem;
}

html.dark .learn-text-header-content {
  border-top-color: #374151;
}

.learn-text-title {
  font-size: 2rem;
  line-height: 2.5rem;
  color: #111827;
  margin: 0 0 1rem 0;
  font-weight: 600;
}

html.dark .learn-text-title {
  color: #f9fafb;
}

.learn-text-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.learn-text-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

/* Difficulty badges */
.learn-text-badge-a1 {
  background-color: #dbeafe;
  color: #1e40af;
}

html.dark .learn-text-badge-a1 {
  background-color: rgba(30, 64, 175, 0.3);
  color: #93c5fd;
}

.learn-text-badge-a2 {
  background-color: #bfdbfe;
  color: #1e3a8a;
}

html.dark .learn-text-badge-a2 {
  background-color: rgba(30, 58, 138, 0.3);
  color: #60a5fa;
}

.learn-text-badge-b1 {
  background-color: #fed7aa;
  color: #9a3412;
}

html.dark .learn-text-badge-b1 {
  background-color: rgba(154, 52, 18, 0.3);
  color: #fdba74;
}

.learn-text-badge-b2 {
  background-color: #fecaca;
  color: #991b1b;
}

html.dark .learn-text-badge-b2 {
  background-color: rgba(153, 27, 27, 0.3);
  color: #fca5a5;
}

.learn-text-badge-c1 {
  background-color: #e9d5ff;
  color: #6b21a8;
}

html.dark .learn-text-badge-c1 {
  background-color: rgba(107, 33, 168, 0.3);
  color: #d8b4fe;
}

.learn-text-badge-c2 {
  background-color: #c4b5fd;
  color: #5b21b6;
}

html.dark .learn-text-badge-c2 {
  background-color: rgba(91, 33, 182, 0.3);
  color: #c4b5fd;
}

.learn-text-word-count {
  color: #6b7280;
  font-size: 0.875rem;
}

html.dark .learn-text-word-count {
  color: #9ca3af;
}

.learn-text-description {
  color: #4b5563;
  font-size: 1rem;
  line-height: 1.75;
  margin: 0;
}

html.dark .learn-text-description {
  color: #d1d5db;
}

/* Content sections */
.learn-text-content {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  flex: 1;
  min-height: 0;
  transition: flex-direction 0.3s ease-out;
}

.learn-text-content-sidebar-open,
.learn-text-content-chat-open {
  flex-direction: column;
}

.learn-text-content-sidebar-open .learn-text-section,
.learn-text-content-chat-open .learn-text-section {
  max-height: 50%;
}

.learn-text-section {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

/* Section title wrapper (title + view toggle) */
.learn-text-section-title-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 1rem 0;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid #e5e7eb;
}

html.dark .learn-text-section-title-wrapper {
  border-bottom-color: #374151;
}

/* Main language section title (German/Target language) */
.learn-text-section-title-main {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

html.dark .learn-text-section-title-main {
  color: #f9fafb;
}

/* View toggle button */
.learn-text-view-toggle {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 0.75rem;
  background-color: #f3f4f6;
  color: #374151;
}

.learn-text-view-toggle:hover {
  background-color: #e5e7eb;
}

html.dark .learn-text-view-toggle {
  background-color: #374151;
  color: #d1d5db;
}

html.dark .learn-text-view-toggle:hover {
  background-color: #4b5563;
}

.learn-text-view-toggle-icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* Sentence list view */
.learn-text-sentence-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.learn-text-sentence-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.learn-text-sentence-play {
  flex-shrink: 0;
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-top: 0.125rem;
}

.learn-text-sentence-play:hover {
  background-color: #f3f4f6;
}

html.dark .learn-text-sentence-play:hover {
  background-color: #374151;
}

.learn-text-sentence-play-icon {
  width: 1rem;
  height: 1rem;
  color: #4b5563;
}

html.dark .learn-text-sentence-play-icon {
  color: #9ca3af;
}

.learn-text-sentence-text {
  flex: 1;
  color: #1f2937;
  line-height: 1.625;
  margin: 0;
  padding: 0.375rem 0;
}

html.dark .learn-text-sentence-text {
  color: #e5e7eb;
}

/* Translation section header (contains dropdown) */
.learn-text-section-header {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #e5e7eb;
}

html.dark .learn-text-section-header {
  border-bottom-color: #374151;
}

/* Language Dropdown */
.learn-text-language-dropdown {
  position: relative;
  display: inline-block;
}

.learn-text-language-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  cursor: pointer;
  transition: all 0.2s;
}

.learn-text-language-trigger:hover {
  background-color: #e5e7eb;
  border-color: #9ca3af;
}

html.dark .learn-text-language-trigger {
  background-color: #1f2937;
  border-color: #374151;
  color: #f9fafb;
}

html.dark .learn-text-language-trigger:hover {
  background-color: #374151;
  border-color: #4b5563;
}

.learn-text-language-trigger-text {
  min-width: 2rem;
  text-align: center;
}

.learn-text-language-trigger-icon {
  width: 1rem;
  height: 1rem;
}

.learn-text-language-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 50;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  min-width: 8rem;
}

html.dark .learn-text-language-dropdown-menu {
  background-color: #1f2937;
  border-color: #374151;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.3),
    0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.learn-text-language-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0.5rem;
}

.learn-text-language-dropdown-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  background-color: transparent;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: all 0.15s;
}

.learn-text-language-dropdown-item:hover {
  background-color: #f3f4f6;
  color: #111827;
}

.learn-text-language-dropdown-item-active {
  background-color: #3b82f6;
  color: #ffffff;
}

.learn-text-language-dropdown-item-active:hover {
  background-color: #2563eb;
  color: #ffffff;
}

html.dark .learn-text-language-dropdown-item {
  color: #d1d5db;
}

html.dark .learn-text-language-dropdown-item:hover {
  background-color: #374151;
  color: #f9fafb;
}

html.dark .learn-text-language-dropdown-item-active {
  background-color: #3b82f6;
  color: #ffffff;
}

html.dark .learn-text-language-dropdown-item-active:hover {
  background-color: #2563eb;
}

/* Dropdown transitions */
.learn-text-dropdown-enter {
  transition:
    opacity 0.15s ease-out,
    transform 0.15s ease-out;
}

.learn-text-dropdown-enter-start {
  opacity: 0;
  transform: translateY(-0.5rem);
}

.learn-text-dropdown-enter-end {
  opacity: 1;
  transform: translateY(0);
}

.learn-text-dropdown-leave {
  transition:
    opacity 0.1s ease-in,
    transform 0.1s ease-in;
}

.learn-text-dropdown-leave-start {
  opacity: 1;
  transform: translateY(0);
}

.learn-text-dropdown-leave-end {
  opacity: 0;
  transform: translateY(-0.5rem);
}

.learn-text-section-content {
  color: #374151;
  font-size: 1rem;
  line-height: 1.75;
  flex: 1;
  /* overflow-y: auto; */
}

html.dark .learn-text-section-content {
  color: #e5e7eb;
}

/* Markdown content styling */
.learn-text-section-content h1 {
  font-size: 1.875rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 1rem 0;
}

html.dark .learn-text-section-content h1 {
  color: #f9fafb;
}

.learn-text-section-content h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
  margin: 1.5rem 0 0.75rem 0;
}

html.dark .learn-text-section-content h2 {
  color: #f9fafb;
}

.learn-text-section-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin: 1.25rem 0 0.5rem 0;
}

html.dark .learn-text-section-content h3 {
  color: #f9fafb;
}

.learn-text-section-content p {
  margin: 0 0 1rem 0;
  color: #374151;
}

html.dark .learn-text-section-content p {
  color: #e5e7eb;
}

.learn-text-section-content strong {
  font-weight: 600;
  color: #111827;
}

html.dark .learn-text-section-content strong {
  color: #f9fafb;
}

.learn-text-section-content ul,
.learn-text-section-content ol {
  margin: 1rem 0;
  padding-left: 1.5rem;
}

.learn-text-section-content li {
  margin: 0.5rem 0;
  color: #374151;
  opacity: 1;
}

html.dark .learn-text-section-content li {
  color: #e5e7eb;
}

.learn-text-section-content blockquote {
  border-left: 4px solid #3b82f6;
  padding-left: 1rem;
  margin: 1rem 0;
  font-style: italic;
  color: #6b7280;
}

html.dark .learn-text-section-content blockquote {
  border-left-color: #60a5fa;
  color: #d1d5db;
}

.learn-text-section-content code {
  background-color: #f3f4f6;
  color: #111827;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-family: monospace;
  font-size: 0.875rem;
}

html.dark .learn-text-section-content code {
  background-color: #374151;
  color: #f9fafb;
}

.learn-text-section-content pre {
  background-color: #f3f4f6;
  color: #111827;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1rem 0;
}

html.dark .learn-text-section-content pre {
  background-color: #374151;
  color: #f9fafb;
}

.learn-text-section-content pre code {
  background-color: transparent;
  padding: 0;
}

/* Translation section animations */
.learn-text-translation-enter {
  transition: all 300ms ease-out;
}

.learn-text-translation-enter-start {
  opacity: 0;
  transform: translateX(100%);
}

.learn-text-translation-enter-end {
  opacity: 1;
  transform: translateX(0);
}

.learn-text-translation-leave {
  transition: all 300ms ease-in;
}

.learn-text-translation-leave-start {
  opacity: 1;
  transform: translateX(0);
}

.learn-text-translation-leave-end {
  opacity: 0;
  transform: translateX(100%);
}

/* Translation content with opacity */
.learn-text-section-content-translation * {
  opacity: 0.7;
}

.learn-text-section-content-translation h1,
.learn-text-section-content-translation h2,
.learn-text-section-content-translation h3 {
  opacity: 0.8;
}

.learn-text-section-content-translation strong {
  opacity: 0.8;
}

/* Responsive */
@media (max-width: 768px) {
  .learn-text-main {
    padding: 1rem;
  }

  .learn-text-title {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .learn-text-section {
    padding: 1rem;
  }

  .learn-text-content {
    flex-direction: column;
  }

  /* Don't shift navbar and container on mobile - sidebar/assistant will overlay */
  .learn-text-navbar-sidebar-open {
    margin-right: 0;
  }

  .learn-text-container-sidebar-open,
  .learn-text-container-chat-open {
    margin-right: 0;
  }
}

/* ================================================================================================ */
/* WORD HOVER EFFECTS                                                                              */
/* ================================================================================================ */

/* When hovering over a word, blur and fade other words */
.word-hoverable:has(.hoverable-word:hover) .hoverable-word:not(:hover) {
  filter: blur(0.3px);
  opacity: 0.6;
  transition: all 0.2s ease;
}

/* Base styles for hoverable words */
.hoverable-word {
  display: inline-block;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* Light theme hover effect */
.hoverable-word:hover {
  font-weight: 500;
  color: #9333ea;
  transform: scale(1.15) translateY(-6px);
}

/* Dark theme hover effect */
html.dark .hoverable-word:hover {
  color: #d8b4fe;
}

/* Phrase mode: whole heading is clickable */
.hoverable-phrase {
  cursor: pointer;
  transition: all 0.2s ease;
}

.hoverable-phrase:hover {
  color: #9333ea;
}

html.dark .hoverable-phrase:hover {
  color: #d8b4fe;
}

.ui-learn-info-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s,
    visibility 0.2s;
}

.ui-learn-info-modal-overlay.ui-learn-info-modal-show {
  opacity: 1;
  visibility: visible;
}

.ui-learn-info-modal-content {
  background-color: #ffffff;
  border-radius: 0.5rem;
  max-width: 36rem;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border: 1px solid #e5e7eb;
}

html.dark .ui-learn-info-modal-content {
  background-color: #1f2937;
  border-color: #374151;
}

.ui-learn-info-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

html.dark .ui-learn-info-modal-header {
  border-bottom-color: #374151;
}

.ui-learn-info-modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

html.dark .ui-learn-info-modal-title {
  color: #f9fafb;
}

.ui-learn-info-modal-close {
  background: transparent;
  border: none;
  color: #6b7280;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  transition: color 0.2s;
}

.ui-learn-info-modal-close:hover {
  color: #111827;
}

html.dark .ui-learn-info-modal-close {
  color: #9ca3af;
}

html.dark .ui-learn-info-modal-close:hover {
  color: #f9fafb;
}

.ui-learn-info-modal-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ui-learn-info-modal-description {
  color: #374151;
  line-height: 1.5;
  margin: 0;
}

html.dark .ui-learn-info-modal-description {
  color: #d1d5db;
}

.ui-learn-info-modal-description strong {
  font-weight: 600;
  color: #111827;
}

html.dark .ui-learn-info-modal-description strong {
  color: #f9fafb;
}

.ui-learn-info-modal-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ui-learn-info-modal-subtitle {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

html.dark .ui-learn-info-modal-subtitle {
  color: #f9fafb;
}

.ui-learn-info-modal-list {
  list-style-type: disc;
  list-style-position: inside;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  color: #374151;
}

html.dark .ui-learn-info-modal-list {
  color: #d1d5db;
}

.ui-learn-info-modal-list li {
  line-height: 1.5;
}

.ui-learn-info-modal-tip {
  padding: 0.75rem;
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 0.5rem;
}

html.dark .ui-learn-info-modal-tip {
  background-color: rgba(20, 83, 45, 0.2);
  border-color: #166534;
}

.ui-learn-info-modal-tip-text {
  font-size: 0.875rem;
  color: #065f46;
  margin: 0;
  line-height: 1.5;
}

html.dark .ui-learn-info-modal-tip-text {
  color: #6ee7b7;
}

.ui-learn-info-modal-tip-text strong {
  font-weight: 600;
}

.ui-learn-regenerate-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s,
    visibility 0.2s;
}

.ui-learn-regenerate-overlay.ui-learn-regenerate-show {
  opacity: 1;
  visibility: visible;
}

.ui-learn-regenerate-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: 32rem;
  padding: 1.5rem;
  border-radius: 0.75rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.ui-learn-regenerate-header {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ui-learn-regenerate-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 600;
}

.ui-learn-regenerate-title-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: #7c3aed;
}

.ui-learn-regenerate-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 0.5rem;
}

.ui-learn-regenerate-muted {
  font-size: 0.875rem;
  color: #6b7280;
  margin-bottom: 0.75rem;
}

.ui-learn-regenerate-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.ui-learn-regenerate-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem;
  font-size: 0.875rem;
  border-radius: 0.5rem;
  border: 1px solid;
  cursor: pointer;
  transition:
    transform 0.15s,
    background-color 0.15s;
}

.ui-learn-regenerate-card:disabled {
  opacity: 0.9;
  cursor: not-allowed;
}

.ui-learn-regenerate-card > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.ui-learn-regenerate-card svg {
  width: 1.25rem;
  height: 1.25rem;
}

.ui-learn-regenerate-card:hover {
  transform: scale(1.05);
}
.ui-learn-regenerate-card:active {
  transform: scale(0.95);
}

.ui-learn-regenerate-card.easier {
  background: #ecfdf5;
  border-color: #bbf7d0;
  color: #047857;
}

.ui-learn-regenerate-card.easier:hover {
  background-color: #dcfce7;
}

.ui-learn-regenerate-card.same {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

.ui-learn-regenerate-card.same:hover {
  background-color: #dbeafe;
}

.ui-learn-regenerate-card.harder {
  background-color: #faf5ff;
  border-color: #e9d5ff;
  color: #6d28d9;
}

.ui-learn-regenerate-card.harder:hover {
  background-color: #f3e8ff;
}

.ui-learn-regenerate-divider {
  position: relative;
  text-align: center;
  font-size: 0.75rem;
  color: #6b7280;
}

.ui-learn-regenerate-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 1px solid #e5e7eb;
}

.ui-learn-regenerate-divider span {
  position: relative;
  background: #ffffff;
  padding: 0 0.5rem;
}

.ui-learn-regenerate-input-row {
  display: flex;
  gap: 0.5rem;
}

.ui-learn-regenerate-input {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-radius: 0.375rem;
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
  color: #111827;
  outline: none;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.ui-learn-regenerate-input::placeholder {
  color: #9ca3af;
}

.ui-learn-regenerate-input:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.3);
}

.ui-learn-regenerate-send {
  height: 36px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 0.375rem;
  border: none;
  font-size: 0.875rem;
  font-weight: 500;
  color: #ffffff;
  background-image: linear-gradient(to right, #2563eb, #7c3aed, #4f46e5);
  cursor: pointer;
  transition:
    background-image 0.2s,
    opacity 0.2s,
    box-shadow 0.2s;
}

.ui-learn-regenerate-send svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.ui-learn-regenerate-send:hover:not(:disabled) {
  background-image: linear-gradient(to right, #1d4ed8, #6d28d9, #4338ca);
}

.ui-learn-regenerate-send:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.4);
}

.ui-learn-regenerate-send:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ui-learn-regenerate-tip {
  padding: 1rem;
  border-radius: 0.5rem;
  background-color: #faf5ff;
  border: 1px solid #e9d5ff;
}

.ui-learn-regenerate-tip p {
  margin: 0;
  font-size: 0.875rem;
  color: #581c87;
  line-height: 1.5;
}

.ui-learn-regenerate-tip strong {
  font-weight: 600;
}

.ui-learn-regenerate-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.25rem;
  background: transparent;
  border: none;
  border-radius: 0.125rem;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 0.2s;
}

.ui-learn-regenerate-close:hover {
  opacity: 1;
}

.ui-learn-regenerate-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5);
}

.ui-learn-regenerate-close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.ui-learn-regenerate-close:disabled {
  pointer-events: none;
  opacity: 0.5;
}

html.dark .ui-learn-regenerate-dialog {
  background-color: #1f2937;
  border-color: #374151;
  color: #f3f4f6;
}

html.dark .ui-learn-regenerate-title {
  color: #f3f4f6;
}

html.dark .ui-learn-regenerate-title-icon {
  color: #c084fc;
}

html.dark .ui-learn-regenerate-muted {
  color: #9ca3af;
}

html.dark .ui-learn-regenerate-card.easier {
  background-color: rgba(20, 83, 45, 0.3);
  border-color: #15803d;
  color: #4ade80;
}

html.dark .ui-learn-regenerate-card.easier:hover {
  background-color: rgba(20, 83, 45, 0.4);
}

html.dark .ui-learn-regenerate-card.same {
  background-color: rgba(30, 58, 138, 0.3);
  border-color: #1d4ed8;
  color: #60a5fa;
}

html.dark .ui-learn-regenerate-card.same:hover {
  background-color: rgba(30, 58, 138, 0.4);
}

html.dark .ui-learn-regenerate-card.harder {
  background-color: rgba(88, 28, 135, 0.3);
  border-color: #7e22ce;
  color: #c084fc;
}

html.dark .ui-learn-regenerate-card.harder:hover {
  background-color: rgba(88, 28, 135, 0.4);
}

html.dark .ui-learn-regenerate-divider::before {
  border-top-color: #374151;
}

html.dark .ui-learn-regenerate-divider span {
  background-color: #1f2937;
  color: #9ca3af;
}

html.dark .ui-learn-regenerate-input {
  background-color: rgba(55, 65, 81, 0.9);
  border-color: #4b5563;
  color: #f9fafb;
}

html.dark .ui-learn-regenerate-input::placeholder {
  color: #9ca3af;
}

html.dark .ui-learn-regenerate-input:focus {
  border-color: #c084fc;
  box-shadow: 0 0 0 3px rgba(192, 132, 252, 0.35);
}

html.dark .ui-learn-regenerate-send {
  background: linear-gradient(to right, #2563eb, #7c3aed, #4f46e5);
  color: #ffffff;
}

html.dark .ui-learn-regenerate-tip {
  background-color: rgba(88, 28, 135, 0.2);
  border-color: #6b21a8;
}

html.dark .ui-learn-regenerate-tip p {
  color: #e9d5ff;
}

html.dark .ui-learn-regenerate-close {
  color: #d1d5db;
}

html.dark .ui-learn-regenerate-close:hover {
  color: #f9fafb;
}

/* Spinner for cards */
.ui-learn-regenerate-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: ui-learn-regenerate-spin 0.6s linear infinite;
}

/* Spinner for submit button */
.ui-learn-regenerate-spinner-small {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: ui-learn-regenerate-spin 0.6s linear infinite;
}

@keyframes ui-learn-regenerate-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Responsive Design */

/* Tablet */
/* @media (max-width: 768px) {
} */

/* Mobile */
@media (max-width: 480px) {
  .ui-learn-regenerate-card svg {
    display: none;
  }
}

/* Overlay */
.ui-learn-topics-sidebar-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
}

/* Transitions for overlay */
.ui-learn-topics-sidebar-enter {
  transition: opacity 300ms;
}

.ui-learn-topics-sidebar-enter-start {
  opacity: 0;
}

.ui-learn-topics-sidebar-enter-end {
  opacity: 1;
}

.ui-learn-topics-sidebar-leave {
  transition: opacity 300ms;
}

.ui-learn-topics-sidebar-leave-start {
  opacity: 1;
}

.ui-learn-topics-sidebar-leave-end {
  opacity: 0;
}

/* Sidebar */
.ui-learn-topics-sidebar {
  width: 60%;
  max-width: 100%;
  height: 100%;
  background-color: #ffffff;
  box-shadow:
    -4px 0 6px -1px rgba(0, 0, 0, 0.1),
    -2px 0 4px -1px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

html.dark .ui-learn-topics-sidebar {
  background-color: #1f2937;
}

/* Transitions for sidebar slide */
.ui-learn-topics-sidebar-slide-enter {
  transition: transform 300ms;
}

.ui-learn-topics-sidebar-slide-enter-start {
  transform: translateX(100%);
}

.ui-learn-topics-sidebar-slide-enter-end {
  transform: translateX(0);
}

.ui-learn-topics-sidebar-slide-leave {
  transition: transform 300ms;
}

.ui-learn-topics-sidebar-slide-leave-start {
  transform: translateX(0);
}

.ui-learn-topics-sidebar-slide-leave-end {
  transform: translateX(100%);
}

/* Header */
.ui-learn-topics-sidebar-header {
  padding: 2rem;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

html.dark .ui-learn-topics-sidebar-header {
  border-bottom-color: #374151;
}

.ui-learn-topics-sidebar-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

html.dark .ui-learn-topics-sidebar-title {
  color: #f9fafb;
}

.ui-learn-topics-sidebar-subtitle {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0.25rem 0 0 0;
}

html.dark .ui-learn-topics-sidebar-subtitle {
  color: #9ca3af;
}

.ui-learn-topics-sidebar-close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  color: #6b7280;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  transition: color 0.2s;
  flex-shrink: 0;
}

.ui-learn-topics-sidebar-close:hover {
  color: #111827;
}

html.dark .ui-learn-topics-sidebar-close {
  color: #9ca3af;
}

html.dark .ui-learn-topics-sidebar-close:hover {
  color: #f9fafb;
}

/* Content */
.ui-learn-topics-sidebar-content {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

/* Random Selection Button */
.ui-learn-topics-sidebar-random-btn {
  width: 100%;
  padding: 1rem;
  margin-bottom: 1.5rem;
  background: #f3e8ff;
  color: #7c3aed;
  border: none;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.ui-learn-topics-sidebar-random-btn:hover {
  background: #e9d5ff;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transform: translateY(-1px);
}

.ui-learn-topics-sidebar-random-btn:active {
  transform: translateY(0);
}

.ui-learn-topics-sidebar-random-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

html.dark .ui-learn-topics-sidebar-random-btn {
  background: linear-gradient(to right, #7c3aed, #db2777);
  color: #ffffff;
}

html.dark .ui-learn-topics-sidebar-random-btn:hover {
  background: linear-gradient(to right, #6d28d9, #be185d);
}

/* Loading state */
.ui-learn-topics-sidebar-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  gap: 1rem;
}

.ui-learn-topics-sidebar-spinner {
  width: 3rem;
  height: 3rem;
  border: 3px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: ui-learn-topics-sidebar-spin 1s linear infinite;
}

html.dark .ui-learn-topics-sidebar-spinner {
  border-color: #374151;
  border-top-color: #60a5fa;
}

@keyframes ui-learn-topics-sidebar-spin {
  to {
    transform: rotate(360deg);
  }
}

.ui-learn-topics-sidebar-loading p {
  color: #6b7280;
  font-size: 0.875rem;
}

html.dark .ui-learn-topics-sidebar-loading p {
  color: #9ca3af;
}

/* Empty state */
.ui-learn-topics-sidebar-empty {
  padding: 3rem 1rem;
  text-align: center;
}

.ui-learn-topics-sidebar-empty p {
  color: #6b7280;
  font-size: 0.875rem;
}

html.dark .ui-learn-topics-sidebar-empty p {
  color: #9ca3af;
}

/* List */
.ui-learn-topics-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Item */
.ui-learn-topics-sidebar-item {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1.25rem;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  width: 100%;
  display: block;
  text-decoration: none;
}

.ui-learn-topics-sidebar-item:hover {
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transform: scale(1.01);
  border-color: #3b82f6;
}

.ui-learn-topics-sidebar-item:active {
  transform: scale(0.99);
}

html.dark .ui-learn-topics-sidebar-item {
  background-color: #374151;
  border-color: #4b5563;
}

html.dark .ui-learn-topics-sidebar-item:hover {
  border-color: #60a5fa;
}

.ui-learn-topics-sidebar-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.ui-learn-topics-sidebar-item-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
  flex: 1;
}

html.dark .ui-learn-topics-sidebar-item-title {
  color: #f9fafb;
}

.ui-learn-topics-sidebar-item-badge {
  padding: 0.25rem 0.625rem;
  border-radius: 0.375rem;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
}

/* Difficulty badges */
.ui-learn-topics-sidebar-badge-a1 {
  background-color: #dbeafe;
  color: #1e40af;
}

html.dark .ui-learn-topics-sidebar-badge-a1 {
  background-color: rgba(30, 64, 175, 0.3);
  color: #93c5fd;
}

.ui-learn-topics-sidebar-badge-a2 {
  background-color: #bfdbfe;
  color: #1e3a8a;
}

html.dark .ui-learn-topics-sidebar-badge-a2 {
  background-color: rgba(30, 58, 138, 0.3);
  color: #60a5fa;
}

.ui-learn-topics-sidebar-badge-b1 {
  background-color: #fed7aa;
  color: #9a3412;
}

html.dark .ui-learn-topics-sidebar-badge-b1 {
  background-color: rgba(154, 52, 18, 0.3);
  color: #fdba74;
}

.ui-learn-topics-sidebar-badge-b2 {
  background-color: #fecaca;
  color: #991b1b;
}

html.dark .ui-learn-topics-sidebar-badge-b2 {
  background-color: rgba(153, 27, 27, 0.3);
  color: #fca5a5;
}

.ui-learn-topics-sidebar-badge-c1 {
  background-color: #e9d5ff;
  color: #6b21a8;
}

html.dark .ui-learn-topics-sidebar-badge-c1 {
  background-color: rgba(107, 33, 168, 0.3);
  color: #d8b4fe;
}

.ui-learn-topics-sidebar-badge-c2 {
  background-color: #c4b5fd;
  color: #5b21b6;
}

html.dark .ui-learn-topics-sidebar-badge-c2 {
  background-color: rgba(91, 33, 182, 0.3);
  color: #c4b5fd;
}

.ui-learn-topics-sidebar-item-description {
  color: #4b5563;
  font-size: 0.875rem;
  margin: 0 0 0.5rem 0;
  line-height: 1.5;
}

html.dark .ui-learn-topics-sidebar-item-description {
  color: #d1d5db;
}

.ui-learn-topics-sidebar-item-meta {
  color: #6b7280;
  font-size: 0.75rem;
  margin: 0;
}

html.dark .ui-learn-topics-sidebar-item-meta {
  color: #9ca3af;
}

/* Responsive */
@media (max-width: 768px) {
  .ui-learn-topics-sidebar {
    width: 85%;
  }
}

@media (max-width: 640px) {
  .ui-learn-topics-sidebar {
    width: 95%;
  }
}

/* Sidebar container */
.ui-learn-text-sidebar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 400px;
  background-color: #ffffff;
  border-left: 1px solid #e5e7eb;
  box-shadow: -4px 0 6px -1px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

html.dark .ui-learn-text-sidebar {
  background-color: #1f2937;
  border-left-color: #374151;
  box-shadow: -4px 0 6px -1px rgba(0, 0, 0, 0.3);
}

/* Sidebar content */
.ui-learn-text-sidebar-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem;
  overflow-y: auto;
}

/* Header */
.ui-learn-text-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.ui-learn-text-sidebar-label {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

html.dark .ui-learn-text-sidebar-label {
  color: #9ca3af;
}

.ui-learn-text-sidebar-close {
  margin-left: auto;
  padding: 0.5rem;
  color: #9ca3af;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  transition: color 0.2s;
}

.ui-learn-text-sidebar-close:hover {
  color: #4b5563;
}

html.dark .ui-learn-text-sidebar-close:hover {
  color: #d1d5db;
}

/* Word section */
.ui-learn-text-sidebar-word-section {
  margin-bottom: 2rem;
}

.ui-learn-text-sidebar-word-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ui-learn-text-sidebar-word {
  font-size: 1.875rem;
  font-weight: 600;
  color: #111827;
}

html.dark .ui-learn-text-sidebar-word {
  color: #f9fafb;
}

.ui-learn-text-sidebar-word-phrase {
  font-size: 1.125rem;
  line-height: 1.4;
  word-break: break-word;
}

.ui-learn-text-sidebar-pronunciation-btn {
  padding: 0.5rem;
  background-color: #dbeafe;
  border: none;
  border-radius: 0.5rem;
  color: #2563eb;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.ui-learn-text-sidebar-pronunciation-btn:hover {
  background-color: #bfdbfe;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

html.dark .ui-learn-text-sidebar-pronunciation-btn {
  background-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}

html.dark .ui-learn-text-sidebar-pronunciation-btn:hover {
  background-color: rgba(59, 130, 246, 0.5);
}

.ui-learn-text-sidebar-icon {
  width: 1.25rem;
  height: 1.25rem;
}

/* Action buttons */
.ui-learn-text-sidebar-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.ui-learn-text-sidebar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid transparent;
}

.ui-learn-text-sidebar-btn-icon {
  width: 1rem;
  height: 1rem;
}

/* AI button */
.ui-learn-text-sidebar-btn-ai {
  background: linear-gradient(to right, #9333ea, #4f46e5, #2563eb);
  color: #ffffff;
  border: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ui-learn-text-sidebar-btn-ai:hover {
  background: linear-gradient(to right, #7e22ce, #4338ca, #1d4ed8);
  box-shadow: 0 6px 8px -1px rgba(0, 0, 0, 0.15);
}

/* Collections button */
.ui-learn-text-sidebar-btn-collections {
  background-color: #ffffff;
  color: #374151;
  border-color: #d1d5db;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.ui-learn-text-sidebar-btn-collections:hover {
  background-color: #f9fafb;
}

html.dark .ui-learn-text-sidebar-btn-collections {
  background-color: #374151;
  color: #f9fafb;
  border-color: #4b5563;
}

html.dark .ui-learn-text-sidebar-btn-collections:hover {
  background-color: #4b5563;
}

/* Collections shortcut in meaning view */
.ui-learn-text-sidebar-btn-collections-meaning {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-bottom: 1.25rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: #374151;
  background-color: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.2s;
}

.ui-learn-text-sidebar-btn-collections-meaning:hover {
  background-color: #e5e7eb;
}

html.dark .ui-learn-text-sidebar-btn-collections-meaning {
  color: #d1d5db;
  background-color: #374151;
  border-color: #4b5563;
}

html.dark .ui-learn-text-sidebar-btn-collections-meaning:hover {
  background-color: #4b5563;
}

/* Tip box */
.ui-learn-text-sidebar-tip {
  margin-top: auto;
  padding: 1rem;
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 0.5rem;
}

html.dark .ui-learn-text-sidebar-tip {
  background-color: rgba(59, 130, 246, 0.2);
  border-color: #1e40af;
}

.ui-learn-text-sidebar-tip-text {
  font-size: 0.875rem;
  color: #1e3a8a;
  margin: 0;
  line-height: 1.5;
}

html.dark .ui-learn-text-sidebar-tip-text {
  color: #93c5fd;
}

/* Transitions */
.ui-learn-text-sidebar-enter {
  transition: transform 0.3s ease-out;
}

.ui-learn-text-sidebar-enter-start {
  transform: translateX(100%);
}

.ui-learn-text-sidebar-enter-end {
  transform: translateX(0);
}

.ui-learn-text-sidebar-leave {
  transition: transform 0.2s ease-in;
}

.ui-learn-text-sidebar-leave-start {
  transform: translateX(0);
}

.ui-learn-text-sidebar-leave-end {
  transform: translateX(100%);
}

/* Meaning View */
.ui-learn-text-sidebar-header-meaning {
  position: relative;
  left: -10px;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.ui-learn-text-sidebar-back {
  padding: 0.375rem;
  background: none;
  border: none;
  border-radius: 0.5rem;
  color: #6b7280;
  cursor: pointer;
  transition: background-color 0.2s;
}

.ui-learn-text-sidebar-back:hover {
  background-color: #e5e7eb;
}

html.dark .ui-learn-text-sidebar-back {
  color: #9ca3af;
}

html.dark .ui-learn-text-sidebar-back:hover {
  background-color: #374151;
}

.ui-learn-text-sidebar-back-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.ui-learn-text-sidebar-meaning-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Info Card */
.ui-learn-text-sidebar-info-card {
  margin-bottom: 1rem;
  padding: 1.25rem;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

html.dark .ui-learn-text-sidebar-info-card {
  background-color: rgba(31, 41, 55, 0.5);
  border-color: #374151;
}

.ui-learn-text-sidebar-info-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.ui-learn-text-sidebar-info-title {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin: 0;
}

html.dark .ui-learn-text-sidebar-info-title {
  color: #9ca3af;
}

.ui-learn-text-sidebar-info-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ui-learn-text-sidebar-info-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ui-learn-text-sidebar-info-label {
  font-size: 0.875rem;
  color: #4b5563;
  width: 6rem;
  flex-shrink: 0;
}

html.dark .ui-learn-text-sidebar-info-label {
  color: #9ca3af;
}

/* Badges */
.ui-learn-text-sidebar-badge {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
}

.ui-learn-text-sidebar-badge-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.ui-learn-text-sidebar-badge-blue {
  background-color: #eff6ff;
  color: #1e40af;
}

html.dark .ui-learn-text-sidebar-badge-blue {
  background-color: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

.ui-learn-text-sidebar-badge-green {
  background-color: #f0fdf4;
  color: #15803d;
}

html.dark .ui-learn-text-sidebar-badge-green {
  background-color: rgba(34, 197, 94, 0.2);
  color: #86efac;
}

.ui-learn-text-sidebar-badge-purple {
  background-color: #faf5ff;
  color: #7e22ce;
}

html.dark .ui-learn-text-sidebar-badge-purple {
  background-color: rgba(168, 85, 247, 0.2);
  color: #d8b4fe;
}

.ui-learn-text-sidebar-gender-masculine {
  background-color: #dbeafe;
  color: #1e40af;
}

html.dark .ui-learn-text-sidebar-gender-masculine {
  background-color: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

.ui-learn-text-sidebar-gender-feminine {
  background-color: #fce7f3;
  color: #be185d;
}

html.dark .ui-learn-text-sidebar-gender-feminine {
  background-color: rgba(236, 72, 153, 0.2);
  color: #f9a8d4;
}

.ui-learn-text-sidebar-gender-neuter {
  background-color: #d1fae5;
  color: #065f46;
}

html.dark .ui-learn-text-sidebar-gender-neuter {
  background-color: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

.ui-learn-text-sidebar-gender-plural {
  background-color: #fef3c7;
  color: #92400e;
}

html.dark .ui-learn-text-sidebar-gender-plural {
  background-color: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
}

.ui-learn-text-sidebar-badge-orange {
  background-color: #fff7ed;
  color: #c2410c;
}

html.dark .ui-learn-text-sidebar-badge-orange {
  background-color: rgba(249, 115, 22, 0.2);
  color: #fdba74;
}

.ui-learn-text-sidebar-badge-indigo {
  background-color: #eef2ff;
  color: #4338ca;
}

html.dark .ui-learn-text-sidebar-badge-indigo {
  background-color: rgba(99, 102, 241, 0.2);
  color: #c7d2fe;
}

.ui-learn-text-sidebar-badge-teal {
  background-color: #f0fdfa;
  color: #0f766e;
}

html.dark .ui-learn-text-sidebar-badge-teal {
  background-color: rgba(20, 184, 166, 0.2);
  color: #5eead4;
}

/* Section Cards */
.ui-learn-text-sidebar-section-card {
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
  padding: 1.25rem;
  background: linear-gradient(
    to bottom right,
    #ffffff,
    rgba(249, 250, 251, 0.5)
  );
  border: 1px solid rgba(229, 231, 235, 0.6);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s;
}

.ui-learn-text-sidebar-section-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

html.dark .ui-learn-text-sidebar-section-card {
  background: linear-gradient(to bottom right, #111827, rgba(17, 24, 39, 0.5));
  border-color: rgba(55, 65, 81, 0.6);
}

.ui-learn-text-sidebar-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.ui-learn-text-sidebar-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.5rem;
  flex-shrink: 0;
}

.ui-learn-text-sidebar-section-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.ui-learn-text-sidebar-card-icon-blue {
  background-color: #dbeafe;
}

.ui-learn-text-sidebar-card-icon-blue .ui-learn-text-sidebar-section-icon {
  color: #2563eb;
}

html.dark .ui-learn-text-sidebar-card-icon-blue {
  background-color: rgba(59, 130, 246, 0.3);
}

html.dark
  .ui-learn-text-sidebar-card-icon-blue
  .ui-learn-text-sidebar-section-icon {
  color: #60a5fa;
}

.ui-learn-text-sidebar-card-icon-indigo {
  background-color: #e0e7ff;
}

.ui-learn-text-sidebar-card-icon-indigo .ui-learn-text-sidebar-section-icon {
  color: #4f46e5;
}

html.dark .ui-learn-text-sidebar-card-icon-indigo {
  background-color: rgba(99, 102, 241, 0.3);
}

html.dark
  .ui-learn-text-sidebar-card-icon-indigo
  .ui-learn-text-sidebar-section-icon {
  color: #a5b4fc;
}

.ui-learn-text-sidebar-card-icon-green {
  background-color: #dcfce7;
}

.ui-learn-text-sidebar-card-icon-green .ui-learn-text-sidebar-section-icon {
  color: #16a34a;
}

html.dark .ui-learn-text-sidebar-card-icon-green {
  background-color: rgba(34, 197, 94, 0.3);
}

html.dark
  .ui-learn-text-sidebar-card-icon-green
  .ui-learn-text-sidebar-section-icon {
  color: #4ade80;
}

.ui-learn-text-sidebar-card-icon-purple {
  background-color: #f3e8ff;
}

.ui-learn-text-sidebar-card-icon-purple .ui-learn-text-sidebar-section-icon {
  color: #9333ea;
}

html.dark .ui-learn-text-sidebar-card-icon-purple {
  background-color: rgba(168, 85, 247, 0.3);
}

html.dark
  .ui-learn-text-sidebar-card-icon-purple
  .ui-learn-text-sidebar-section-icon {
  color: #c084fc;
}

.ui-learn-text-sidebar-card-title {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #4b5563;
  margin: 0;
}

html.dark .ui-learn-text-sidebar-card-title {
  color: #9ca3af;
}

.ui-learn-text-sidebar-card-text {
  color: #111827;
  line-height: 1.625;
  font-size: 0.9375rem;
  margin: 0;
}

html.dark .ui-learn-text-sidebar-card-text {
  color: #f9fafb;
}

.ui-learn-text-sidebar-card-text-large {
  color: #111827;
  font-size: 1.125rem;
  margin: 0;
}

html.dark .ui-learn-text-sidebar-card-text-large {
  color: #f9fafb;
}

/* Examples */
.ui-learn-text-sidebar-examples {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ui-learn-text-sidebar-example {
  padding-left: 0.75rem;
  border-left: 2px solid #e5e7eb;
}

html.dark .ui-learn-text-sidebar-example {
  border-left-color: #374151;
}

.ui-learn-text-sidebar-example-text {
  color: #111827;
  margin: 0 0 0.375rem 0;
  line-height: 1.625;
  font-size: 0.9375rem;
}

html.dark .ui-learn-text-sidebar-example-text {
  color: #f9fafb;
}

.ui-learn-text-sidebar-example-text strong {
  color: #2563eb;
}

html.dark .ui-learn-text-sidebar-example-text strong {
  color: #60a5fa;
}

.ui-learn-text-sidebar-example-translation {
  color: #6b7280;
  font-size: 0.875rem;
  font-style: italic;
  line-height: 1.625;
  margin: 0;
}

html.dark .ui-learn-text-sidebar-example-translation {
  color: #9ca3af;
}

/* Related Words */
.ui-learn-text-sidebar-related-card {
  position: relative;
  overflow: hidden;
  padding: 1.25rem;
  background: linear-gradient(
    to bottom right,
    #faf5ff,
    rgba(250, 245, 255, 0.6)
  );
  border-radius: 0.75rem;
  border: 1px solid rgba(233, 213, 255, 0.6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

html.dark .ui-learn-text-sidebar-related-card {
  background: linear-gradient(
    to bottom right,
    rgba(155, 83, 218, 0.35),
    rgba(160, 85, 226, 0.25) 50.84%,
    rgba(126, 34, 206, 0.15)
  );
  border-color: rgba(126, 34, 206, 0.6);
}

.ui-learn-text-sidebar-related-words {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ui-learn-text-sidebar-related-word {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.75rem;
  background-color: rgba(255, 255, 255, 0.8);
  color: #6b21a8;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  border: 1px solid rgba(233, 213, 255, 0.6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.ui-learn-text-sidebar-related-word:hover {
  background-color: #edecec;
}

html.dark .ui-learn-text-sidebar-related-word {
  background-color: rgba(121, 82, 156, 0.4);
  color: #d8b4fe;
  border-color: rgba(126, 34, 206, 0.6);
}

html.dark .ui-learn-text-sidebar-related-word:hover {
  background-color: rgba(70, 61, 78, 0.5);
}

.ui-learn-text-sidebar-related-translation {
  color: #a855f7;
}

html.dark .ui-learn-text-sidebar-related-translation {
  color: #c084fc;
}

/* Loading Skeletons */
.ui-learn-text-sidebar-skeleton-container {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ui-learn-text-sidebar-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s ease-in-out infinite;
  border-radius: 0.5rem;
}

html.dark .ui-learn-text-sidebar-skeleton {
  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
  background-size: 200% 100%;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.ui-learn-text-sidebar-skeleton-word {
  width: 12rem;
  height: 2.5rem;
}

.ui-learn-text-sidebar-skeleton-icon-btn {
  width: 3rem;
  height: 3rem;
  border-radius: 0.5rem;
}

.ui-learn-text-sidebar-skeleton-card {
  width: 100%;
  min-height: 8rem;
  border-radius: 0.75rem;
}

.ui-learn-text-sidebar-skeleton-info-card {
  min-height: 12rem;
}

.ui-learn-text-sidebar-skeleton-section-card {
  min-height: 6rem;
}

.ui-learn-text-sidebar-skeleton-section-card-large {
  min-height: 10rem;
}

/* Overlay — hidden on desktop */
.ui-learn-text-sidebar-overlay {
  display: none;
}

/* Responsive Design */

/* Tablet */
@media (max-width: 768px) {
  /* Centered modal layout */
  .ui-learn-text-sidebar {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 420px;
    height: 80vh;
    border-radius: 16px;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    z-index: 200;
  }

  /* Override slide transitions — fade only to preserve centering transform */
  .ui-learn-text-sidebar-enter {
    transition: opacity 0.25s ease-out;
  }

  .ui-learn-text-sidebar-enter-start {
    opacity: 0;
    transform: translate(-50%, -50%);
  }

  .ui-learn-text-sidebar-enter-end {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .ui-learn-text-sidebar-leave {
    transition: opacity 0.2s ease-in;
  }

  .ui-learn-text-sidebar-leave-start {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .ui-learn-text-sidebar-leave-end {
    opacity: 0;
    transform: translate(-50%, -50%);
  }

  .ui-learn-text-sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 199;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .learn-text-header-collapsible {
    display: none;
  }
}

.ui-learn-ai-assistant {
  position: fixed;
  top: 7rem;
  right: 1rem;
  width: 400px;
  height: calc(100vh - 8rem);
  background: linear-gradient(to bottom right, #f9fafb, #f3f4f6);
  border-radius: 0.75rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  animation: ui-learn-ai-assistant-slide-in 500ms ease-out;
}

.ui-learn-ai-assistant.is-expanded {
  width: 500px;
}

html.dark .ui-learn-ai-assistant {
  background: linear-gradient(to bottom right, #111827, #1f2937);
}

@keyframes ui-learn-ai-assistant-slide-in {
  from {
    opacity: 0;
    transform: translateX(1rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.ui-learn-ai-assistant-header {
  margin-bottom: 1.5rem;
}

.ui-learn-ai-assistant-header-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
}

.ui-learn-ai-assistant-icon {
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: linear-gradient(to right, #a855f7, #ec4899);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-learn-ai-assistant-icon-svg {
  width: 1.25rem;
  height: 1.25rem;
  color: #ffffff;
}

.ui-learn-ai-assistant-icon-quiz {
  background: linear-gradient(to right, #f43f5e, #f97316);
}

.ui-learn-ai-assistant-title {
  font-size: 1.125rem;
  color: #111827;
  flex: 1;
  margin: 0;
  font-weight: 500;
}

html.dark .ui-learn-ai-assistant-title {
  color: #f3f4f6;
}

.ui-learn-ai-assistant-btn {
  padding: 0.375rem;
  border-radius: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 150ms;
}

.ui-learn-ai-assistant-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ui-learn-ai-assistant-btn:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

html.dark .ui-learn-ai-assistant-btn:hover {
  background-color: rgba(31, 41, 55, 0.5);
}

.ui-learn-ai-assistant-btn-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: #4b5563;
}

html.dark .ui-learn-ai-assistant-btn-icon {
  color: #9ca3af;
}

.ui-learn-ai-assistant-subtitle {
  font-size: 0.875rem;
  color: #4b5563;
  margin: 0;
}

html.dark .ui-learn-ai-assistant-subtitle {
  color: #9ca3af;
}

/* Messages Area */
.ui-learn-ai-assistant-messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 0.5rem;
  position: relative;
}

/* Empty State */
.ui-learn-ai-assistant-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 0 1rem;
}

.ui-learn-ai-assistant-empty-icon {
  padding: 1rem;
  border-radius: 9999px;
  margin-bottom: 1rem;
  background-color: #f3e8ff;
}

html.dark .ui-learn-ai-assistant-empty-icon {
  background-color: rgba(168, 85, 247, 0.2);
}

.ui-learn-ai-assistant-empty-icon-svg {
  width: 2rem;
  height: 2rem;
  color: #a855f7;
}

html.dark .ui-learn-ai-assistant-empty-icon-svg {
  color: #a78bfa;
}

.ui-learn-ai-assistant-empty-title {
  font-size: 1rem;
  color: #111827;
  margin: 0 0 0.5rem 0;
  font-weight: 500;
}

html.dark .ui-learn-ai-assistant-empty-title {
  color: #f3f4f6;
}

.ui-learn-ai-assistant-empty-text {
  font-size: 0.875rem;
  color: #4b5563;
  margin: 0 0 1rem 0;
}

html.dark .ui-learn-ai-assistant-empty-text {
  color: #9ca3af;
}

.ui-learn-ai-assistant-suggestions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.ui-learn-ai-assistant-suggestion-btn {
  width: 100%;
  text-align: left;
  padding: 0.5rem 1rem;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ui-learn-ai-assistant-suggestion-btn:hover {
  background-color: #f9fafb;
  border-color: #d1d5db;
}

html.dark .ui-learn-ai-assistant-suggestion-btn {
  background-color: #1f2937;
  border-color: #374151;
  color: #d1d5db;
}

html.dark .ui-learn-ai-assistant-suggestion-btn:hover {
  background-color: #374151;
  border-color: #4b5563;
}

.ui-learn-ai-assistant-suggestions-extra {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.ui-learn-ai-assistant-show-more-btn {
  width: 100%;
  text-align: center;
  padding: 0.5rem 1rem;
  background: transparent;
  border: none;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: #6b7280;
  cursor: pointer;
  transition: color 0.2s ease;
}

.ui-learn-ai-assistant-show-more-btn:hover {
  color: #a855f7;
}

html.dark .ui-learn-ai-assistant-show-more-btn {
  color: #9ca3af;
}

html.dark .ui-learn-ai-assistant-show-more-btn:hover {
  color: #a78bfa;
}

/* Message Wrapper */
.ui-learn-ai-assistant-message-wrapper {
  display: flex;
  min-width: 0;
}

/* User Messages */
.ui-learn-ai-assistant-message-user {
  justify-content: flex-end;
}

/* (Initial empty msg from user must be hidden) */
.ui-learn-ai-assistant-message-user.ui-learn-ai-assistant-message-initial-quiz {
  display: none;
}

.ui-learn-ai-assistant-message-user .ui-learn-ai-assistant-message-bubble {
  max-width: 85%;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  background: #a855f7;
  overflow-wrap: break-word;
  min-width: 0;
}

.ui-learn-ai-assistant-message-user .ui-learn-ai-assistant-message-text {
  color: #ffffff;
  white-space: pre-wrap;
}

/* Assistant Messages */
.ui-learn-ai-assistant-message-assistant {
  justify-content: flex-start;
}

.ui-learn-ai-assistant-message-assistant .ui-learn-ai-assistant-message-bubble {
  max-width: 85%;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  overflow-wrap: break-word;
  min-width: 0;
}

.ui-learn-ai-assistant-message-assistant .ui-learn-ai-assistant-message-text {
  color: #111827;
}

html.dark
  .ui-learn-ai-assistant-message-assistant
  .ui-learn-ai-assistant-message-bubble {
  background: #1f2937;
  border-color: #374151;
}

html.dark
  .ui-learn-ai-assistant-message-assistant
  .ui-learn-ai-assistant-message-text {
  color: #e5e7eb;
}

html.dark
  .ui-learn-ai-assistant-message-assistant
  .ui-learn-ai-assistant-message-text
  * {
  color: inherit;
}

/* Message Text Common */
.ui-learn-ai-assistant-message-text {
  font-size: 0.875rem;
  line-height: 1.5rem;
  margin: 0;
}

/* Markdown Elements */
.ui-learn-ai-assistant-message-text p {
  margin: 0.5rem 0;
}

.ui-learn-ai-assistant-message-text p:first-child {
  margin-top: 0;
}

.ui-learn-ai-assistant-message-text p:last-child {
  margin-bottom: 0;
}

.ui-learn-ai-assistant-message-text strong {
  font-weight: 600;
}

.ui-learn-ai-assistant-message-text em {
  font-style: italic;
}

.ui-learn-ai-assistant-message-text code {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-family: ui-monospace, monospace;
  font-size: 0.813rem;
}

.ui-learn-ai-assistant-message-text pre {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.75rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 0.5rem 0;
}

.ui-learn-ai-assistant-message-text pre code {
  background: none;
  padding: 0;
}

.ui-learn-ai-assistant-message-text ul,
.ui-learn-ai-assistant-message-text ol {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.ui-learn-ai-assistant-message-text li {
  margin: 0.25rem 0;
}

.ui-learn-ai-assistant-message-text a {
  color: #a855f7;
  text-decoration: underline;
}

.ui-learn-ai-assistant-message-text a:hover {
  color: #9333ea;
}

html.dark .ui-learn-ai-assistant-message-text code {
  background: rgba(255, 255, 255, 0.1);
}

html.dark .ui-learn-ai-assistant-message-text pre {
  background: rgba(255, 255, 255, 0.05);
}

html.dark .ui-learn-ai-assistant-message-text a {
  color: #a78bfa;
}

html.dark .ui-learn-ai-assistant-message-text a:hover {
  color: #c4b5fd;
}

/* Error Messages */
.ui-learn-ai-assistant-message-error .ui-learn-ai-assistant-message-bubble {
  background: #fef2f2;
  border-color: #fecaca;
}

.ui-learn-ai-assistant-message-error .ui-learn-ai-assistant-message-text {
  color: #991b1b;
}

html.dark
  .ui-learn-ai-assistant-message-error
  .ui-learn-ai-assistant-message-bubble {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
}

html.dark
  .ui-learn-ai-assistant-message-error
  .ui-learn-ai-assistant-message-text {
  color: #fca5a5;
}

/* Summary Messages */
.ui-learn-ai-assistant-message-summary {
  justify-content: center;
}

.ui-learn-ai-assistant-summary-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.5rem;
  width: 100%;
}

.ui-learn-ai-assistant-summary-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto;
  padding: 0.375rem 0.75rem;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  font-size: 0.75rem;
  color: #6b7280;
}

html.dark .ui-learn-ai-assistant-summary-label {
  background: #374151;
  border-color: #4b5563;
  color: #9ca3af;
}

.ui-learn-ai-assistant-summary-icon {
  flex-shrink: 0;
  opacity: 0.7;
}

.ui-learn-ai-assistant-summary-label-text {
  white-space: nowrap;
}

.ui-learn-ai-assistant-summary-content {
  max-width: 85%;
  padding: 0.75rem 1rem;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: 0.75rem;
  font-size: 0.813rem;
  color: #6b7280;
  font-style: italic;
  overflow-wrap: break-word;
  min-width: 0;
}

/* Summary Content - Markdown Elements */
.ui-learn-ai-assistant-summary-content p {
  margin: 0.5rem 0;
  line-height: 1.5;
}

.ui-learn-ai-assistant-summary-content p:first-child {
  margin-top: 0;
}

.ui-learn-ai-assistant-summary-content p:last-child {
  margin-bottom: 0;
}

.ui-learn-ai-assistant-summary-content strong {
  font-weight: 600;
}

.ui-learn-ai-assistant-summary-content em {
  font-style: italic;
}

.ui-learn-ai-assistant-summary-content code {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
}

.ui-learn-ai-assistant-summary-content pre {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.75rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 0.5rem 0;
}

.ui-learn-ai-assistant-summary-content pre code {
  background: none;
  padding: 0;
}

.ui-learn-ai-assistant-summary-content ul,
.ui-learn-ai-assistant-summary-content ol {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.ui-learn-ai-assistant-summary-content li {
  margin: 0.25rem 0;
}

.ui-learn-ai-assistant-summary-content a {
  color: #7c3aed;
  text-decoration: underline;
}

.ui-learn-ai-assistant-summary-content a:hover {
  color: #6d28d9;
}

html.dark .ui-learn-ai-assistant-summary-content {
  background: #1f2937;
  border-color: #4b5563;
}

html.dark .ui-learn-ai-assistant-summary-content,
html.dark .ui-learn-ai-assistant-summary-content h1,
html.dark .ui-learn-ai-assistant-summary-content h2,
html.dark .ui-learn-ai-assistant-summary-content h3,
html.dark .ui-learn-ai-assistant-summary-content h4,
html.dark .ui-learn-ai-assistant-summary-content h5,
html.dark .ui-learn-ai-assistant-summary-content h6,
html.dark .ui-learn-ai-assistant-summary-content p,
html.dark .ui-learn-ai-assistant-summary-content strong,
html.dark .ui-learn-ai-assistant-summary-content em,
html.dark .ui-learn-ai-assistant-summary-content li {
  color: #9ca3af;
}

html.dark .ui-learn-ai-assistant-summary-content code {
  background: rgba(255, 255, 255, 0.1);
}

html.dark .ui-learn-ai-assistant-summary-content pre {
  background: rgba(255, 255, 255, 0.05);
}

html.dark .ui-learn-ai-assistant-summary-content a {
  color: #a78bfa;
}

html.dark .ui-learn-ai-assistant-summary-content a:hover {
  color: #c4b5fd;
}

/* Wave Loader Animation */
.ui-learn-ai-assistant-wave-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  height: 1.5rem;
  padding: 0.5rem 0;
}

.ui-learn-ai-assistant-wave-bar {
  width: 0.25rem;
  height: 1rem;
  background: #a855f7;
  border-radius: 0.125rem;
  animation: ui-learn-ai-assistant-wave 1.2s ease-in-out infinite;
}

.ui-learn-ai-assistant-wave-bar:nth-child(1) {
  animation-delay: 0s;
}

.ui-learn-ai-assistant-wave-bar:nth-child(2) {
  animation-delay: 0.2s;
}

.ui-learn-ai-assistant-wave-bar:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes ui-learn-ai-assistant-wave {
  0%,
  100% {
    transform: scaleY(0.5);
  }
  50% {
    transform: scaleY(1);
  }
}

html.dark .ui-learn-ai-assistant-wave-bar {
  background: #a78bfa;
}

/* Scroll to Bottom Button */
.ui-learn-ai-assistant-scroll-btn {
  position: sticky;
  bottom: 1rem;
  align-self: flex-end;
  flex-shrink: 0;
  margin-right: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  cursor: pointer;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
  z-index: 10;
}

.ui-learn-ai-assistant-scroll-btn:hover {
  background: #f9fafb;
  transform: translateY(-2px);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.ui-learn-ai-assistant-scroll-icon {
  color: #6b7280;
}

.ui-learn-ai-assistant-scroll-btn:hover .ui-learn-ai-assistant-scroll-icon {
  color: #a855f7;
}

html.dark .ui-learn-ai-assistant-scroll-btn {
  background: #1f2937;
  border-color: #374151;
}

html.dark .ui-learn-ai-assistant-scroll-btn:hover {
  background: #374151;
}

html.dark .ui-learn-ai-assistant-scroll-icon {
  color: #9ca3af;
}

html.dark
  .ui-learn-ai-assistant-scroll-btn:hover
  .ui-learn-ai-assistant-scroll-icon {
  color: #a78bfa;
}

/* Input Area */
.ui-learn-ai-assistant-input-area {
  border-top: 1px solid #e5e7eb;
  padding-top: 1rem;
}

html.dark .ui-learn-ai-assistant-input-area {
  border-top-color: #374151;
}

.ui-learn-ai-assistant-input-row {
  display: flex;
  gap: 0.5rem;
}

.ui-learn-ai-assistant-input {
  flex: 1;
  padding: 0.75rem 1rem;
  background-color: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  color: #111827;
  outline: none;
  transition: all 0.2s ease;
  resize: none;
  min-height: 2.75rem;
  max-height: 9rem;
  overflow-y: auto;
  font-family: inherit;
}

.ui-learn-ai-assistant-input::placeholder {
  color: #6b7280;
}

.ui-learn-ai-assistant-input:focus {
  border-color: #a855f7;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
}

html.dark .ui-learn-ai-assistant-input {
  background-color: #1f2937;
  border-color: #4b5563;
  color: #f3f4f6;
}

html.dark .ui-learn-ai-assistant-input::placeholder {
  color: #6b7280;
}

html.dark .ui-learn-ai-assistant-input:focus {
  border-color: #a78bfa;
  box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.1);
}

.ui-learn-ai-assistant-send-btn {
  padding: 0.75rem;
  background-color: #a855f7;
  border: none;
  border-radius: 0.75rem;
  color: #ffffff;
  cursor: pointer;
  transition: background-color 150ms;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-learn-ai-assistant-send-btn:hover:not(:disabled) {
  background-color: #9333ea;
}

.ui-learn-ai-assistant-send-btn:disabled {
  background-color: #d1d5db;
  cursor: not-allowed;
}

html.dark .ui-learn-ai-assistant-send-btn:disabled {
  background-color: #374151;
}

.ui-learn-ai-assistant-send-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.ui-learn-ai-assistant-loading-spinner {
  animation: ui-learn-ai-assistant-spin 1s linear infinite;
}

@keyframes ui-learn-ai-assistant-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Quiz View Start Button */
.ui-learn-ai-assistant-quiz-start {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  padding: 1.5rem 2rem;
  border-radius: 1rem;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.ui-learn-ai-assistant-quiz-start:hover {
  background: #fffbfb;
  border-color: #fecdd3;
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.1);
  transform: translateY(-2px);
}

html.dark .ui-learn-ai-assistant-quiz-start {
  background: #1f2937;
  border-color: #374151;
}

html.dark .ui-learn-ai-assistant-quiz-start:hover {
  background: #292f3d;
  border-color: rgba(244, 63, 94, 0.4);
  box-shadow: 0 4px 12px rgba(244, 63, 94, 0.15);
}

.ui-learn-ai-assistant-quiz-start .ui-learn-ai-assistant-empty-icon {
  background-color: #fff1f2;
  animation: ui-learn-ai-assistant-pulse 2s ease-in-out infinite;
}

html.dark .ui-learn-ai-assistant-quiz-start .ui-learn-ai-assistant-empty-icon {
  background-color: rgba(244, 63, 94, 0.2);
}

.ui-learn-ai-assistant-quiz-start .ui-learn-ai-assistant-empty-icon-svg {
  color: #f43f5e;
}

html.dark
  .ui-learn-ai-assistant-quiz-start
  .ui-learn-ai-assistant-empty-icon-svg {
  color: #fb7185;
}

.ui-learn-ai-assistant-quiz-start .ui-learn-ai-assistant-empty-title {
  margin-bottom: 0.25rem;
}

.ui-learn-ai-assistant-quiz-start-subtitle {
  font-size: 0.813rem;
  color: #6b7280;
  margin: 0;
}

html.dark .ui-learn-ai-assistant-quiz-start-subtitle {
  color: #9ca3af;
}

@keyframes ui-learn-ai-assistant-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.3);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(244, 63, 94, 0);
  }
}

/* Quiz View Loading State */
.ui-learn-ai-assistant-quiz-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ui-learn-ai-assistant-quiz-loading .ui-learn-ai-assistant-empty-icon {
  background-color: #fff1f2;
}

html.dark
  .ui-learn-ai-assistant-quiz-loading
  .ui-learn-ai-assistant-empty-icon {
  background-color: rgba(244, 63, 94, 0.2);
}

.ui-learn-ai-assistant-quiz-loading .ui-learn-ai-assistant-empty-icon-svg {
  color: #f43f5e;
}

html.dark
  .ui-learn-ai-assistant-quiz-loading
  .ui-learn-ai-assistant-empty-icon-svg {
  color: #fb7185;
}

.ui-learn-ai-assistant-quiz-loading .ui-learn-ai-assistant-empty-title {
  margin-bottom: 0;
}

/* Animated dots for loading title */
.ui-learn-ai-assistant-title-loading::after {
  content: "";
  animation: ui-learn-ai-assistant-dots 1.5s steps(4, end) infinite;
}

@keyframes ui-learn-ai-assistant-dots {
  0% {
    content: "";
  }
  25% {
    content: ".";
  }
  50% {
    content: "..";
  }
  75% {
    content: "...";
  }
  100% {
    content: "";
  }
}

/* Overlay — hidden on desktop */
.ui-learn-ai-assistant-overlay {
  display: none;
}

@media (max-width: 768px) {
  /* Centered modal layout */
  .ui-learn-ai-assistant {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 420px;
    height: 80vh;
    border-radius: 16px;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    z-index: 100;
    /* Override slide-in animation — fade only to preserve centering transform */
    animation: ui-learn-ai-assistant-fade-in 250ms ease-out;
  }

  @keyframes ui-learn-ai-assistant-fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .ui-learn-ai-assistant-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
  }

  .ui-learn-ai-assistant.is-expanded {
    width: 90%;
  }

  .ui-learn-ai-assistant-btn[title="Expand panel"] {
    display: none;
  }
}

.ui-video-navbar {
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 10;
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  padding: 1rem 2rem;
}

html.dark .ui-video-navbar {
  background-color: #1f2937;
  border-bottom-color: #374151;
}

.ui-video-navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ui-video-navbar-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ui-video-navbar-back-btn {
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  color: #374151;
}

.ui-video-navbar-back-btn:hover {
  background-color: #f3f4f6;
}

html.dark .ui-video-navbar-back-btn {
  color: #d1d5db;
}

html.dark .ui-video-navbar-back-btn:hover {
  background-color: #374151;
}

.ui-video-navbar-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.ui-video-navbar-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ui-video-navbar-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ui-video-navbar-title {
  font-size: 1.5rem;
  line-height: 2rem;
  color: #111827;
  margin: 0;
  font-weight: 400;
}

html.dark .ui-video-navbar-title {
  color: #f9fafb;
}

.ui-video-navbar-subtitle {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #6b7280;
  margin: 0;
}

html.dark .ui-video-navbar-subtitle {
  color: #9ca3af;
}

.ui-video-navbar-info-btn {
  padding: 0.375rem;
  border-radius: 9999px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.ui-video-navbar-info-btn:hover {
  background-color: #f3f4f6;
}

html.dark .ui-video-navbar-info-btn:hover {
  background-color: #374151;
}

.ui-video-navbar-icon-small {
  width: 1.25rem;
  height: 1.25rem;
  color: #6b7280;
}

html.dark .ui-video-navbar-icon-small {
  color: #9ca3af;
}

/* ── AI Tools ── */

.ui-video-navbar-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}

.ui-video-navbar-aitools-toggle {
  padding: 0.5rem 1rem;
  background-color: #f3e8ff;
  color: #6b21a8;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-family: inherit;
}

.ui-video-navbar-aitools-toggle:hover {
  opacity: 0.9;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.ui-video-navbar-aitools-toggle .icon {
  width: 1rem;
  height: 1rem;
}

.ui-video-navbar-aitools-toggle .icon.chevron {
  transition: transform 0.2s;
}

.ui-video-navbar-aitools-toggle .icon.chevron.menu-open {
  transform: rotate(180deg);
}

html.dark .ui-video-navbar-aitools-toggle {
  background-color: rgba(88, 28, 135, 0.3);
  color: #d8b4fe;
}

.ui-video-navbar-aitools-menu {
  position: absolute;
  top: calc(100% + 0.75rem);
  right: 0;
  min-width: 18rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  padding: 0.25rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  z-index: 50;
}

html.dark .ui-video-navbar-aitools-menu {
  background-color: #1f2937;
  border-color: #374151;
}

.ui-video-navbar-aitools-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem;
  border-radius: 0.375rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s;
  color: #111827;
  font-family: inherit;
}

.ui-video-navbar-aitools-item:hover {
  background-color: #f3f4f6;
}

html.dark .ui-video-navbar-aitools-item {
  color: #f3f4f6;
}

html.dark .ui-video-navbar-aitools-item:hover {
  background-color: #374151;
}

.ui-video-navbar-aitools-item svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.ui-video-navbar-aitools-text {
  display: flex;
  flex-direction: column;
}

.ui-video-navbar-aitools-text .title {
  font-size: 0.875rem;
  font-weight: 500;
}

.ui-video-navbar-aitools-text .desc {
  font-size: 0.75rem;
  color: #6b7280;
}

html.dark .ui-video-navbar-aitools-text .desc {
  color: #9ca3af;
}

.ui-video-navbar-translation-toggle {
  padding: 0.5rem 1rem;
  background-color: #f3f4f6;
  color: #374151;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.875rem;
  transition: all 0.2s;
}

.ui-video-navbar-translation-toggle:hover {
  background-color: #e5e7eb;
}

html.dark .ui-video-navbar-translation-toggle {
  background-color: #374151;
  color: #d1d5db;
}

html.dark .ui-video-navbar-translation-toggle:hover {
  background-color: #4b5563;
}

/* Responsive Design */

/* Tablet */
@media (max-width: 830px) {
  .ui-video-navbar-title {
    font-size: 0.95rem;
  }
  .ui-video-navbar-subtitle {
    display: none;
  }
}

/* Horizontal Mobile */
@media (max-width: 768px) {
  .ui-video-navbar {
    padding: 1rem;
  }
  .ui-video-navbar-aitools-toggle .label {
    display: none;
  }
  .ui-video-navbar-content.analysis .ui-video-navbar-info-btn {
    display: none;
  }
}

/* Mobile */
@media (max-width: 630px) {
  .ui-video-navbar {
    padding: 1rem;
  }
  .ui-video-navbar-aitools-toggle .label {
    display: none;
  }
  .ui-video-navbar-translation-toggle {
    display: none;
  }
  .ui-video-navbar-content.analysis .ui-video-navbar-info-btn {
    display: none;
  }
}

.ui-video-info-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s,
    visibility 0.2s;
}

.ui-video-info-modal-overlay.ui-video-info-modal-show {
  opacity: 1;
  visibility: visible;
}

.ui-video-info-modal-content {
  background-color: #ffffff;
  border-radius: 0.5rem;
  max-width: 36rem;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border: 1px solid #e5e7eb;
}

html.dark .ui-video-info-modal-content {
  background-color: #1f2937;
  border-color: #374151;
}

.ui-video-info-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

html.dark .ui-video-info-modal-header {
  border-bottom-color: #374151;
}

.ui-video-info-modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

html.dark .ui-video-info-modal-title {
  color: #f9fafb;
}

.ui-video-info-modal-close {
  background: transparent;
  border: none;
  color: #6b7280;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  transition: color 0.2s;
}

.ui-video-info-modal-close:hover {
  color: #111827;
}

html.dark .ui-video-info-modal-close {
  color: #9ca3af;
}

html.dark .ui-video-info-modal-close:hover {
  color: #f9fafb;
}

.ui-video-info-modal-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ui-video-info-modal-description {
  color: #374151;
  line-height: 1.5;
  margin: 0;
}

html.dark .ui-video-info-modal-description {
  color: #d1d5db;
}

.ui-video-info-modal-description strong {
  font-weight: 600;
  color: #111827;
}

html.dark .ui-video-info-modal-description strong {
  color: #f9fafb;
}

.ui-video-info-modal-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ui-video-info-modal-subtitle {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

html.dark .ui-video-info-modal-subtitle {
  color: #f9fafb;
}

.ui-video-info-modal-list {
  list-style-type: disc;
  list-style-position: inside;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  color: #374151;
}

html.dark .ui-video-info-modal-list {
  color: #d1d5db;
}

.ui-video-info-modal-list li {
  line-height: 1.5;
}

.ui-video-info-modal-tip {
  padding: 0.75rem;
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 0.5rem;
}

html.dark .ui-video-info-modal-tip {
  background-color: rgba(20, 83, 45, 0.2);
  border-color: #166534;
}

.ui-video-info-modal-tip-text {
  font-size: 0.875rem;
  color: #065f46;
  margin: 0;
  line-height: 1.5;
}

html.dark .ui-video-info-modal-tip-text {
  color: #6ee7b7;
}

.ui-video-info-modal-tip-text strong {
  font-weight: 600;
}

.video-search {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.video-search-main {
  position: relative;
  top: 89px;
  flex: 1;
  padding: 2rem;
  background-color: #ffffff;
}

html.dark .video-search-main {
  background-color: #111827;
}

/* ── Toolbar ── */

.video-search-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 80rem;
  margin: 0 auto 1.5rem;
}

.video-search-url-form {
  flex: 1;
  display: flex;
  align-items: stretch;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background-color: #ffffff;
  overflow: hidden;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.video-search-url-form:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

html.dark .video-search-url-form {
  background-color: #1f2937;
  border-color: #374151;
}

.video-search-url-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.75rem;
  color: #9ca3af;
  flex-shrink: 0;
}

.video-search-url-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 0.875rem 0;
  font-size: 0.9375rem;
  color: #111827;
  font-family: inherit;
  min-width: 0;
}

.video-search-url-input::placeholder {
  color: #9ca3af;
}

html.dark .video-search-url-input {
  color: #f9fafb;
}

.video-search-url-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1.25rem;
  background-color: #6366f1;
  color: #ffffff;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s;
  flex-shrink: 0;
}

.video-search-url-btn:hover {
  background-color: #4f46e5;
}

/* Level dropdown */

.video-search-level-wrap {
  position: relative;
  flex-shrink: 0;
}

.video-search-level-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.875rem 0.875rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  background-color: #ffffff;
  color: #374151;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color 0.15s,
    border-color 0.15s;
  font-family: inherit;
}

.video-search-level-btn:hover {
  background-color: #f9fafb;
}

html.dark .video-search-level-btn {
  background-color: #1f2937;
  border-color: #374151;
  color: #d1d5db;
}

html.dark .video-search-level-btn:hover {
  background-color: #374151;
}

.video-search-level-chevron {
  transition: transform 0.15s;
  color: #6b7280;
}

html.dark .video-search-level-chevron {
  color: #9ca3af;
}

.video-search-level-chevron-open {
  transform: rotate(180deg);
}

.video-search-level-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  min-width: 100%;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

html.dark .video-search-level-dropdown {
  background-color: #1f2937;
  border-color: #374151;
}

[x-cloak] {
  display: none !important;
}

.video-search-level-option {
  display: block;
  width: 100%;
  padding: 0.5rem 0.875rem;
  text-align: left;
  background: transparent;
  border: none;
  font-size: 0.875rem;
  color: #374151;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  transition: background-color 0.1s;
}

.video-search-level-option:hover {
  background-color: #f3f4f6;
  text-decoration: none;
}

html.dark .video-search-level-option {
  color: #d1d5db;
}

html.dark .video-search-level-option:hover {
  background-color: #374151;
}

.video-search-level-option-active {
  color: #4f46e5;
  font-weight: 500;
}

html.dark .video-search-level-option-active {
  color: #818cf8;
}

/* View toggle */

.video-search-view-toggle {
  display: flex;
  border: 1px solid #e5e7eb;
  border-radius: 0.5rem;
  overflow: hidden;
  flex-shrink: 0;
}

html.dark .video-search-view-toggle {
  border-color: #374151;
}

.video-search-view-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 0.875rem;
  background-color: #ffffff;
  border: none;
  cursor: pointer;
  color: #6b7280;
  transition:
    background-color 0.15s,
    color 0.15s;
}

.video-search-view-btn:first-child {
  border-right: 1px solid #e5e7eb;
}

html.dark .video-search-view-btn:first-child {
  border-right-color: #374151;
}

html.dark .video-search-view-btn {
  background-color: #1f2937;
  color: #9ca3af;
}

.video-search-view-btn-active {
  background-color: #f3f4f6;
  color: #111827;
}

html.dark .video-search-view-btn-active {
  background-color: #374151;
  color: #f9fafb;
}

/* ── Empty state ── */

.video-search-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 5rem 2rem;
  max-width: 80rem;
  margin: 0 auto;
  text-align: center;
}

.video-search-empty-icon {
  color: #d1d5db;
}

html.dark .video-search-empty-icon {
  color: #4b5563;
}

.video-search-empty-text {
  margin: 0;
  font-size: 1rem;
  color: #6b7280;
}

html.dark .video-search-empty-text {
  color: #9ca3af;
}

/* ── Grid view ── */

.video-search-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 80rem;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .video-search-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .video-search-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ── List view ── */

.video-search-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 80rem;
  margin: 0 auto;
}

.video-search-list .video-search-card {
  flex-direction: row;
}

.video-search-list .video-search-card-thumb-wrap {
  width: 220px;
  flex-shrink: 0;
  aspect-ratio: 16 / 9;
}

.video-search-list .video-search-card-body {
  justify-content: center;
}

@media (max-width: 640px) {
  .video-search-list .video-search-card-thumb-wrap {
    width: 140px;
  }
}

/* ── Shared card ── */

.video-search-card {
  display: flex;
  flex-direction: column;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  background-color: #f9fafb;
  overflow: hidden;
  text-decoration: none;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.video-search-card:hover {
  transform: scale(1.02);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.video-search-card:active {
  transform: scale(0.98);
}

html.dark .video-search-card {
  border-color: #374151;
  background-color: #1f2937;
}

.video-search-card-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #e5e7eb;
  flex-shrink: 0;
}

html.dark .video-search-card-thumb-wrap {
  background-color: #374151;
}

.video-search-card-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-search-card-duration {
  position: absolute;
  bottom: 6px;
  right: 6px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 3px;
  line-height: 1.4;
}

.video-search-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.875rem;
  flex: 1;
}

.video-search-card-title {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #111827;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

html.dark .video-search-card-title {
  color: #f9fafb;
}

.video-search-card-channel {
  margin: 0;
  font-size: 0.8125rem;
  color: #4b5563;
}

html.dark .video-search-card-channel {
  color: #9ca3af;
}

.video-search-card-meta {
  margin: 0;
  font-size: 0.75rem;
  color: #6b7280;
}

html.dark .video-search-card-meta {
  color: #9ca3af;
}

/* ── Sentinel & Skeleton ── */

.video-search-sentinel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1.25rem;
}

@media (min-width: 640px) {
  .video-search-sentinel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .video-search-sentinel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.video-search-list .video-search-sentinel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.video-search-skeleton-card {
  border-radius: 0.75rem;
  overflow: hidden;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: video-search-shimmer 1.4s ease-in-out infinite;
  aspect-ratio: 16 / 9;
  border: 1px solid #e5e7eb;
}

.video-search-list .video-search-skeleton-card {
  aspect-ratio: unset;
  height: 80px;
}

html.dark .video-search-skeleton-card {
  background: linear-gradient(90deg, #1f2937 25%, #374151 50%, #1f2937 75%);
  background-size: 200% 100%;
  border-color: #374151;
}

@keyframes video-search-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (max-width: 640px) {
  .video-search-main {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .video-search-url-input::placeholder {
    color: transparent;
  }
}

.video-analysis {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}

.video-analysis-main {
  position: relative;
  top: 89px;
  flex: 1;
  padding: 1.5rem 2rem;
  background-color: #ffffff;
}

html.dark .video-analysis-main {
  background-color: #111827;
}

/* ── Body (player + transcript) ── */

.video-analysis-body {
  display: flex;
  gap: 1.5rem;
  max-width: 96rem;
  margin: 0 auto;
  align-items: flex-start;
}

/* ── Player ── */

.video-analysis-player-wrap {
  flex: 2;
  min-width: 0;
  transition: flex 0.25s ease;
}

.video-analysis-body-sidebar-open .video-analysis-player-wrap {
  flex: 1;
}

.video-analysis-body-sidebar-open .video-analysis-transcript {
  flex: 0 0 350px;
}

.video-analysis-body-assistant-open {
  margin-right: 416px;
  transition: margin-right 0.3s ease-out;
}

.video-analysis-body-assistant-expanded {
  margin-right: 516px;
}

.video-analysis-body-assistant-expanded .video-analysis-transcript,
.video-analysis-body-assistant-expanded .ui-learn-text-sidebar {
  display: none;
}

.video-analysis-player-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 0.75rem;
  overflow: hidden;
  background-color: #000;
}

#yt-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  border: none;
}

.video-analysis-video-meta {
  margin-top: 0.75rem;
}

.video-analysis-video-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  line-height: 1.4;
}

html.dark .video-analysis-video-title {
  color: #f9fafb;
}

.video-analysis-video-channel {
  margin: 0.25rem 0 0;
  font-size: 0.875rem;
  color: #6b7280;
}

html.dark .video-analysis-video-channel {
  color: #9ca3af;
}

/* ── Transcript ── */

.video-analysis-transcript {
  flex: 1;
  min-width: 0;
  position: sticky;
  transition: flex 0.25s ease;
  top: calc(89px + 1.5rem);
  max-height: calc(100vh - 89px - 3rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
}

html.dark .video-analysis-transcript {
  background-color: #1f2937;
  border-color: #374151;
}

.video-analysis-transcript-body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

.video-analysis-transcript-body::-webkit-scrollbar {
  width: 4px;
}

.video-analysis-transcript-body::-webkit-scrollbar-track {
  background: transparent;
}

.video-analysis-transcript-body::-webkit-scrollbar-thumb {
  background-color: #d1d5db;
  border-radius: 2px;
}

html.dark .video-analysis-transcript-body::-webkit-scrollbar-thumb {
  background-color: #4b5563;
}

.video-analysis-segment {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border-left: 3px solid transparent;
  font-size: 1rem;
  line-height: 1.65;
  /* color: #9ca3af; */
  color: #4c4e50;
  cursor: pointer;
  transition:
    color 0.15s,
    background-color 0.15s,
    border-left-color 0.15s;
  margin-bottom: 0.125rem;
}

.video-analysis-segment-time {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  color: #6366f1;
  opacity: 0.7;
  min-width: 2.25rem;
}

html.dark .video-analysis-segment-time {
  color: #818cf8;
}

.video-analysis-segment-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.video-analysis-segment-text {
  flex: 1;
  min-width: 0;
}

.video-analysis-segment-translation {
  font-size: 0.9rem;
  /* color: #8c6a43; */
  color: #7d480b;
  margin-top: 0.2rem;
  padding-left: 1rem;
  line-height: 1.4;
  font-style: italic;
  border-left: 0.25rem solid #e3d7d7;
}

html.dark .video-analysis-segment-translation {
  color: #b5aa9f;
  border-color: #c1adad;
}

.video-analysis-segment:hover {
  color: #4b5563;
  background-color: #f3f4f6;
}

html.dark .video-analysis-segment {
  /* color: #6b7280; */
  color: #8b929f;
}

html.dark .video-analysis-segment:hover {
  color: #9ca3af;
  background-color: #111827;
}

.video-analysis-segment-active {
  font-weight: 500;
  color: #111827;
  background-color: #ede9fe;
  border-left-color: #6366f1;
}

html.dark .video-analysis-segment-active {
  color: #e0e7ff;
  background-color: #1e1b4b;
  border-left-color: #818cf8;
}

.video-analysis-segment.word-hoverable:has(.hoverable-word:hover)
  .hoverable-word:not(:hover) {
  filter: blur(0.3px);
  opacity: 0.6;
  transition: all 0.2s ease;
}

.video-analysis-segment .hoverable-word {
  display: inline-block;
  cursor: pointer;
  transition: all 0.2s ease;
}

.video-analysis-segment .hoverable-word:hover {
  font-weight: 500;
  color: #9333ea;
  transform: scale(1.15) translateY(-6px);
}

html.dark .video-analysis-segment .hoverable-word:hover {
  color: #d8b4fe;
}

.video-analysis-transcript-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #e5e7eb;
  border-bottom: 1px solid #d1d5db;
  padding-right: 0.5rem;
}

html.dark .video-analysis-transcript-header {
  background-color: #111827;
  border-bottom-color: #374151;
}

.video-analysis-transcript-header-actions {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.video-analysis-transcript-label {
  margin: 0;
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #6b7280;
}

html.dark .video-analysis-transcript-label {
  color: #9ca3af;
}

.video-analysis-timestamp-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem;
  border-radius: 0.375rem;
  border: none;
  background: none;
  color: #9ca3af;
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s;
}

.video-analysis-timestamp-toggle:hover {
  background-color: #d1d5db;
  color: #4b5563;
}

.video-analysis-timestamp-toggle-active {
  background-color: #6366f1;
  color: #ffffff;
}

.video-analysis-timestamp-toggle-active:hover {
  background-color: #4f46e5;
  color: #ffffff;
}

html.dark .video-analysis-timestamp-toggle:hover {
  background-color: #374151;
  color: #d1d5db;
}

html.dark .video-analysis-timestamp-toggle-active {
  background-color: #6366f1;
  color: #ffffff;
}

.video-analysis-translation-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.3rem;
  border-radius: 0.375rem;
  border: none;
  background: none;
  color: #9ca3af;
  cursor: pointer;
  transition:
    background-color 0.15s,
    color 0.15s;
}

.video-analysis-translation-toggle:hover {
  background-color: #d1d5db;
  color: #4b5563;
}

.video-analysis-translation-toggle-active {
  background-color: #6366f1;
  color: #ffffff;
}

.video-analysis-translation-toggle-active:hover {
  background-color: #4f46e5;
  color: #ffffff;
}

html.dark .video-analysis-translation-toggle:hover {
  background-color: #374151;
  color: #d1d5db;
}

html.dark .video-analysis-translation-toggle-active {
  background-color: #6366f1;
  color: #ffffff;
}

.video-analysis-no-transcript {
  padding: 1rem 0.75rem;
  margin: 0;
  font-size: 0.875rem;
  color: #9ca3af;
}

/* ── Empty state ── */

.video-analysis-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 2rem;
  max-width: 96rem;
  margin: 0 auto;
}

.video-analysis-empty-text {
  margin: 0;
  font-size: 1rem;
  color: #6b7280;
}

html.dark .video-analysis-empty-text {
  color: #9ca3af;
}

/* ── Sidebar (inline flex column — overrides the fixed-overlay defaults) ── */

.video-analysis-body .ui-learn-text-sidebar {
  position: sticky;
  top: calc(89px + 1.5rem);
  right: auto;
  bottom: auto;
  flex: 0 0 400px;
  width: auto;
  height: calc(100vh - 89px - 3rem);
  border-radius: 0.75rem;
  box-shadow: none;
}

html.dark .video-analysis-body .ui-learn-text-sidebar {
  box-shadow: none;
}

.video-analysis-body .ui-learn-text-sidebar.ui-learn-text-sidebar-enter {
  transition:
    opacity 0.25s ease-out,
    transform 0.25s ease-out;
}

.video-analysis-body .ui-learn-text-sidebar.ui-learn-text-sidebar-enter-start {
  opacity: 0;
  transform: translateX(16px);
}

.video-analysis-body .ui-learn-text-sidebar.ui-learn-text-sidebar-enter-end {
  opacity: 1;
  transform: translateX(0);
}

.video-analysis-body .ui-learn-text-sidebar.ui-learn-text-sidebar-leave {
  transition:
    opacity 0.2s ease-in,
    transform 0.2s ease-in;
}

.video-analysis-body .ui-learn-text-sidebar.ui-learn-text-sidebar-leave-start {
  opacity: 1;
  transform: translateX(0);
}

.video-analysis-body .ui-learn-text-sidebar.ui-learn-text-sidebar-leave-end {
  opacity: 0;
  transform: translateX(16px);
}

/* ── Responsive ── */

/* Tablet */
@media (max-width: 768px) {
  .video-analysis-body {
    flex-direction: column;
  }

  .video-analysis-player-wrap {
    width: 100%;
  }

  .video-analysis-transcript {
    position: static;
    max-height: 320px;
    width: 100%;
  }

  /* Centered modal layout on mobile */
  .video-analysis-body .ui-learn-text-sidebar {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    flex: none;
    width: 90%;
    max-width: 420px;
    height: 80vh;
    border-radius: 16px;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  }

  /* Override slide transitions — use fade only to preserve centering transform */
  .video-analysis-body
    .ui-learn-text-sidebar.ui-learn-text-sidebar-enter-start {
    opacity: 0;
    transform: translate(-50%, -50%);
  }

  .video-analysis-body .ui-learn-text-sidebar.ui-learn-text-sidebar-enter-end {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .video-analysis-body
    .ui-learn-text-sidebar.ui-learn-text-sidebar-leave-start {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .video-analysis-body .ui-learn-text-sidebar.ui-learn-text-sidebar-leave-end {
    opacity: 0;
    transform: translate(-50%, -50%);
  }

  /* Sidebar and assistant overlay content — reset all displacement */
  .video-analysis-body-sidebar-open .video-analysis-player-wrap,
  .video-analysis-body-sidebar-open .video-analysis-transcript {
    flex: none;
  }

  .video-analysis-body-assistant-open,
  .video-analysis-body-assistant-expanded {
    margin-right: 0;
  }
}

@media (max-width: 640px) {
  .video-analysis-main {
    padding: 1rem;
  }
}

/* ── Tour scenario badge ── */

.video-analysis-tour-badge {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  background: #1a1a2e;
  border: 1px solid #2e2e4a;
  color: #c8c8e8;
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.video-analysis-tour-badge-arrow {
  color: #6c6caa;
  font-size: 0.7rem;
}

.video-analysis-tour-badge-sep {
  color: #3e3e60;
}

html.dark .video-analysis-tour-badge {
  background: #12121f;
  border-color: #2a2a45;
  color: #b0b0d0;
}

/* ===========================
   Privacy Page
   =========================== */

.privacy-page {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background: #f8fafc;
}

html.dark .privacy-page {
  background: #0f172a;
}

/* ===========================
   Background orbs
   =========================== */

.privacy-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.privacy-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
}

.privacy-bg-orb-blue {
  top: -80px;
  right: -80px;
  width: 480px;
  height: 480px;
  background: rgba(59, 130, 246, 0.15);
}

html.dark .privacy-bg-orb-blue {
  background: rgba(59, 130, 246, 0.07);
}

.privacy-bg-orb-purple {
  bottom: 0;
  left: -120px;
  width: 560px;
  height: 560px;
  background: rgba(168, 85, 247, 0.12);
}

html.dark .privacy-bg-orb-purple {
  background: rgba(168, 85, 247, 0.06);
}

/* ===========================
   Nav
   =========================== */

.privacy-nav {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 24px 0 24px;
}

.privacy-nav-logo {
  font-size: 1.375rem;
  font-weight: 800;
  background: linear-gradient(to right, #2563eb, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
}

.privacy-nav-logo:hover {
  text-decoration: none;
}

.privacy-nav-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #64748b;
  text-decoration: none;
  transition: color 0.15s ease;
}

.privacy-nav-back:hover {
  color: #2563eb;
  text-decoration: none;
}

html.dark .privacy-nav-back {
  color: #94a3b8;
}

html.dark .privacy-nav-back:hover {
  color: #60a5fa;
}

/* ===========================
   Header
   =========================== */

.privacy-header {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 56px 24px 48px 24px;
}

.privacy-header-content {
  max-width: 640px;
  margin: 0 auto;
}

.privacy-header-badge {
  display: inline-block;
  padding: 4px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 9999px;
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
  margin-bottom: 16px;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

html.dark .privacy-header-badge {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
  border-color: rgba(99, 102, 241, 0.3);
}

.privacy-header-title {
  font-size: 2.75rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 10px 0;
  line-height: 1.15;
}

html.dark .privacy-header-title {
  color: #f1f5f9;
}

@media (max-width: 600px) {
  .privacy-header-title {
    font-size: 2rem;
  }
}

.privacy-header-subtitle {
  font-size: 0.875rem;
  color: #94a3b8;
  margin: 0 0 18px 0;
}

.privacy-header-desc {
  font-size: 1.0625rem;
  color: #475569;
  margin: 0;
  line-height: 1.65;
}

html.dark .privacy-header-desc {
  color: #94a3b8;
}

/* ===========================
   Main content
   =========================== */

.privacy-content {
  position: relative;
  z-index: 10;
  padding: 0 24px 80px 24px;
}

.privacy-container {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ===========================
   Sections
   =========================== */

.privacy-section {
  display: flex;
  gap: 20px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 20px;
  padding: 28px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 24px 0 rgba(15, 23, 42, 0.06);
}

html.dark .privacy-section {
  background: rgba(30, 41, 59, 0.5);
  border-color: rgba(51, 65, 85, 0.6);
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.2);
}

.privacy-section-highlight {
  border-color: rgba(99, 102, 241, 0.25);
  background: rgba(238, 242, 255, 0.7);
}

html.dark .privacy-section-highlight {
  border-color: rgba(99, 102, 241, 0.3);
  background: rgba(30, 27, 75, 0.35);
}

.privacy-section-last {
  margin-bottom: 0;
}

@media (max-width: 560px) {
  .privacy-section {
    flex-direction: column;
    gap: 14px;
    padding: 22px 20px;
  }
}

/* ===========================
   Section icon
   =========================== */

.privacy-section-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  margin-top: 2px;
}

.privacy-section-icon-blue {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
}

.privacy-section-icon-purple {
  background: linear-gradient(135deg, #a855f7, #6366f1);
}

.privacy-section-icon-indigo {
  background: linear-gradient(135deg, #6366f1, #3b82f6);
}

/* ===========================
   Section body
   =========================== */

.privacy-section-body {
  flex: 1;
  min-width: 0;
}

.privacy-section-title {
  font-size: 1.1875rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 12px 0;
  line-height: 1.3;
}

html.dark .privacy-section-title {
  color: #f1f5f9;
}

.privacy-section-text {
  font-size: 0.9375rem;
  color: #475569;
  margin: 0 0 12px 0;
  line-height: 1.7;
}

.privacy-section-text:last-child {
  margin-bottom: 0;
}

html.dark .privacy-section-text {
  color: #94a3b8;
}

/* ===========================
   Callout box
   =========================== */

.privacy-callout {
  background: rgba(99, 102, 241, 0.08);
  border-left: 3px solid #6366f1;
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  font-size: 0.9375rem;
  color: #3730a3;
  margin-bottom: 14px;
}

html.dark .privacy-callout {
  background: rgba(99, 102, 241, 0.12);
  border-left-color: #818cf8;
  color: #a5b4fc;
}

/* ===========================
   List
   =========================== */

.privacy-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.privacy-list-item {
  display: flex;
  gap: 10px;
  font-size: 0.9375rem;
  color: #475569;
  line-height: 1.65;
}

html.dark .privacy-list-item {
  color: #94a3b8;
}

.privacy-list-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #a855f7);
  margin-top: 9px;
}

.privacy-list-label {
  font-weight: 600;
  color: #1e293b;
}

html.dark .privacy-list-label {
  color: #e2e8f0;
}

/* ===========================
   Table
   =========================== */

.privacy-table {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, 0.8);
  margin-bottom: 14px;
}

html.dark .privacy-table {
  border-color: rgba(51, 65, 85, 0.6);
}

.privacy-table-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
  padding: 11px 16px;
  font-size: 0.9rem;
  color: #475569;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

.privacy-table-row:last-child {
  border-bottom: none;
}

html.dark .privacy-table-row {
  color: #94a3b8;
  border-bottom-color: rgba(51, 65, 85, 0.5);
}

.privacy-table-header {
  background: rgba(241, 245, 249, 0.8);
  font-weight: 700;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #64748b;
}

html.dark .privacy-table-header {
  background: rgba(15, 23, 42, 0.5);
  color: #64748b;
}

.privacy-table-service {
  font-weight: 600;
  color: #1e293b;
}

html.dark .privacy-table-service {
  color: #e2e8f0;
}

@media (max-width: 480px) {
  .privacy-table-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .privacy-table-header span:last-child {
    display: none;
  }
}

/* ===========================
   Contact box
   =========================== */

.privacy-contact-box {
  display: inline-block;
  background: rgba(241, 245, 249, 0.8);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 0.9375rem;
  color: #1e293b;
  line-height: 1.8;
}

html.dark .privacy-contact-box {
  background: rgba(15, 23, 42, 0.5);
  border-color: rgba(51, 65, 85, 0.6);
  color: #e2e8f0;
}

.privacy-contact-link {
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
}

.privacy-contact-link:hover {
  text-decoration: underline;
}

html.dark .privacy-contact-link {
  color: #60a5fa;
}

/* ===========================
   Footer
   =========================== */

.privacy-footer {
  position: relative;
  z-index: 10;
  border-top: 1px solid rgba(226, 232, 240, 0.6);
  padding: 24px;
}

html.dark .privacy-footer {
  border-top-color: rgba(51, 65, 85, 0.5);
}

.privacy-footer-content {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.privacy-footer-brand {
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(to right, #2563eb, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.privacy-footer-links {
  display: flex;
  gap: 20px;
}

.privacy-footer-link {
  font-size: 0.875rem;
  color: #64748b;
  text-decoration: none;
  transition: color 0.15s ease;
}

.privacy-footer-link:hover {
  color: #2563eb;
  text-decoration: none;
}

html.dark .privacy-footer-link {
  color: #64748b;
}

html.dark .privacy-footer-link:hover {
  color: #60a5fa;
}

/* ===========================
   Terms Page
   =========================== */

.terms-page {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  background: #f8fafc;
}

html.dark .terms-page {
  background: #0f172a;
}

/* ===========================
   Background orbs
   =========================== */

.terms-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.terms-bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);
}

.terms-bg-orb-blue {
  top: -80px;
  left: -80px;
  width: 480px;
  height: 480px;
  background: rgba(59, 130, 246, 0.15);
}

html.dark .terms-bg-orb-blue {
  background: rgba(59, 130, 246, 0.07);
}

.terms-bg-orb-purple {
  bottom: 0;
  right: -120px;
  width: 560px;
  height: 560px;
  background: rgba(168, 85, 247, 0.12);
}

html.dark .terms-bg-orb-purple {
  background: rgba(168, 85, 247, 0.06);
}

/* ===========================
   Nav
   =========================== */

.terms-nav {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 860px;
  margin: 0 auto;
  padding: 24px 24px 0 24px;
}

.terms-nav-logo {
  font-size: 1.375rem;
  font-weight: 800;
  background: linear-gradient(to right, #2563eb, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
}

.terms-nav-logo:hover {
  text-decoration: none;
}

.terms-nav-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #64748b;
  text-decoration: none;
  transition: color 0.15s ease;
}

.terms-nav-back:hover {
  color: #2563eb;
  text-decoration: none;
}

html.dark .terms-nav-back {
  color: #94a3b8;
}

html.dark .terms-nav-back:hover {
  color: #60a5fa;
}

/* ===========================
   Header
   =========================== */

.terms-header {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 56px 24px 48px 24px;
}

.terms-header-content {
  max-width: 640px;
  margin: 0 auto;
}

.terms-header-badge {
  display: inline-block;
  padding: 4px 14px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 9999px;
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
  margin-bottom: 16px;
  border: 1px solid rgba(99, 102, 241, 0.2);
}

html.dark .terms-header-badge {
  background: rgba(99, 102, 241, 0.15);
  color: #a5b4fc;
  border-color: rgba(99, 102, 241, 0.3);
}

.terms-header-title {
  font-size: 2.75rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 10px 0;
  line-height: 1.15;
}

html.dark .terms-header-title {
  color: #f1f5f9;
}

@media (max-width: 600px) {
  .terms-header-title {
    font-size: 2rem;
  }
}

.terms-header-subtitle {
  font-size: 0.875rem;
  color: #94a3b8;
  margin: 0 0 18px 0;
}

.terms-header-desc {
  font-size: 1.0625rem;
  color: #475569;
  margin: 0;
  line-height: 1.65;
}

html.dark .terms-header-desc {
  color: #94a3b8;
}

/* ===========================
   Main content
   =========================== */

.terms-content {
  position: relative;
  z-index: 10;
  padding: 0 24px 80px 24px;
}

.terms-container {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ===========================
   Sections
   =========================== */

.terms-section {
  display: flex;
  gap: 20px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 20px;
  padding: 28px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 24px 0 rgba(15, 23, 42, 0.06);
}

html.dark .terms-section {
  background: rgba(30, 41, 59, 0.5);
  border-color: rgba(51, 65, 85, 0.6);
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.2);
}

.terms-section-highlight {
  border-color: rgba(99, 102, 241, 0.25);
  background: rgba(238, 242, 255, 0.7);
}

html.dark .terms-section-highlight {
  border-color: rgba(99, 102, 241, 0.3);
  background: rgba(30, 27, 75, 0.35);
}

.terms-section-last {
  margin-bottom: 0;
}

@media (max-width: 560px) {
  .terms-section {
    flex-direction: column;
    gap: 14px;
    padding: 22px 20px;
  }
}

/* ===========================
   Section icon
   =========================== */

.terms-section-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  margin-top: 2px;
}

.terms-section-icon-blue {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
}

.terms-section-icon-purple {
  background: linear-gradient(135deg, #a855f7, #6366f1);
}

.terms-section-icon-indigo {
  background: linear-gradient(135deg, #6366f1, #3b82f6);
}

/* ===========================
   Section body
   =========================== */

.terms-section-body {
  flex: 1;
  min-width: 0;
}

.terms-section-title {
  font-size: 1.1875rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 12px 0;
  line-height: 1.3;
}

html.dark .terms-section-title {
  color: #f1f5f9;
}

.terms-section-text {
  font-size: 0.9375rem;
  color: #475569;
  margin: 0 0 12px 0;
  line-height: 1.7;
}

.terms-section-text:last-child {
  margin-bottom: 0;
}

html.dark .terms-section-text {
  color: #94a3b8;
}

/* ===========================
   Inline link
   =========================== */

.terms-inline-link {
  color: #2563eb;
  text-decoration: underline;
  font-weight: 500;
}

.terms-inline-link:hover {
  color: #1d4ed8;
}

html.dark .terms-inline-link {
  color: #60a5fa;
}

html.dark .terms-inline-link:hover {
  color: #93c5fd;
}

/* ===========================
   Callout box
   =========================== */

.terms-callout {
  background: rgba(99, 102, 241, 0.08);
  border-left: 3px solid #6366f1;
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  font-size: 0.9375rem;
  color: #3730a3;
  margin-bottom: 14px;
  line-height: 1.65;
}

html.dark .terms-callout {
  background: rgba(99, 102, 241, 0.12);
  border-left-color: #818cf8;
  color: #a5b4fc;
}

/* ===========================
   Contact box
   =========================== */

.terms-contact-box {
  display: inline-block;
  background: rgba(241, 245, 249, 0.8);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 0.9375rem;
  color: #1e293b;
  line-height: 1.8;
}

html.dark .terms-contact-box {
  background: rgba(15, 23, 42, 0.5);
  border-color: rgba(51, 65, 85, 0.6);
  color: #e2e8f0;
}

.terms-contact-link {
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
}

.terms-contact-link:hover {
  text-decoration: underline;
}

html.dark .terms-contact-link {
  color: #60a5fa;
}

/* ===========================
   Footer
   =========================== */

.terms-footer {
  position: relative;
  z-index: 10;
  border-top: 1px solid rgba(226, 232, 240, 0.6);
  padding: 24px;
}

html.dark .terms-footer {
  border-top-color: rgba(51, 65, 85, 0.5);
}

.terms-footer-content {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.terms-footer-brand {
  font-size: 1rem;
  font-weight: 700;
  background: linear-gradient(to right, #2563eb, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.terms-footer-links {
  display: flex;
  gap: 20px;
}

.terms-footer-link {
  font-size: 0.875rem;
  color: #64748b;
  text-decoration: none;
  transition: color 0.15s ease;
}

.terms-footer-link:hover {
  color: #2563eb;
  text-decoration: none;
}

html.dark .terms-footer-link {
  color: #64748b;
}

html.dark .terms-footer-link:hover {
  color: #60a5fa;
}

.review {
  position: relative;
  min-height: 100vh;
}

#review-main {
  padding: 0;
  position: relative;
  min-height: calc(100vh - 88px);
}

/* Review main loading state */
.review-loading {
  position: absolute;
  inset: 0;
  top: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  max-height: calc(100vh - 88px);
}

/* Only visible when HTMX is requesting */
#review-loader {
  display: none;
}

#review-loader.htmx-request {
  display: flex;
}

/* Skeleton container */
.review-skeleton {
  width: 100%;
  max-width: 672px;
}

/* Skeleton shimmer base */
.review-skeleton-item {
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: review-skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

html.dark .review-skeleton-item {
  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
  background-size: 200% 100%;
}

@keyframes review-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Header skeleton */
.review-skeleton-header {
  text-align: center;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.review-skeleton-count {
  width: 100px;
  height: 16px;
}

.review-skeleton-elapsed {
  width: 160px;
  height: 12px;
}

/* Card skeleton */
.review-skeleton-card {
  margin-bottom: 32px;
}

.review-skeleton-card-face {
  position: relative;
  width: 100%;
  height: 320px;
  border-radius: 16px;
  border: 2px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 32px;
  background: rgba(249, 250, 251, 0.9);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
}

.review-skeleton-pronunciation-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 40px;
  height: 40px;
  border-radius: 8px;
}

html.dark .review-skeleton-card-face {
  border-color: #374151;
  background: rgba(30, 41, 59, 0.9);
}

.review-skeleton-badge-pill {
  width: 80px;
  height: 26px;
  border-radius: 9999px;
}

.review-skeleton-word-block {
  width: 200px;
  height: 52px;
  border-radius: 8px;
}

.review-skeleton-hint-line {
  width: 140px;
  height: 14px;
}

.review-skeleton-translate-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 384px;
}

.review-skeleton-input-block {
  flex: 1;
  height: 43px;
  border-radius: 8px;
}

.review-skeleton-submit-btn {
  width: 43px;
  height: 43px;
  border-radius: 8px;
  flex-shrink: 0;
}

/* Navigation skeleton */
.review-skeleton-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
}

.review-skeleton-nav-circle {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
}

.review-skeleton-nav-rect {
  width: 160px;
  height: 38px;
  border-radius: 6px;
}

/* Progress skeleton */
.review-skeleton-progress {
  width: 100%;
  height: 8px;
  border-radius: 9999px;
}

/* Example button skeleton */
.review-skeleton-example-btn {
  position: fixed;
  bottom: 4rem;
  left: 32px;
  width: 140px;
  height: 44px;
  border-radius: 9999px;
}

.review-body {
  position: relative;
  min-height: calc(100vh - 88px);
  display: flex;
  flex: 1;
  overflow: hidden;
  background: linear-gradient(to bottom right, #f9fafb, #ffffff, #f3f4f6);
}

html.dark .review-body {
  background: linear-gradient(to bottom right, #111827, #1f2937, #111827);
}

.review-body-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
}

.review-body-container {
  width: 100%;
  max-width: 672px;
}

/* Header */
.review-body-header {
  text-align: center;
  margin-bottom: 24px;
}

.review-body-card-count {
  font-size: 0.875rem;
  color: #4b5563;
}

html.dark .review-body-card-count {
  color: #9ca3af;
}

.review-body-meta {
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.review-body-review-elapsed {
  font-size: 0.75rem;
  color: #6b7280;
}

html.dark .review-body-review-elapsed {
  color: #6b7280;
}

.review-body-status-badge {
  padding: 3px 12px;
  text-transform: capitalize;
  background-color: #eceef0;
  color: #1c2029;
  border-radius: 9999px;
  font-size: 0.75rem;
}

html.dark .review-body-status-badge {
  background-color: rgba(108, 110, 115, 0.3);
  color: #c7c8c8;
}

/* Flip Card */
.review-body-flip-wrapper {
  margin-bottom: 32px;
  cursor: pointer;
  perspective: 1000px;
}

.review-body-flip-inner {
  position: relative;
  width: 100%;
  height: 320px;
  transition: transform 0.5s;
  /* transition: transform 0.6s; */
  transform-style: preserve-3d;
}

.review-body-flip-inner-flipped {
  transform: rotateY(180deg);
}

.review-body-flip-inner-flipped .review-body-translate-form,
.review-body-flip-inner-flipped .review-body-pronunciation-btn {
  opacity: 0;
}

.review-body-flip-front,
.review-body-flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.review-body-flip-back {
  transform: rotateY(180deg);
}

.review-body-card-face {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(24px);
}

.review-body-pronunciation-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 10px;
  border-radius: 8px;
  background-color: rgba(219, 234, 254, 0.8);
  border: 1px solid rgba(191, 219, 254, 0.6);
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition:
    background-color 0.15s,
    transform 0.15s;
  color: #2563eb;
  display: flex;
  align-items: center;
  justify-content: center;
}

.review-body-pronunciation-btn:hover {
  background-color: rgba(191, 219, 254, 0.8);
  transform: scale(1.1);
}

.review-body-pronunciation-btn:active {
  transform: scale(0.95);
}

html.dark .review-body-pronunciation-btn {
  background-color: rgba(30, 58, 138, 0.4);
  border-color: rgba(29, 78, 216, 0.6);
  color: #60a5fa;
}

html.dark .review-body-pronunciation-btn:hover {
  background-color: rgba(30, 64, 175, 0.6);
}

.review-body-card-face-front {
  border-color: #93c5fd;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.9),
    rgba(239, 246, 255, 0.8)
  );
}

html.dark .review-body-card-face-front {
  border-color: #2563eb;
  background: linear-gradient(
    to bottom right,
    rgba(30, 41, 59, 0.9),
    rgba(23, 37, 84, 0.4)
  );
}

.review-body-card-face-back {
  border-color: #e5e7eb;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.97),
    rgba(249, 250, 251, 0.9)
  );
}

html.dark .review-body-card-face-back {
  border-color: #374151;
  background: linear-gradient(
    to bottom right,
    rgba(30, 41, 59, 0.85),
    rgba(30, 41, 59, 0.6)
  );
}

.review-body-card-badge-wrap {
  margin-bottom: 16px;
}

.review-body-front-badge {
  padding: 4px 12px;
  background-color: #dbeafe;
  text-transform: capitalize;
  color: #1d4ed8;
  border-radius: 9999px;
  font-size: 0.875rem;
}

html.dark .review-body-front-badge {
  background-color: rgba(30, 58, 138, 0.3);
  color: #60a5fa;
}

.review-body-back-badge {
  padding: 4px 12px;
  background-color: #f3f4f6;
  color: #6b7280;
  border-radius: 9999px;
  font-size: 0.875rem;
}

html.dark .review-body-back-badge {
  background-color: rgba(55, 65, 81, 0.3);
  color: #9ca3af;
}

/* ── Blue (nouns / phrase color-0) ────────────────────────── */
.review-body-group-nouns .review-body-front-badge,
.review-body-group-color-0 .review-body-front-badge,
.review-body-group-nouns .review-body-back-badge,
.review-body-group-color-0 .review-body-back-badge {
  background-color: #dbeafe;
  color: #1e40af;
}
.review-body-group-nouns .review-body-card-face-front,
.review-body-group-color-0 .review-body-card-face-front {
  border-color: #93c5fd;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.9),
    rgba(239, 246, 255, 0.8)
  );
}
.review-body-group-nouns .review-body-card-face-back,
.review-body-group-color-0 .review-body-card-face-back {
  border-color: #bfdbfe;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.97),
    rgba(239, 246, 255, 0.4)
  );
}
.review-body-group-nouns .review-body-pronunciation-btn,
.review-body-group-color-0 .review-body-pronunciation-btn {
  background-color: rgba(219, 234, 254, 0.8);
  border-color: rgba(191, 219, 254, 0.6);
  color: #2563eb;
}
.review-body-group-nouns .review-body-pronunciation-btn:hover,
.review-body-group-color-0 .review-body-pronunciation-btn:hover {
  background-color: rgba(191, 219, 254, 0.8);
}
.review-body-group-nouns .review-body-translate-btn,
.review-body-group-color-0 .review-body-translate-btn {
  background-color: rgba(239, 246, 255, 0.9);
  border-color: rgba(191, 219, 254, 0.6);
  color: #2563eb;
}
.review-body-group-nouns .review-body-translate-btn:hover,
.review-body-group-color-0 .review-body-translate-btn:hover {
  background-color: rgba(219, 234, 254, 0.9);
}
.review-body-group-nouns .review-body-translate-input,
.review-body-group-color-0 .review-body-translate-input {
  border-color: #dbeafe;
}
.review-body-group-nouns .review-body-translate-input:focus,
.review-body-group-color-0 .review-body-translate-input:focus {
  border-color: #93c5fd;
}
html.dark .review-body-group-nouns .review-body-front-badge,
html.dark .review-body-group-color-0 .review-body-front-badge,
html.dark .review-body-group-nouns .review-body-back-badge,
html.dark .review-body-group-color-0 .review-body-back-badge {
  background-color: rgba(30, 58, 138, 0.3);
  color: #93c5fd;
}
html.dark .review-body-group-nouns .review-body-card-face-front,
html.dark .review-body-group-color-0 .review-body-card-face-front {
  border-color: #2563eb;
  background: linear-gradient(
    to bottom right,
    rgba(30, 41, 59, 0.9),
    rgba(23, 37, 84, 0.4)
  );
}
html.dark .review-body-group-nouns .review-body-card-face-back,
html.dark .review-body-group-color-0 .review-body-card-face-back {
  border-color: #1e3a8a;
  background: linear-gradient(
    to bottom right,
    rgba(30, 41, 59, 0.85),
    rgba(23, 37, 84, 0.15)
  );
}
html.dark .review-body-group-nouns .review-body-pronunciation-btn,
html.dark .review-body-group-color-0 .review-body-pronunciation-btn {
  background-color: rgba(30, 58, 138, 0.4);
  border-color: rgba(29, 78, 216, 0.6);
  color: #60a5fa;
}
html.dark .review-body-group-nouns .review-body-pronunciation-btn:hover,
html.dark .review-body-group-color-0 .review-body-pronunciation-btn:hover {
  background-color: rgba(30, 64, 175, 0.6);
}
html.dark .review-body-group-nouns .review-body-translate-btn,
html.dark .review-body-group-color-0 .review-body-translate-btn {
  background-color: rgba(30, 58, 138, 0.3);
  border-color: rgba(29, 78, 216, 0.6);
  color: #60a5fa;
}
html.dark .review-body-group-nouns .review-body-translate-btn:hover,
html.dark .review-body-group-color-0 .review-body-translate-btn:hover {
  background-color: rgba(30, 64, 175, 0.4);
}
html.dark .review-body-group-nouns .review-body-translate-input,
html.dark .review-body-group-color-0 .review-body-translate-input {
  border-color: #1e40af;
}
html.dark .review-body-group-nouns .review-body-translate-input:focus,
html.dark .review-body-group-color-0 .review-body-translate-input:focus {
  border-color: #2563eb;
}
.review-body-group-nouns .review-body-progress-fill,
.review-body-group-color-0 .review-body-progress-fill {
  background: linear-gradient(to right, #93c5fd, #3b82f6);
}
.review-body-group-nouns .ui-review-example-btn,
.review-body-group-color-0 .ui-review-example-btn {
  background: linear-gradient(to right, #60a5fa, #2563eb);
  border-color: #93c5fd;
}
.review-body-group-nouns .ui-review-example-btn:hover,
.review-body-group-color-0 .ui-review-example-btn:hover {
  background: linear-gradient(to right, #3b82f6, #1d4ed8);
}
.review-body-group-nouns .ui-review-example-panel-inner,
.review-body-group-color-0 .ui-review-example-panel-inner {
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.95),
    rgba(239, 246, 255, 0.9)
  );
  border-color: #bfdbfe;
}
.review-body-group-nouns .ui-review-example-panel-icon-wrap,
.review-body-group-color-0 .ui-review-example-panel-icon-wrap {
  background-color: #dbeafe;
}
.review-body-group-nouns .ui-review-example-panel-icon,
.review-body-group-color-0 .ui-review-example-panel-icon {
  color: #2563eb;
}
.review-body-group-nouns .ui-review-example-panel-title,
.review-body-group-color-0 .ui-review-example-panel-title {
  color: #1d4ed8;
}
.review-body-group-nouns .ui-review-example-panel-close-btn:hover,
.review-body-group-color-0 .ui-review-example-panel-close-btn:hover {
  background-color: #dbeafe;
}
.review-body-group-nouns .ui-review-example-panel-footer,
.review-body-group-color-0 .ui-review-example-panel-footer {
  border-color: #bfdbfe;
}
.review-body-group-nouns .ui-review-example-panel-audio-btn,
.review-body-group-color-0 .ui-review-example-panel-audio-btn {
  color: #2563eb;
}
.review-body-group-nouns .ui-review-example-panel-audio-btn:hover,
.review-body-group-color-0 .ui-review-example-panel-audio-btn:hover {
  color: #1d4ed8;
}
html.dark .review-body-group-nouns .review-body-progress-fill,
html.dark .review-body-group-color-0 .review-body-progress-fill {
  background: linear-gradient(to right, #1e40af, #2563eb);
}
html.dark .review-body-group-nouns .ui-review-example-btn,
html.dark .review-body-group-color-0 .ui-review-example-btn {
  background: linear-gradient(to right, #2563eb, #1d4ed8);
  border-color: #3b82f6;
}
html.dark .review-body-group-nouns .ui-review-example-btn:hover,
html.dark .review-body-group-color-0 .ui-review-example-btn:hover {
  background: linear-gradient(to right, #1d4ed8, #1e40af);
}
html.dark .review-body-group-nouns .ui-review-example-panel-inner,
html.dark .review-body-group-color-0 .ui-review-example-panel-inner {
  background: linear-gradient(
    to bottom right,
    rgba(31, 41, 55, 0.95),
    rgba(23, 37, 84, 0.4)
  );
  border-color: rgba(37, 99, 235, 0.5);
}
html.dark .review-body-group-nouns .ui-review-example-panel-icon-wrap,
html.dark .review-body-group-color-0 .ui-review-example-panel-icon-wrap {
  background-color: rgba(30, 58, 138, 0.4);
}
html.dark .review-body-group-nouns .ui-review-example-panel-icon,
html.dark .review-body-group-color-0 .ui-review-example-panel-icon {
  color: #60a5fa;
}
html.dark .review-body-group-nouns .ui-review-example-panel-title,
html.dark .review-body-group-color-0 .ui-review-example-panel-title {
  color: #93c5fd;
}
html.dark .review-body-group-nouns .ui-review-example-panel-close-btn:hover,
html.dark .review-body-group-color-0 .ui-review-example-panel-close-btn:hover {
  background-color: rgba(30, 58, 138, 0.4);
}
html.dark .review-body-group-nouns .ui-review-example-panel-footer,
html.dark .review-body-group-color-0 .ui-review-example-panel-footer {
  border-color: rgba(37, 99, 235, 0.5);
}
html.dark .review-body-group-nouns .ui-review-example-panel-audio-btn,
html.dark .review-body-group-color-0 .ui-review-example-panel-audio-btn {
  color: #60a5fa;
}
html.dark .review-body-group-nouns .ui-review-example-panel-audio-btn:hover,
html.dark .review-body-group-color-0 .ui-review-example-panel-audio-btn:hover {
  color: #93c5fd;
}

/* ── Green (verbs / phrase color-1) ────────────────────────── */
.review-body-group-verbs .review-body-front-badge,
.review-body-group-color-1 .review-body-front-badge,
.review-body-group-verbs .review-body-back-badge,
.review-body-group-color-1 .review-body-back-badge {
  background-color: #d1fae5;
  color: #065f46;
}
.review-body-group-verbs .review-body-card-face-front,
.review-body-group-color-1 .review-body-card-face-front {
  border-color: #6ee7b7;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.9),
    rgba(240, 253, 244, 0.8)
  );
}
.review-body-group-verbs .review-body-card-face-back,
.review-body-group-color-1 .review-body-card-face-back {
  border-color: #a7f3d0;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.97),
    rgba(240, 253, 244, 0.4)
  );
}
.review-body-group-verbs .review-body-pronunciation-btn,
.review-body-group-color-1 .review-body-pronunciation-btn {
  background-color: rgba(209, 250, 229, 0.8);
  border-color: rgba(167, 243, 208, 0.6);
  color: #059669;
}
.review-body-group-verbs .review-body-pronunciation-btn:hover,
.review-body-group-color-1 .review-body-pronunciation-btn:hover {
  background-color: rgba(167, 243, 208, 0.8);
}
.review-body-group-verbs .review-body-translate-btn,
.review-body-group-color-1 .review-body-translate-btn {
  background-color: rgba(240, 253, 244, 0.9);
  border-color: rgba(167, 243, 208, 0.6);
  color: #059669;
}
.review-body-group-verbs .review-body-translate-btn:hover,
.review-body-group-color-1 .review-body-translate-btn:hover {
  background-color: rgba(209, 250, 229, 0.9);
}
.review-body-group-verbs .review-body-translate-input,
.review-body-group-color-1 .review-body-translate-input {
  border-color: #d1fae5;
}
.review-body-group-verbs .review-body-translate-input:focus,
.review-body-group-color-1 .review-body-translate-input:focus {
  border-color: #6ee7b7;
}
html.dark .review-body-group-verbs .review-body-front-badge,
html.dark .review-body-group-color-1 .review-body-front-badge,
html.dark .review-body-group-verbs .review-body-back-badge,
html.dark .review-body-group-color-1 .review-body-back-badge {
  background-color: rgba(6, 95, 70, 0.3);
  color: #86efac;
}
html.dark .review-body-group-verbs .review-body-card-face-front,
html.dark .review-body-group-color-1 .review-body-card-face-front {
  border-color: #059669;
  background: linear-gradient(
    to bottom right,
    rgba(30, 41, 59, 0.9),
    rgba(6, 78, 59, 0.4)
  );
}
html.dark .review-body-group-verbs .review-body-card-face-back,
html.dark .review-body-group-color-1 .review-body-card-face-back {
  border-color: #064e3b;
  background: linear-gradient(
    to bottom right,
    rgba(30, 41, 59, 0.85),
    rgba(6, 78, 59, 0.15)
  );
}
html.dark .review-body-group-verbs .review-body-pronunciation-btn,
html.dark .review-body-group-color-1 .review-body-pronunciation-btn {
  background-color: rgba(6, 78, 59, 0.4);
  border-color: rgba(5, 150, 105, 0.6);
  color: #34d399;
}
html.dark .review-body-group-verbs .review-body-pronunciation-btn:hover,
html.dark .review-body-group-color-1 .review-body-pronunciation-btn:hover {
  background-color: rgba(5, 120, 80, 0.6);
}
html.dark .review-body-group-verbs .review-body-translate-btn,
html.dark .review-body-group-color-1 .review-body-translate-btn {
  background-color: rgba(6, 78, 59, 0.3);
  border-color: rgba(5, 150, 105, 0.6);
  color: #34d399;
}
html.dark .review-body-group-verbs .review-body-translate-btn:hover,
html.dark .review-body-group-color-1 .review-body-translate-btn:hover {
  background-color: rgba(5, 120, 80, 0.4);
}
html.dark .review-body-group-verbs .review-body-translate-input,
html.dark .review-body-group-color-1 .review-body-translate-input {
  border-color: #065f46;
}
html.dark .review-body-group-verbs .review-body-translate-input:focus,
html.dark .review-body-group-color-1 .review-body-translate-input:focus {
  border-color: #059669;
}
.review-body-group-verbs .review-body-progress-fill,
.review-body-group-color-1 .review-body-progress-fill {
  background: linear-gradient(to right, #6ee7b7, #059669);
}
.review-body-group-verbs .ui-review-example-btn,
.review-body-group-color-1 .ui-review-example-btn {
  background: linear-gradient(to right, #34d399, #059669);
  border-color: #6ee7b7;
}
.review-body-group-verbs .ui-review-example-btn:hover,
.review-body-group-color-1 .ui-review-example-btn:hover {
  background: linear-gradient(to right, #10b981, #047857);
}
.review-body-group-verbs .ui-review-example-panel-inner,
.review-body-group-color-1 .ui-review-example-panel-inner {
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.95),
    rgba(240, 253, 244, 0.9)
  );
  border-color: #a7f3d0;
}
.review-body-group-verbs .ui-review-example-panel-icon-wrap,
.review-body-group-color-1 .ui-review-example-panel-icon-wrap {
  background-color: #d1fae5;
}
.review-body-group-verbs .ui-review-example-panel-icon,
.review-body-group-color-1 .ui-review-example-panel-icon {
  color: #059669;
}
.review-body-group-verbs .ui-review-example-panel-title,
.review-body-group-color-1 .ui-review-example-panel-title {
  color: #047857;
}
.review-body-group-verbs .ui-review-example-panel-close-btn:hover,
.review-body-group-color-1 .ui-review-example-panel-close-btn:hover {
  background-color: #d1fae5;
}
.review-body-group-verbs .ui-review-example-panel-footer,
.review-body-group-color-1 .ui-review-example-panel-footer {
  border-color: #a7f3d0;
}
.review-body-group-verbs .ui-review-example-panel-audio-btn,
.review-body-group-color-1 .ui-review-example-panel-audio-btn {
  color: #059669;
}
.review-body-group-verbs .ui-review-example-panel-audio-btn:hover,
.review-body-group-color-1 .ui-review-example-panel-audio-btn:hover {
  color: #047857;
}
html.dark .review-body-group-verbs .review-body-progress-fill,
html.dark .review-body-group-color-1 .review-body-progress-fill {
  background: linear-gradient(to right, #065f46, #059669);
}
html.dark .review-body-group-verbs .ui-review-example-btn,
html.dark .review-body-group-color-1 .ui-review-example-btn {
  background: linear-gradient(to right, #059669, #047857);
  border-color: #34d399;
}
html.dark .review-body-group-verbs .ui-review-example-btn:hover,
html.dark .review-body-group-color-1 .ui-review-example-btn:hover {
  background: linear-gradient(to right, #047857, #065f46);
}
html.dark .review-body-group-verbs .ui-review-example-panel-inner,
html.dark .review-body-group-color-1 .ui-review-example-panel-inner {
  background: linear-gradient(
    to bottom right,
    rgba(31, 41, 55, 0.95),
    rgba(6, 78, 59, 0.4)
  );
  border-color: rgba(5, 150, 105, 0.5);
}
html.dark .review-body-group-verbs .ui-review-example-panel-icon-wrap,
html.dark .review-body-group-color-1 .ui-review-example-panel-icon-wrap {
  background-color: rgba(6, 78, 59, 0.4);
}
html.dark .review-body-group-verbs .ui-review-example-panel-icon,
html.dark .review-body-group-color-1 .ui-review-example-panel-icon {
  color: #34d399;
}
html.dark .review-body-group-verbs .ui-review-example-panel-title,
html.dark .review-body-group-color-1 .ui-review-example-panel-title {
  color: #6ee7b7;
}
html.dark .review-body-group-verbs .ui-review-example-panel-close-btn:hover,
html.dark .review-body-group-color-1 .ui-review-example-panel-close-btn:hover {
  background-color: rgba(6, 78, 59, 0.4);
}
html.dark .review-body-group-verbs .ui-review-example-panel-footer,
html.dark .review-body-group-color-1 .ui-review-example-panel-footer {
  border-color: rgba(5, 150, 105, 0.5);
}
html.dark .review-body-group-verbs .ui-review-example-panel-audio-btn,
html.dark .review-body-group-color-1 .ui-review-example-panel-audio-btn {
  color: #34d399;
}
html.dark .review-body-group-verbs .ui-review-example-panel-audio-btn:hover,
html.dark .review-body-group-color-1 .ui-review-example-panel-audio-btn:hover {
  color: #6ee7b7;
}

/* ── Purple (adjectives / phrase color-2) ─────────────────── */
.review-body-group-adjectives .review-body-front-badge,
.review-body-group-color-2 .review-body-front-badge,
.review-body-group-adjectives .review-body-back-badge,
.review-body-group-color-2 .review-body-back-badge {
  background-color: #f3e8ff;
  color: #6b21a8;
}
.review-body-group-adjectives .review-body-card-face-front,
.review-body-group-color-2 .review-body-card-face-front {
  border-color: #d8b4fe;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.9),
    rgba(250, 245, 255, 0.8)
  );
}
.review-body-group-adjectives .review-body-card-face-back,
.review-body-group-color-2 .review-body-card-face-back {
  border-color: #e9d5ff;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.97),
    rgba(250, 245, 255, 0.4)
  );
}
.review-body-group-adjectives .review-body-pronunciation-btn,
.review-body-group-color-2 .review-body-pronunciation-btn {
  background-color: rgba(243, 232, 255, 0.8);
  border-color: rgba(233, 213, 255, 0.6);
  color: #9333ea;
}
.review-body-group-adjectives .review-body-pronunciation-btn:hover,
.review-body-group-color-2 .review-body-pronunciation-btn:hover {
  background-color: rgba(233, 213, 255, 0.8);
}
.review-body-group-adjectives .review-body-translate-btn,
.review-body-group-color-2 .review-body-translate-btn {
  background-color: rgba(250, 245, 255, 0.9);
  border-color: rgba(233, 213, 255, 0.6);
  color: #9333ea;
}
.review-body-group-adjectives .review-body-translate-btn:hover,
.review-body-group-color-2 .review-body-translate-btn:hover {
  background-color: rgba(243, 232, 255, 0.9);
}
.review-body-group-adjectives .review-body-translate-input,
.review-body-group-color-2 .review-body-translate-input {
  border-color: #f3e8ff;
}
.review-body-group-adjectives .review-body-translate-input:focus,
.review-body-group-color-2 .review-body-translate-input:focus {
  border-color: #d8b4fe;
}
html.dark .review-body-group-adjectives .review-body-front-badge,
html.dark .review-body-group-color-2 .review-body-front-badge,
html.dark .review-body-group-adjectives .review-body-back-badge,
html.dark .review-body-group-color-2 .review-body-back-badge {
  background-color: rgba(107, 33, 168, 0.3);
  color: #d8b4fe;
}
html.dark .review-body-group-adjectives .review-body-card-face-front,
html.dark .review-body-group-color-2 .review-body-card-face-front {
  border-color: #9333ea;
  background: linear-gradient(
    to bottom right,
    rgba(30, 41, 59, 0.9),
    rgba(59, 7, 100, 0.4)
  );
}
html.dark .review-body-group-adjectives .review-body-card-face-back,
html.dark .review-body-group-color-2 .review-body-card-face-back {
  border-color: #4a1d96;
  background: linear-gradient(
    to bottom right,
    rgba(30, 41, 59, 0.85),
    rgba(59, 7, 100, 0.15)
  );
}
html.dark .review-body-group-adjectives .review-body-pronunciation-btn,
html.dark .review-body-group-color-2 .review-body-pronunciation-btn {
  background-color: rgba(88, 28, 135, 0.4);
  border-color: rgba(126, 34, 206, 0.6);
  color: #c084fc;
}
html.dark .review-body-group-adjectives .review-body-pronunciation-btn:hover,
html.dark .review-body-group-color-2 .review-body-pronunciation-btn:hover {
  background-color: rgba(107, 33, 168, 0.6);
}
html.dark .review-body-group-adjectives .review-body-translate-btn,
html.dark .review-body-group-color-2 .review-body-translate-btn {
  background-color: rgba(88, 28, 135, 0.3);
  border-color: rgba(126, 34, 206, 0.6);
  color: #c084fc;
}
html.dark .review-body-group-adjectives .review-body-translate-btn:hover,
html.dark .review-body-group-color-2 .review-body-translate-btn:hover {
  background-color: rgba(107, 33, 168, 0.4);
}
html.dark .review-body-group-adjectives .review-body-translate-input,
html.dark .review-body-group-color-2 .review-body-translate-input {
  border-color: #6b21a8;
}
html.dark .review-body-group-adjectives .review-body-translate-input:focus,
html.dark .review-body-group-color-2 .review-body-translate-input:focus {
  border-color: #9333ea;
}
.review-body-group-adjectives .review-body-progress-fill,
.review-body-group-color-2 .review-body-progress-fill {
  background: linear-gradient(to right, #d8b4fe, #9333ea);
}
.review-body-group-adjectives .ui-review-example-btn,
.review-body-group-color-2 .ui-review-example-btn {
  background: linear-gradient(to right, #c084fc, #9333ea);
  border-color: #d8b4fe;
}
.review-body-group-adjectives .ui-review-example-btn:hover,
.review-body-group-color-2 .ui-review-example-btn:hover {
  background: linear-gradient(to right, #a855f7, #7e22ce);
}
.review-body-group-adjectives .ui-review-example-panel-inner,
.review-body-group-color-2 .ui-review-example-panel-inner {
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.95),
    rgba(250, 245, 255, 0.9)
  );
  border-color: #e9d5ff;
}
.review-body-group-adjectives .ui-review-example-panel-icon-wrap,
.review-body-group-color-2 .ui-review-example-panel-icon-wrap {
  background-color: #f3e8ff;
}
.review-body-group-adjectives .ui-review-example-panel-icon,
.review-body-group-color-2 .ui-review-example-panel-icon {
  color: #9333ea;
}
.review-body-group-adjectives .ui-review-example-panel-title,
.review-body-group-color-2 .ui-review-example-panel-title {
  color: #7e22ce;
}
.review-body-group-adjectives .ui-review-example-panel-close-btn:hover,
.review-body-group-color-2 .ui-review-example-panel-close-btn:hover {
  background-color: #f3e8ff;
}
.review-body-group-adjectives .ui-review-example-panel-footer,
.review-body-group-color-2 .ui-review-example-panel-footer {
  border-color: #e9d5ff;
}
.review-body-group-adjectives .ui-review-example-panel-audio-btn,
.review-body-group-color-2 .ui-review-example-panel-audio-btn {
  color: #9333ea;
}
.review-body-group-adjectives .ui-review-example-panel-audio-btn:hover,
.review-body-group-color-2 .ui-review-example-panel-audio-btn:hover {
  color: #7e22ce;
}
html.dark .review-body-group-adjectives .review-body-progress-fill,
html.dark .review-body-group-color-2 .review-body-progress-fill {
  background: linear-gradient(to right, #4a1d96, #9333ea);
}
html.dark .review-body-group-adjectives .ui-review-example-btn,
html.dark .review-body-group-color-2 .ui-review-example-btn {
  background: linear-gradient(to right, #9333ea, #7e22ce);
  border-color: #a855f7;
}
html.dark .review-body-group-adjectives .ui-review-example-btn:hover,
html.dark .review-body-group-color-2 .ui-review-example-btn:hover {
  background: linear-gradient(to right, #7e22ce, #6b21a8);
}
html.dark .review-body-group-adjectives .ui-review-example-panel-inner,
html.dark .review-body-group-color-2 .ui-review-example-panel-inner {
  background: linear-gradient(
    to bottom right,
    rgba(31, 41, 55, 0.95),
    rgba(59, 7, 100, 0.4)
  );
  border-color: rgba(147, 51, 234, 0.5);
}
html.dark .review-body-group-adjectives .ui-review-example-panel-icon-wrap,
html.dark .review-body-group-color-2 .ui-review-example-panel-icon-wrap {
  background-color: rgba(88, 28, 135, 0.4);
}
html.dark .review-body-group-adjectives .ui-review-example-panel-icon,
html.dark .review-body-group-color-2 .ui-review-example-panel-icon {
  color: #c084fc;
}
html.dark .review-body-group-adjectives .ui-review-example-panel-title,
html.dark .review-body-group-color-2 .ui-review-example-panel-title {
  color: #d8b4fe;
}
html.dark
  .review-body-group-adjectives
  .ui-review-example-panel-close-btn:hover,
html.dark .review-body-group-color-2 .ui-review-example-panel-close-btn:hover {
  background-color: rgba(88, 28, 135, 0.4);
}
html.dark .review-body-group-adjectives .ui-review-example-panel-footer,
html.dark .review-body-group-color-2 .ui-review-example-panel-footer {
  border-color: rgba(147, 51, 234, 0.5);
}
html.dark .review-body-group-adjectives .ui-review-example-panel-audio-btn,
html.dark .review-body-group-color-2 .ui-review-example-panel-audio-btn {
  color: #c084fc;
}
html.dark
  .review-body-group-adjectives
  .ui-review-example-panel-audio-btn:hover,
html.dark .review-body-group-color-2 .ui-review-example-panel-audio-btn:hover {
  color: #d8b4fe;
}

/* ── Orange (adverbs / phrase color-3) ─────────────────────── */
.review-body-group-adverbs .review-body-front-badge,
.review-body-group-color-3 .review-body-front-badge,
.review-body-group-adverbs .review-body-back-badge,
.review-body-group-color-3 .review-body-back-badge {
  background-color: #fed7aa;
  color: #9a3412;
}
.review-body-group-adverbs .review-body-card-face-front,
.review-body-group-color-3 .review-body-card-face-front {
  border-color: #fdba74;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.9),
    rgba(255, 247, 237, 0.8)
  );
}
.review-body-group-adverbs .review-body-card-face-back,
.review-body-group-color-3 .review-body-card-face-back {
  border-color: #fed7aa;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.97),
    rgba(255, 247, 237, 0.4)
  );
}
.review-body-group-adverbs .review-body-pronunciation-btn,
.review-body-group-color-3 .review-body-pronunciation-btn {
  background-color: rgba(254, 215, 170, 0.8);
  border-color: rgba(253, 186, 116, 0.6);
  color: #ea580c;
}
.review-body-group-adverbs .review-body-pronunciation-btn:hover,
.review-body-group-color-3 .review-body-pronunciation-btn:hover {
  background-color: rgba(253, 186, 116, 0.8);
}
.review-body-group-adverbs .review-body-translate-btn,
.review-body-group-color-3 .review-body-translate-btn {
  background-color: rgba(255, 247, 237, 0.9);
  border-color: rgba(253, 186, 116, 0.6);
  color: #ea580c;
}
.review-body-group-adverbs .review-body-translate-btn:hover,
.review-body-group-color-3 .review-body-translate-btn:hover {
  background-color: rgba(254, 215, 170, 0.9);
}
.review-body-group-adverbs .review-body-translate-input,
.review-body-group-color-3 .review-body-translate-input {
  border-color: #fed7aa;
}
.review-body-group-adverbs .review-body-translate-input:focus,
.review-body-group-color-3 .review-body-translate-input:focus {
  border-color: #fdba74;
}
html.dark .review-body-group-adverbs .review-body-front-badge,
html.dark .review-body-group-color-3 .review-body-front-badge,
html.dark .review-body-group-adverbs .review-body-back-badge,
html.dark .review-body-group-color-3 .review-body-back-badge {
  background-color: rgba(154, 52, 18, 0.3);
  color: #fdba74;
}
html.dark .review-body-group-adverbs .review-body-card-face-front,
html.dark .review-body-group-color-3 .review-body-card-face-front {
  border-color: #ea580c;
  background: linear-gradient(
    to bottom right,
    rgba(30, 41, 59, 0.9),
    rgba(124, 45, 18, 0.4)
  );
}
html.dark .review-body-group-adverbs .review-body-card-face-back,
html.dark .review-body-group-color-3 .review-body-card-face-back {
  border-color: #7c2d12;
  background: linear-gradient(
    to bottom right,
    rgba(30, 41, 59, 0.85),
    rgba(124, 45, 18, 0.15)
  );
}
html.dark .review-body-group-adverbs .review-body-pronunciation-btn,
html.dark .review-body-group-color-3 .review-body-pronunciation-btn {
  background-color: rgba(124, 45, 18, 0.4);
  border-color: rgba(194, 65, 12, 0.6);
  color: #fb923c;
}
html.dark .review-body-group-adverbs .review-body-pronunciation-btn:hover,
html.dark .review-body-group-color-3 .review-body-pronunciation-btn:hover {
  background-color: rgba(154, 52, 18, 0.6);
}
html.dark .review-body-group-adverbs .review-body-translate-btn,
html.dark .review-body-group-color-3 .review-body-translate-btn {
  background-color: rgba(124, 45, 18, 0.3);
  border-color: rgba(194, 65, 12, 0.6);
  color: #fb923c;
}
html.dark .review-body-group-adverbs .review-body-translate-btn:hover,
html.dark .review-body-group-color-3 .review-body-translate-btn:hover {
  background-color: rgba(154, 52, 18, 0.4);
}
html.dark .review-body-group-adverbs .review-body-translate-input,
html.dark .review-body-group-color-3 .review-body-translate-input {
  border-color: #9a3412;
}
html.dark .review-body-group-adverbs .review-body-translate-input:focus,
html.dark .review-body-group-color-3 .review-body-translate-input:focus {
  border-color: #ea580c;
}
.review-body-group-adverbs .review-body-progress-fill,
.review-body-group-color-3 .review-body-progress-fill {
  background: linear-gradient(to right, #fdba74, #ea580c);
}
.review-body-group-adverbs .ui-review-example-btn,
.review-body-group-color-3 .ui-review-example-btn {
  background: linear-gradient(to right, #fb923c, #ea580c);
  border-color: #fdba74;
}
.review-body-group-adverbs .ui-review-example-btn:hover,
.review-body-group-color-3 .ui-review-example-btn:hover {
  background: linear-gradient(to right, #f97316, #c2410c);
}
.review-body-group-adverbs .ui-review-example-panel-inner,
.review-body-group-color-3 .ui-review-example-panel-inner {
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.95),
    rgba(255, 247, 237, 0.9)
  );
  border-color: #fed7aa;
}
.review-body-group-adverbs .ui-review-example-panel-icon-wrap,
.review-body-group-color-3 .ui-review-example-panel-icon-wrap {
  background-color: #fed7aa;
}
.review-body-group-adverbs .ui-review-example-panel-icon,
.review-body-group-color-3 .ui-review-example-panel-icon {
  color: #ea580c;
}
.review-body-group-adverbs .ui-review-example-panel-title,
.review-body-group-color-3 .ui-review-example-panel-title {
  color: #c2410c;
}
.review-body-group-adverbs .ui-review-example-panel-close-btn:hover,
.review-body-group-color-3 .ui-review-example-panel-close-btn:hover {
  background-color: #fed7aa;
}
.review-body-group-adverbs .ui-review-example-panel-footer,
.review-body-group-color-3 .ui-review-example-panel-footer {
  border-color: #fed7aa;
}
.review-body-group-adverbs .ui-review-example-panel-audio-btn,
.review-body-group-color-3 .ui-review-example-panel-audio-btn {
  color: #ea580c;
}
.review-body-group-adverbs .ui-review-example-panel-audio-btn:hover,
.review-body-group-color-3 .ui-review-example-panel-audio-btn:hover {
  color: #c2410c;
}
html.dark .review-body-group-adverbs .review-body-progress-fill,
html.dark .review-body-group-color-3 .review-body-progress-fill {
  background: linear-gradient(to right, #7c2d12, #ea580c);
}
html.dark .review-body-group-adverbs .ui-review-example-btn,
html.dark .review-body-group-color-3 .ui-review-example-btn {
  background: linear-gradient(to right, #ea580c, #c2410c);
  border-color: #fb923c;
}
html.dark .review-body-group-adverbs .ui-review-example-btn:hover,
html.dark .review-body-group-color-3 .ui-review-example-btn:hover {
  background: linear-gradient(to right, #c2410c, #9a3412);
}
html.dark .review-body-group-adverbs .ui-review-example-panel-inner,
html.dark .review-body-group-color-3 .ui-review-example-panel-inner {
  background: linear-gradient(
    to bottom right,
    rgba(31, 41, 55, 0.95),
    rgba(124, 45, 18, 0.4)
  );
  border-color: rgba(234, 88, 12, 0.5);
}
html.dark .review-body-group-adverbs .ui-review-example-panel-icon-wrap,
html.dark .review-body-group-color-3 .ui-review-example-panel-icon-wrap {
  background-color: rgba(124, 45, 18, 0.4);
}
html.dark .review-body-group-adverbs .ui-review-example-panel-icon,
html.dark .review-body-group-color-3 .ui-review-example-panel-icon {
  color: #fb923c;
}
html.dark .review-body-group-adverbs .ui-review-example-panel-title,
html.dark .review-body-group-color-3 .ui-review-example-panel-title {
  color: #fdba74;
}
html.dark .review-body-group-adverbs .ui-review-example-panel-close-btn:hover,
html.dark .review-body-group-color-3 .ui-review-example-panel-close-btn:hover {
  background-color: rgba(124, 45, 18, 0.4);
}
html.dark .review-body-group-adverbs .ui-review-example-panel-footer,
html.dark .review-body-group-color-3 .ui-review-example-panel-footer {
  border-color: rgba(234, 88, 12, 0.5);
}
html.dark .review-body-group-adverbs .ui-review-example-panel-audio-btn,
html.dark .review-body-group-color-3 .ui-review-example-panel-audio-btn {
  color: #fb923c;
}
html.dark .review-body-group-adverbs .ui-review-example-panel-audio-btn:hover,
html.dark .review-body-group-color-3 .ui-review-example-panel-audio-btn:hover {
  color: #fdba74;
}

.review-body-word {
  font-size: 3rem;
  color: #111827;
  margin-bottom: 16px;
  line-height: 1;
  text-align: center;
}

html.dark .review-body-word {
  color: #f9fafb;
}

.review-body-word-original {
  font-size: 0.875rem;
  color: #4b5563;
  margin-bottom: 8px;
}

html.dark .review-body-word-original {
  color: #9ca3af;
}

.review-body-flip-hint {
  color: #6b7280;
  font-size: 0.875rem;
}

html.dark .review-body-flip-hint {
  color: #9ca3af;
}

/* Navigation */
.review-body-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 32px;
}

.review-body-nav-btn {
  padding: 12px;
  background-color: #ffffff;
  border-radius: 9999px;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition: background-color 0.15s;
  color: #374151;
}

.review-body-nav-btn:hover {
  background-color: #f3f4f6;
}

.review-body-nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

html.dark .review-body-nav-btn {
  background-color: #374151;
  border-color: #4b5563;
  color: #d1d5db;
}

html.dark .review-body-nav-btn:hover {
  background-color: #4b5563;
}

.review-body-dashboard-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid #e5e7eb;
  background-color: #ffffff;
  color: #111827;
  cursor: pointer;
  transition: background-color 0.15s;
  white-space: nowrap;
}

.review-body-dashboard-btn:hover {
  background-color: #f3f4f6;
}

html.dark .review-body-dashboard-btn {
  background-color: #374151;
  border-color: #4b5563;
  color: #f9fafb;
}

html.dark .review-body-dashboard-btn:hover {
  background-color: #4b5563;
}

/* Progress Bar */
.review-body-progress {
  margin-top: 32px;
}

.review-body-progress-track {
  width: 100%;
  height: 8px;
  background-color: #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
}

html.dark .review-body-progress-track {
  background-color: #374151;
}

.review-body-progress-fill {
  height: 100%;
  background: linear-gradient(to right, #3b82f6, #9333ea);
  transition: width 0.3s;
  border-radius: 9999px;
}

/* Translation Form */
.review-body-translate-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  width: 100%;
  max-width: 384px;
  /* transform: scale(0.9); */
}

.review-body-translate-input {
  flex: 1;
  padding: 10px 16px;
  background-color: rgba(255, 255, 255, 0.95);
  border: 1px solid #dbeafe;
  border-radius: 8px;
  color: #111827;
  font-size: 1rem;
  font-weight: 500;
  outline: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: border-color 0.15s;
}

.review-body-translate-input::placeholder {
  font-size: 0.95rem;
  font-weight: 500;
  color: #9ca3af;
}

.review-body-translate-input:focus {
  border-color: #93c5fd;
}

html.dark .review-body-translate-input {
  background-color: rgba(55, 65, 81, 0.95);
  border-color: #1e40af;
  color: #f3f4f6;
}

html.dark .review-body-translate-input::placeholder {
  color: #909398;
}

html.dark .review-body-translate-input:focus {
  border-color: #2563eb;
}

.review-body-translate-btn {
  height: 43px;
  padding: 12px;
  background-color: rgba(239, 246, 255, 0.9);
  border: 1px solid rgba(191, 219, 254, 0.6);
  border-radius: 8px;
  color: #2563eb;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition:
    background-color 0.15s,
    box-shadow 0.15s,
    transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.review-body-translate-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

.review-body-translate-btn:hover {
  background-color: rgba(219, 234, 254, 0.9);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

.review-body-translate-btn:active {
  transform: scale(0.95);
}

html.dark .review-body-translate-btn {
  background-color: rgba(30, 58, 138, 0.3);
  border-color: rgba(29, 78, 216, 0.6);
  color: #60a5fa;
}

html.dark .review-body-translate-btn:hover {
  background-color: rgba(30, 64, 175, 0.4);
}

/* Responsive Design */

/* Tablet */
/* @media (max-width: 768px) {
} */

/* Mobile */
@media (max-width: 480px) {
  .ui-review-example-btn {
    display: none;
  }
  .review-body-word {
    font-size: 2rem;
  }
  .review-body-front-badge {
    font-size: 0.75rem;
  }
  .review-body-translate-input {
    padding: 10px;
  }
  .review-body-translate-btn {
    height: 40px;
  }
  .review-body-card-face {
    padding: 22px;
  }
  .review-body-translate-form {
    margin-top: 26px;
  }
}

.ui-review-navbar {
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  padding: 1rem 2rem;
}

html.dark .ui-review-navbar {
  background-color: #1f2937;
  border-bottom-color: #374151;
}

.ui-review-navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ui-review-navbar-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ui-review-navbar-back-btn {
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  color: #374151;
}

.ui-review-navbar-back-btn:hover {
  background-color: #f3f4f6;
}

html.dark .ui-review-navbar-back-btn {
  color: #d1d5db;
}

html.dark .ui-review-navbar-back-btn:hover {
  background-color: #374151;
}

.ui-review-navbar-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.ui-review-navbar-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ui-review-navbar-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ui-review-navbar-title {
  font-size: 1.5rem;
  line-height: 2rem;
  color: #111827;
  margin: 0;
  font-weight: 400;
}

html.dark .ui-review-navbar-title {
  color: #f9fafb;
}

.ui-review-navbar-subtitle {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #6b7280;
  margin: 0;
}

html.dark .ui-review-navbar-subtitle {
  color: #9ca3af;
}

.ui-review-navbar-info-btn {
  padding: 0.375rem;
  border-radius: 9999px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.ui-review-navbar-info-btn:hover {
  background-color: #f3f4f6;
}

html.dark .ui-review-navbar-info-btn:hover {
  background-color: #374151;
}

.ui-review-navbar-icon-small {
  width: 1.25rem;
  height: 1.25rem;
  color: #6b7280;
}

html.dark .ui-review-navbar-icon-small {
  color: #9ca3af;
}

/* Groups dropdown */

.ui-review-navbar-options-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ui-review-navbar-options-label {
  font-size: 0.875rem;
  color: #4b5563;
  white-space: nowrap;
}

html.dark .ui-review-navbar-options-label {
  color: #9ca3af;
}

.ui-review-navbar-options-select {
  position: relative;
}

.ui-review-navbar-options-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  height: 36px;
  width: 180px;
  padding: 0 0.75rem;
  font-size: 0.875rem;
  white-space: nowrap;
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  cursor: pointer;
  outline: none;
  transition:
    color 0.2s,
    box-shadow 0.2s,
    background-color 0.2s;
}

.ui-review-navbar-options-trigger:hover {
  background-color: #f9fafb;
}

.ui-review-navbar-options-trigger:focus-visible {
  border-color: #6b7280;
  box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.3);
}

html.dark .ui-review-navbar-options-trigger {
  background-color: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

html.dark .ui-review-navbar-options-trigger:hover {
  background-color: #4b5563;
}

.ui-review-navbar-options-value {
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: capitalize;
  white-space: nowrap;
  flex: 1;
  text-align: left;
}

.ui-review-navbar-options-chevron {
  width: 1rem;
  height: 1rem;
  opacity: 0.5;
  flex-shrink: 0;
  pointer-events: none;
}

.ui-review-navbar-options-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 50;
  min-width: 8rem;
  width: 180px;
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.375rem;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  padding: 0.25rem;
  max-height: 355px;
  overflow: auto;
  z-index: 100;
}

html.dark .ui-review-navbar-options-dropdown {
  background-color: #1f2937;
  border-color: #374151;
  color: #f9fafb;
}

.ui-review-navbar-options-item {
  background: none;
  border: none;
  outline: none;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;

  position: relative;
  display: flex;
  width: 100%;
  cursor: default;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.125rem;
  padding: 0.375rem 2rem 0.375rem 0.5rem;
  font-size: 0.875rem;
  text-align: left;
  user-select: none;
}

.ui-review-navbar-options-item:hover {
  background-color: #f3f4f6;
  color: #111827;
}

html.dark .ui-review-navbar-options-item {
  color: #f9fafbdd;
}

html.dark .ui-review-navbar-options-item:hover {
  background-color: #374151;
  color: #f9fafb;
}

.ui-review-navbar-options-item span {
  text-transform: capitalize;
}

.ui-review-navbar-options-item-check {
  position: absolute;
  right: 0.5rem;
  display: flex;
  width: 0.875rem;
  height: 0.875rem;
  align-items: center;
  justify-content: center;
}

.ui-review-navbar-options-check-icon {
  width: 1rem;
  height: 1rem;
}

.ui-review-navbar-options-separator {
  height: 2px;
  background-color: #e5e7eb;
  margin: 0.35rem 0 0.35rem 0;
}

html.dark .ui-review-navbar-options-separator {
  background-color: #374151;
}

/* Play button */

.ui-tutor-navbar-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ui-review-navbar-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  font-size: 14.5px;
  font-weight: 500;
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ui-review-navbar-play-btn:hover {
  background-color: #f3f4f6;
}

.ui-review-navbar-play-btn-icon {
  width: 16px;
  height: 16px;
  pointer-events: none;
}

html.dark .ui-review-navbar-play-btn {
  background-color: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

html.dark .ui-review-navbar-play-btn:hover {
  background-color: #4b5563;
}

/* Responsive Design */

/* Tablet */
@media (max-width: 900px) {
  body {
    overflow: auto;
  }
  .ui-review-navbar-content {
    display: none;
  }
}

/* Mobile */
@media (max-width: 610px) {
  .ui-review-navbar {
    padding: 1rem;
  }
  .ui-review-navbar-content {
    display: none;
  }
  .ui-review-navbar-options-label {
    display: none;
  }
  .ui-review-navbar-options-trigger {
    width: 135px;
  }
}

/* Sidebar container */
.ui-review-sidebar {
  position: fixed;
  top: 88px;
  right: 0;
  bottom: 0;
  width: 400px;
  background-color: #ffffff;
  border-left: 1px solid #e5e7eb;
  box-shadow: -4px 0 6px -1px rgba(0, 0, 0, 0.08);
  z-index: 20;
  overflow-y: auto;
}

html.dark .ui-review-sidebar {
  background-color: #1f2937;
  border-left-color: #374151;
  box-shadow: -4px 0 6px -1px rgba(0, 0, 0, 0.3);
}

/* Sidebar content */
.ui-review-sidebar-content {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Header */
.ui-review-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.ui-review-sidebar-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

html.dark .ui-review-sidebar-title {
  color: #f3f4f6;
}

.ui-review-sidebar-close {
  padding: 0.25rem;
  background: none;
  border: none;
  border-radius: 0.5rem;
  color: #6b7280;
  cursor: pointer;
  transition: background-color 0.15s;
}

.ui-review-sidebar-close:hover {
  background-color: #f3f4f6;
}

html.dark .ui-review-sidebar-close {
  color: #9ca3af;
}

html.dark .ui-review-sidebar-close:hover {
  background-color: #374151;
}

.ui-review-sidebar-close-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

/* Word section */
.ui-review-sidebar-word-section {
  margin-bottom: 0.5rem;
}

.ui-review-sidebar-word-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ui-review-sidebar-word {
  font-size: 1.875rem;
  font-weight: 600;
  color: #111827;
  text-transform: capitalize;
}

html.dark .ui-review-sidebar-word {
  color: #f9fafb;
}

.ui-review-sidebar-pronunciation-btn {
  padding: 0.5rem;
  background-color: #dbeafe;
  border: none;
  border-radius: 0.5rem;
  color: #2563eb;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

.ui-review-sidebar-pronunciation-btn:hover {
  background-color: #bfdbfe;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

html.dark .ui-review-sidebar-pronunciation-btn {
  background-color: rgba(59, 130, 246, 0.3);
  color: #60a5fa;
}

html.dark .ui-review-sidebar-pronunciation-btn:hover {
  background-color: rgba(59, 130, 246, 0.5);
}

.ui-review-sidebar-icon {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

/* Info Card */
.ui-review-sidebar-info-card {
  padding: 1.25rem;
  /* background-color: #f9fafb; */
  background-color: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
}

html.dark .ui-review-sidebar-info-card {
  background-color: rgba(31, 41, 55, 0.5);
  border-color: #374151;
}

.ui-review-sidebar-info-header {
  margin-bottom: 1rem;
}

.ui-review-sidebar-info-title {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin: 0;
  text-transform: uppercase;
}

html.dark .ui-review-sidebar-info-title {
  color: #9ca3af;
}

.ui-review-sidebar-info-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ui-review-sidebar-info-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ui-review-sidebar-info-label {
  font-size: 0.875rem;
  color: #4b5563;
  width: 6rem;
  flex-shrink: 0;
}

html.dark .ui-review-sidebar-info-label {
  color: #9ca3af;
}

/* Badges */
.ui-review-sidebar-badge {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  text-transform: capitalize;
}

.ui-review-sidebar-badge-icon {
  width: 0.875rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.ui-review-sidebar-badge-blue {
  background-color: #eff6ff;
  color: #1e40af;
}

html.dark .ui-review-sidebar-badge-blue {
  background-color: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

.ui-review-sidebar-badge-purple {
  background-color: #faf5ff;
  color: #7e22ce;
}

html.dark .ui-review-sidebar-badge-purple {
  background-color: rgba(168, 85, 247, 0.2);
  color: #d8b4fe;
}

/* Gender badge colors */
.ui-review-sidebar-gender-masculine {
  background-color: #dbeafe;
  color: #1e40af;
}

html.dark .ui-review-sidebar-gender-masculine {
  background-color: rgba(59, 130, 246, 0.2);
  color: #93c5fd;
}

.ui-review-sidebar-gender-feminine {
  background-color: #fce7f3;
  color: #be185d;
}

html.dark .ui-review-sidebar-gender-feminine {
  background-color: rgba(236, 72, 153, 0.2);
  color: #f9a8d4;
}

.ui-review-sidebar-gender-neuter {
  background-color: #d1fae5;
  color: #065f46;
}

html.dark .ui-review-sidebar-gender-neuter {
  background-color: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

.ui-review-sidebar-gender-plural {
  background-color: #fef3c7;
  color: #92400e;
}

html.dark .ui-review-sidebar-gender-plural {
  background-color: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
}

/* Indigo badge */
.ui-review-sidebar-badge-indigo {
  background-color: #eef2ff;
  color: #3730a3;
}

html.dark .ui-review-sidebar-badge-indigo {
  background-color: rgba(99, 102, 241, 0.2);
  color: #a5b4fc;
}

/* Frequency rank badge colors */
.ui-review-sidebar-badge-gray {
  background-color: #f3f4f6;
  color: #6b7280;
}

html.dark .ui-review-sidebar-badge-gray {
  background-color: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
}

.ui-review-sidebar-badge-emerald {
  background-color: #ecfdf5;
  color: #065f46;
}

html.dark .ui-review-sidebar-badge-emerald {
  background-color: rgba(16, 185, 129, 0.2);
  color: #6ee7b7;
}

.ui-review-sidebar-badge-green {
  background-color: #f0fdf4;
  color: #15803d;
}

html.dark .ui-review-sidebar-badge-green {
  background-color: rgba(34, 197, 94, 0.2);
  color: #86efac;
}

.ui-review-sidebar-badge-teal {
  background-color: #f0fdfa;
  color: #0f766e;
}

html.dark .ui-review-sidebar-badge-teal {
  background-color: rgba(20, 184, 166, 0.2);
  color: #5eead4;
}

.ui-review-sidebar-badge-amber {
  background-color: #fffbeb;
  color: #92400e;
}

html.dark .ui-review-sidebar-badge-amber {
  background-color: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
}

.ui-review-sidebar-badge-orange {
  background-color: #fff7ed;
  color: #9a3412;
}

html.dark .ui-review-sidebar-badge-orange {
  background-color: rgba(249, 115, 22, 0.2);
  color: #fdba74;
}

.ui-review-sidebar-badge-red {
  background-color: #fef2f2;
  color: #991b1b;
}

html.dark .ui-review-sidebar-badge-red {
  background-color: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

/* Section Card (Translation, etc.) */
.ui-review-sidebar-section-card {
  padding: 1.25rem;
  background: linear-gradient(
    to bottom right,
    #ffffff,
    rgba(249, 250, 251, 0.5)
  );
  border: 1px solid rgba(229, 231, 235, 0.6);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s;
}

.ui-review-sidebar-section-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

html.dark .ui-review-sidebar-section-card {
  background: linear-gradient(to bottom right, #111827, rgba(17, 24, 39, 0.5));
  border-color: rgba(55, 65, 81, 0.6);
}

.ui-review-sidebar-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.ui-review-sidebar-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.5rem;
  flex-shrink: 0;
}

.ui-review-sidebar-section-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.ui-review-sidebar-card-icon-blue {
  background-color: #dbeafe;
}

.ui-review-sidebar-card-icon-blue .ui-review-sidebar-section-icon {
  color: #2563eb;
}

html.dark .ui-review-sidebar-card-icon-blue {
  background-color: rgba(59, 130, 246, 0.3);
}

html.dark .ui-review-sidebar-card-icon-blue .ui-review-sidebar-section-icon {
  color: #60a5fa;
}

.ui-review-sidebar-card-icon-indigo {
  background-color: #e0e7ff;
}

.ui-review-sidebar-card-icon-indigo .ui-review-sidebar-section-icon {
  color: #4f46e5;
}

html.dark .ui-review-sidebar-card-icon-indigo {
  background-color: rgba(99, 102, 241, 0.3);
}

html.dark .ui-review-sidebar-card-icon-indigo .ui-review-sidebar-section-icon {
  color: #a5b4fc;
}

.ui-review-sidebar-card-icon-green {
  background-color: #dcfce7;
}

.ui-review-sidebar-card-icon-green .ui-review-sidebar-section-icon {
  color: #16a34a;
}

html.dark .ui-review-sidebar-card-icon-green {
  background-color: rgba(34, 197, 94, 0.3);
}

html.dark .ui-review-sidebar-card-icon-green .ui-review-sidebar-section-icon {
  color: #4ade80;
}

.ui-review-sidebar-card-icon-purple {
  background-color: #f3e8ff;
}

.ui-review-sidebar-card-icon-purple .ui-review-sidebar-section-icon {
  color: #9333ea;
}

html.dark .ui-review-sidebar-card-icon-purple {
  background-color: rgba(168, 85, 247, 0.3);
}

html.dark .ui-review-sidebar-card-icon-purple .ui-review-sidebar-section-icon {
  color: #c084fc;
}

.ui-review-sidebar-card-title {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.025em;
  color: #6b7280;
  margin: 0;
  text-transform: uppercase;
}

html.dark .ui-review-sidebar-card-title {
  color: #9ca3af;
}

.ui-review-sidebar-card-text-large {
  font-size: 1.125rem;
  color: #111827;
  line-height: 1.5;
  margin: 0;
}

html.dark .ui-review-sidebar-card-text-large {
  color: #f9fafb;
}

/* Synonyms Card */
.ui-review-sidebar-synonyms-card {
  padding: 1.25rem;
  background: linear-gradient(
    to bottom right,
    #faf5ff,
    rgba(250, 245, 255, 0.6)
  );
  border: 1px solid rgba(233, 213, 255, 0.6);
  border-radius: 0.75rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

html.dark .ui-review-sidebar-synonyms-card {
  background: linear-gradient(
    to bottom right,
    rgba(155, 83, 218, 0.35),
    rgba(126, 34, 206, 0.15)
  );
  border-color: rgba(126, 34, 206, 0.6);
}

.ui-review-sidebar-synonym-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ui-review-sidebar-synonym-word {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  background-color: rgba(255, 255, 255, 0.8);
  color: #6b21a8;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  border: 1px solid rgba(233, 213, 255, 0.6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 0.2s;
}

.ui-review-sidebar-synonym-word:hover {
  background-color: #edecec;
}

html.dark .ui-review-sidebar-synonym-word {
  background-color: rgba(121, 82, 156, 0.4);
  color: #d8b4fe;
  border-color: rgba(126, 34, 206, 0.4);
}

html.dark .ui-review-sidebar-synonym-word:hover {
  background-color: rgba(70, 61, 78, 0.5);
}

/* Hoverable words in example texts */
.word-hoverable:has(.hoverable-word:hover) .hoverable-word:not(:hover) {
  filter: blur(0.3px);
  opacity: 0.6;
  transition: all 0.2s ease;
}

.hoverable-word {
  display: inline-block;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hoverable-word:hover {
  font-weight: 500;
  color: #9333ea;
  transform: scale(1.15) translateY(-6px);
}

html.dark .hoverable-word:hover {
  color: #d8b4fe;
}

/* Example */
.ui-review-sidebar-example {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-left: 0.75rem;
  border-left: 2px solid #e5e7eb;
}

html.dark .ui-review-sidebar-example {
  border-left-color: #374151;
}

.ui-review-sidebar-example-text {
  font-size: 0.9375rem;
  color: #111827;
  line-height: 1.6;
  margin: 0;
}

html.dark .ui-review-sidebar-example-text {
  color: #f9fafb;
}

.ui-review-sidebar-example-translation {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.5;
  margin: 0;
}

html.dark .ui-review-sidebar-example-translation {
  color: #9ca3af;
}

/* Slide-from-right transitions */
.ui-review-sidebar-enter {
  transition: transform 0.3s ease-out;
}

.ui-review-sidebar-enter-start {
  transform: translateX(100%);
}

.ui-review-sidebar-enter-end {
  transform: translateX(0);
}

.ui-review-sidebar-leave {
  transition: transform 0.2s ease-in;
}

.ui-review-sidebar-leave-start {
  transform: translateX(0);
}

.ui-review-sidebar-leave-end {
  transform: translateX(100%);
}

/* Meanings Navigator */
.ui-review-sidebar-meanings-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: linear-gradient(to right, #eff6ff, #f5f3ff);
  border-radius: 0.75rem;
  border: 1px solid #bfdbfe;
}

html.dark .ui-review-sidebar-meanings-nav {
  background: linear-gradient(
    to right,
    rgba(29, 78, 216, 0.2),
    rgba(109, 40, 217, 0.2)
  );
  border-color: #1d4ed8;
}

.ui-review-sidebar-meanings-nav-btn {
  padding: 0.5rem;
  border-radius: 0.5rem;
  background-color: #ffffff;
  color: #374151;
  border: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition:
    background-color 0.15s,
    box-shadow 0.15s,
    transform 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ui-review-sidebar-meanings-nav-btn:hover:not(:disabled) {
  background-color: #f9fafb;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.ui-review-sidebar-meanings-nav-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.ui-review-sidebar-meanings-nav-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

html.dark .ui-review-sidebar-meanings-nav-btn {
  background-color: #374151;
  color: #d1d5db;
}

html.dark .ui-review-sidebar-meanings-nav-btn:hover:not(:disabled) {
  background-color: #4b5563;
}

.ui-review-sidebar-meanings-nav-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.ui-review-sidebar-meanings-nav-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #374151;
}

html.dark .ui-review-sidebar-meanings-nav-label {
  color: #d1d5db;
}

.ui-review-sidebar-meanings-dots {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.ui-review-sidebar-meanings-dot {
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  background-color: #d1d5db;
  transition:
    width 0.3s,
    background-color 0.3s;
}

.ui-review-sidebar-meanings-dot:hover {
  background-color: #9ca3af;
}

.ui-review-sidebar-meanings-dot-active {
  width: 2rem;
  background: linear-gradient(to right, #3b82f6, #a855f7);
}

html.dark .ui-review-sidebar-meanings-dot {
  background-color: #4b5563;
}

html.dark .ui-review-sidebar-meanings-dot:hover {
  background-color: #6b7280;
}

html.dark .ui-review-sidebar-meanings-dot-active {
  background: linear-gradient(to right, #3b82f6, #a855f7);
}

/* Overlay — hidden on desktop */
.ui-review-sidebar-overlay {
  display: none;
}

/* Responsive Design */

/* Tablet */
/* @media (max-width: 768px) {
} */

/* Mobile */
@media (max-width: 480px) {
  .ui-review-sidebar {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 420px;
    height: 95vh;
    border-radius: 16px;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    z-index: 100;
  }

  /* Fade-only transitions — preserve centering transform */
  .ui-review-sidebar-enter {
    transition: opacity 0.25s ease-out;
  }

  .ui-review-sidebar-enter-start {
    opacity: 0;
    transform: translate(-50%, -50%);
  }

  .ui-review-sidebar-enter-end {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .ui-review-sidebar-leave {
    transition: opacity 0.2s ease-in;
  }

  .ui-review-sidebar-leave-start {
    opacity: 1;
    transform: translate(-50%, -50%);
  }

  .ui-review-sidebar-leave-end {
    opacity: 0;
    transform: translate(-50%, -50%);
  }

  @keyframes ui-review-sidebar-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  .ui-review-sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 99;
  }
}

.ui-review-info-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s,
    visibility 0.2s;
}

.ui-review-info-modal-overlay.ui-review-info-modal-show {
  opacity: 1;
  visibility: visible;
}

.ui-review-info-modal-content {
  background-color: #ffffff;
  border-radius: 0.5rem;
  max-width: 38rem;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border: 1px solid #e5e7eb;
}

html.dark .ui-review-info-modal-content {
  background-color: #1f2937;
  border-color: #374151;
}

.ui-review-info-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

html.dark .ui-review-info-modal-header {
  border-bottom-color: #374151;
}

.ui-review-info-modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

html.dark .ui-review-info-modal-title {
  color: #f9fafb;
}

.ui-review-info-modal-close {
  background: transparent;
  border: none;
  color: #6b7280;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  transition: color 0.2s;
}

.ui-review-info-modal-close:hover {
  color: #111827;
}

html.dark .ui-review-info-modal-close {
  color: #9ca3af;
}

html.dark .ui-review-info-modal-close:hover {
  color: #f9fafb;
}

.ui-review-info-modal-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ui-review-info-modal-description {
  color: #374151;
  line-height: 1.5;
  margin: 0;
}

html.dark .ui-review-info-modal-description {
  color: #d1d5db;
}

.ui-review-info-modal-description strong {
  font-weight: 600;
  color: #111827;
}

html.dark .ui-review-info-modal-description strong {
  color: #f9fafb;
}

.ui-review-info-modal-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ui-review-info-modal-subtitle {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

html.dark .ui-review-info-modal-subtitle {
  color: #f9fafb;
}

.ui-review-info-modal-list {
  list-style-type: disc;
  list-style-position: inside;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  color: #374151;
}

html.dark .ui-review-info-modal-list {
  color: #d1d5db;
}

.ui-review-info-modal-list li {
  line-height: 1.5;
}

.ui-review-info-modal-tip {
  padding: 0.75rem;
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 0.5rem;
}

html.dark .ui-review-info-modal-tip {
  background-color: rgba(20, 83, 45, 0.2);
  border-color: #166534;
}

.ui-review-info-modal-tip-text {
  font-size: 0.875rem;
  color: #065f46;
  margin: 0;
  line-height: 1.5;
}

html.dark .ui-review-info-modal-tip-text {
  color: #6ee7b7;
}

.ui-review-info-modal-tip-text strong {
  font-weight: 600;
}

/* Example Button + Panel */
.ui-review-example-fixed {
  position: fixed;
  bottom: 32px;
  left: 32px;
  z-index: 30;
}

.ui-review-example-btn {
  position: fixed;
  bottom: 4rem;
  background: linear-gradient(to right, #3b82f6, #2563eb);
  border-radius: 9999px;
  padding: 12px 20px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 2px solid #93c5fd;
  cursor: pointer;
  transition: transform 0.3s;
}

.ui-review-example-btn:hover {
  transform: scale(1.1);
  background: linear-gradient(to right, #2563eb, #1d4ed8);
}

.ui-review-example-btn:active {
  transform: scale(0.95);
}

html.dark .ui-review-example-btn {
  background: linear-gradient(to right, #2563eb, #1d4ed8);
  border-color: #3b82f6;
}

html.dark .ui-review-example-btn:hover {
  background: linear-gradient(to right, #1d4ed8, #1e40af);
}

.ui-review-example-btn-inner {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ui-review-example-btn-icon {
  width: 20px;
  height: 20px;
  color: #ffffff;
}

.ui-review-example-btn-label {
  color: #ffffff;
  font-weight: 600;
  font-size: 1rem;
}

/* Slide transition classes for Alpine x-transition */
.ui-review-example-transition-enter,
.ui-review-example-transition-leave {
  transition:
    transform 0.3s ease-out,
    opacity 0.3s ease-out;
}

.ui-review-example-transition-start {
  transform: translateX(-100%);
  opacity: 0;
}

.ui-review-example-transition-end {
  transform: translateX(0);
  opacity: 1;
}

/* Example Panel */
.ui-review-example-panel {
  max-width: 28rem;
  min-width: 20rem;
}

.ui-review-example-panel-inner {
  backdrop-filter: blur(24px);
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.95),
    rgba(239, 246, 255, 0.9)
  );
  border-radius: 16px;
  border: 2px solid #bfdbfe;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  padding: 20px;
}

html.dark .ui-review-example-panel-inner {
  background: linear-gradient(
    to bottom right,
    rgba(31, 41, 55, 0.95),
    rgba(23, 37, 84, 0.4)
  );
  border-color: rgba(37, 99, 235, 0.5);
}

.ui-review-example-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.ui-review-example-panel-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ui-review-example-panel-icon-wrap {
  padding: 6px;
  border-radius: 8px;
  background-color: #dbeafe;
}

html.dark .ui-review-example-panel-icon-wrap {
  background-color: rgba(30, 58, 138, 0.4);
}

.ui-review-example-panel-icon {
  width: 16px;
  height: 16px;
  color: #2563eb;
}

html.dark .ui-review-example-panel-icon {
  color: #60a5fa;
}

.ui-review-example-panel-title {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: #1d4ed8;
}

html.dark .ui-review-example-panel-title {
  color: #93c5fd;
}

.ui-review-example-panel-close-btn {
  padding: 4px;
  border-radius: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color 0.15s;
}

.ui-review-example-panel-close-btn:hover {
  background-color: #dbeafe;
}

html.dark .ui-review-example-panel-close-btn:hover {
  background-color: rgba(30, 58, 138, 0.4);
}

.ui-review-example-panel-close-icon {
  width: 16px;
  height: 16px;
  color: #6b7280;
}

html.dark .ui-review-example-panel-close-icon {
  color: #9ca3af;
}

.ui-review-example-panel-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ui-review-example-panel-text {
  font-size: 1rem;
  color: #111827;
  line-height: 1.625;
}

html.dark .ui-review-example-panel-text {
  color: #f9fafb;
}

@keyframes ui-review-example-slide-in {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.ui-review-example-panel-translation {
  font-size: 0.875rem;
  color: #4b5563;
  font-style: italic;
  animation: ui-review-example-slide-in 0.3s ease-out;
}

html.dark .ui-review-example-panel-translation {
  color: #9ca3af;
}

.ui-review-example-panel-footer {
  padding-top: 12px;
  border-top: 1px solid #bfdbfe;
}

html.dark .ui-review-example-panel-footer {
  border-color: rgba(37, 99, 235, 0.5);
}

.ui-review-example-panel-audio-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  color: #2563eb;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
}

.ui-review-example-panel-audio-btn:hover {
  color: #1d4ed8;
}

html.dark .ui-review-example-panel-audio-btn {
  color: #60a5fa;
}

html.dark .ui-review-example-panel-audio-btn:hover {
  color: #93c5fd;
}

.ui-review-example-panel-audio-icon {
  width: 14px;
  height: 14px;
}

.ui-review-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.ui-review-empty-inner {
  max-width: 42rem;
  text-align: center;
}

/* Hero */
.ui-review-empty-hero {
  position: relative;
  margin-bottom: 1.5rem;
}

.ui-review-empty-emoji {
  font-size: 6rem;
  line-height: 1;
  margin-bottom: 1.5rem;
  display: inline-block;
  animation: ui-review-empty-emoji-float 4s ease-in-out infinite;
}

@keyframes ui-review-empty-emoji-float {
  0% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.12) rotate(-10deg);
  }
  50% {
    transform: scale(1.06) rotate(4deg);
  }
  75% {
    transform: scale(1.14) rotate(-6deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

.ui-review-empty-title {
  font-size: 3.75rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 1rem;
  background: linear-gradient(to right, #2563eb, #4f46e5, #9333ea);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
}

html.dark .ui-review-empty-title {
  background: linear-gradient(to right, #60a5fa, #818cf8, #c084fc);
  -webkit-background-clip: text;
  background-clip: text;
}

/* Body */
.ui-review-empty-body {
  margin-bottom: 1.5rem;
}

.ui-review-empty-lead {
  font-size: 1.25rem;
  color: #374151;
  margin: 0 0 1rem;
}

html.dark .ui-review-empty-lead {
  color: #d1d5db;
}

.ui-review-empty-highlight {
  font-weight: 600;
  text-transform: capitalize;
  background: linear-gradient(to right, #2563eb, #9333ea);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

html.dark .ui-review-empty-highlight {
  background: linear-gradient(to right, #60a5fa, #c084fc);
  -webkit-background-clip: text;
  background-clip: text;
}

.ui-review-empty-sub {
  font-size: 1rem;
  color: #4b5563;
  margin: 0;
}

html.dark .ui-review-empty-sub {
  color: #9ca3af;
}

/* Actions */
.ui-review-empty-actions {
  padding-top: 1.5rem;
}

.ui-review-empty-actions-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.ui-review-empty-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  font-weight: 500;
  font-size: 1.125rem;
  padding: 1rem 2rem;
  border: none;
  cursor: pointer;
  background: linear-gradient(to right, #2563eb, #9333ea);
  color: #fff;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition:
    box-shadow 0.2s,
    background 0.2s;
}

.ui-review-empty-btn-primary:hover {
  background: linear-gradient(to right, #1d4ed8, #7e22ce);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.ui-review-empty-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  font-weight: 500;
  font-size: 1.125rem;
  padding: 1rem 2rem;
  cursor: pointer;
  background: #fff;
  color: #111827;
  border: 1px solid #e5e7eb;
  transition:
    background 0.2s,
    color 0.2s;
}

.ui-review-empty-btn-secondary:hover {
  color: currentColor;
  text-decoration: none;
  background: #f3f4f6;
}

html.dark .ui-review-empty-btn-secondary {
  background: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

html.dark .ui-review-empty-btn-secondary:hover {
  background: #4b5563;
}

/* Decorative orbs */
.ui-review-empty-orbs {
  position: relative;
  margin-top: 3rem;
  height: 8rem;
}

.ui-review-empty-orb {
  position: absolute;
  border-radius: 9999px;
  filter: blur(24px);
}

.ui-review-empty-orb-1 {
  left: 25%;
  top: 0;
  width: 5rem;
  height: 5rem;
  background: linear-gradient(
    to bottom right,
    rgba(96, 165, 250, 0.2),
    rgba(129, 140, 248, 0.2)
  );
}

.ui-review-empty-orb-2 {
  right: calc(100% / 3);
  top: 1rem;
  width: 6rem;
  height: 6rem;
  background: linear-gradient(
    to bottom right,
    rgba(192, 132, 252, 0.2),
    rgba(244, 114, 182, 0.2)
  );
}

.ui-review-empty-orb-3 {
  left: calc(100% / 3);
  top: 2rem;
  width: 4rem;
  height: 4rem;
  background: linear-gradient(
    to bottom right,
    rgba(129, 140, 248, 0.2),
    rgba(96, 165, 250, 0.2)
  );
}

.ui-review-empty-orb-4 {
  right: 25%;
  bottom: 0;
  width: 7rem;
  height: 7rem;
  background: linear-gradient(
    to bottom right,
    rgba(244, 114, 182, 0.15),
    rgba(192, 132, 252, 0.15)
  );
  filter: blur(48px);
}

/* Decorative dots */
.ui-review-empty-dot {
  position: absolute;
  border-radius: 9999px;
}

.ui-review-empty-dot-1 {
  left: 50%;
  top: 3rem;
  width: 0.5rem;
  height: 0.5rem;
  background: rgba(59, 130, 246, 0.4);
  animation: ui-review-empty-dot-1-move 5s ease-in-out infinite;
}

.ui-review-empty-dot-2 {
  left: calc(100% * 2 / 3);
  top: 1rem;
  width: 0.75rem;
  height: 0.75rem;
  background: rgba(168, 85, 247, 0.4);
  animation: ui-review-empty-dot-2-move 6s ease-in-out infinite;
}

.ui-review-empty-dot-3 {
  left: calc(100% / 3);
  top: 4rem;
  width: 0.5rem;
  height: 0.5rem;
  background: rgba(99, 102, 241, 0.4);
  animation: ui-review-empty-dot-3-move 4.5s ease-in-out infinite;
}

@keyframes ui-review-empty-dot-1-move {
  0% {
    transform: translate(0, 0);
    opacity: 0.4;
  }
  30% {
    transform: translate(6px, -28px);
    opacity: 0.8;
  }
  60% {
    transform: translate(-4px, -18px);
    opacity: 0.5;
  }
  100% {
    transform: translate(0, 0);
    opacity: 0.4;
  }
}

@keyframes ui-review-empty-dot-2-move {
  0% {
    transform: translate(0, 0);
    opacity: 0.4;
  }
  25% {
    transform: translate(-8px, -22px);
    opacity: 0.9;
  }
  55% {
    transform: translate(5px, -35px);
    opacity: 0.5;
  }
  80% {
    transform: translate(-3px, -15px);
    opacity: 0.7;
  }
  100% {
    transform: translate(0, 0);
    opacity: 0.4;
  }
}

@keyframes ui-review-empty-dot-3-move {
  0% {
    transform: translate(0, 0);
    opacity: 0.4;
  }
  35% {
    transform: translate(10px, -20px);
    opacity: 0.7;
  }
  65% {
    transform: translate(-6px, -12px);
    opacity: 0.9;
  }
  100% {
    transform: translate(0, 0);
    opacity: 0.4;
  }
}

.ui-review-completed {
  position: fixed;
  inset: 0;
  top: 88px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 88px);
  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 50%, #f3f4f6 100%);
}

html.dark .ui-review-completed {
  background: linear-gradient(135deg, #111827 0%, #1f2937 50%, #111827 100%);
}

.ui-review-completed-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.ui-review-completed-inner {
  max-width: 42rem;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Title */
.ui-review-completed-title {
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 1.5rem;
  background: linear-gradient(
    to right,
    #9333ea,
    #ec4899,
    #f97316,
    #ec4899,
    #9333ea
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:
    ui-review-completed-scale-in 0.6s ease-out both,
    ui-review-completed-gradient-shift 4s linear infinite;
}

html.dark .ui-review-completed-title {
  background: linear-gradient(
    to right,
    #a855f7,
    #f472b6,
    #fb923c,
    #f472b6,
    #a855f7
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:
    ui-review-completed-scale-in 0.6s ease-out both,
    ui-review-completed-gradient-shift 4s linear infinite;
}

@keyframes ui-review-completed-gradient-shift {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Subtitle */
.ui-review-completed-subtitle {
  animation: ui-review-completed-fade-up 0.5s ease-out 0.15s both;
}

.ui-review-completed-subtitle-label {
  font-size: 1.5rem;
  color: #374151;
  margin-bottom: 0.5rem;
}

html.dark .ui-review-completed-subtitle-label {
  color: #d1d5db;
}

.ui-review-completed-subtitle-group {
  font-size: 1.875rem;
  font-weight: 600;
  text-transform: capitalize;
  background: linear-gradient(to right, #2563eb, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

html.dark .ui-review-completed-subtitle-group {
  background: linear-gradient(to right, #60a5fa, #a855f7);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Actions */
.ui-review-completed-actions {
  padding-top: 1rem;
  animation: ui-review-completed-fade-up 0.5s ease-out 0.3s both;
}

.ui-review-completed-desc {
  font-size: 1.125rem;
  color: #4b5563;
  margin-bottom: 2rem;
}

html.dark .ui-review-completed-desc {
  color: #9ca3af;
}

.ui-review-completed-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.ui-review-completed-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: 0.375rem;
  font-size: 1.125rem;
  font-weight: 500;
  padding: 1.5rem 2rem;
  background: linear-gradient(to right, #2563eb, #9333ea);
  color: #ffffff;
  border: none;
  cursor: pointer;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition:
    box-shadow 0.2s,
    background 0.2s;
}

.ui-review-completed-btn-primary:hover {
  background: linear-gradient(to right, #1d4ed8, #7e22ce);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.ui-review-completed-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  white-space: nowrap;
  border-radius: 0.375rem;
  font-size: 1.125rem;
  font-weight: 500;
  padding: 1.5rem 2rem;
  background: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
  cursor: pointer;
  transition:
    background 0.2s,
    color 0.2s;
}

.ui-review-completed-btn-outline:hover {
  background: #f9fafb;
}

html.dark .ui-review-completed-btn-outline {
  background: #374151;
  color: #f3f4f6;
  border-color: #4b5563;
}

html.dark .ui-review-completed-btn-outline:hover {
  background: #4b5563;
}

/* Blobs */
.ui-review-completed-blobs {
  position: relative;
  margin-top: 3rem;
  height: 4rem;
  animation: ui-review-completed-fade-up 0.5s ease-out 0.45s both;
}

.ui-review-completed-blob-1,
.ui-review-completed-blob-2,
.ui-review-completed-blob-3 {
  position: absolute;
  border-radius: 50%;
  filter: blur(24px);
}

.ui-review-completed-blob-1 {
  left: 25%;
  top: -2rem;
  width: 5rem;
  height: 5rem;
  background: linear-gradient(
    135deg,
    rgba(192, 132, 252, 0.2),
    rgba(244, 114, 182, 0.2)
  );
  animation: ui-review-completed-float-y 4s ease-in-out infinite;
}

.ui-review-completed-blob-2 {
  right: 25%;
  top: -2rem;
  width: 4rem;
  height: 4rem;
  background: linear-gradient(
    135deg,
    rgba(96, 165, 250, 0.2),
    rgba(192, 132, 252, 0.2)
  );
  animation: ui-review-completed-float-y 3.5s ease-in-out infinite reverse;
}

.ui-review-completed-blob-3 {
  left: 33%;
  top: 0.5rem;
  width: 3rem;
  height: 3rem;
  background: linear-gradient(
    135deg,
    rgba(251, 146, 60, 0.2),
    rgba(244, 114, 182, 0.2)
  );
  animation: ui-review-completed-float-x 3s ease-in-out infinite;
}

@keyframes ui-review-completed-float-y {
  0%,
  100% {
    transform: translateY(-8px) scale(1.04);
  }
  50% {
    transform: translateY(8px) scale(0.96);
  }
}

@keyframes ui-review-completed-float-x {
  0%,
  100% {
    transform: translateX(-8px) scale(1.04);
  }
  50% {
    transform: translateX(8px) scale(0.96);
  }
}

@keyframes ui-review-completed-scale-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes ui-review-completed-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ui-review-toast-wrapper {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}

.ui-review-toast-enter {
  transition:
    opacity 0.2s ease-out,
    transform 0.2s ease-out;
}
.ui-review-toast-enter-start {
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
}
.ui-review-toast-enter-end {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ui-review-toast-leave {
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.ui-review-toast-leave-start {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.ui-review-toast-leave-end {
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
}

.ui-review-toast-correct {
  background: linear-gradient(
    to right,
    rgba(240, 253, 244, 0.95),
    rgba(236, 253, 245, 0.95)
  );
  border: 2px solid rgba(187, 247, 208, 0.5);
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 400px;
}

html.dark .ui-review-toast-correct {
  background: linear-gradient(
    to right,
    rgba(20, 83, 45, 0.4),
    rgba(6, 78, 59, 0.4)
  );
  border-color: rgba(34, 197, 94, 0.5);
  backdrop-filter: blur(3px);
}

.ui-review-toast-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4ade80, #10b981);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  color: #fff;
}

html.dark .ui-review-toast-icon {
  background: linear-gradient(135deg, #22c55e, #059669);
}

.ui-review-toast-body {
  flex: 1;
}

.ui-review-toast-title {
  font-size: 1rem;
  font-weight: 600;
  color: #166534;
  margin: 0;
}

html.dark .ui-review-toast-title {
  color: #bbf7d0;
}

.ui-review-toast-subtitle {
  font-size: 0.875rem;
  color: #15803d;
  margin: 0;
}

html.dark .ui-review-toast-subtitle {
  color: #86efac;
}

.ui-review-toast-partial {
  background: linear-gradient(
    to right,
    rgba(254, 252, 232, 0.95),
    rgba(255, 251, 235, 0.95)
  );
  border: 2px solid rgba(253, 230, 138, 0.5);
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 400px;
}

html.dark .ui-review-toast-partial {
  background: linear-gradient(
    to right,
    rgba(113, 63, 18, 0.4),
    rgba(120, 53, 15, 0.4)
  );
  border-color: rgba(234, 179, 8, 0.5);
  backdrop-filter: blur(3px);
}

.ui-review-toast-icon-partial {
  background: linear-gradient(135deg, #facc15, #f59e0b);
}

html.dark .ui-review-toast-icon-partial {
  background: linear-gradient(135deg, #eab308, #d97706);
}

.ui-review-toast-title-partial {
  color: #92400e;
}

html.dark .ui-review-toast-title-partial {
  color: #fef08a;
}

.ui-review-toast-subtitle-partial {
  color: #b45309;
}

html.dark .ui-review-toast-subtitle-partial {
  color: #fcd34d;
}

.ui-review-toast-suspended {
  background: linear-gradient(
    to right,
    rgba(241, 245, 249, 0.95),
    rgba(248, 250, 252, 0.95)
  );
  border: 2px solid rgba(148, 163, 184, 0.5);
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 400px;
}

html.dark .ui-review-toast-suspended {
  background: linear-gradient(
    to right,
    rgba(30, 41, 59, 0.5),
    rgba(15, 23, 42, 0.5)
  );
  border-color: rgba(100, 116, 139, 0.5);
  backdrop-filter: blur(3px);
}

.ui-review-toast-icon-suspended {
  background: linear-gradient(135deg, #94a3b8, #64748b);
}

html.dark .ui-review-toast-icon-suspended {
  background: linear-gradient(135deg, #64748b, #475569);
}

.ui-review-toast-title-suspended {
  color: #1e293b;
}

html.dark .ui-review-toast-title-suspended {
  color: #e2e8f0;
}

.ui-review-toast-subtitle-suspended {
  color: #475569;
}

html.dark .ui-review-toast-subtitle-suspended {
  color: #94a3b8;
}

.ui-review-toast-suspended-btn {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  color: #334155;
  font-size: inherit;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ui-review-toast-suspended-btn:hover {
  color: #0f172a;
}

html.dark .ui-review-toast-suspended-btn {
  color: #e2e8f0;
}

html.dark .ui-review-toast-suspended-btn:hover {
  color: #fff;
}

.ui-review-toast-answer {
  font-weight: 600;
}

.ui-review-toast-incorrect {
  background: linear-gradient(
    to right,
    rgba(255, 241, 242, 0.95),
    rgba(255, 241, 242, 0.95)
  );
  border: 2px solid rgba(254, 205, 211, 0.5);
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  padding: 16px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 400px;
}

html.dark .ui-review-toast-incorrect {
  background: linear-gradient(
    to right,
    rgba(127, 29, 29, 0.4),
    rgba(136, 19, 55, 0.4)
  );
  border-color: rgba(239, 68, 68, 0.5);
  backdrop-filter: blur(3px);
}

.ui-review-toast-icon-incorrect {
  background: linear-gradient(135deg, #f87171, #f43f5e);
}

html.dark .ui-review-toast-icon-incorrect {
  background: linear-gradient(135deg, #ef4444, #e11d48);
}

.ui-review-toast-title-incorrect {
  color: #991b1b;
}

html.dark .ui-review-toast-title-incorrect {
  color: #fecaca;
}

.ui-review-toast-subtitle-incorrect {
  color: #b91c1c;
}

html.dark .ui-review-toast-subtitle-incorrect {
  color: #fca5a5;
}

.stats #stats-main {
  position: relative;
  top: 89px;
  min-height: 0;
  overflow: auto;
}

/* Only visible when HTMX is requesting */
#stats-loader-1 {
  position: relative;
  top: 89px;
  display: none;
}

#stats-loader-1.htmx-request {
  display: block;
}

/* ── Skeleton base ───────────────────────────────────────────── */

.stats-loading-1 {
  padding: 2.5rem;
  padding-top: 0;
}

.stats-skeleton-1 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.stats-skeleton-1-item {
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: stats-skeleton-1-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

html.dark .stats-skeleton-1-item {
  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
  background-size: 200% 100%;
}

@keyframes stats-skeleton-1-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* ── Summary grid ────────────────────────────────────────────── */

.stats-skeleton-1-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 768px) {
  .stats-skeleton-1-grid {
    grid-template-columns: 1fr;
  }
}

.stats-skeleton-1-card {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

html.dark .stats-skeleton-1-card {
  border-color: rgba(75, 85, 99, 0.5);
  background: rgba(31, 41, 55, 0.6);
}

.stats-skeleton-1-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

.stats-skeleton-1-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
}

.stats-skeleton-1-card-title {
  width: 120px;
  height: 14px;
}

.stats-skeleton-1-value {
  width: 64px;
  height: 36px;
  border-radius: 6px;
}

.stats-skeleton-1-sublabel {
  width: 100px;
  height: 12px;
}

/* ── Chart card ──────────────────────────────────────────────── */

.stats-skeleton-1-chart-card {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.6);
}

html.dark .stats-skeleton-1-chart-card {
  border-color: rgba(75, 85, 99, 0.5);
  background: rgba(31, 41, 55, 0.6);
}

.stats-skeleton-1-chart-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.stats-skeleton-1-chart-title {
  width: 140px;
  height: 16px;
}

.stats-skeleton-1-chart-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stats-skeleton-1-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 220px;
  padding: 0 8px;
}

.stats-skeleton-1-bar {
  flex: 1;
  border-radius: 6px 6px 0 0;
  min-height: 8px;
}

.stats-skeleton-1-chart-baseline {
  width: 100%;
  height: 2px;
  border-radius: 2px;
}

/* ── Graphs row skeleton ─────────────────────────────────────── */

.stats-skeleton-1-graphs-row {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.stats-skeleton-1-graphs-row-main,
.stats-skeleton-1-graphs-row-side {
  min-width: 0;
}

.stats-skeleton-1-graphs-row-main .stats-skeleton-1-chart-card,
.stats-skeleton-1-graphs-row-side .stats-skeleton-1-chart-card {
  height: 100%;
}

@media (min-width: 1024px) {
  .stats-skeleton-1-graphs-row {
    flex-direction: row;
    align-items: stretch;
  }

  .stats-skeleton-1-graphs-row-main {
    flex: 2;
  }

  .stats-skeleton-1-graphs-row-side {
    flex: 1;
  }
}

.stats-skeleton-1-chart-line {
  position: relative;
  height: 220px;
}

.stats-skeleton-1-line-dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 9999px;
  transform: translateX(-50%);
}

/* ── Pie chart skeleton ──────────────────────────────────────── */

.stats-skeleton-1-pie-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.stats-skeleton-1-pie-circle {
  width: 180px;
  height: 180px;
  border-radius: 9999px;
}

.stats-skeleton-1-pie-legend {
  display: flex;
  gap: 20px;
}

.stats-skeleton-1-pie-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stats-skeleton-1-pie-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.stats-skeleton-1-pie-legend-label {
  width: 60px;
  height: 12px;
}

/* ── Skeleton 2 (usage view) ─────────────────────────────────── */

#stats-loader-2 {
  position: relative;
  top: 89px;
  display: none;
}

#stats-loader-2.htmx-request {
  display: block;
}

.stats-loading-2 {
  padding: 2.5rem;
  padding-top: 0;
}

.stats-skeleton-2 {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.stats-skeleton-2-item {
  background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
  background-size: 200% 100%;
  animation: stats-skeleton-1-shimmer 1.5s ease-in-out infinite;
  border-radius: 4px;
}

html.dark .stats-skeleton-2-item {
  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
  background-size: 200% 100%;
}

/* ── Shared shape tokens ─────────────────────────────────────── */

.stats-skeleton-2-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
}

.stats-skeleton-2-icon-lg {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  flex-shrink: 0;
}

.stats-skeleton-2-card-title {
  width: 140px;
  height: 14px;
}

.stats-skeleton-2-badge {
  width: 64px;
  height: 20px;
  border-radius: 9999px;
}

.stats-skeleton-2-desc-line {
  width: 260px;
  height: 12px;
}

.stats-skeleton-2-chart-title {
  width: 140px;
  height: 16px;
}

.stats-skeleton-2-reset-label {
  width: 120px;
  height: 12px;
}

.stats-skeleton-2-bar-label {
  width: 140px;
  height: 13px;
}

.stats-skeleton-2-bar-pct {
  width: 48px;
  height: 13px;
}

.stats-skeleton-2-bar-track {
  width: 100%;
  height: 8px;
  border-radius: 9999px;
}

.stats-skeleton-2-show-more-btn {
  width: 100px;
  height: 32px;
  border-radius: 8px;
  margin: 0 auto;
}

.stats-skeleton-2-upgrade-btn {
  width: 120px;
  height: 40px;
  border-radius: 8px;
  flex-shrink: 0;
}

.stats-skeleton-2-upsell-title {
  width: 200px;
  height: 18px;
}

.stats-skeleton-2-feature-line {
  width: 200px;
  height: 13px;
}

.stats-skeleton-2-check-icon {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  flex-shrink: 0;
}

.stats-skeleton-2-upsell-btn {
  width: 160px;
  height: 80px;
  border-radius: 12px;
  flex-shrink: 0;
}

.stats-skeleton-2-pie-circle {
  width: 180px;
  height: 180px;
  border-radius: 9999px;
}

/* ── Membership card ─────────────────────────────────────────── */

.stats-skeleton-2-membership-card {
  height: 103px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.6);
}

html.dark .stats-skeleton-2-membership-card {
  border-color: rgba(75, 85, 99, 0.5);
  background: rgba(31, 41, 55, 0.6);
}

.stats-skeleton-2-membership-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.stats-skeleton-2-membership-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.stats-skeleton-2-membership-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stats-skeleton-2-membership-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Graphs row: 2 pie charts ────────────────────────────────── */

.stats-skeleton-2-graphs-row {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@media (min-width: 768px) {
  .stats-skeleton-2-graphs-row {
    flex-direction: row;
  }
}

.stats-skeleton-2-pie-card {
  height: 402px;
  flex: 1;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.6);
}

html.dark .stats-skeleton-2-pie-card {
  border-color: rgba(75, 85, 99, 0.5);
  background: rgba(31, 41, 55, 0.6);
}

.stats-skeleton-2-chart-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
}

.stats-skeleton-2-pie-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 16px 0;
}

.stats-skeleton-2-pie-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 16px;
}

.stats-skeleton-2-pie-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stats-skeleton-2-pie-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}

.stats-skeleton-2-pie-legend-label {
  width: 80px;
  height: 12px;
}

/* ── Limits card ─────────────────────────────────────────────── */

.stats-skeleton-2-limits-card {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

html.dark .stats-skeleton-2-limits-card {
  border-color: rgba(75, 85, 99, 0.5);
  background: rgba(31, 41, 55, 0.6);
}

.stats-skeleton-2-limits-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.stats-skeleton-2-limits-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stats-skeleton-2-limits-header-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stats-skeleton-2-limits-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stats-skeleton-2-limits-bar-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stats-skeleton-2-limits-bar-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Upsell card ─────────────────────────────────────────────── */

.stats-skeleton-2-upsell-card {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

html.dark .stats-skeleton-2-upsell-card {
  border-color: rgba(75, 85, 99, 0.5);
  background: rgba(31, 41, 55, 0.6);
}

.stats-skeleton-2-upsell-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stats-skeleton-2-upsell-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.stats-skeleton-2-upsell-features {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.stats-skeleton-2-upsell-feature {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Only available when HTMX is requesting */
.ui-stats-navbar.htmx-request .ui-stats-navbar-toggle-btn {
  opacity: 0.5;
  cursor: not-allowed;
}

.ui-stats-navbar {
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 10;
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  padding: 1rem 2rem;
}

html.dark .ui-stats-navbar {
  background-color: #1f2937;
  border-bottom-color: #374151;
}

.ui-stats-navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ui-stats-navbar-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ui-stats-navbar-back-btn {
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  color: #374151;
}

.ui-stats-navbar-back-btn:hover {
  background-color: #f3f4f6;
}

html.dark .ui-stats-navbar-back-btn {
  color: #d1d5db;
}

html.dark .ui-stats-navbar-back-btn:hover {
  background-color: #374151;
}

.ui-stats-navbar-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.ui-stats-navbar-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ui-stats-navbar-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ui-stats-navbar-title {
  font-size: 1.5rem;
  line-height: 2rem;
  color: #111827;
  margin: 0;
  font-weight: 400;
}

html.dark .ui-stats-navbar-title {
  color: #f9fafb;
}

.ui-stats-navbar-subtitle {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #6b7280;
  margin: 0;
}

html.dark .ui-stats-navbar-subtitle {
  color: #9ca3af;
}

.ui-stats-navbar-info-btn {
  padding: 0.375rem;
  border-radius: 9999px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.ui-stats-navbar-info-btn:hover {
  background-color: #f3f4f6;
}

html.dark .ui-stats-navbar-info-btn:hover {
  background-color: #374151;
}

.ui-stats-navbar-icon-small {
  width: 1.25rem;
  height: 1.25rem;
  color: #6b7280;
}

html.dark .ui-stats-navbar-icon-small {
  color: #9ca3af;
}

.ui-stats-navbar-right {
  display: flex;
  align-items: center;
}

.ui-stats-navbar-toggle {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 42px;
  background: #e5e7eb;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 1px 5px;
  box-sizing: border-box;
  box-shadow:
    0px 1px 3px 0px rgba(0, 0, 0, 0.08),
    0px 1px 2px -1px rgba(0, 0, 0, 0.08);
}

html.dark .ui-stats-navbar-toggle {
  background: #111827;
  border-color: #374151;
  box-shadow: none;
}

.ui-stats-navbar-toggle-slider {
  position: absolute;
  top: 4px;
  left: 5px;
  height: 32px;
  background: #f9fafb;
  border-radius: 7px;
  box-shadow:
    0px 1px 3px 0px rgba(0, 0, 0, 0.1),
    0px 2px 4px -2px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

html.dark .ui-stats-navbar-toggle-slider {
  background: #1f2937;
  box-shadow:
    0px 1px 3px 0px rgba(0, 0, 0, 0.3),
    0px 2px 4px -2px rgba(0, 0, 0, 0.2);
}

.ui-stats-navbar-toggle-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  padding: 4px 12px;
  box-sizing: border-box;
  z-index: 2;
  white-space: nowrap;
}

.ui-stats-navbar-toggle-btn:hover {
  text-decoration: none;
}

.ui-stats-navbar-toggle-text {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.1px;
  transition: color 0.2s ease;
  white-space: nowrap;
}

.ui-stats-navbar-toggle-btn.active .ui-stats-navbar-toggle-text {
  color: #111827;
}

.ui-stats-navbar-toggle-btn:not(.active) .ui-stats-navbar-toggle-text {
  color: #6b7280;
}

html.dark .ui-stats-navbar-toggle-btn.active .ui-stats-navbar-toggle-text {
  color: #f9fafb;
}

html.dark
  .ui-stats-navbar-toggle-btn:not(.active)
  .ui-stats-navbar-toggle-text {
  color: #9ca3af;
}

.ui-stats-navbar-toggle-btn:not(.active):hover .ui-stats-navbar-toggle-text {
  color: #374151;
}

html.dark
  .ui-stats-navbar-toggle-btn:not(.active):hover
  .ui-stats-navbar-toggle-text {
  color: #d1d5db;
}

/* Responsive Design */

/* Tablet */
/* @media (max-width: 768px) {
} */

/* Mobile */
@media (max-width: 480px) {
  .ui-video-navbar {
    padding: 1rem;
  }
  .ui-stats-navbar-content {
    display: none;
  }
}

.ui-stats-info-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s,
    visibility 0.2s;
}

.ui-stats-info-modal-overlay.ui-stats-info-modal-show {
  opacity: 1;
  visibility: visible;
}

.ui-stats-info-modal-content {
  background-color: #ffffff;
  border-radius: 0.5rem;
  max-width: 38rem;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border: 1px solid #e5e7eb;
}

html.dark .ui-stats-info-modal-content {
  background-color: #1f2937;
  border-color: #374151;
}

.ui-stats-info-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

html.dark .ui-stats-info-modal-header {
  border-bottom-color: #374151;
}

.ui-stats-info-modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

html.dark .ui-stats-info-modal-title {
  color: #f9fafb;
}

.ui-stats-info-modal-close {
  background: transparent;
  border: none;
  color: #6b7280;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  transition: color 0.2s;
}

.ui-stats-info-modal-close:hover {
  color: #111827;
}

html.dark .ui-stats-info-modal-close {
  color: #9ca3af;
}

html.dark .ui-stats-info-modal-close:hover {
  color: #f9fafb;
}

.ui-stats-info-modal-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ui-stats-info-modal-description {
  color: #374151;
  line-height: 1.5;
  margin: 0;
}

html.dark .ui-stats-info-modal-description {
  color: #d1d5db;
}

.ui-stats-info-modal-description strong {
  font-weight: 600;
  color: #111827;
}

html.dark .ui-stats-info-modal-description strong {
  color: #f9fafb;
}

.ui-stats-info-modal-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ui-stats-info-modal-subtitle {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

html.dark .ui-stats-info-modal-subtitle {
  color: #f9fafb;
}

.ui-stats-info-modal-list {
  list-style-type: disc;
  list-style-position: inside;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  color: #374151;
}

html.dark .ui-stats-info-modal-list {
  color: #d1d5db;
}

.ui-stats-info-modal-list li {
  line-height: 1.5;
}

.ui-stats-info-modal-tip {
  padding: 0.75rem;
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 0.5rem;
}

html.dark .ui-stats-info-modal-tip {
  background-color: rgba(20, 83, 45, 0.2);
  border-color: #166534;
}

.ui-stats-info-modal-tip-text {
  font-size: 0.875rem;
  color: #065f46;
  margin: 0;
  line-height: 1.5;
}

html.dark .ui-stats-info-modal-tip-text {
  color: #6ee7b7;
}

.ui-stats-info-modal-tip-text strong {
  font-weight: 600;
}

/* Only visible when HTMX is requesting */
.stats-progress.htmx-request {
  display: none;
}

.stats-progress {
  display: block;
  padding: 1rem 2.5rem;
}

/* Summary Grid */
.stats-progress-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .stats-progress-summary-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .stats-progress-summary-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.stats-progress-streak-grid {
  margin-top: 16px;
}

/* Graph row: graph-2 (2/3) + graph-3 (1/3) */
.stats-progress-graphs-row {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 2rem 0;
}

.stats-progress-graphs-row-main,
.stats-progress-graphs-row-side {
  min-width: 0;
}

/* Remove individual margins since the wrapper handles spacing */
.stats-progress-graphs-row .ui-stats-graph-2,
.stats-progress-graphs-row .ui-stats-graph-3 {
  margin: 0;
}

.stats-progress-graphs-row .ui-stats-graph-2 {
  margin-bottom: 2rem;
}

@media (min-width: 1024px) {
  .stats-progress-graphs-row {
    flex-direction: row;
    align-items: stretch;
    gap: 24px;
  }

  .stats-progress-graphs-row-main {
    flex: 2;
  }

  .stats-progress-graphs-row-side {
    flex: 1;
  }

  .stats-progress-graphs-row .ui-stats-graph-2 {
    margin-bottom: 0;
    height: 100%;
  }

  .stats-progress-graphs-row .ui-stats-graph-3 {
    height: 100%;
  }
}

/* Summary Card */
.stats-progress-summary-card {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 16px;
  backdrop-filter: blur(24px);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.06);
}

html.dark .stats-progress-summary-card {
  border-color: rgba(75, 85, 99, 0.5);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.4),
    0 1px 3px rgba(0, 0, 0, 0.3);
}

.stats-progress-summary-card-blue {
  background: linear-gradient(
    to bottom right,
    rgba(239, 246, 255, 0.8),
    rgba(219, 234, 254, 0.4)
  );
}

html.dark .stats-progress-summary-card-blue {
  background: linear-gradient(
    to bottom right,
    rgba(23, 37, 84, 0.3),
    rgba(30, 58, 138, 0.2)
  );
}

.stats-progress-summary-card-purple {
  background: linear-gradient(
    to bottom right,
    rgba(250, 245, 255, 0.8),
    rgba(237, 233, 254, 0.4)
  );
}

html.dark .stats-progress-summary-card-purple {
  background: linear-gradient(
    to bottom right,
    rgba(46, 16, 101, 0.3),
    rgba(76, 29, 149, 0.2)
  );
}

.stats-progress-summary-card-orange {
  background: linear-gradient(
    to bottom right,
    rgba(255, 247, 237, 0.8),
    rgba(254, 243, 199, 0.4)
  );
}

html.dark .stats-progress-summary-card-orange {
  background: linear-gradient(
    to bottom right,
    rgba(67, 20, 7, 0.3),
    rgba(124, 45, 18, 0.2)
  );
}

.stats-progress-summary-card-yellow {
  background: linear-gradient(
    to bottom right,
    rgba(254, 252, 232, 0.8),
    rgba(254, 249, 195, 0.4)
  );
}

html.dark .stats-progress-summary-card-yellow {
  background: linear-gradient(
    to bottom right,
    rgba(66, 32, 6, 0.3),
    rgba(113, 63, 18, 0.2)
  );
}

/* Streak Card Header */
.stats-progress-streak-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.stats-progress-streak-title {
  font-size: 0.9375rem;
  color: #111827;
  margin: 0;
}

html.dark .stats-progress-streak-title {
  color: #f3f4f6;
}

.stats-progress-streak-svg {
  width: 20px;
  height: 20px;
  color: #ffffff;
}

.stats-progress-summary-icon-yellow {
  background-color: #eab308;
}

html.dark .stats-progress-summary-icon-yellow {
  background-color: #ca8a04;
}

/* Icon Container */
.stats-progress-summary-icon {
  padding: 8px;
  border-radius: 8px;
}

.stats-progress-summary-icon-blue {
  background-color: #3b82f6;
}

html.dark .stats-progress-summary-icon-blue {
  background-color: #2563eb;
}

.stats-progress-summary-icon-purple {
  background-color: #a855f7;
}

html.dark .stats-progress-summary-icon-purple {
  background-color: #9333ea;
}

.stats-progress-summary-icon-orange {
  background-color: #f97316;
}

html.dark .stats-progress-summary-icon-orange {
  background-color: #ea580c;
}

/* Value */
.stats-progress-summary-value {
  font-size: 1.5rem;
  color: #111827;
  margin-bottom: 2px;
  text-transform: capitalize;
}

html.dark .stats-progress-summary-value {
  color: #f3f4f6;
}

/* Label */
.stats-progress-summary-label {
  font-size: 0.875rem;
  color: #4b5563;
}

html.dark .stats-progress-summary-label {
  color: #9ca3af;
}

/* Responsive Design */

/* Tablet */
/* @media (max-width: 768px) {
} */

/* Mobile */
@media (max-width: 480px) {
  .stats-progress {
    padding: 1rem;
  }

  .stats-progress-summary-grid {
    gap: 32px;
  }
}

/* Only visible when HTMX is requesting */
.stats-usage.htmx-request {
  display: none;
}

.stats-usage {
  display: block;
  padding: 1rem 2.5rem;
}

.stats-usage-membership-card {
  margin-bottom: 2rem;
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 1.5rem;
  background: linear-gradient(
    to bottom right,
    rgba(239, 246, 255, 0.8),
    rgba(224, 231, 255, 0.4)
  );
}

html.dark .stats-usage-membership-card {
  border-color: rgba(75, 85, 99, 0.5);
  background: linear-gradient(
    to bottom right,
    rgba(23, 37, 84, 0.3),
    rgba(49, 46, 129, 0.2)
  );
}

.stats-usage-membership-card-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 16rem;
  height: 16rem;
  background: linear-gradient(
    to bottom right,
    rgba(96, 165, 250, 0.1),
    rgba(192, 132, 252, 0.1)
  );
  border-radius: 9999px;
  filter: blur(48px);
  pointer-events: none;
}

.stats-usage-membership-card-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.stats-usage-membership-card-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.stats-usage-membership-card-icon {
  padding: 0.75rem;
  background: linear-gradient(to bottom right, #3b82f6, #4f46e5);
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  color: #fff;
  flex-shrink: 0;
}

.stats-usage-membership-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.stats-usage-membership-card-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.stats-usage-membership-card-title {
  color: #111827;
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
}

html.dark .stats-usage-membership-card-title {
  color: #f3f4f6;
}

.stats-usage-membership-card-badge {
  padding: 0.125rem 0.625rem;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
}

html.dark .stats-usage-membership-card-badge {
  background: rgba(30, 58, 138, 0.4);
  color: #93c5fd;
}

.stats-usage-membership-card-badge-pro {
  padding: 0.125rem 0.625rem;
  background: #dcfce7;
  color: #15803d;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
}

html.dark .stats-usage-membership-card-badge-pro {
  background: rgba(20, 83, 45, 0.4);
  color: #86efac;
}

.stats-usage-membership-card-badge-premium {
  padding: 0.125rem 0.625rem;
  background: #f3e8ff;
  color: #7e22ce;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
}

html.dark .stats-usage-membership-card-badge-premium {
  background: rgba(88, 28, 135, 0.4);
  color: #d8b4fe;
}

.stats-usage-membership-card-description {
  font-size: 0.875rem;
  color: #4b5563;
  margin: 0;
}

html.dark .stats-usage-membership-card-description {
  color: #9ca3af;
}

.stats-usage-membership-card-upgrade-btn {
  position: relative;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(to right, #9333ea, #2563eb, #9333ea);
  color: #fff;
  font-weight: 700;
  font-size: 0.875rem;
  border-radius: 0.75rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.stats-usage-membership-card-upgrade-btn:hover {
  transform: scale(1.05);
}

@keyframes stats-usage-gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.stats-usage-membership-card-upgrade-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #9333ea, #2563eb, #9333ea);
  background-size: 200% 200%;
  animation: stats-usage-gradient-shift 3s ease infinite alternate;
}

@keyframes stats-usage-shine-sweep {
  0% {
    transform: translateX(-100%);
  }
  30% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.stats-usage-membership-card-upgrade-shine {
  position: absolute;
  inset: 0;
  width: 60%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.35),
    transparent
  );
  pointer-events: none;
  animation: stats-usage-shine-sweep 3.5s ease-in-out infinite;
}

.stats-usage-membership-card-upgrade-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stats-usage-membership-card-zap {
  transition: transform 0.2s;
}

.stats-usage-membership-card-upgrade-btn:hover
  .stats-usage-membership-card-zap {
  transform: rotate(12deg);
}

.stats-usage-graphs-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.stats-usage-graphs-row > div {
  flex: 1;
  margin-top: 0;
  margin-bottom: 0;
}

@media (min-width: 1024px) {
  .stats-usage-graphs-row {
    flex-direction: row;
  }
}

.stats-usage-upsell-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid rgba(216, 180, 254, 0.5);
  padding: 2rem;
  background: linear-gradient(
    to bottom right,
    rgba(250, 245, 255, 0.8),
    rgba(253, 242, 248, 0.4)
  );
  margin-top: 1rem;
}

html.dark .stats-usage-upsell-card {
  border-color: rgba(147, 51, 234, 0.5);
  background: linear-gradient(
    to bottom right,
    rgba(59, 7, 100, 0.3),
    rgba(131, 24, 67, 0.2)
  );
}

.stats-usage-upsell-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 24rem;
  height: 24rem;
  background: linear-gradient(
    to bottom right,
    rgba(167, 139, 250, 0.2),
    rgba(244, 114, 182, 0.2)
  );
  border-radius: 9999px;
  filter: blur(48px);
  pointer-events: none;
}

.stats-usage-upsell-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.stats-usage-upsell-info {
  flex: 1;
}

.stats-usage-upsell-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.stats-usage-upsell-crown-icon {
  color: #9333ea;
  flex-shrink: 0;
}

html.dark .stats-usage-upsell-crown-icon {
  color: #c084fc;
}

.stats-usage-upsell-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

html.dark .stats-usage-upsell-title {
  color: #f3f4f6;
}

.stats-usage-upsell-card:has(.stats-usage-upsell-title-warning) {
  border-color: #fcd34d;
  background: linear-gradient(
    to bottom right,
    rgba(255, 251, 235, 0.9),
    rgba(255, 243, 205, 0.5)
  );
}

html.dark .stats-usage-upsell-card:has(.stats-usage-upsell-title-warning) {
  border-color: #92400e;
  background: linear-gradient(
    to bottom right,
    rgba(58, 46, 0, 0.5),
    rgba(28, 26, 15, 0.4)
  );
}

.stats-usage-upsell-card:has(.stats-usage-upsell-title-warning)
  .stats-usage-upsell-glow {
  background: linear-gradient(
    to bottom right,
    rgba(251, 191, 36, 0.2),
    rgba(245, 158, 11, 0.15)
  );
}

.stats-usage-upsell-warning-icon {
  font-size: 1.75rem;
  flex-shrink: 0;
}

.stats-usage-upsell-title-warning {
  font-size: 1rem;
  font-weight: 500;
  color: #92400e;
}

html.dark .stats-usage-upsell-title-warning {
  color: #fcd34d;
}

.stats-usage-upsell-manage-btn {
  display: inline-block;
  background: transparent;
  color: #92400e;
  text-decoration: none;
  padding: 8px 20px;
  border-radius: 6px;
  border: 1.5px solid #d97706;
  font-size: 14px;
  font-weight: 600;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.stats-usage-upsell-manage-btn:hover {
  background: #d97706;
  color: #fff;
  text-decoration: none;
}

html.dark .stats-usage-upsell-manage-btn {
  color: #fcd34d;
  border-color: #92400e;
}

html.dark .stats-usage-upsell-manage-btn:hover {
  background: #92400e;
  color: #fff;
}

.stats-usage-upsell-description {
  color: #4b5563;
  margin: 0 0 1rem 0;
  max-width: 42rem;
}

html.dark .stats-usage-upsell-description {
  color: #9ca3af;
}

.stats-usage-upsell-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.stats-usage-upsell-feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #374151;
}

html.dark .stats-usage-upsell-feature {
  color: #d1d5db;
}

.stats-usage-upsell-check {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: #22c55e;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stats-usage-upsell-check-icon {
  color: #fff;
  font-size: 0.75rem;
  line-height: 1;
}

.stats-usage-upsell-feature-text {
  font-size: 0.9375rem;
}

.stats-usage-upsell-btn {
  position: relative;
  padding: 1.25rem 2.5rem;
  background: linear-gradient(to right, #9333ea, #db2777, #9333ea);
  color: #fff;
  font-weight: 700;
  font-size: 1.125rem;
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.stats-usage-upsell-btn:hover {
  transform: scale(1.05);
}

@keyframes stats-usage-upsell-gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.stats-usage-upsell-btn-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #9333ea, #db2777, #9333ea);
  background-size: 200% 200%;
  animation: stats-usage-upsell-gradient-shift 3s ease infinite alternate;
}

@keyframes stats-usage-upsell-shine-sweep {
  0% {
    transform: translateX(-200%) skewX(12deg);
  }
  30% {
    transform: translateX(300%) skewX(12deg);
  }
  100% {
    transform: translateX(300%) skewX(12deg);
  }
}

.stats-usage-upsell-btn-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  pointer-events: none;
  animation: stats-usage-upsell-shine-sweep 3.5s ease-in-out infinite;
}

.stats-usage-upsell-btn-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(167, 139, 250, 0.5),
    rgba(244, 114, 182, 0.5)
  );
  filter: blur(1rem);
  pointer-events: none;
}

.stats-usage-upsell-btn-label {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.stats-usage-upsell-btn-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.stats-usage-upsell-btn-subtitle {
  font-size: 0.75rem;
  opacity: 0.9;
}

.stats-usage-upsell-btn-wrap {
  position: relative;
  flex-shrink: 0;
  margin-left: 2rem;
}

.stats-usage-upsell-btn-wrap .stats-usage-upsell-btn {
  margin-left: 0;
}

.stats-usage-upsell-btn-offer {
  position: absolute;
  top: -10px;
  right: -10px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 20px;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  z-index: 1;
}

.stats-usage-upsell-crown-icon-premium {
  color: #ca8a04;
}

html.dark .stats-usage-upsell-crown-icon-premium {
  color: #fbbf24;
}

.stats-usage-test-status-switcher {
  position: fixed;
  bottom: 6.75rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: #6366f1;
  color: #fff;
  border: 2px dashed rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  appearance: none;
  cursor: pointer;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
  z-index: 9999;
  user-select: none;
}

.stats-usage-test-status-switcher:hover {
  transform: scale(1.1);
}

.stats-usage-test-switcher {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 9999px;
  background: #d97706;
  color: #fff;
  border: 2px dashed rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  appearance: none;
  cursor: pointer;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
  z-index: 9999;
  user-select: none;
}

.stats-usage-test-switcher:hover {
  transform: scale(1.1);
}

.stats-usage-test-switcher-loading {
  opacity: 0.5;
  pointer-events: none;
}

.stats-usage-test-switcher-label {
  line-height: 1;
}

/* Responsive Design */

/* Tablet */
@media (max-width: 768px) {
  .stats-usage-upsell-content {
    flex-direction: column;
  }

  .stats-usage-upsell-btn-wrap {
    margin-left: 0;
    width: 100%;
  }

  .stats-usage-upsell-btn {
    width: 100%;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .stats-usage {
    padding: 1rem;
  }

  .stats-usage-membership-card {
    padding: 1rem;
  }

  .stats-usage-membership-card-content {
    flex-direction: column;
    align-items: flex-start;
  }

  .stats-usage-membership-card-upgrade-btn {
    width: 100%;
  }

  .stats-usage-membership-card-badge {
    display: none;
  }

  .stats-usage-membership-card-upgrade-label {
    justify-content: center;
  }
}

.ui-stats-limits-card {
  margin-top: 2rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 2rem;
  background: rgba(255, 255, 255, 0.6);
  margin-bottom: 2rem;
}

html.dark .ui-stats-limits-card {
  border-color: rgba(75, 85, 99, 0.5);
  background: rgba(31, 41, 55, 0.6);
}

.ui-stats-limits-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.ui-stats-limits-reset-label {
  font-size: 0.75rem;
  color: #6b7280;
  background: rgba(107, 114, 128, 0.1);
  border: 1px solid rgba(107, 114, 128, 0.2);
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  white-space: nowrap;
}

html.dark .ui-stats-limits-reset-label {
  color: #9ca3af;
  background: rgba(156, 163, 175, 0.1);
  border-color: rgba(156, 163, 175, 0.2);
}

.ui-stats-limits-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ui-stats-limits-header-icon {
  padding: 0.5rem;
  background: linear-gradient(to bottom right, #3b82f6, #4f46e5);
  border-radius: 0.5rem;
  color: #fff;
  flex-shrink: 0;
}

.ui-stats-limits-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

html.dark .ui-stats-limits-title {
  color: #f3f4f6;
}

.ui-stats-limits-subtitle {
  font-size: 0.875rem;
  color: #4b5563;
  margin: 0;
}

html.dark .ui-stats-limits-subtitle {
  color: #9ca3af;
}

.ui-stats-limits-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.ui-stats-limits-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ui-stats-limits-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ui-stats-limits-row-label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ui-stats-limits-row-icon {
  padding: 0.375rem;
  border-radius: 0.5rem;
  background: #f3f4f6;
  color: #4b5563;
  flex-shrink: 0;
}

html.dark .ui-stats-limits-row-icon {
  background: #374151;
  color: #9ca3af;
}

.ui-stats-limits-row-icon-red {
  padding: 0.375rem;
  border-radius: 0.5rem;
  background: #fee2e2;
  color: #dc2626;
  flex-shrink: 0;
}

html.dark .ui-stats-limits-row-icon-red {
  background: rgba(127, 29, 29, 0.3);
  color: #f87171;
}

.ui-stats-limits-row-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
}

html.dark .ui-stats-limits-row-name {
  color: #f3f4f6;
}

.ui-stats-limits-row-badge {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  background: #fee2e2;
  color: #dc2626;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

html.dark .ui-stats-limits-row-badge {
  background: rgba(127, 29, 29, 0.3);
  color: #f87171;
}

.ui-stats-limits-row-stats {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.ui-stats-limits-row-pct {
  font-size: 0.75rem;
  font-weight: 700;
}

.ui-stats-limits-row-pct-green {
  color: #6366f1;
}

html.dark .ui-stats-limits-row-pct-green {
  color: #818cf8;
}

.ui-stats-limits-row-pct-yellow {
  color: #d97706;
}

html.dark .ui-stats-limits-row-pct-yellow {
  color: #fbbf24;
}

.ui-stats-limits-row-pct-red {
  color: #dc2626;
}

html.dark .ui-stats-limits-row-pct-red {
  color: #f87171;
}

.ui-stats-limits-row-count {
  font-size: 0.875rem;
  font-weight: 500;
  color: #9ca3af;
}

html.dark .ui-stats-limits-row-count {
  color: #6b7280;
}

.ui-stats-limits-row-count-red {
  font-size: 0.875rem;
  font-weight: 500;
  color: #dc2626;
}

html.dark .ui-stats-limits-row-count-red {
  color: #f87171;
}

@keyframes ui-stats-limits-shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(400%);
  }
}

.ui-stats-limits-bar-track-infinite::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  height: 100%;
  background: linear-gradient(
    to right,
    transparent,
    rgba(99, 102, 241, 0.35),
    transparent
  );
  animation: ui-stats-limits-shimmer 2s ease-in-out infinite;
}

html.dark .ui-stats-limits-bar-track-infinite::after {
  background: linear-gradient(
    to right,
    transparent,
    rgba(129, 140, 248, 0.3),
    transparent
  );
}

.ui-stats-limits-row-badge-unlimited {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  background: rgba(99, 102, 241, 0.1);
  color: #6366f1;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

html.dark .ui-stats-limits-row-badge-unlimited {
  background: rgba(129, 140, 248, 0.15);
  color: #818cf8;
}

.ui-stats-limits-bar-track {
  margin-top: 0.75rem;
  position: relative;
  width: 100%;
  height: 1.5rem;
  background: transparent;
  border: 1.5px solid #bcbdb4;
  /* border-radius: 9999px; */
  overflow: hidden;
  padding: 2px;
}

html.dark .ui-stats-limits-bar-track {
  border-color: #616367;
}

.ui-stats-limits-bar-fill {
  height: 100%;
  /* border-radius: 9999px; */
  transition: width 0.5s ease;
}

.ui-stats-limits-bar-fill-green {
  background: linear-gradient(to right, #bfdbfe, #a5b4fc);
}

html.dark .ui-stats-limits-bar-fill-green {
  background: linear-gradient(
    to right,
    rgba(59, 130, 246, 0.5),
    rgba(99, 102, 241, 0.5)
  );
}

.ui-stats-limits-bar-fill-yellow {
  background: linear-gradient(to right, #fde68a, #fcd34d);
}

html.dark .ui-stats-limits-bar-fill-yellow {
  background: linear-gradient(
    to right,
    rgba(251, 191, 36, 0.45),
    rgba(245, 158, 11, 0.45)
  );
}

.ui-stats-limits-bar-fill-red {
  background: linear-gradient(to right, #fecaca, #fca5a5);
}

html.dark .ui-stats-limits-bar-fill-red {
  background: linear-gradient(
    to right,
    rgba(248, 113, 113, 0.5),
    rgba(239, 68, 68, 0.5)
  );
}

.ui-stats-limits-show-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 1.25rem;
  padding: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 0.5rem;
  transition:
    color 0.15s ease,
    background 0.15s ease;
}

.ui-stats-limits-show-more-btn:hover {
  color: #111827;
  background: #f3f4f6;
}

html.dark .ui-stats-limits-show-more-btn {
  color: #9ca3af;
}

html.dark .ui-stats-limits-show-more-btn:hover {
  color: #f3f4f6;
  background: #374151;
}

/* Responsive Design */

/* Tablet */
/* @media (max-width: 768px) {
} */

/* Mobile */
@media (max-width: 480px) {
  .ui-stats-limits-card {
    padding: 1.5rem 0.75rem;
  }

  .ui-stats-limits-header {
    flex-direction: column;
    gap: 16px;
  }

  .ui-stats-limits-row-badge {
    display: none;
  }

  .ui-stats-limits-row-name {
    max-width: 150px;
  }

  .ui-stats-limits-row-pct {
    display: none;
  }
}

.ui-stats-graph-1 {
  margin: 2rem 0;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.6);
}

html.dark .ui-stats-graph-1 {
  border-color: rgba(75, 85, 99, 0.5);
  background: rgba(31, 41, 55, 0.6);
}

.ui-stats-graph-1-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.ui-stats-graph-1-header-icon {
  color: #4b5563;
  flex-shrink: 0;
}

html.dark .ui-stats-graph-1-header-icon {
  color: #9ca3af;
}

.ui-stats-graph-1-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

html.dark .ui-stats-graph-1-title {
  color: #f3f4f6;
}

.ui-stats-graph-1-chart {
  position: relative;
  height: 300px;
}

.ui-stats-graph-2 {
  margin: 2rem 0;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.6);
}

html.dark .ui-stats-graph-2 {
  border-color: rgba(75, 85, 99, 0.5);
  background: rgba(31, 41, 55, 0.6);
}

.ui-stats-graph-2-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.ui-stats-graph-2-header-icon {
  color: #4b5563;
  flex-shrink: 0;
}

html.dark .ui-stats-graph-2-header-icon {
  color: #9ca3af;
}

.ui-stats-graph-2-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

html.dark .ui-stats-graph-2-title {
  color: #f3f4f6;
}

.ui-stats-graph-2-chart {
  position: relative;
  height: 300px;
}

.ui-stats-graph-3 {
  margin: 2rem 0;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.6);
}

html.dark .ui-stats-graph-3 {
  border-color: rgba(75, 85, 99, 0.5);
  background: rgba(31, 41, 55, 0.6);
}

.ui-stats-graph-3-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.ui-stats-graph-3-header-icon {
  color: #4b5563;
  flex-shrink: 0;
}

html.dark .ui-stats-graph-3-header-icon {
  color: #9ca3af;
}

.ui-stats-graph-3-title {
  font-size: 16px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

html.dark .ui-stats-graph-3-title {
  color: #f3f4f6;
}

.ui-stats-graph-3-chart {
  position: relative;
  height: 300px;
}

/* Root container */
.service-down-container {
  position: relative;
  min-height: 100vh;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    #f9fafb 0%,
    rgba(254, 226, 226, 0.3) 50%,
    rgba(255, 237, 213, 0.4) 100%
  );
  overflow: hidden;
}

html.dark .service-down-container {
  background: linear-gradient(
    135deg,
    #111827 0%,
    rgba(127, 29, 29, 0.2) 50%,
    rgba(124, 45, 18, 0.2) 100%
  );
}

/* Background orbs */
.service-down-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.service-down-orb {
  position: absolute;
  width: 384px;
  height: 384px;
  border-radius: 50%;
  filter: blur(80px);
}

.service-down-orb-red {
  top: 80px;
  left: 40px;
  background: rgba(248, 113, 113, 0.2);
  animation: service-down-orb-float-1 8s ease-in-out infinite;
}

html.dark .service-down-orb-red {
  background: rgba(239, 68, 68, 0.1);
}

.service-down-orb-orange {
  bottom: 80px;
  right: 40px;
  background: rgba(251, 146, 60, 0.2);
  animation: service-down-orb-float-2 8s ease-in-out infinite;
}

html.dark .service-down-orb-orange {
  background: rgba(249, 115, 22, 0.1);
}

.service-down-orb-amber {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  height: 500px;
  background: rgba(251, 191, 36, 0.1);
  animation: service-down-orb-float-3 10s ease-in-out infinite;
}

html.dark .service-down-orb-amber {
  background: rgba(245, 158, 11, 0.05);
}

/* Card */
.service-down-card {
  position: relative;
  z-index: 10;
  max-width: 672px;
  width: 100%;
  padding: 32px 40px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.1);
  animation: service-down-fade-in 0.6s ease-out;
}

html.dark .service-down-card {
  background: rgba(31, 41, 55, 0.6);
  border: 1px solid rgba(55, 65, 81, 0.4);
}

@media (min-width: 768px) {
  .service-down-card {
    padding: 40px;
  }
}

/* Icon wrapper */
.service-down-icon-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  animation: service-down-scale-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s
    both;
}

.service-down-pulse-ring {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 112px;
  height: 112px;
  background: rgba(239, 68, 68, 0.3);
  border-radius: 50%;
  animation: service-down-pulse 1.5s ease-out infinite;
}

.service-down-icon-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.2),
    rgba(249, 115, 22, 0.2)
  );
  filter: blur(40px);
  border-radius: 50%;
}

.service-down-icon {
  position: relative;
  background: linear-gradient(135deg, #dc2626 0%, #ea580c 50%, #ea580c 100%);
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  animation: service-down-wiggle 2s ease-in-out infinite;
}

.service-down-icon-svg {
  width: 64px;
  height: 64px;
  stroke: white;
  display: block;
}

/* Title */
.service-down-title {
  font-size: 2.25rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 12px;
  text-align: center;
  animation: service-down-fade-in 0.6s ease-out 0.3s both;
}

html.dark .service-down-title {
  color: #f3f4f6;
}

@media (min-width: 768px) {
  .service-down-title {
    font-size: 3rem;
  }
}

/* Subtitle */
.service-down-subtitle {
  font-size: 1.125rem;
  color: #6b7280;
  margin-bottom: 32px;
  text-align: center;
  animation: service-down-fade-in 0.6s ease-out 0.4s both;
}

html.dark .service-down-subtitle {
  color: #9ca3af;
}

/* Alert */
.service-down-alert {
  background: linear-gradient(
    135deg,
    rgba(254, 242, 242, 0.8) 0%,
    rgba(255, 237, 213, 0.8) 100%
  );
  backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 32px;
  border: 1px solid rgba(254, 202, 202, 0.6);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  animation: service-down-fade-in 0.6s ease-out 0.5s both;
}

html.dark .service-down-alert {
  background: linear-gradient(
    135deg,
    rgba(127, 29, 29, 0.3) 0%,
    rgba(124, 45, 18, 0.3) 100%
  );
  border: 1px solid rgba(55, 65, 81, 0.6);
}

.service-down-alert-text {
  color: #374151;
  line-height: 1.625;
  text-align: center;
  margin-bottom: 16px;
}

html.dark .service-down-alert-text {
  color: #d1d5db;
}

/* Status indicator */
.service-down-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgba(254, 226, 226, 0.8);
  border-radius: 12px;
  border: 1px solid rgba(252, 165, 165, 0.5);
}

html.dark .service-down-status {
  background: rgba(127, 29, 29, 0.3);
  border: 1px solid rgba(185, 28, 28, 0.5);
}

.service-down-status-dot {
  width: 12px;
  height: 12px;
  background: #ef4444;
  border-radius: 50%;
  flex-shrink: 0;
  animation: service-down-pulse-dot 1.5s ease-in-out infinite;
}

.service-down-status-icon {
  flex-shrink: 0;
  stroke: #dc2626;
}

html.dark .service-down-status-icon {
  stroke: #f87171;
}

.service-down-status-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin: 0;
}

html.dark .service-down-status-text {
  color: #d1d5db;
}

.service-down-status-label {
  font-weight: 700;
  color: #dc2626;
}

html.dark .service-down-status-label {
  color: #f87171;
}

/* Actions */
.service-down-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
  animation: service-down-fade-in 0.6s ease-out 0.6s both;
}

@media (min-width: 640px) {
  .service-down-actions {
    flex-direction: row;
    justify-content: center;
  }
}

.service-down-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  text-decoration: none;
}

.service-down-btn:hover {
  transform: scale(1.05);
}

.service-down-btn:active {
  transform: scale(0.95);
}

.service-down-btn-icon {
  flex-shrink: 0;
}

.service-down-btn-primary {
  background: linear-gradient(90deg, #2563eb 0%, #4f46e5 100%);
  color: white;
  box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.4);
}

.service-down-btn-primary:hover {
  background: linear-gradient(90deg, #1d4ed8 0%, #4338ca 100%);
  box-shadow: 0 20px 25px -5px rgba(37, 99, 235, 0.5);
}

.service-down-refresh-icon {
  animation: service-down-spin 2s linear infinite;
}

.service-down-btn-secondary {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  color: #374151;
  border: 1px solid #d1d5db;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

html.dark .service-down-btn-secondary {
  background: rgba(31, 41, 55, 0.8);
  color: #e5e7eb;
  border: 1px solid #4b5563;
}

.service-down-btn-secondary:hover {
  background: white;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
}

html.dark .service-down-btn-secondary:hover {
  background: #1f2937;
}

.service-down-arrow-icon {
  transition: transform 0.2s ease;
}

.service-down-btn-secondary:hover .service-down-arrow-icon {
  transform: translateX(-4px);
}

/* Contact */
.service-down-contact {
  text-align: center;
  animation: service-down-fade-in 0.6s ease-out 0.7s both;
}

.service-down-contact-title {
  color: #6b7280;
  font-size: 0.875rem;
  margin-bottom: 12px;
}

html.dark .service-down-contact-title {
  color: #9ca3af;
}

.service-down-contact-links {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.service-down-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  border-radius: 8px;
  border: 1px solid rgba(229, 231, 235, 0.5);
  color: #374151;
  text-decoration: none;
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

html.dark .service-down-contact-link {
  background: rgba(31, 41, 55, 0.6);
  border: 1px solid rgba(75, 85, 99, 0.5);
  color: #d1d5db;
}

.service-down-contact-link:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: scale(1.05);
}

html.dark .service-down-contact-link:hover {
  background: rgba(31, 41, 55, 0.8);
}

.service-down-contact-icon {
  flex-shrink: 0;
}

/* Animations */
@keyframes service-down-orb-float-1 {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
}

@keyframes service-down-orb-float-2 {
  0%,
  100% {
    transform: scale(1.2);
    opacity: 0.5;
  }
  50% {
    transform: scale(1);
    opacity: 0.3;
  }
}

@keyframes service-down-orb-float-3 {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.2;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.4;
  }
}

@keyframes service-down-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes service-down-scale-in {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@keyframes service-down-pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.4);
    opacity: 0;
  }
}

@keyframes service-down-wiggle {
  0% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(-5deg) scale(1.05);
  }
  50% {
    transform: rotate(5deg) scale(1);
  }
  75% {
    transform: rotate(-5deg) scale(1.05);
  }
  100% {
    transform: rotate(0deg) scale(1);
  }
}

@keyframes service-down-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes service-down-pulse-dot {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.5;
  }
}

/* Maintenance Page Styles */

.maintenance-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #fafafa 0%, #f3f0ff 30%, #eff6ff 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  position: relative;
  overflow: hidden;
}

html.dark .maintenance-container {
  background: #0e0e0e;
}

/* Animated background orbs */
.maintenance-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.maintenance-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.maintenance-orb-purple {
  top: 5rem;
  left: 2.5rem;
  width: 24rem;
  height: 24rem;
  background: rgba(168, 85, 247, 0.2);
  animation: maintenance-orb-pulse-1 8s ease-in-out infinite;
}

html.dark .maintenance-orb-purple {
  background: rgba(168, 85, 247, 0.1);
}

.maintenance-orb-blue {
  bottom: 5rem;
  right: 2.5rem;
  width: 24rem;
  height: 24rem;
  background: rgba(96, 165, 250, 0.2);
  animation: maintenance-orb-pulse-2 8s ease-in-out infinite;
}

html.dark .maintenance-orb-blue {
  background: rgba(96, 165, 250, 0.1);
}

.maintenance-orb-indigo {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 32rem;
  height: 32rem;
  background: rgba(99, 102, 241, 0.1);
  animation: maintenance-orb-pulse-3 10s ease-in-out infinite;
}

html.dark .maintenance-orb-indigo {
  background: rgba(99, 102, 241, 0.05);
}

/* Main content wrapper */
.maintenance-content {
  max-width: 80rem;
  width: 100%;
  position: relative;
  z-index: 10;
  animation: maintenance-fade-in 0.6s ease-out;
}

/* Main glass card */
.maintenance-card {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(40px);
  border-radius: 1.5rem;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.4);
  padding: 1.5rem;
}

html.dark .maintenance-card {
  background: rgba(31, 41, 55, 0.6);
  border: 1px solid rgba(75, 85, 99, 0.4);
}

/* Header section */
.maintenance-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .maintenance-header {
    flex-direction: row;
  }

  .maintenance-card {
    padding: 2rem;
  }
}

/* Icon wrapper */
.maintenance-icon-wrapper {
  flex-shrink: 0;
  animation: maintenance-scale-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s
    backwards;
}

/* Pulse ring */
.maintenance-pulse-ring {
  position: absolute;
  top: 14.5%;
  left: 6.5%;
  width: 112px;
  height: 112px;
  background: rgba(168, 85, 247, 0.3);
  border-radius: 50%;
  animation: maintenance-pulse 2s ease-out infinite;
}

/* Icon glow */
.maintenance-icon-glow {
  /* position: absolute; */
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(168, 85, 247, 0.2),
    rgba(99, 102, 241, 0.2)
  );
  filter: blur(40px);
  border-radius: 50%;
}

/* Main icon */
.maintenance-icon {
  position: relative;
  background: linear-gradient(135deg, #9333ea, #a855f7, #6366f1);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  animation: maintenance-wiggle 3s ease-in-out infinite;
}

.maintenance-icon-svg {
  width: 3.5rem;
  height: 3.5rem;
  color: white;
}

/* Title section */
.maintenance-title-section {
  flex: 1;
  text-align: center;
  animation: maintenance-fade-in 0.6s ease-out 0.3s backwards;
}

@media (min-width: 768px) {
  .maintenance-title-section {
    text-align: left;
  }
}

.maintenance-title {
  font-size: 1.875rem;
  font-weight: bold;
  color: #111827;
  margin-bottom: 0.5rem;
}

html.dark .maintenance-title {
  color: #f3f4f6;
}

@media (min-width: 768px) {
  .maintenance-title {
    font-size: 2.25rem;
  }
}

.maintenance-subtitle {
  font-size: 1.125rem;
  color: #4b5563;
}

html.dark .maintenance-subtitle {
  color: #9ca3af;
}

/* Grid layout */
.maintenance-grid {
  display: grid;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
  .maintenance-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Description card */
.maintenance-description-card {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.5),
    rgba(249, 250, 251, 0.5)
  );
  backdrop-filter: blur(8px);
  border-radius: 1rem;
  padding: 1.25rem;
  border: 1px solid rgba(229, 231, 235, 0.5);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  animation: maintenance-slide-in-left 0.6s ease-out 0.5s backwards;
}

html.dark .maintenance-description-card {
  background: linear-gradient(
    135deg,
    rgba(17, 24, 39, 0.5),
    rgba(31, 41, 55, 0.5)
  );
  border: 1px solid rgba(75, 85, 99, 0.5);
}

.maintenance-description-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.maintenance-description-icon-box {
  padding: 0.5rem;
  background: #faf5ff;
  border-radius: 0.75rem;
  flex-shrink: 0;
}

html.dark .maintenance-description-icon-box {
  background: rgba(88, 28, 135, 0.3);
}

.maintenance-description-icon {
  color: #9333ea;
}

html.dark .maintenance-description-icon {
  color: #c084fc;
}

.maintenance-description-text {
  flex: 1;
}

.maintenance-description-title {
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

html.dark .maintenance-description-title {
  color: #f3f4f6;
}

.maintenance-description-content {
  color: #374151;
  line-height: 1.625;
  font-size: 0.875rem;
}

html.dark .maintenance-description-content {
  color: #d1d5db;
}

/* Time estimate */
.maintenance-time-estimate {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.75rem;
  background: rgba(250, 245, 255, 0.8);
  border-radius: 0.75rem;
  border: 1px solid rgba(233, 213, 255, 0.5);
}

html.dark .maintenance-time-estimate {
  background: rgba(88, 28, 135, 0.2);
  border: 1px solid rgba(126, 34, 206, 0.5);
}

.maintenance-pulse-dot {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.5rem;
  background: #9333ea;
  border-radius: 50%;
  animation: maintenance-pulse-dot 2s ease-in-out infinite;
}

.maintenance-time-text {
  font-size: 0.75rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0;
}

html.dark .maintenance-time-text {
  color: #d1d5db;
}

.maintenance-time-value {
  font-weight: bold;
  color: #9333ea;
}

html.dark .maintenance-time-value {
  color: #c084fc;
}

/* Working on card */
.maintenance-working-card {
  background: linear-gradient(
    135deg,
    rgba(239, 246, 255, 0.5),
    rgba(238, 242, 255, 0.5)
  );
  backdrop-filter: blur(8px);
  border-radius: 1rem;
  padding: 1.25rem;
  border: 1px solid rgba(191, 219, 254, 0.5);
  animation: maintenance-slide-in-right 0.6s ease-out 0.6s backwards;
}

html.dark .maintenance-working-card {
  background: linear-gradient(
    135deg,
    rgba(30, 58, 138, 0.2),
    rgba(49, 46, 129, 0.2)
  );
  border: 1px solid rgba(30, 64, 175, 0.5);
}

.maintenance-working-title {
  font-weight: 600;
  color: #111827;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}

html.dark .maintenance-working-title {
  color: #f3f4f6;
}

.maintenance-working-emoji {
  color: #3b82f6;
}

html.dark .maintenance-working-emoji {
  color: #60a5fa;
}

.maintenance-working-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.maintenance-working-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  animation: maintenance-fade-in 0.6s ease-out backwards;
}

.maintenance-working-item:nth-child(1) {
  animation-delay: 0.7s;
}

.maintenance-working-item:nth-child(2) {
  animation-delay: 0.8s;
}

.maintenance-working-item:nth-child(3) {
  animation-delay: 0.9s;
}

.maintenance-check-icon {
  color: #10b981;
  flex-shrink: 0;
}

.maintenance-working-text {
  color: #374151;
  font-size: 0.875rem;
}

html.dark .maintenance-working-text {
  color: #d1d5db;
}

/* Thank you message */
.maintenance-thank-you {
  color: #6b7280;
  margin-bottom: 1.5rem;
  text-align: center;
  font-size: 0.875rem;
  animation: maintenance-fade-in 0.6s ease-out 0.9s backwards;
}

html.dark .maintenance-thank-you {
  color: #9ca3af;
}

/* Footer section */
.maintenance-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

@media (min-width: 768px) {
  .maintenance-footer {
    flex-direction: row;
  }
}

/* Actions */
.maintenance-actions {
  order: 2;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  animation: maintenance-fade-in 0.6s ease-out 1s backwards;
}

@media (min-width: 640px) {
  .maintenance-actions {
    flex-direction: row;
  }
}

@media (min-width: 768px) {
  .maintenance-actions {
    order: 1;
  }
}

/* Buttons */
.maintenance-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 0.75rem;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.2s;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  text-decoration: none;
}

.maintenance-btn:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  transform: scale(1.05);
}

.maintenance-btn:active {
  transform: scale(0.95);
}

.maintenance-btn-primary {
  background: linear-gradient(90deg, #2563eb, #3b82f6, #6366f1);
  color: white;
  border: none;
}

.maintenance-btn-primary:hover {
  background: linear-gradient(90deg, #1d4ed8, #2563eb, #4f46e5);
}

.maintenance-btn-secondary {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  color: #374151;
  border: 1px solid #d1d5db;
}

html.dark .maintenance-btn-secondary {
  background: rgba(31, 41, 55, 0.8);
  color: #e5e7eb;
  border: 1px solid #4b5563;
}

.maintenance-btn-secondary:hover {
  background: rgba(255, 255, 255, 1);
}

html.dark .maintenance-btn-secondary:hover {
  background: rgba(31, 41, 55, 1);
}

.maintenance-btn-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.maintenance-refresh-icon {
  animation: maintenance-spin 2s linear infinite;
}

.maintenance-arrow-icon {
  transition: transform 0.2s;
}

.maintenance-btn-secondary:hover .maintenance-arrow-icon {
  transform: translateX(-0.25rem);
}

/* Contact section */
.maintenance-contact {
  order: 1;
  text-align: center;
  animation: maintenance-fade-in 0.6s ease-out 1.1s backwards;
}

@media (min-width: 768px) {
  .maintenance-contact {
    order: 2;
    text-align: right;
  }
}

.maintenance-contact-title {
  color: #6b7280;
  font-size: 0.75rem;
  margin-bottom: 0.5rem;
}

html.dark .maintenance-contact-title {
  color: #9ca3af;
}

.maintenance-contact-links {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  .maintenance-contact-links {
    justify-content: flex-end;
  }
}

.maintenance-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(16px);
  border-radius: 0.5rem;
  border: 1px solid rgba(229, 231, 235, 0.5);
  color: #374151;
  text-decoration: none;
  font-size: 0.75rem;
  transition: all 0.2s;
}

html.dark .maintenance-contact-link {
  background: rgba(31, 41, 55, 0.6);
  border: 1px solid rgba(75, 85, 99, 0.5);
  color: #d1d5db;
}

.maintenance-contact-link:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: scale(1.05);
}

html.dark .maintenance-contact-link:hover {
  background: rgba(31, 41, 55, 0.8);
}

.maintenance-contact-icon {
  width: 0.875rem;
  height: 0.875rem;
}

/* Animations */
@keyframes maintenance-orb-pulse-1 {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
}

@keyframes maintenance-orb-pulse-2 {
  0%,
  100% {
    transform: scale(1.2);
    opacity: 0.5;
  }
  50% {
    transform: scale(1);
    opacity: 0.3;
  }
}

@keyframes maintenance-orb-pulse-3 {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.2;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.4;
  }
}

@keyframes maintenance-fade-in {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes maintenance-scale-in {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@keyframes maintenance-pulse {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.5;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.5;
  }
}

@keyframes maintenance-wiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-10deg);
  }
}

@keyframes maintenance-pulse-dot {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes maintenance-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes maintenance-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes maintenance-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ===== Container ===== */
.not-found-container {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    rgba(219, 234, 254, 0.4) 50%,
    rgba(243, 232, 255, 0.4) 100%
  );
}

html.dark .not-found-container {
  background: linear-gradient(
    135deg,
    #1f2937 0%,
    rgba(30, 58, 138, 0.2) 50%,
    rgba(88, 28, 135, 0.2) 100%
  );
}

/* ===== Background orbs ===== */
.not-found-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.not-found-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.not-found-orb-blue {
  top: 80px;
  left: 40px;
  width: 288px;
  height: 288px;
  background: rgba(96, 165, 250, 0.2);
  animation: not-found-orb-1 8s ease-in-out infinite;
}

html.dark .not-found-orb-blue {
  background: rgba(59, 130, 246, 0.1);
}

.not-found-orb-purple {
  bottom: 80px;
  right: 40px;
  width: 384px;
  height: 384px;
  background: rgba(192, 132, 252, 0.2);
  animation: not-found-orb-2 8s ease-in-out infinite;
}

html.dark .not-found-orb-purple {
  background: rgba(168, 85, 247, 0.1);
}

.not-found-orb-indigo {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 384px;
  height: 384px;
  background: rgba(129, 140, 248, 0.1);
  animation: not-found-orb-3 10s ease-in-out infinite;
}

html.dark .not-found-orb-indigo {
  background: rgba(99, 102, 241, 0.05);
}

/* ===== Floating elements ===== */
.not-found-floating {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  display: none;
}

@media (min-width: 1024px) {
  .not-found-floating {
    display: block;
  }
}

.not-found-float {
  position: absolute;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.15);
}

html.dark .not-found-float {
  border: 1px solid rgba(75, 85, 99, 0.4);
  background: rgba(31, 41, 55, 0.4);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.3);
}

.not-found-float-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
}

html.dark .not-found-float-text {
  color: #f3f4f6;
}

.not-found-float-1 {
  top: 15%;
  left: 8%;
  animation: not-found-float 4s ease-in-out infinite;
  animation-delay: 0s;
}

.not-found-float-2 {
  top: 35%;
  left: 12%;
  animation: not-found-float 4s ease-in-out infinite;
  animation-delay: 0.2s;
}

.not-found-float-3 {
  top: 55%;
  left: 6%;
  animation: not-found-float 4s ease-in-out infinite;
  animation-delay: 0.4s;
}

.not-found-float-4 {
  top: 25%;
  right: 10%;
  animation: not-found-float 4s ease-in-out infinite;
  animation-delay: 0.1s;
}

.not-found-float-5 {
  top: 45%;
  right: 15%;
  animation: not-found-float 4s ease-in-out infinite;
  animation-delay: 0.3s;
}

.not-found-float-6 {
  top: 65%;
  right: 8%;
  animation: not-found-float 4s ease-in-out infinite;
  animation-delay: 0.5s;
}

/* ===== Main content ===== */
.not-found-content {
  position: relative;
  z-index: 10;
  max-width: 1280px;
  width: 100%;
  padding: 96px 24px;
  text-align: center;
}

@media (min-width: 640px) {
  .not-found-content {
    padding: 128px 24px;
  }
}

@media (min-width: 1024px) {
  .not-found-content {
    padding: 160px 24px;
  }
}

/* ===== Badge ===== */
.not-found-badge-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
  animation: not-found-fade-down 0.5s ease-out both;
}

.not-found-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.1);
}

html.dark .not-found-badge {
  border: 1px solid rgba(75, 85, 99, 0.4);
  background: rgba(31, 41, 55, 0.3);
}

.not-found-badge-icon {
  color: #9333ea;
  flex-shrink: 0;
}

html.dark .not-found-badge-icon {
  color: #c084fc;
}

.not-found-badge-text {
  font-size: 0.875rem;
  color: #374151;
}

html.dark .not-found-badge-text {
  color: #d1d5db;
}

/* ===== 404 Number ===== */
.not-found-number {
  font-size: 9rem;
  line-height: 1;
  font-weight: 800;
  margin: 0 0 24px 0;
  background: linear-gradient(to right, #2563eb, #9333ea, #4f46e5);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: not-found-scale-in 0.6s ease-out 0.1s both;
}

html.dark .not-found-number {
  background: linear-gradient(to right, #60a5fa, #c084fc, #818cf8);
  -webkit-background-clip: text;
  background-clip: text;
}

@media (min-width: 640px) {
  .not-found-number {
    font-size: 12rem;
  }
}

@media (min-width: 1024px) {
  .not-found-number {
    font-size: 16rem;
  }
}

/* ===== Heading ===== */
.not-found-heading {
  font-size: 2.25rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 24px 0;
  animation: not-found-fade-up 0.5s ease-out 0.2s both;
}

html.dark .not-found-heading {
  color: #f3f4f6;
}

.not-found-heading-gradient {
  background: linear-gradient(to right, #9333ea, #4f46e5, #2563eb);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

html.dark .not-found-heading-gradient {
  background: linear-gradient(to right, #c084fc, #818cf8, #60a5fa);
  -webkit-background-clip: text;
  background-clip: text;
}

@media (min-width: 640px) {
  .not-found-heading {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  .not-found-heading {
    font-size: 3.75rem;
  }
}

/* ===== Description ===== */
.not-found-description {
  max-width: 672px;
  margin: 0 auto 48px auto;
  font-size: 1.25rem;
  line-height: 1.625;
  color: #4b5563;
  animation: not-found-fade-up 0.5s ease-out 0.3s both;
}

html.dark .not-found-description {
  color: #9ca3af;
}

/* ===== Action buttons ===== */
.not-found-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  align-items: center;
  animation: not-found-fade-up 0.5s ease-out 0.4s both;
}

@media (min-width: 640px) {
  .not-found-actions {
    flex-direction: row;
  }
}

.not-found-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1.125rem;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.not-found-btn:hover {
  transform: scale(1.05);
}

.not-found-btn:active {
  transform: scale(0.95);
}

.not-found-btn-icon {
  flex-shrink: 0;
}

.not-found-btn-outline {
  border: 2px solid #93c5fd;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  color: #1d4ed8;
}

html.dark .not-found-btn-outline {
  border: 2px solid #1e3a8a;
  background: rgba(31, 41, 55, 0.5);
  color: #93c5fd;
}

.not-found-btn-outline:hover {
  background: rgba(239, 246, 255, 0.8);
}

html.dark .not-found-btn-outline:hover {
  background: rgba(30, 58, 138, 0.3);
}

.not-found-btn-primary {
  background: linear-gradient(to right, #2563eb, #9333ea, #4f46e5);
  color: #ffffff;
  box-shadow:
    0 20px 25px -5px rgba(37, 99, 235, 0.3),
    0 8px 10px -6px rgba(147, 51, 234, 0.2);
}

.not-found-btn-primary:hover {
  color: white;
  background: linear-gradient(to right, #1d4ed8, #7e22ce, #4338ca);
  box-shadow:
    0 25px 50px -12px rgba(37, 99, 235, 0.4),
    0 12px 20px -6px rgba(147, 51, 234, 0.3);
  text-decoration: none;
}

/* ===== Decorative bottom bars ===== */
.not-found-bars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 384px;
  margin: 80px auto 0 auto;
  animation: not-found-fade-bars 0.8s ease-out 0.6s both;
}

.not-found-bar {
  height: 8px;
  border-radius: 9999px;
}

.not-found-bar-blue {
  background: linear-gradient(to right, #60a5fa, #3b82f6);
}

html.dark .not-found-bar-blue {
  background: linear-gradient(to right, #2563eb, #1d4ed8);
}

.not-found-bar-purple {
  background: linear-gradient(to right, #c084fc, #a855f7);
}

html.dark .not-found-bar-purple {
  background: linear-gradient(to right, #9333ea, #7e22ce);
}

.not-found-bar-indigo {
  background: linear-gradient(to right, #818cf8, #6366f1);
}

html.dark .not-found-bar-indigo {
  background: linear-gradient(to right, #4f46e5, #4338ca);
}

/* ===== Animations ===== */
@keyframes not-found-orb-1 {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
}

@keyframes not-found-orb-2 {
  0%,
  100% {
    transform: scale(1.2);
    opacity: 0.5;
  }
  50% {
    transform: scale(1);
    opacity: 0.3;
  }
}

@keyframes not-found-orb-3 {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.2;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.4;
  }
}

@keyframes not-found-float {
  0%,
  100% {
    opacity: 0.4;
    transform: translateY(0);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-10px);
  }
}

@keyframes not-found-fade-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes not-found-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes not-found-scale-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes not-found-fade-bars {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.3;
  }
}

/* ===== Container ===== */
.coming-soon-container {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(
    135deg,
    #ffffff 0%,
    rgba(219, 234, 254, 0.4) 50%,
    rgba(243, 232, 255, 0.4) 100%
  );
}

html.dark .coming-soon-container {
  background: linear-gradient(
    135deg,
    #1f2937 0%,
    rgba(30, 58, 138, 0.2) 50%,
    rgba(88, 28, 135, 0.2) 100%
  );
}

/* ===== Background orbs ===== */
.coming-soon-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.coming-soon-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.coming-soon-orb-blue {
  top: 80px;
  right: 40px;
  width: 288px;
  height: 288px;
  background: rgba(96, 165, 250, 0.2);
  animation: coming-soon-orb-1 8s ease-in-out infinite;
}

html.dark .coming-soon-orb-blue {
  background: rgba(59, 130, 246, 0.1);
}

.coming-soon-orb-purple {
  bottom: 80px;
  left: 40px;
  width: 384px;
  height: 384px;
  background: rgba(192, 132, 252, 0.2);
  animation: coming-soon-orb-2 8s ease-in-out infinite;
}

html.dark .coming-soon-orb-purple {
  background: rgba(168, 85, 247, 0.1);
}

.coming-soon-orb-indigo {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 384px;
  height: 384px;
  background: rgba(129, 140, 248, 0.1);
  animation: coming-soon-orb-3 10s ease-in-out infinite;
}

html.dark .coming-soon-orb-indigo {
  background: rgba(99, 102, 241, 0.05);
}

/* ===== Floating elements ===== */
.coming-soon-floating {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  display: none;
}

@media (min-width: 1024px) {
  .coming-soon-floating {
    display: block;
  }
}

.coming-soon-float {
  position: absolute;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.15);
}

html.dark .coming-soon-float {
  border: 1px solid rgba(75, 85, 99, 0.4);
  background: rgba(31, 41, 55, 0.4);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.3);
}

.coming-soon-float-text {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
}

html.dark .coming-soon-float-text {
  color: #f3f4f6;
}

.coming-soon-float-1 {
  top: 15%;
  left: 8%;
  animation: coming-soon-float 4s ease-in-out infinite;
  animation-delay: 0s;
}

.coming-soon-float-2 {
  top: 35%;
  left: 12%;
  animation: coming-soon-float 4s ease-in-out infinite;
  animation-delay: 0.2s;
}

.coming-soon-float-3 {
  top: 55%;
  left: 6%;
  animation: coming-soon-float 4s ease-in-out infinite;
  animation-delay: 0.4s;
}

.coming-soon-float-4 {
  top: 25%;
  right: 10%;
  animation: coming-soon-float 4s ease-in-out infinite;
  animation-delay: 0.1s;
}

.coming-soon-float-5 {
  top: 45%;
  right: 15%;
  animation: coming-soon-float 4s ease-in-out infinite;
  animation-delay: 0.3s;
}

.coming-soon-float-6 {
  top: 65%;
  right: 8%;
  animation: coming-soon-float 4s ease-in-out infinite;
  animation-delay: 0.5s;
}

/* ===== Main content ===== */
.coming-soon-content {
  position: relative;
  z-index: 10;
  max-width: 1280px;
  width: 100%;
  padding: 96px 24px;
  text-align: center;
}

@media (min-width: 640px) {
  .coming-soon-content {
    padding: 128px 24px;
  }
}

@media (min-width: 1024px) {
  .coming-soon-content {
    padding: 160px 24px;
  }
}

/* ===== Badge ===== */
.coming-soon-badge-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
  animation: coming-soon-fade-down 0.5s ease-out both;
}

.coming-soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.1);
}

html.dark .coming-soon-badge {
  border: 1px solid rgba(75, 85, 99, 0.4);
  background: rgba(31, 41, 55, 0.3);
}

.coming-soon-badge-icon {
  color: #9333ea;
  flex-shrink: 0;
  animation: coming-soon-spin 3s linear infinite;
}

html.dark .coming-soon-badge-icon {
  color: #c084fc;
}

.coming-soon-badge-text {
  font-size: 0.875rem;
  color: #374151;
}

html.dark .coming-soon-badge-text {
  color: #d1d5db;
}

/* ===== Heading ===== */
.coming-soon-heading {
  font-size: 3rem;
  line-height: 1.15;
  font-weight: 800;
  color: #111827;
  margin: 0 0 24px 0;
  animation: coming-soon-scale-in 0.6s ease-out 0.1s both;
}

html.dark .coming-soon-heading {
  color: #f3f4f6;
}

.coming-soon-heading-gradient {
  background: linear-gradient(to right, #2563eb, #9333ea, #4f46e5);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

html.dark .coming-soon-heading-gradient {
  background: linear-gradient(to right, #60a5fa, #c084fc, #818cf8);
  -webkit-background-clip: text;
  background-clip: text;
}

@media (min-width: 640px) {
  .coming-soon-heading {
    font-size: 4rem;
  }
}

@media (min-width: 1024px) {
  .coming-soon-heading {
    font-size: 5rem;
  }
}

/* ===== Description ===== */
.coming-soon-description {
  max-width: 560px;
  margin: 0 auto 48px auto;
  font-size: 1.25rem;
  line-height: 1.625;
  color: #4b5563;
  animation: coming-soon-fade-up 0.5s ease-out 0.3s both;
}

html.dark .coming-soon-description {
  color: #9ca3af;
}

/* ===== Action buttons ===== */
.coming-soon-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  align-items: center;
  animation: coming-soon-fade-up 0.5s ease-out 0.4s both;
}

@media (min-width: 640px) {
  .coming-soon-actions {
    flex-direction: row;
  }
}

.coming-soon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1.125rem;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
}

.coming-soon-btn:hover {
  transform: scale(1.05);
}

.coming-soon-btn:active {
  transform: scale(0.95);
}

.coming-soon-btn-icon {
  flex-shrink: 0;
}

.coming-soon-btn-outline {
  border: 2px solid #93c5fd;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  color: #1d4ed8;
}

html.dark .coming-soon-btn-outline {
  border: 2px solid #1e3a8a;
  background: rgba(31, 41, 55, 0.5);
  color: #93c5fd;
}

.coming-soon-btn-outline:hover {
  background: rgba(239, 246, 255, 0.8);
}

html.dark .coming-soon-btn-outline:hover {
  background: rgba(30, 58, 138, 0.3);
}

.coming-soon-btn-primary {
  background: linear-gradient(to right, #2563eb, #9333ea, #4f46e5);
  color: #ffffff;
  box-shadow:
    0 20px 25px -5px rgba(37, 99, 235, 0.3),
    0 8px 10px -6px rgba(147, 51, 234, 0.2);
}

.coming-soon-btn-primary:hover {
  color: white;
  background: linear-gradient(to right, #1d4ed8, #7e22ce, #4338ca);
  box-shadow:
    0 25px 50px -12px rgba(37, 99, 235, 0.4),
    0 12px 20px -6px rgba(147, 51, 234, 0.3);
  text-decoration: none;
}

/* ===== Decorative bottom bars ===== */
.coming-soon-bars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 384px;
  margin: 80px auto 0 auto;
  animation: coming-soon-fade-bars 0.8s ease-out 0.6s both;
}

.coming-soon-bar {
  height: 8px;
  border-radius: 9999px;
}

.coming-soon-bar-blue {
  background: linear-gradient(to right, #60a5fa, #3b82f6);
}

html.dark .coming-soon-bar-blue {
  background: linear-gradient(to right, #2563eb, #1d4ed8);
}

.coming-soon-bar-purple {
  background: linear-gradient(to right, #c084fc, #a855f7);
}

html.dark .coming-soon-bar-purple {
  background: linear-gradient(to right, #9333ea, #7e22ce);
}

.coming-soon-bar-indigo {
  background: linear-gradient(to right, #818cf8, #6366f1);
}

html.dark .coming-soon-bar-indigo {
  background: linear-gradient(to right, #4f46e5, #4338ca);
}

/* ===== Animations ===== */
@keyframes coming-soon-orb-1 {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
}

@keyframes coming-soon-orb-2 {
  0%,
  100% {
    transform: scale(1.2);
    opacity: 0.5;
  }
  50% {
    transform: scale(1);
    opacity: 0.3;
  }
}

@keyframes coming-soon-orb-3 {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.2;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.4;
  }
}

@keyframes coming-soon-float {
  0%,
  100% {
    opacity: 0.4;
    transform: translateY(0);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-10px);
  }
}

@keyframes coming-soon-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes coming-soon-fade-down {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes coming-soon-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes coming-soon-scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes coming-soon-fade-bars {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.3;
  }
}

.ui-tutor-navbar {
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 10;
  background-color: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  padding: 1rem 2rem;
}

html.dark .ui-tutor-navbar {
  background-color: #1f2937;
  border-bottom-color: #374151;
}

.ui-tutor-navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ui-tutor-navbar-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ui-tutor-navbar-back-btn {
  padding: 0.5rem;
  border-radius: 0.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  color: #374151;
}

.ui-tutor-navbar-back-btn:hover {
  background-color: #f3f4f6;
}

html.dark .ui-tutor-navbar-back-btn {
  color: #d1d5db;
}

html.dark .ui-tutor-navbar-back-btn:hover {
  background-color: #374151;
}

.ui-tutor-navbar-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.ui-tutor-navbar-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ui-tutor-navbar-title-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ui-tutor-navbar-title {
  font-size: 1.5rem;
  line-height: 2rem;
  color: #111827;
  margin: 0;
  font-weight: 400;
}

html.dark .ui-tutor-navbar-title {
  color: #f9fafb;
}

.ui-tutor-navbar-subtitle {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #6b7280;
  margin: 0;
}

html.dark .ui-tutor-navbar-subtitle {
  color: #9ca3af;
}

.ui-tutor-navbar-info-btn {
  padding: 0.375rem;
  border-radius: 9999px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.ui-tutor-navbar-info-btn:hover {
  background-color: #f3f4f6;
}

html.dark .ui-tutor-navbar-info-btn:hover {
  background-color: #374151;
}

.ui-tutor-navbar-icon-small {
  width: 1.25rem;
  height: 1.25rem;
  color: #6b7280;
}

html.dark .ui-tutor-navbar-icon-small {
  color: #9ca3af;
}

/* Transcript Button */

.ui-tutor-navbar-right {
  display: flex;
  align-items: center;
}

.ui-tutor-navbar-transcript-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  transition:
    background-color 0.2s,
    color 0.2s,
    box-shadow 0.2s;
  background-color: #f3f4f6;
  color: #374151;
}

.ui-tutor-navbar-transcript-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ui-tutor-navbar-transcript-btn:hover {
  background-color: #e5e7eb;
}

html.dark .ui-tutor-navbar-transcript-btn {
  background-color: #1f2937;
  color: #d1d5db;
}

html.dark .ui-tutor-navbar-transcript-btn:hover {
  background-color: #374151;
}

.ui-tutor-navbar-transcript-btn-active {
  background: linear-gradient(to right, #9333ea, #db2777);
  color: #ffffff;
  box-shadow: 0 10px 15px -3px rgba(147, 51, 234, 0.25);
}

.ui-tutor-navbar-transcript-btn-active:hover {
  background: linear-gradient(to right, #7e22ce, #be185d);
}

html.dark .ui-tutor-navbar-transcript-btn-active {
  background: linear-gradient(to right, #9333ea, #db2777);
  color: #ffffff;
}

html.dark .ui-tutor-navbar-transcript-btn-active:hover {
  background: linear-gradient(to right, #7e22ce, #be185d);
}

.ui-tutor-navbar-transcript-icon {
  width: 1rem;
  height: 1rem;
}

/* Responsive Design */

/* Tablet */
@media (max-width: 768px) {
  .ui-tutor-navbar-title {
    font-size: 1.15rem;
  }
  .ui-tutor-navbar-subtitle {
    display: none;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .ui-tutor-navbar {
    padding: 1rem;
  }
  .ui-tutor-navbar-info-btn {
    display: none;
  }
}

.ui-tutor-info-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s,
    visibility 0.2s;
}

.ui-tutor-info-modal-overlay.ui-tutor-info-modal-show {
  opacity: 1;
  visibility: visible;
}

.ui-tutor-info-modal-content {
  background-color: #ffffff;
  border-radius: 0.5rem;
  max-width: 36rem;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border: 1px solid #e5e7eb;
}

html.dark .ui-tutor-info-modal-content {
  background-color: #1f2937;
  border-color: #374151;
}

.ui-tutor-info-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

html.dark .ui-tutor-info-modal-header {
  border-bottom-color: #374151;
}

.ui-tutor-info-modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

html.dark .ui-tutor-info-modal-title {
  color: #f9fafb;
}

.ui-tutor-info-modal-close {
  background: transparent;
  border: none;
  color: #6b7280;
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  transition: color 0.2s;
}

.ui-tutor-info-modal-close:hover {
  color: #111827;
}

html.dark .ui-tutor-info-modal-close {
  color: #9ca3af;
}

html.dark .ui-tutor-info-modal-close:hover {
  color: #f9fafb;
}

.ui-tutor-info-modal-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ui-tutor-info-modal-description {
  color: #374151;
  line-height: 1.5;
  margin: 0;
}

html.dark .ui-tutor-info-modal-description {
  color: #d1d5db;
}

.ui-tutor-info-modal-description strong {
  font-weight: 600;
  color: #111827;
}

html.dark .ui-tutor-info-modal-description strong {
  color: #f9fafb;
}

.ui-tutor-info-modal-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ui-tutor-info-modal-subtitle {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

html.dark .ui-tutor-info-modal-subtitle {
  color: #f9fafb;
}

.ui-tutor-info-modal-list {
  list-style-type: disc;
  list-style-position: inside;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  font-size: 0.875rem;
  color: #374151;
}

html.dark .ui-tutor-info-modal-list {
  color: #d1d5db;
}

.ui-tutor-info-modal-list li {
  line-height: 1.5;
}

.ui-tutor-info-modal-tip {
  padding: 0.75rem;
  background-color: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 0.5rem;
}

html.dark .ui-tutor-info-modal-tip {
  background-color: rgba(20, 83, 45, 0.2);
  border-color: #166534;
}

.ui-tutor-info-modal-tip-text {
  font-size: 0.875rem;
  color: #065f46;
  margin: 0;
  line-height: 1.5;
}

html.dark .ui-tutor-info-modal-tip-text {
  color: #6ee7b7;
}

.ui-tutor-info-modal-tip-text strong {
  font-weight: 600;
}

.ui-tutor-pace-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s,
    visibility 0.2s;
}

.ui-tutor-pace-modal-overlay.ui-tutor-pace-modal-show {
  opacity: 1;
  visibility: visible;
}

.ui-tutor-pace-modal-content {
  position: relative;
  background-color: rgba(212, 212, 219, 0.85);
  backdrop-filter: blur(2px);
  border-radius: 0.5rem;
  max-width: 32rem;
  width: calc(100% - 2rem);
  padding: 1.5rem;
  border: 1px solid rgba(229, 231, 235, 0.5);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

html.dark .ui-tutor-pace-modal-content {
  background-color: rgba(32, 32, 40, 0.85);
  border-color: rgba(55, 65, 81, 0.5);
}

.ui-tutor-pace-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  color: #242526;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    color 0.2s,
    opacity 0.2s;
  z-index: 100;
}

.ui-tutor-pace-modal-close:hover {
  opacity: 1;
  color: #111827;
}

html.dark .ui-tutor-pace-modal-close {
  color: #9ca3af;
}

html.dark .ui-tutor-pace-modal-close:hover {
  color: #f9fafb;
}

.ui-tutor-pace-modal-header {
  position: relative;
  top: -0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ui-tutor-pace-modal-title-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background-color: rgba(230, 234, 240, 0.8);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

html.dark .ui-tutor-pace-modal-title-icon {
  background-color: rgba(30, 58, 138, 0.4);
}

.ui-tutor-pace-modal-title-icon-svg {
  width: 1.25rem;
  height: 1.25rem;
  color: #2563eb;
}

html.dark .ui-tutor-pace-modal-title-icon-svg {
  color: #60a5fa;
}

.ui-tutor-pace-modal-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

html.dark .ui-tutor-pace-modal-title {
  color: #f9fafb;
}

.ui-tutor-pace-modal-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ui-tutor-pace-modal-rate-display {
  text-align: center;
  background: linear-gradient(
    to bottom right,
    rgba(239, 246, 255, 0.8),
    rgba(219, 234, 254, 0.8)
  );
  backdrop-filter: blur(4px);
  border-radius: 1rem;
  padding: 1.5rem;
  border: 1px solid rgba(191, 219, 254, 0.5);
}

html.dark .ui-tutor-pace-modal-rate-display {
  background: linear-gradient(
    to bottom right,
    rgba(23, 37, 84, 0.4),
    rgba(30, 58, 138, 0.4)
  );
  border-color: rgba(30, 64, 175, 0.5);
}

.ui-tutor-pace-modal-rate-value {
  font-size: 2.25rem;
  font-weight: 700;
  color: #1e3a8a;
  margin-bottom: 0.5rem;
}

html.dark .ui-tutor-pace-modal-rate-value {
  color: #eff6ff;
}

.ui-tutor-pace-modal-rate-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(29, 78, 216, 0.8);
}

html.dark .ui-tutor-pace-modal-rate-label {
  color: rgba(147, 197, 253, 0.8);
}

.ui-tutor-pace-modal-slider-container {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(4px);
  border-radius: 0.75rem;
  padding: 1rem;
  border: 1px solid rgba(229, 231, 235, 0.5);
}

html.dark .ui-tutor-pace-modal-slider-container {
  background: rgba(31, 41, 55, 0.5);
  border-color: rgba(55, 65, 81, 0.5);
}

.ui-tutor-pace-modal-slider {
  width: 100%;
  height: 0.75rem;
  background: linear-gradient(
    to right,
    rgba(191, 219, 254, 0.8),
    rgba(147, 197, 253, 0.8),
    rgba(96, 165, 250, 0.8)
  );
  border-radius: 0.5rem;
  appearance: none;
  cursor: pointer;
}

html.dark .ui-tutor-pace-modal-slider {
  background: linear-gradient(
    to right,
    rgba(30, 58, 138, 0.6),
    rgba(29, 78, 216, 0.6),
    rgba(37, 99, 235, 0.6)
  );
}

.ui-tutor-pace-modal-slider {
  accent-color: #2563eb;
}

.ui-tutor-pace-modal-slider::-webkit-slider-thumb {
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
  border: 3px solid white;
  transition: all 0.2s;
}

.ui-tutor-pace-modal-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.5);
}

.ui-tutor-pace-modal-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
  border: 3px solid white;
  transition: all 0.2s;
}

.ui-tutor-pace-modal-slider::-moz-range-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.5);
}

.ui-tutor-pace-modal-presets {
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem;
}

.ui-tutor-pace-modal-preset-btn {
  font-size: 0.75rem;
  font-weight: 600;
  color: #343436;
  background: transparent;
  border: 1px solid transparent;
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.15s;
}

.ui-tutor-pace-modal-preset-btn:hover {
  background-color: rgba(243, 244, 246, 0.8);
  color: #2d2d2f;
}

html.dark .ui-tutor-pace-modal-preset-btn {
  color: #9ca3af;
}

html.dark .ui-tutor-pace-modal-preset-btn:hover {
  background-color: rgba(55, 65, 81, 0.5);
}

.ui-tutor-pace-modal-preset-btn.ui-tutor-pace-modal-preset-active {
  background-color: rgba(219, 234, 254, 0.8);
  color: #1d4ed8;
  font-weight: 600;
  border-color: rgba(191, 219, 254, 0.5);
}

html.dark .ui-tutor-pace-modal-preset-btn.ui-tutor-pace-modal-preset-active {
  background-color: rgba(30, 58, 138, 0.4);
  color: #60a5fa;
  border-color: rgba(30, 64, 175, 0.5);
}

.ui-tutor-pace-modal-footer {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.ui-tutor-pace-modal-footer button {
  font-size: 0.85rem;
}

.ui-tutor-pace-modal-btn-reset {
  flex: 1;
  padding: 0.5rem 1rem;
  background: rgba(243, 244, 246, 0.8);
  color: #374151;
  border: 1px solid rgba(229, 231, 235, 0.5);
  border-radius: 0.5rem;
  font-weight: 500;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background-color 0.15s;
}

.ui-tutor-pace-modal-btn-reset:hover {
  background: rgba(229, 231, 235, 0.8);
}

html.dark .ui-tutor-pace-modal-btn-reset {
  background: rgba(55, 65, 81, 0.8);
  color: #d1d5db;
  border-color: rgba(55, 65, 81, 0.5);
}

html.dark .ui-tutor-pace-modal-btn-reset:hover {
  background: rgba(75, 85, 99, 0.8);
}

.ui-tutor-pace-modal-btn-apply {
  flex: 1;
  padding: 0.5rem 1rem;
  background: linear-gradient(
    to right,
    rgba(37, 99, 235, 0.9),
    rgba(29, 78, 216, 0.9)
  );
  color: #ffffff;
  border: none;
  border-radius: 0.5rem;
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2);
  backdrop-filter: blur(4px);
  transition: background 0.15s;
}

.ui-tutor-pace-modal-btn-apply:hover {
  background: linear-gradient(to right, #1d4ed8, #1e40af);
}

.ui-tutor-help-modal-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s,
    visibility 0.2s;
}

.ui-tutor-help-modal-overlay.ui-tutor-help-modal-show {
  opacity: 1;
  visibility: visible;
}

.ui-tutor-help-modal-content {
  position: relative;
  background-color: rgba(212, 212, 219, 0.85);
  backdrop-filter: blur(2px);
  border-radius: 0.5rem;
  max-width: 32rem;
  width: calc(100% - 2rem);
  padding: 1.5rem;
  border: 1px solid rgba(229, 231, 235, 0.5);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

html.dark .ui-tutor-help-modal-content {
  background-color: rgba(32, 32, 40, 0.9);
  border-color: rgba(55, 65, 81, 0.5);
}

.ui-tutor-help-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: transparent;
  border: none;
  color: #242526;
  cursor: pointer;
  padding: 0.25rem;
  line-height: 1;
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    color 0.2s,
    opacity 0.2s;
  z-index: 100;
}

.ui-tutor-help-modal-close:hover {
  opacity: 1;
  color: #111827;
}

html.dark .ui-tutor-help-modal-close {
  color: #9ca3af;
}

html.dark .ui-tutor-help-modal-close:hover {
  color: #f9fafb;
}

.ui-tutor-help-modal-header {
  position: relative;
  top: -0.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.ui-tutor-help-modal-title-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background-color: rgba(220, 240, 230, 0.8);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

html.dark .ui-tutor-help-modal-title-icon {
  background-color: rgba(6, 78, 59, 0.4);
}

.ui-tutor-help-modal-title-icon-svg {
  width: 1.25rem;
  height: 1.25rem;
  color: #16a34a;
}

html.dark .ui-tutor-help-modal-title-icon-svg {
  color: #4ade80;
}

.ui-tutor-help-modal-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

html.dark .ui-tutor-help-modal-title {
  color: #f9fafb;
}

.ui-tutor-help-modal-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ui-tutor-help-modal-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.ui-tutor-help-modal-group-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7280;
  padding: 0 0.25rem;
}

html.dark .ui-tutor-help-modal-group-label {
  color: #9ca3af;
}

.ui-tutor-help-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.ui-tutor-help-modal-action-btn {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  width: 100%;
  text-align: left;
  padding: 0.625rem 0.75rem;
  border-radius: 0.625rem;
  background: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(229, 231, 235, 0.6);
  cursor: pointer;
  transition:
    background-color 0.15s,
    border-color 0.15s;
}

.ui-tutor-help-modal-action-btn:hover {
  background: rgba(220, 252, 231, 0.6);
  border-color: rgba(134, 239, 172, 0.5);
}

html.dark .ui-tutor-help-modal-action-btn {
  background: rgba(31, 41, 55, 0.4);
  border-color: rgba(55, 65, 81, 0.5);
}

html.dark .ui-tutor-help-modal-action-btn:hover {
  background: rgba(6, 78, 59, 0.25);
  border-color: rgba(52, 211, 153, 0.3);
}

.ui-tutor-help-modal-action-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: rgba(220, 252, 231, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #16a34a;
  transition: background-color 0.15s;
}

.ui-tutor-help-modal-action-btn:hover .ui-tutor-help-modal-action-icon {
  background: rgba(187, 247, 208, 0.8);
}

html.dark .ui-tutor-help-modal-action-icon {
  background: rgba(6, 78, 59, 0.4);
  color: #4ade80;
}

html.dark
  .ui-tutor-help-modal-action-btn:hover
  .ui-tutor-help-modal-action-icon {
  background: rgba(6, 78, 59, 0.6);
}

.ui-tutor-help-modal-action-text {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}

.ui-tutor-help-modal-action-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
  transition: color 0.15s;
}

.ui-tutor-help-modal-action-btn:hover .ui-tutor-help-modal-action-title {
  color: #15803d;
}

html.dark .ui-tutor-help-modal-action-title {
  color: #f3f4f6;
}

html.dark
  .ui-tutor-help-modal-action-btn:hover
  .ui-tutor-help-modal-action-title {
  color: #4ade80;
}

.ui-tutor-help-modal-action-subtitle {
  font-size: 0.75rem;
  color: #6b7280;
}

html.dark .ui-tutor-help-modal-action-subtitle {
  color: #9ca3af;
}

.ui-tutor-help-modal-divider {
  height: 1px;
  background: rgba(229, 231, 235, 0.6);
  margin: 0.25rem 0;
}

html.dark .ui-tutor-help-modal-divider {
  background: rgba(55, 65, 81, 0.6);
}

/* ================================================================
   ui-tutor-suggestions
   Fixed bottom-right widget for AI conversation suggestions
   ================================================================ */

/* ---- Outer wrapper (fixed position, always visible) ---- */

.ui-tutor-suggestions {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 380px;
  z-index: 150;
  border-radius: 1rem;
  overflow: hidden;
  transition: right 0.3s ease;
}

/* Card styling added when expanded */
.ui-tutor-suggestions-open {
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
  border: 1px solid rgba(233, 213, 255, 0.5);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 60px -15px rgba(168, 85, 247, 0.1);
}

html.dark .ui-tutor-suggestions-open {
  background-color: rgba(31, 41, 55, 0.9);
  border-color: rgba(126, 34, 206, 0.5);
}

/* ---- Header ---- */

.ui-tutor-suggestions-header {
  background: linear-gradient(
    to right,
    rgba(250, 245, 255, 0.8),
    rgba(253, 242, 248, 0.8)
  );
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 1rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.ui-tutor-suggestions-header:hover {
  background: linear-gradient(
    to right,
    rgba(243, 232, 255, 0.8),
    rgba(252, 231, 243, 0.8)
  );
}

html.dark .ui-tutor-suggestions-header {
  background: linear-gradient(
    to right,
    rgba(59, 7, 100, 0.4),
    rgba(80, 7, 36, 0.4)
  );
}

html.dark .ui-tutor-suggestions-header:hover {
  background: linear-gradient(
    to right,
    rgba(88, 28, 135, 0.5),
    rgba(131, 24, 67, 0.5)
  );
}

/* Border bottom added when expanded */
.ui-tutor-suggestions-header-open {
  border-bottom: 1px solid rgba(233, 213, 255, 0.5);
}

html.dark .ui-tutor-suggestions-header-open {
  border-bottom-color: rgba(107, 33, 168, 0.5);
}

.ui-tutor-suggestions-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.ui-tutor-suggestions-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ---- Icon box ---- */

.ui-tutor-suggestions-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: linear-gradient(to bottom right, #a855f7, #ec4899);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
}

/* ---- Titles ---- */

.ui-tutor-suggestions-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
  line-height: 1.25;
}

html.dark .ui-tutor-suggestions-title {
  color: #f3f4f6;
}

.ui-tutor-suggestions-subtitle {
  font-size: 0.75rem;
  color: #4b5563;
  margin: 0;
  line-height: 1.25;
}

html.dark .ui-tutor-suggestions-subtitle {
  color: #9ca3af;
}

/* ---- Header actions ---- */

.ui-tutor-suggestions-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ---- Language button ---- */

.ui-tutor-suggestions-lang-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  background: linear-gradient(to right, #9333ea, #db2777);
  color: #fff;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background 0.15s ease;
}

.ui-tutor-suggestions-lang-btn:hover {
  background: linear-gradient(to right, #7e22ce, #be185d);
}

/* Show translations button (white/gray variant) */
.ui-tutor-suggestions-lang-btn-show {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: rgba(255, 255, 255, 0.8);
  color: #374151;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: background-color 0.15s ease;
}

.ui-tutor-suggestions-lang-btn-show:hover {
  background-color: rgba(255, 255, 255, 1);
}

html.dark .ui-tutor-suggestions-lang-btn-show {
  background-color: rgba(55, 65, 81, 0.8);
  color: #d1d5db;
}

html.dark .ui-tutor-suggestions-lang-btn-show:hover {
  background-color: rgba(55, 65, 81, 1);
}

/* ---- Chevron icons ---- */

.ui-tutor-suggestions-chevron {
  color: #9333ea;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

html.dark .ui-tutor-suggestions-chevron {
  color: #c084fc;
}

/* ---- Suggestions list ---- */

.ui-tutor-suggestions-list {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 24rem;
  overflow-y: auto;
}

/* ---- Suggestion item ---- */

.ui-tutor-suggestions-item {
  padding: 0.75rem;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-radius: 0.75rem;
  border: 1px solid rgba(229, 231, 235, 0.6);
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.ui-tutor-suggestions-item:hover {
  border-color: #d8b4fe;
  box-shadow: 0 10px 15px -3px rgba(168, 85, 247, 0.1);
}

html.dark .ui-tutor-suggestions-item {
  background-color: rgba(55, 65, 81, 0.8);
  border-color: rgba(75, 85, 99, 0.6);
}

html.dark .ui-tutor-suggestions-item:hover {
  border-color: #9333ea;
}

.ui-tutor-suggestions-item-row {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

/* ---- Speak button ---- */

.ui-tutor-suggestions-speak {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: linear-gradient(to bottom right, #f3e8ff, #fce7f3);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  color: #9333ea;
  transition:
    background 0.15s ease,
    transform 0.15s ease;
}

.ui-tutor-suggestions-speak:hover {
  background: linear-gradient(to bottom right, #e9d5ff, #fbcfe8);
}

.ui-tutor-suggestions-item:hover .ui-tutor-suggestions-speak {
  transform: scale(1.1);
}

html.dark .ui-tutor-suggestions-speak {
  background: linear-gradient(
    to bottom right,
    rgba(88, 28, 135, 0.4),
    rgba(131, 24, 67, 0.4)
  );
  color: #c084fc;
}

html.dark .ui-tutor-suggestions-speak:hover {
  background: linear-gradient(
    to bottom right,
    rgba(107, 33, 168, 0.4),
    rgba(157, 23, 77, 0.4)
  );
}

/* ---- Item text ---- */

.ui-tutor-suggestions-item-content {
  flex: 1;
  min-width: 0;
}

.ui-tutor-suggestions-item-primary {
  font-size: 0.875rem;
  font-weight: 500;
  color: #111827;
  margin: 0 0 0.25rem 0;
}

html.dark .ui-tutor-suggestions-item-primary {
  color: #f3f4f6;
}

.ui-tutor-suggestions-item-translation {
  font-size: 0.75rem;
  color: #6b7280;
  font-style: italic;
  margin: 0;
}

html.dark .ui-tutor-suggestions-item-translation {
  color: #9ca3af;
}

/* ---- Footer ---- */

.ui-tutor-suggestions-footer {
  padding: 0.75rem;
  background: linear-gradient(
    to right,
    rgba(250, 245, 255, 0.5),
    rgba(253, 242, 248, 0.5)
  );
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border-top: 1px solid rgba(233, 213, 255, 0.5);
}

html.dark .ui-tutor-suggestions-footer {
  background: linear-gradient(
    to right,
    rgba(59, 7, 100, 0.2),
    rgba(80, 7, 36, 0.2)
  );
  border-top-color: rgba(107, 33, 168, 0.5);
}

/* ---- Refresh button ---- */

.ui-tutor-suggestions-refresh {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: 0.75rem;
  font-weight: 500;
  font-size: 0.875rem;
  background: linear-gradient(to right, #9333ea, #db2777);
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 6px -1px rgba(168, 85, 247, 0.2);
  transition:
    background 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.15s ease;
}

.ui-tutor-suggestions-refresh:hover {
  background: linear-gradient(to right, #7e22ce, #be185d);
  box-shadow: 0 10px 15px -3px rgba(168, 85, 247, 0.3);
  transform: scale(1.02);
}

.ui-tutor-suggestions-refresh:active {
  transform: scale(0.98);
}

.ui-tutor-suggestions-refresh-icon {
  transition: transform 0.5s ease;
}

.ui-tutor-suggestions-refresh:hover .ui-tutor-suggestions-refresh-icon {
  transform: rotate(-180deg);
}

/* Loading state for refresh button */
.ui-tutor-suggestions-refresh-loading {
  background: #9ca3af;
  box-shadow: none;
  cursor: not-allowed;
}

.ui-tutor-suggestions-refresh-loading:hover {
  background: #9ca3af;
  box-shadow: none;
  transform: none;
}

.ui-tutor-suggestions-refresh-icon-spinning {
  animation: ui-tutor-suggestions-spin 1s linear infinite;
}

/* ---- Skeleton loader ---- */

@keyframes ui-tutor-suggestions-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@keyframes ui-tutor-suggestions-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}

.ui-tutor-suggestions-skeleton {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(229, 231, 235, 0.6);
}

html.dark .ui-tutor-suggestions-skeleton {
  border-color: rgba(75, 85, 99, 0.6);
}

.ui-tutor-suggestions-skeleton-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: #f3f4f6;
}

html.dark .ui-tutor-suggestions-skeleton-icon {
  background: #374151;
}

.ui-tutor-suggestions-skeleton-animated .ui-tutor-suggestions-skeleton-icon {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 400% 100%;
  animation: ui-tutor-suggestions-shimmer 2.5s ease-in-out infinite;
}

html.dark
  .ui-tutor-suggestions-skeleton-animated
  .ui-tutor-suggestions-skeleton-icon {
  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
  background-size: 400% 100%;
  animation: ui-tutor-suggestions-shimmer 2.5s ease-in-out infinite;
}

.ui-tutor-suggestions-skeleton-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-top: 0.125rem;
}

.ui-tutor-suggestions-skeleton-line {
  height: 0.8rem;
  border-radius: 0.25rem;
  background: #f3f4f6;
}

html.dark .ui-tutor-suggestions-skeleton-line {
  background: #374151;
}

.ui-tutor-suggestions-skeleton-animated .ui-tutor-suggestions-skeleton-line {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 400% 100%;
  animation: ui-tutor-suggestions-shimmer 2.5s ease-in-out infinite;
}

html.dark
  .ui-tutor-suggestions-skeleton-animated
  .ui-tutor-suggestions-skeleton-line {
  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
  background-size: 400% 100%;
  animation: ui-tutor-suggestions-shimmer 2.5s ease-in-out infinite;
}

.ui-tutor-suggestions-skeleton-line-short {
  width: 55%;
  height: 0.65rem;
}

/* Responsive Design */

/* Tablet */
/* @media (max-width: 768px) {
} */

/* Mobile */
@media (max-width: 480px) {
  .ui-tutor-suggestions {
    right: 50% !important;
    transform: translate(50%, -0);
  }
}

.ui-tutor-transcripts {
  position: absolute;
  right: 0;
  top: 90px;
  height: 100%;
  width: 24rem;
  background-color: #ffffff;
  border-left: 1px solid #e5e7eb;
  transform: translateX(0);
  transition: transform 300ms;
  height: calc(100vh - 90px);
}

/* Overlay — hidden on desktop */
.ui-tutor-transcripts-overlay {
  display: none;
}

html.dark .ui-tutor-transcripts {
  background-color: #1f2937;
  border-left-color: #374151;
}

.ui-tutor-transcripts-container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Header */
.ui-tutor-transcripts-header {
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

html.dark .ui-tutor-transcripts-header {
  border-bottom-color: #374151;
}

.ui-tutor-transcripts-header-top {
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ui-tutor-transcripts-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #111827;
}

html.dark .ui-tutor-transcripts-title {
  color: #f3f4f6;
}

.ui-tutor-transcripts-translate-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  font-size: 0.75rem;
  font-weight: 500;
  background-color: #f3f4f6;
  color: #374151;
  transition: all 150ms;
  border: none;
  cursor: pointer;
}

.ui-tutor-transcripts-translate-btn:hover {
  background-color: #e5e7eb;
}

html.dark .ui-tutor-transcripts-translate-btn {
  background-color: #374151;
  color: #d1d5db;
}

html.dark .ui-tutor-transcripts-translate-btn:hover {
  background-color: #4b5563;
}

.ui-tutor-transcripts-translate-btn-active {
  background: linear-gradient(to right, #9333ea, #db2777);
  color: #fff;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.ui-tutor-transcripts-translate-btn-active:hover {
  background-color: unset;
  opacity: 0.9;
}

html.dark .ui-tutor-transcripts-translate-btn-active {
  background: linear-gradient(to right, #9333ea, #db2777);
  color: #fff;
}

html.dark .ui-tutor-transcripts-translate-btn-active:hover {
  background-color: unset;
  opacity: 0.9;
}

.ui-tutor-transcripts-translate-icon {
  width: 0.875rem;
  height: 0.875rem;
}

.ui-tutor-transcripts-subtitle {
  margin-bottom: 0;
  font-size: 0.875rem;
  color: #6b7280;
}

html.dark .ui-tutor-transcripts-subtitle {
  color: #9ca3af;
}

/* Messages */
.ui-tutor-transcripts-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@keyframes ui-tutor-transcripts-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.ui-tutor-transcripts-messages-translating {
  pointer-events: none;
}

.ui-tutor-transcripts-messages-translating
  .ui-tutor-transcripts-message-bubble {
  position: relative;
  overflow: hidden;
  opacity: 0.6;
}

.ui-tutor-transcripts-messages-translating
  .ui-tutor-transcripts-message-bubble::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 25%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 75%
  );
  background-size: 400% 100%;
  animation: ui-tutor-transcripts-shimmer 1.5s ease-in-out infinite;
}

html.dark
  .ui-tutor-transcripts-messages-translating
  .ui-tutor-transcripts-message-bubble::after {
  background: linear-gradient(
    90deg,
    transparent 25%,
    rgba(255, 255, 255, 0.08) 50%,
    transparent 75%
  );
  background-size: 400% 100%;
}

.ui-tutor-transcripts-message {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.ui-tutor-transcripts-message-user {
  align-items: flex-end;
}

.ui-tutor-transcripts-message-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.ui-tutor-transcripts-message-sender {
  font-size: 0.75rem;
  color: #6b7280;
}

html.dark .ui-tutor-transcripts-message-sender {
  color: #9ca3af;
}

.ui-tutor-transcripts-message-time {
  font-size: 0.75rem;
  color: #9ca3af;
}

html.dark .ui-tutor-transcripts-message-time {
  color: #6b7280;
}

.ui-tutor-transcripts-message-bubble {
  max-width: 80%;
  padding: 0.85rem 1rem;
  border-radius: 1rem;
  background-color: #f3f4f6;
}

.ui-tutor-transcripts-message-bubble > p {
  color: #111827;
}

html.dark .ui-tutor-transcripts-message-bubble {
  background-color: #374151;
}

html.dark .ui-tutor-transcripts-message-bubble > p {
  color: #f3f4f6;
}

.ui-tutor-transcripts-message-bubble-user {
  padding: 0.5rem 1rem;
  background: linear-gradient(to right, #9333ea, #db2777);
}

.ui-tutor-transcripts-message-bubble-user > p {
  color: #ffffff;
}

html.dark .ui-tutor-transcripts-message-bubble-user {
  background: linear-gradient(to right, #9333ea, #db2777);
}

html.dark .ui-tutor-transcripts-message-bubble-user > p {
  color: #ffffff;
}

.ui-tutor-transcripts-message-text {
  font-size: 0.875rem;
  margin: 0;
}

/* Summary message */
.ui-tutor-transcripts-message-summary {
  justify-content: center;
}

.ui-tutor-transcripts-summary-container {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 0.5rem;
  width: 100%;
}

.ui-tutor-transcripts-summary-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 auto;
  padding: 0.375rem 0.75rem;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  font-size: 0.75rem;
  color: #6b7280;
}

html.dark .ui-tutor-transcripts-summary-label {
  background: #374151;
  border-color: #4b5563;
  color: #9ca3af;
}

.ui-tutor-transcripts-summary-icon {
  flex-shrink: 0;
  opacity: 0.7;
}

.ui-tutor-transcripts-summary-label-text {
  white-space: nowrap;
}

.ui-tutor-transcripts-summary-content {
  max-width: 85%;
  padding: 0.75rem 1rem;
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: 0.75rem;
  font-size: 0.813rem;
  color: #6b7280;
  font-style: italic;
  overflow-wrap: break-word;
  min-width: 0;
}

.ui-tutor-transcripts-summary-content p {
  margin: 0.5rem 0;
  line-height: 1.5;
}

.ui-tutor-transcripts-summary-content p:first-child {
  margin-top: 0;
}

.ui-tutor-transcripts-summary-content p:last-child {
  margin-bottom: 0;
}

.ui-tutor-transcripts-summary-content strong {
  font-weight: 600;
}

.ui-tutor-transcripts-summary-content em {
  font-style: italic;
}

.ui-tutor-transcripts-summary-content code {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
  font-family: ui-monospace, monospace;
  font-size: 0.75rem;
}

.ui-tutor-transcripts-summary-content pre {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.75rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 0.5rem 0;
}

.ui-tutor-transcripts-summary-content pre code {
  background: none;
  padding: 0;
}

.ui-tutor-transcripts-summary-content ul,
.ui-tutor-transcripts-summary-content ol {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.ui-tutor-transcripts-summary-content li {
  margin: 0.25rem 0;
}

.ui-tutor-transcripts-summary-content a {
  color: #7c3aed;
  text-decoration: underline;
}

.ui-tutor-transcripts-summary-content a:hover {
  color: #6d28d9;
}

html.dark .ui-tutor-transcripts-summary-content {
  background: #1f2937;
  border-color: #4b5563;
}

html.dark .ui-tutor-transcripts-summary-content,
html.dark .ui-tutor-transcripts-summary-content h1,
html.dark .ui-tutor-transcripts-summary-content h2,
html.dark .ui-tutor-transcripts-summary-content h3,
html.dark .ui-tutor-transcripts-summary-content h4,
html.dark .ui-tutor-transcripts-summary-content h5,
html.dark .ui-tutor-transcripts-summary-content h6,
html.dark .ui-tutor-transcripts-summary-content p,
html.dark .ui-tutor-transcripts-summary-content strong,
html.dark .ui-tutor-transcripts-summary-content em,
html.dark .ui-tutor-transcripts-summary-content li {
  color: #9ca3af;
}

html.dark .ui-tutor-transcripts-summary-content code {
  background: rgba(255, 255, 255, 0.1);
}

html.dark .ui-tutor-transcripts-summary-content pre {
  background: rgba(255, 255, 255, 0.05);
}

html.dark .ui-tutor-transcripts-summary-content a {
  color: #a78bfa;
}

html.dark .ui-tutor-transcripts-summary-content a:hover {
  color: #c4b5fd;
}

/* Scroll to bottom button */
.ui-tutor-transcripts-scroll-bottom-btn {
  position: sticky;
  bottom: 1rem;
  align-self: flex-end;
  flex-shrink: 0;
  margin-right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 9999px;
  cursor: pointer;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
  z-index: 10;
}

.ui-tutor-transcripts-scroll-bottom-btn:hover {
  background: #f9fafb;
  transform: translateY(-2px);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.ui-tutor-transcripts-scroll-icon {
  color: #6b7280;
}

.ui-tutor-transcripts-scroll-bottom-btn:hover
  .ui-tutor-transcripts-scroll-icon {
  color: #a855f7;
}

html.dark .ui-tutor-transcripts-scroll-bottom-btn {
  background: #1f2937;
  border-color: #374151;
}

html.dark .ui-tutor-transcripts-scroll-bottom-btn:hover {
  background: #374151;
}

html.dark .ui-tutor-transcripts-scroll-icon {
  color: #9ca3af;
}

html.dark
  .ui-tutor-transcripts-scroll-bottom-btn:hover
  .ui-tutor-transcripts-scroll-icon {
  color: #a78bfa;
}

/* Footer */
.ui-tutor-transcripts-footer {
  padding: 1rem;
  border-top: 1px solid #e5e7eb;
  background-color: #f9fafb;
}

html.dark .ui-tutor-transcripts-footer {
  border-top-color: #374151;
  background-color: #111827;
}

.ui-tutor-transcripts-footer-content {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #6b7280;
}

html.dark .ui-tutor-transcripts-footer-content {
  color: #9ca3af;
}

.ui-tutor-transcripts-live-dot {
  width: 0.5rem;
  height: 0.5rem;
  background-color: #10b981;
  border-radius: 9999px;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.ui-tutor-transcripts-live-text {
  font-size: 0.75rem;
}

/* Markdown styles for assistant messages */
.ui-tutor-transcripts-message-text p {
  margin: 0 0 0.5rem 0;
}

.ui-tutor-transcripts-message-text p:last-child {
  margin-bottom: 0;
}

.ui-tutor-transcripts-message-text h1,
.ui-tutor-transcripts-message-text h2,
.ui-tutor-transcripts-message-text h3,
.ui-tutor-transcripts-message-text h4 {
  margin: 0.5rem 0;
  font-weight: 600;
  color: inherit;
}

.ui-tutor-transcripts-message-text h1 {
  font-size: 1.25rem;
}

.ui-tutor-transcripts-message-text h2 {
  font-size: 1.125rem;
}

.ui-tutor-transcripts-message-text h3 {
  font-size: 1rem;
}

.ui-tutor-transcripts-message-text ul,
.ui-tutor-transcripts-message-text ol {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.ui-tutor-transcripts-message-text li {
  margin: 0.25rem 0;
}

.ui-tutor-transcripts-message-text code {
  background-color: rgba(0, 0, 0, 0.1);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
  font-family: ui-monospace, monospace;
}

html.dark .ui-tutor-transcripts-message-text p {
  color: rgba(255, 255, 255, 0.9);
}

html.dark .ui-tutor-transcripts-message-text code {
  background-color: rgba(255, 255, 255, 0.1);
}

.ui-tutor-transcripts-message-text pre {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 0.75rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 0.5rem 0;
}

html.dark .ui-tutor-transcripts-message-text pre {
  background-color: rgba(255, 255, 255, 0.05);
}

.ui-tutor-transcripts-message-text pre code {
  background-color: transparent;
  padding: 0;
}

.ui-tutor-transcripts-message-text strong {
  font-weight: 600;
}

.ui-tutor-transcripts-message-text em {
  font-style: italic;
}

.ui-tutor-transcripts-message-text a {
  color: #9333ea;
  text-decoration: underline;
}

html.dark .ui-tutor-transcripts-message-text a {
  color: #c084fc;
}

.ui-tutor-transcripts-message-text blockquote {
  border-left: 3px solid rgba(0, 0, 0, 0.2);
  margin: 0.5rem 0;
  padding-left: 0.75rem;
  font-style: italic;
}

html.dark .ui-tutor-transcripts-message-text blockquote {
  border-left-color: rgba(255, 255, 255, 0.2);
}

@media (max-width: 768px) {
  /* Centered modal layout */
  .ui-tutor-transcripts {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 420px;
    height: 75vh;
    border-radius: 16px;
    border-left: none;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    z-index: 200;
  }

  .ui-tutor-transcripts-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 199;
  }
}

.tutor-scenarios {
  margin: 0;
}

.tutor-scenarios-main {
  position: relative;
  top: 89px;
  padding: 2rem;
  overflow-y: auto;
}

.tutor-scenarios-content {
  max-width: 72rem;
  margin-inline: auto;
}

/* ===== Heading ===== */
.tutor-scenarios-heading {
  margin-bottom: 2rem;
}

.tutor-scenarios-heading-title {
  font-size: 1.875rem;
  color: #111827;
  margin-bottom: 0.75rem;
}

html.dark .tutor-scenarios-heading-title {
  color: #f3f4f6;
}

.tutor-scenarios-heading-subtitle {
  color: #4b5563;
}

html.dark .tutor-scenarios-heading-subtitle {
  color: #9ca3af;
}

/* ===== Grid ===== */
.tutor-scenarios-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .tutor-scenarios-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .tutor-scenarios-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== Anchor Reset ===== */
a.tutor-scenarios-featured,
a.tutor-scenarios-card {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* ===== Featured Card (Small Talk) ===== */
.tutor-scenarios-featured {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 2px solid #93c5fd;
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 8px 10px -6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

@media (min-width: 768px) {
  .tutor-scenarios-featured {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  .tutor-scenarios-featured {
    grid-column: span 3;
  }
}

.tutor-scenarios-featured:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform: scale(1.02);
}

.tutor-scenarios-featured:active {
  transform: scale(0.98);
}

html.dark .tutor-scenarios-featured {
  border-color: #1d4ed8;
}

.tutor-scenarios-featured-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom right, #3b82f6, #6366f1, #9333ea);
  opacity: 0.9;
}

.tutor-scenarios-featured-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 16rem;
  height: 16rem;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  border-radius: 9999px;
  filter: blur(48px);
}

.tutor-scenarios-featured-content {
  position: relative;
  padding: 2rem;
}

@media (min-width: 768px) {
  .tutor-scenarios-featured-content {
    padding: 3rem;
  }
}

.tutor-scenarios-featured-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.tutor-scenarios-featured-info {
  flex: 1;
}

.tutor-scenarios-featured-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(4px);
  border-radius: 9999px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.tutor-scenarios-featured-title {
  font-size: 2.25rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 0.75rem;
}

@media (min-width: 768px) {
  .tutor-scenarios-featured-title {
    font-size: 3rem;
  }
}

.tutor-scenarios-featured-description {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.5rem;
}

.tutor-scenarios-featured-btn {
  padding: 0.75rem 1.5rem;
  background: #fff;
  color: #2563eb;
  border-radius: 0.75rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.2s ease;
  font-size: 1rem;
}

.tutor-scenarios-featured-btn:hover {
  background: #eff6ff;
}

.tutor-scenarios-featured-icon {
  flex-shrink: 0;
  padding: 1.5rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  border-radius: 1rem;
}

.tutor-scenarios-featured-icon-svg {
  width: 4rem;
  height: 4rem;
  color: #fff;
}

/* ===== Regular Scenario Cards ===== */
.tutor-scenarios-card {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;
}

.tutor-scenarios-card:hover {
  border-color: transparent;
  transform: scale(1.05);
}

.tutor-scenarios-card:active {
  transform: scale(0.95);
}

.tutor-scenarios-card-hover-bg {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 0.75rem;
}

.tutor-scenarios-card:hover .tutor-scenarios-card-hover-bg {
  opacity: 1;
}

.tutor-scenarios-card-body {
  position: relative;
  border: 2px solid transparent;
  border-radius: 0.75rem;
  padding: 1.5rem;
  height: 100%;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.tutor-scenarios-card:hover .tutor-scenarios-card-body {
  border-color: transparent;
}

.tutor-scenarios-card-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 6rem;
  height: 6rem;
  background: linear-gradient(
    to bottom right,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  border-radius: 9999px;
  filter: blur(32px);
}

.tutor-scenarios-card-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tutor-scenarios-card-icon {
  padding: 1rem;
  border-radius: 0.75rem;
  margin-bottom: 1rem;
  display: inline-flex;
  align-self: flex-start;
  transition: transform 0.2s ease;
}

.tutor-scenarios-card:hover .tutor-scenarios-card-icon {
  transform: scale(1.1);
}

.tutor-scenarios-card-icon-svg {
  width: 2rem;
  height: 2rem;
  color: #fff;
}

.tutor-scenarios-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.5rem;
  transition: color 0.2s ease;
}

html.dark .tutor-scenarios-card-title {
  color: #f3f4f6;
}

.tutor-scenarios-card-description {
  font-size: 0.875rem;
  color: #4b5563;
  margin-bottom: 1rem;
  flex: 1;
  transition: color 0.2s ease;
}

html.dark .tutor-scenarios-card-description {
  color: #9ca3af;
}

html.dark .tutor-scenarios-card:hover .tutor-scenarios-card-description {
  color: #d5d8dd;
}

.tutor-scenarios-card-btn {
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.8);
  color: #111827;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  align-self: flex-start;
}

html.dark .tutor-scenarios-card-btn {
  background: rgba(31, 41, 55, 0.8);
  color: #f3f4f6;
}

.tutor-scenarios-card:hover .tutor-scenarios-card-btn {
  background: #fff;
  color: #111827;
}

/* ===== Orange Card (Order Food) ===== */
.tutor-scenarios-card-orange .tutor-scenarios-card-hover-bg {
  background: linear-gradient(to bottom right, #f97316, #dc2626);
}

.tutor-scenarios-card-orange .tutor-scenarios-card-body {
  background: linear-gradient(to bottom right, #fff7ed, #fef2f2);
  border-color: #fed7aa;
}

html.dark .tutor-scenarios-card-orange .tutor-scenarios-card-body {
  background: linear-gradient(
    to bottom right,
    rgba(124, 45, 18, 0.2),
    rgba(127, 29, 29, 0.2)
  );
  border-color: #9a3412;
}

.tutor-scenarios-card-orange .tutor-scenarios-card-icon {
  background: linear-gradient(to bottom right, #f97316, #dc2626);
}

/* ===== Purple Card (Job Interview) ===== */
.tutor-scenarios-card-purple .tutor-scenarios-card-hover-bg {
  background: linear-gradient(to bottom right, #8b5cf6, #db2777);
}

.tutor-scenarios-card-purple .tutor-scenarios-card-body {
  background: linear-gradient(to bottom right, #faf5ff, #fdf2f8);
  border-color: #e9d5ff;
}

html.dark .tutor-scenarios-card-purple .tutor-scenarios-card-body {
  background: linear-gradient(
    to bottom right,
    rgba(88, 28, 135, 0.2),
    rgba(131, 24, 67, 0.2)
  );
  border-color: #6b21a8;
}

.tutor-scenarios-card-purple .tutor-scenarios-card-icon {
  background: linear-gradient(to bottom right, #8b5cf6, #db2777);
}

/* ===== Green Card (Shopping) ===== */
.tutor-scenarios-card-green .tutor-scenarios-card-hover-bg {
  background: linear-gradient(to bottom right, #22c55e, #059669);
}

.tutor-scenarios-card-green .tutor-scenarios-card-body {
  background: linear-gradient(to bottom right, #f0fdf4, #ecfdf5);
  border-color: #bbf7d0;
}

html.dark .tutor-scenarios-card-green .tutor-scenarios-card-body {
  background: linear-gradient(
    to bottom right,
    rgba(20, 83, 45, 0.2),
    rgba(6, 78, 59, 0.2)
  );
  border-color: #166534;
}

.tutor-scenarios-card-green .tutor-scenarios-card-icon {
  background: linear-gradient(to bottom right, #22c55e, #059669);
}

/* ===== Cyan Card (Phone Call) ===== */
.tutor-scenarios-card-cyan .tutor-scenarios-card-hover-bg {
  background: linear-gradient(to bottom right, #06b6d4, #2563eb);
}

.tutor-scenarios-card-cyan .tutor-scenarios-card-body {
  background: linear-gradient(to bottom right, #ecfeff, #eff6ff);
  border-color: #a5f3fc;
}

html.dark .tutor-scenarios-card-cyan .tutor-scenarios-card-body {
  background: linear-gradient(
    to bottom right,
    rgba(22, 78, 99, 0.2),
    rgba(30, 58, 138, 0.2)
  );
  border-color: #155e75;
}

.tutor-scenarios-card-cyan .tutor-scenarios-card-icon {
  background: linear-gradient(to bottom right, #06b6d4, #2563eb);
}

/* ===== Sky Card (Travel & Tourism) ===== */
.tutor-scenarios-card-sky .tutor-scenarios-card-hover-bg {
  background: linear-gradient(to bottom right, #0ea5e9, #4f46e5);
}

.tutor-scenarios-card-sky .tutor-scenarios-card-body {
  background: linear-gradient(to bottom right, #f0f9ff, #eef2ff);
  border-color: #bae6fd;
}

html.dark .tutor-scenarios-card-sky .tutor-scenarios-card-body {
  background: linear-gradient(
    to bottom right,
    rgba(12, 74, 110, 0.2),
    rgba(49, 46, 129, 0.2)
  );
  border-color: #075985;
}

.tutor-scenarios-card-sky .tutor-scenarios-card-icon {
  background: linear-gradient(to bottom right, #0ea5e9, #4f46e5);
}

/* ===== Custom Scenario Card ===== */
.tutor-scenarios-custom {
  position: relative;
  overflow: hidden;
  border-radius: 0.75rem;
  border: 2px dashed #d1d5db;
  transition: all 0.3s ease;
}

html.dark .tutor-scenarios-custom {
  border-color: #374151;
}

.tutor-scenarios-custom:hover {
  border-color: #a78bfa;
}

html.dark .tutor-scenarios-custom:hover {
  border-color: #a78bfa;
}

.tutor-scenarios-custom-body {
  background: linear-gradient(
    to bottom right,
    #f9fafb,
    rgba(250, 245, 255, 0.3)
  );
  border-radius: 0.75rem;
  padding: 1.5rem;
  height: 100%;
  box-sizing: border-box;
}

html.dark .tutor-scenarios-custom-body {
  background: linear-gradient(
    to bottom right,
    rgba(31, 41, 55, 0.5),
    rgba(88, 28, 135, 0.1)
  );
}

.tutor-scenarios-custom-glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 6rem;
  height: 6rem;
  background: linear-gradient(
    to bottom right,
    rgba(167, 139, 250, 0.1),
    transparent
  );
  border-radius: 9999px;
  filter: blur(32px);
}

.tutor-scenarios-custom-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.tutor-scenarios-custom-icon {
  padding: 1rem;
  border-radius: 0.75rem;
  background: linear-gradient(to bottom right, #8b5cf6, #db2777);
  margin-bottom: 1rem;
  display: inline-flex;
  align-self: flex-start;
}

.tutor-scenarios-custom-icon-svg {
  width: 2rem;
  height: 2rem;
  color: #fff;
}

.tutor-scenarios-custom-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 0.5rem;
}

html.dark .tutor-scenarios-custom-title {
  color: #f3f4f6;
}

.tutor-scenarios-custom-description {
  font-size: 0.875rem;
  color: #4b5563;
  margin-bottom: 1rem;
}

html.dark .tutor-scenarios-custom-description {
  color: #9ca3af;
}

.tutor-scenarios-custom-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.tutor-scenarios-custom-textarea {
  flex: 1;
  min-height: 100px;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  border: 2px solid #e5e7eb;
  background: #fff;
  color: #111827;
  font-size: 0.875rem;
  transition: all 0.2s ease;
  resize: none;
  font-family: inherit;
}

html.dark .tutor-scenarios-custom-textarea {
  border-color: #374151;
  background: #111827;
  color: #f3f4f6;
}

.tutor-scenarios-custom-textarea::placeholder {
  color: #9ca3af;
}

html.dark .tutor-scenarios-custom-textarea::placeholder {
  color: #6b7280;
}

.tutor-scenarios-custom-textarea:focus {
  outline: none;
  border-color: #a78bfa;
  box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.2);
}

html.dark .tutor-scenarios-custom-textarea:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.2);
}

.tutor-scenarios-custom-btn {
  width: 100%;
  padding: 0.625rem 1rem;
  background: linear-gradient(to right, #7c3aed, #db2777);
  color: #fff;
  border-radius: 0.5rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-family: inherit;
}

.tutor-scenarios-custom-btn:hover {
  background: linear-gradient(to right, #6d28d9, #be185d);
  box-shadow:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.tutor-scenarios-custom-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tutor-scenarios-custom-btn:disabled:hover {
  background: linear-gradient(to right, #7c3aed, #db2777);
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.tutor-scenarios-custom-btn-icon {
  width: 1rem;
  height: 1rem;
}

.tutor-scenarios-custom-loading-spinner {
  animation: ui-learn-ai-assistant-spin 1s linear infinite;
}

@keyframes ui-learn-ai-assistant-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Responsive Design */

/* Tablet */
/* @media (max-width: 768px) {
} */

/* Mobile */
@media (max-width: 480px) {
  .tutor-scenarios-featured-content {
    padding: 1.5rem;
  }

  .tutor-scenarios-featured-title {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
  }

  .tutor-scenarios-featured-description {
    font-size: 0.875rem;
    margin-bottom: 1rem;
  }

  .tutor-scenarios-featured-icon {
    padding: 1rem;
  }

  .tutor-scenarios-featured-icon-svg {
    width: 2rem;
    height: 2rem;
  }

  .tutor-scenarios-featured-btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }

  .tutor-scenarios-featured-header {
    margin-bottom: 1rem;
  }
}

.tutor-session {
  margin: 0;
}

.tutor-session-main {
  position: relative;
  top: 89px;
  display: flex;
  flex: 1;
  padding: 0;
  position: relative;
}

/* Left Sidebar */

.tutor-session-left-sidebar {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(24px);
  border-right: 1px solid rgba(229, 231, 235, 0.5);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.75rem;
  width: 20rem;
  height: calc(100vh - 90px);
  transition: transform 0.3s ease;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
}

html.dark .tutor-session-left-sidebar {
  background: rgba(17, 24, 39, 0.5);
  border-right-color: rgba(31, 41, 55, 0.5);
}

.tutor-session-left-sidebar-collapsed {
  transform: translateX(-100%);
}

/* Sidebar Toggle Button */

.tutor-session-left-sidebar-toggle-btn {
  position: fixed;
  top: 50%;
  left: 19rem;
  transform: translateY(-50%);
  width: 2rem;
  height: 4rem;
  border-radius: 0 0.5rem 0.5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-left: none;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 100;
}

html.dark .tutor-session-left-sidebar-toggle-btn {
  background: #1f2937;
  border-color: #374151;
}

.tutor-session-left-sidebar-toggle-btn:hover {
  background: #f3f4f6;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

html.dark .tutor-session-left-sidebar-toggle-btn:hover {
  background: #374151;
}

.tutor-session-left-sidebar-toggle-btn-collapsed {
  left: 0;
  background: #9333ea;
  border-color: #9333ea;
  box-shadow: 0 4px 6px -1px rgba(147, 51, 234, 0.3);
}

html.dark .tutor-session-left-sidebar-toggle-btn-collapsed {
  background: #7c3aed;
  border-color: #7c3aed;
  box-shadow: 0 4px 6px -1px rgba(124, 58, 237, 0.3);
}

.tutor-session-left-sidebar-toggle-btn-collapsed:hover {
  background: #7e22ce;
  box-shadow: 0 10px 15px -3px rgba(147, 51, 234, 0.4);
}

html.dark .tutor-session-left-sidebar-toggle-btn-collapsed:hover {
  background: #6d28d9;
  box-shadow: 0 10px 15px -3px rgba(124, 58, 237, 0.4);
}

.tutor-session-left-sidebar-toggle-icon {
  width: 1.25rem;
  height: 1.25rem;
  color: #6b7280;
  transition: transform 0.3s ease;
}

html.dark .tutor-session-left-sidebar-toggle-icon {
  color: #9ca3af;
}

.tutor-session-left-sidebar-toggle-btn-collapsed
  .tutor-session-left-sidebar-toggle-icon {
  color: #ffffff;
}

.tutor-session-left-sidebar-toggle-icon-collapsed {
  transform: rotate(180deg);
}

/* Widget Card */

.tutor-session-left-sidebar-widget {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(24px);
  border-radius: 1rem;
  padding: 1.25rem;
  border: 1px solid rgba(229, 231, 235, 0.6);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

html.dark .tutor-session-left-sidebar-widget {
  background: rgba(31, 41, 55, 0.9);
  border-color: rgba(55, 65, 81, 0.6);
}

.tutor-session-left-sidebar-widget-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #111827;
  margin-bottom: 1rem;
}

html.dark .tutor-session-left-sidebar-widget-title {
  color: #f3f4f6;
}

/* Session Time Widget */

.tutor-session-left-sidebar-session-time-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.tutor-session-left-sidebar-session-time-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
}

html.dark .tutor-session-left-sidebar-session-time-label {
  color: #9ca3af;
}

.tutor-session-left-sidebar-session-time-live {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tutor-session-left-sidebar-session-time-live-dot {
  width: 0.5rem;
  height: 0.5rem;
  background: #10b981;
  border-radius: 9999px;
  animation: tutor-session-left-sidebar-pulse 2s ease-in-out infinite;
}

@keyframes tutor-session-left-sidebar-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.tutor-session-left-sidebar-session-time-live-text {
  font-size: 0.75rem;
  color: #059669;
  font-weight: 600;
}

html.dark .tutor-session-left-sidebar-session-time-live-text {
  color: #34d399;
}

.tutor-session-left-sidebar-session-time-idle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tutor-session-left-sidebar-session-time-idle-dot {
  width: 0.5rem;
  height: 0.5rem;
  background: #7e287e;
  border-radius: 9999px;
}

.tutor-session-left-sidebar-session-time-idle-text {
  font-size: 0.75rem;
  color: #7e287e;
  font-weight: 600;
}

html.dark .tutor-session-left-sidebar-session-time-idle-dot {
  background: #e8cfe8;
}

html.dark .tutor-session-left-sidebar-session-time-idle-text {
  color: #e8cfe8;
}

.tutor-session-left-sidebar-session-time-paused {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tutor-session-left-sidebar-session-time-paused-dot {
  width: 0.5rem;
  height: 0.5rem;
  background: #9ca3af;
  border-radius: 9999px;
}

.tutor-session-left-sidebar-session-time-paused-text {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 600;
}

html.dark .tutor-session-left-sidebar-session-time-paused-dot {
  background: #6b7280;
}

html.dark .tutor-session-left-sidebar-session-time-paused-text {
  color: #9ca3af;
}

.tutor-session-left-sidebar-session-time-value {
  font-size: 1.875rem;
  font-weight: 700;
  color: #111827;
}

html.dark .tutor-session-left-sidebar-session-time-value {
  color: #f3f4f6;
}

.tutor-session-left-sidebar-session-time-status {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.25rem;
  margin-bottom: 0;
}

html.dark .tutor-session-left-sidebar-session-time-status {
  color: #9ca3af;
}

/* Practice Mode Widget */

.tutor-session-left-sidebar-practice-mode {
  position: relative;
  z-index: 60;
}

.tutor-session-left-sidebar-practice-mode-btn {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  text-align: left;
  transition: all 0.3s ease;
  background: linear-gradient(to right, #9333ea, #db2777);
  color: #ffffff;
  box-shadow: 0 10px 15px -3px rgba(147, 51, 234, 0.3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  cursor: pointer;
}

.tutor-session-left-sidebar-practice-mode-btn:hover {
  box-shadow: 0 10px 15px -3px rgba(147, 51, 234, 0.5);
}

.tutor-session-left-sidebar-practice-mode-title {
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
}

.tutor-session-left-sidebar-practice-mode-subtitle {
  font-size: 0.75rem;
  opacity: 0.9;
}

.tutor-session-left-sidebar-practice-mode-icon {
  width: 1rem;
  height: 1rem;
  transition: transform 0.3s ease;
}

.tutor-session-left-sidebar-practice-mode-icon-open {
  transform: rotate(180deg);
}

/* Practice Mode Dropdown */

.tutor-session-left-sidebar-practice-mode-dropdown {
  position: absolute;
  top: 100%;
  left: 1.25rem;
  right: 1.25rem;
  margin-top: 0.5rem;
  background: #ffffff;
  border-radius: 0.75rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid #e5e7eb;
  z-index: 70;
  overflow: hidden;
}

html.dark .tutor-session-left-sidebar-practice-mode-dropdown {
  background: #1f2937;
  border-color: #374151;
}

.tutor-session-left-sidebar-dropdown-enter {
  transition: all 0.2s ease-out;
}

.tutor-session-left-sidebar-dropdown-enter-start {
  opacity: 0;
  transform: translateY(-0.5rem);
}

.tutor-session-left-sidebar-dropdown-enter-end {
  opacity: 1;
  transform: translateY(0);
}

.tutor-session-left-sidebar-dropdown-leave {
  transition: all 0.15s ease-in;
}

.tutor-session-left-sidebar-dropdown-leave-start {
  opacity: 1;
  transform: translateY(0);
}

.tutor-session-left-sidebar-dropdown-leave-end {
  opacity: 0;
  transform: translateY(-0.5rem);
}

.tutor-session-left-sidebar-practice-mode-dropdown-item {
  width: 100%;
  padding: 0.75rem 1rem;
  text-align: left;
  transition: all 0.3s ease;
  background: transparent;
  border: none;
  cursor: pointer;
}

.tutor-session-left-sidebar-practice-mode-dropdown-item:hover {
  background: #f9fafb;
}

html.dark .tutor-session-left-sidebar-practice-mode-dropdown-item:hover {
  background: rgba(55, 65, 81, 0.5);
}

.tutor-session-left-sidebar-practice-mode-dropdown-item-selected {
  background: #faf5ff;
}

html.dark .tutor-session-left-sidebar-practice-mode-dropdown-item-selected {
  background: rgba(88, 28, 135, 0.2);
}

.tutor-session-left-sidebar-practice-mode-dropdown-item-title {
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.25rem;
  color: #111827;
}

html.dark .tutor-session-left-sidebar-practice-mode-dropdown-item-title {
  color: #f3f4f6;
}

.tutor-session-left-sidebar-practice-mode-dropdown-item-subtitle {
  font-size: 0.75rem;
  color: #6b7280;
}

html.dark .tutor-session-left-sidebar-practice-mode-dropdown-item-subtitle {
  color: #9ca3af;
}

/* Quick Actions Grid */

.tutor-session-left-sidebar-quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.tutor-session-left-sidebar-quick-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: #ffffff;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  cursor: pointer;
}

html.dark .tutor-session-left-sidebar-quick-action-btn {
  background: #374151;
  border-color: #4b5563;
}

.tutor-session-left-sidebar-quick-action-btn:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.tutor-session-left-sidebar-quick-action-icon {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.3s ease;
}

.tutor-session-left-sidebar-quick-action-icon-purple {
  color: #9333ea;
}

html.dark .tutor-session-left-sidebar-quick-action-icon-purple {
  color: #c084fc;
}

.tutor-session-left-sidebar-quick-action-btn:hover
  .tutor-session-left-sidebar-quick-action-icon-purple {
  transform: rotate(-180deg);
}

.tutor-session-left-sidebar-quick-action-btn:hover {
  border-color: #e9d5ff;
  box-shadow: 0 4px 6px -1px rgba(147, 51, 234, 0.1);
}

html.dark
  .tutor-session-left-sidebar-quick-action-btn:hover
  .tutor-session-left-sidebar-quick-action-icon-purple {
  border-color: #7e22ce;
}

.tutor-session-left-sidebar-quick-action-icon-blue {
  color: #2563eb;
}

html.dark .tutor-session-left-sidebar-quick-action-icon-blue {
  color: #60a5fa;
}

.tutor-session-left-sidebar-quick-action-btn:hover
  .tutor-session-left-sidebar-quick-action-icon-blue {
  transform: scale(1.1);
}

.tutor-session-left-sidebar-quick-action-icon-green {
  color: #059669;
}

html.dark .tutor-session-left-sidebar-quick-action-icon-green {
  color: #34d399;
}

.tutor-session-left-sidebar-quick-action-btn:hover
  .tutor-session-left-sidebar-quick-action-icon-green {
  transform: scale(1.1);
}

.tutor-session-left-sidebar-quick-action-icon-orange {
  color: #ea580c;
}

html.dark .tutor-session-left-sidebar-quick-action-icon-orange {
  color: #fb923c;
}

.tutor-session-left-sidebar-quick-action-btn:hover
  .tutor-session-left-sidebar-quick-action-icon-orange {
  transform: scale(1.1);
}

.tutor-session-left-sidebar-quick-action-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #374151;
}

html.dark .tutor-session-left-sidebar-quick-action-label {
  color: #d1d5db;
}

.tutor-session-left-sidebar-quick-action-pace-value {
  font-weight: 600;
  color: #2563eb;
}

html.dark .tutor-session-left-sidebar-quick-action-pace-value {
  color: #60a5fa;
}

/* Disabled Quick Action Button */
.tutor-session-left-sidebar-quick-action-btn:disabled {
  /* opacity: 0.5; */
  cursor: not-allowed;
}

/* Stop Button (Red Theme) */
.tutor-session-left-sidebar-quick-action-btn-stop {
  background: #fef2f2;
  border-color: #fca5a5;
}

html.dark .tutor-session-left-sidebar-quick-action-btn-stop {
  background: rgba(127, 29, 29, 0.2);
  border-color: #b91c1c;
}

.tutor-session-left-sidebar-quick-action-btn-stop:hover {
  box-shadow: 0 4px 6px -1px rgba(239, 68, 68, 0.15);
}

.tutor-session-left-sidebar-quick-action-icon-red {
  color: #dc2626;
}

html.dark .tutor-session-left-sidebar-quick-action-icon-red {
  color: #f87171;
}

.tutor-session-left-sidebar-quick-action-btn-stop:hover
  .tutor-session-left-sidebar-quick-action-icon-red {
  transform: scale(1.1);
}

/* Resume Button (Emerald Theme) */

.tutor-session-left-sidebar-quick-action-btn-resume {
  background: #ecfdf5;
  border-color: #6ee7b7;
}

html.dark .tutor-session-left-sidebar-quick-action-btn-resume {
  background: rgba(6, 78, 59, 0.2);
  border-color: #047857;
}

.tutor-session-left-sidebar-quick-action-btn-resume:hover {
  box-shadow: 0 4px 6px -1px rgba(16, 185, 129, 0.1);
}

/* End Call Button */

.tutor-session-left-sidebar-end-call-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: #ef4444;
  color: #ffffff;
  border-radius: 0.75rem;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border: none;
  cursor: pointer;
  font-size: 0.875rem;
}

.tutor-session-left-sidebar-end-call-btn:hover {
  background: #dc2626;
}

.tutor-session-left-sidebar-end-call-icon {
  width: 1rem;
  height: 1rem;
  transform: rotate(135deg);
  flex-shrink: 0;
}

/* Call Area */

.tutor-session-call-area {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 2rem;
  margin-left: 20rem;
  transition: all 0.3s ease;
}

.tutor-session-main-sidebar-collapsed .tutor-session-call-area {
  margin-left: 0;
}

.tutor-session-main-transcripts-opened .tutor-session-call-area {
  transform: translateX(-15%);
}

.tutor-session-main-sidebar-collapsed.tutor-session-main-transcripts-opened
  .tutor-session-call-area {
  transform: translateX(-10%);
}

/* Call Button */

.tutor-session-call {
  position: relative;
}

.tutor-session-call-btn {
  position: relative;
  width: 16rem;
  height: 16rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  transition: all 0.5s ease;
  background: linear-gradient(to bottom right, #9333ea, #a855f7, #db2777);
  box-shadow: 0 25px 50px -12px rgba(147, 51, 234, 0.4);
}

.tutor-session-call-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 25px 50px -12px rgba(147, 51, 234, 0.6);
}

.tutor-session-call-btn:active {
  transform: scale(0.95);
}

.tutor-session-call-ring {
  position: absolute;
  inset: 1.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
}

.tutor-session-call-icon {
  position: relative;
  width: 7rem;
  height: 7rem;
  color: #ffffff;
  filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
}

/* Pulse Rings */

.tutor-session-call-pulse {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: linear-gradient(to bottom right, #c084fc, #f472b6);
  animation: tutor-session-pulse-ring 2.5s ease-out infinite;
}

.tutor-session-call-pulse-delayed {
  animation-delay: 0.8s;
}

@keyframes tutor-session-pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Mic Breathe */

.tutor-session-call-btn-active {
  animation: tutor-session-mic-breathe 2.5s ease-in-out infinite;
}

@keyframes tutor-session-mic-breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}

/* User Speaking - Cyan Pulse Rings */

.tutor-session-call-pulse-user {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: linear-gradient(to bottom right, #22d3ee, #60a5fa);
  animation: tutor-session-pulse-ring-user 2.5s ease-out infinite;
}

@keyframes tutor-session-pulse-ring-user {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* User Speaking - Cyan Button */

.tutor-session-call-btn-user {
  background: linear-gradient(to bottom right, #22d3ee, #3b82f6, #60a5fa);
  box-shadow: 0 25px 50px -12px rgba(34, 211, 238, 0.4);
}

.tutor-session-call-btn-user:hover {
  box-shadow: 0 25px 50px -12px rgba(34, 211, 238, 0.6);
}

/* Play Button (Session Paused) */

.tutor-session-call-btn-play {
  position: relative;
  width: 16rem;
  height: 16rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  transition: all 0.5s ease;
  background: linear-gradient(to bottom right, #10b981, #059669, #047857);
  box-shadow: 0 25px 50px -12px rgba(16, 185, 129, 0.4);
}

.tutor-session-call-btn-play:hover {
  transform: scale(1.05);
  box-shadow: 0 25px 50px -12px rgba(16, 185, 129, 0.6);
}

.tutor-session-call-btn-play:active {
  transform: scale(0.95);
}

.tutor-session-call-ring-play {
  position: absolute;
  inset: 1.5rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
}

.tutor-session-call-icon-play {
  position: relative;
  width: 7rem;
  height: 7rem;
  color: #ffffff;
  filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
}

/* Play Button Pulse */

.tutor-session-call-pulse-play {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: linear-gradient(to bottom right, #34d399, #10b981);
  animation: tutor-session-pulse-ring-play 2.5s ease-out infinite;
}

@keyframes tutor-session-pulse-ring-play {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

/* Responsive Design */

/* Tablet */
@media (max-width: 768px) {
  /* Transcripts overlays content — no displacement */
  .tutor-session-main-transcripts-opened .tutor-session-call-area,
  .tutor-session-main-sidebar-collapsed.tutor-session-main-transcripts-opened
    .tutor-session-call-area {
    transform: none;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .tutor-session-call-area {
    transform: scale(0.8);
  }
}

/* ─── Page ─────────────────────────────────────────── */
.user-onboard-page {
  min-height: 100vh;
  background: linear-gradient(
    135deg,
    #ffffff,
    rgba(239, 246, 255, 0.4),
    rgba(250, 245, 255, 0.4)
  );
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  overflow-y: auto;
}

html.dark .user-onboard-page {
  background: linear-gradient(
    135deg,
    #111827,
    rgba(23, 37, 84, 0.2),
    rgba(46, 16, 101, 0.2)
  );
}

.user-onboard-wrapper {
  width: 100%;
  max-width: 42rem;
}

/* ─── Header row (progress + lang switcher) ─────────── */
.user-onboard-header-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* ─── Lang switcher ─────────────────────────────────── */
.user-onboard-lang-switcher {
  position: relative;
  flex-shrink: 0;
}

.user-onboard-lang-switcher-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background-color: rgba(255, 255, 255, 0.7);
  color: #374151;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
  text-transform: uppercase;
}

.user-onboard-lang-switcher-btn:hover {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.2);
}

html.dark .user-onboard-lang-switcher-btn {
  background-color: rgba(55, 65, 81, 0.7);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e5e7eb;
}

html.dark .user-onboard-lang-switcher-btn:hover {
  background-color: rgba(75, 85, 99, 0.9);
}

.user-onboard-lang-switcher-flag {
  width: 1.125rem;
  height: 0.875rem;
  object-fit: cover;
  border-radius: 0.125rem;
  flex-shrink: 0;
}

.user-onboard-lang-switcher-code {
  line-height: 1;
}

.user-onboard-lang-switcher-chevron {
  opacity: 0.6;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.user-onboard-lang-switcher-chevron-open {
  transform: rotate(180deg);
}

.user-onboard-lang-switcher-dropdown {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  min-width: 7rem;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  z-index: 100;
}

html.dark .user-onboard-lang-switcher-dropdown {
  background-color: #1f2937;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.user-onboard-lang-switcher-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: #374151;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  transition: background-color 0.1s ease;
}

.user-onboard-lang-switcher-option:hover {
  background-color: #f3f4f6;
  color: #111827;
  text-decoration: none;
}

html.dark .user-onboard-lang-switcher-option {
  color: #e5e7eb;
}

html.dark .user-onboard-lang-switcher-option:hover {
  background-color: #374151;
  color: #f9fafb;
}

.user-onboard-lang-switcher-option-active {
  background-color: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}

html.dark .user-onboard-lang-switcher-option-active {
  background-color: rgba(29, 78, 216, 0.15);
  color: #93c5fd;
}

.user-onboard-lang-switcher-option-active:hover {
  background-color: #dbeafe;
}

html.dark .user-onboard-lang-switcher-option-active:hover {
  background-color: rgba(29, 78, 216, 0.25);
}

/* ─── Progress bar ──────────────────────────────────── */
.user-onboard-progress {
  display: flex;
  align-items: center;
  flex: 1;
}

.user-onboard-progress-item {
  display: flex;
  align-items: center;
  flex: 1;
}

.user-onboard-progress-item-last {
  flex: 0 0 auto;
}

.user-onboard-progress-step-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.user-onboard-step-circle {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 500;
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.user-onboard-step-done,
.user-onboard-step-active {
  background: linear-gradient(to right, #2563eb, #9333ea);
  color: white;
}

.user-onboard-step-active {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

.user-onboard-step-pending {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid #d1d5db;
  color: #9ca3af;
}

html.dark .user-onboard-step-pending {
  background: rgba(31, 41, 55, 0.5);
  border-color: #4b5563;
  color: #6b7280;
}

.user-onboard-step-label {
  font-size: 0.875rem;
  color: #9ca3af;
  display: none;
}

.user-onboard-step-label-active {
  color: #111827;
}

html.dark .user-onboard-step-label-active {
  color: #f9fafb;
}

@media (min-width: 640px) {
  .user-onboard-step-label {
    display: block;
  }
}

.user-onboard-progress-connector {
  flex: 1;
  height: 2px;
  margin: 0 0.5rem;
  background: #d1d5db;
  transition: background 0.3s;
}

.user-onboard-connector-done {
  background: linear-gradient(to right, #2563eb, #9333ea);
}

html.dark .user-onboard-progress-connector {
  background: #4b5563;
}

/* ─── Card ──────────────────────────────────────────── */
.user-onboard-card {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 1rem;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}

html.dark .user-onboard-card {
  background: rgba(31, 41, 55, 0.5);
  border-color: rgba(75, 85, 99, 0.4);
}

/* ─── Step content ──────────────────────────────────── */
.user-onboard-step-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.user-onboard-step-header {
  text-align: center;
}

.user-onboard-step-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: white;
}

.user-onboard-icon-blue-purple {
  background: linear-gradient(135deg, #3b82f6, #a855f7);
}

.user-onboard-icon-purple-pink {
  background: linear-gradient(135deg, #a855f7, #ec4899);
}

.user-onboard-icon-indigo-blue {
  background: linear-gradient(135deg, #6366f1, #3b82f6);
}

.user-onboard-step-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 0.5rem;
}

html.dark .user-onboard-step-title {
  color: #f9fafb;
}

.user-onboard-step-subtitle {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

html.dark .user-onboard-step-subtitle {
  color: #9ca3af;
}

/* ─── Step transitions ──────────────────────────────── */
@keyframes user-onboard-exit-left {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-20px);
  }
}

@keyframes user-onboard-exit-right {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(20px);
  }
}

@keyframes user-onboard-enter-right {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes user-onboard-enter-left {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.user-onboard-step-exit-left {
  animation: user-onboard-exit-left 0.2s ease forwards;
}

.user-onboard-step-exit-right {
  animation: user-onboard-exit-right 0.2s ease forwards;
}

.user-onboard-step-enter-right {
  animation: user-onboard-enter-right 0.25s ease forwards;
}

.user-onboard-step-enter-left {
  animation: user-onboard-enter-left 0.25s ease forwards;
}

/* ─── Language grid (steps 1 & 2) ───────────────────── */
.user-onboard-lang-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
}

@media (min-width: 640px) {
  .user-onboard-lang-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.user-onboard-lang-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 2px solid #e5e7eb;
  cursor: pointer;
  transition: border-color 0.15s;
}

.user-onboard-lang-option:not(.user-onboard-lang-disabled):hover {
  border-color: #d1d5db;
}

html.dark .user-onboard-lang-option {
  border-color: #4b5563;
}

html.dark .user-onboard-lang-option:not(.user-onboard-lang-disabled):hover {
  border-color: #6b7280;
}

.user-onboard-lang-disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

.user-onboard-lang-selected-blue {
  border-color: #3b82f6;
  background: rgba(239, 246, 255, 0.5);
}

html.dark .user-onboard-lang-selected-blue {
  border-color: #60a5fa;
  background: rgba(30, 58, 138, 0.2);
}

.user-onboard-lang-selected-purple {
  border-color: #a855f7;
  background: rgba(250, 245, 255, 0.5);
}

html.dark .user-onboard-lang-selected-purple {
  border-color: #c084fc;
  background: rgba(88, 28, 135, 0.2);
}

.user-onboard-flag {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
}

.user-onboard-lang-name {
  font-size: 0.9375rem;
  color: #111827;
  flex: 1;
}

html.dark .user-onboard-lang-name {
  color: #f9fafb;
}

/* ─── Soon badge ────────────────────────────────────── */
.user-onboard-badge-soon {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  font-size: 0.75rem;
  color: #6b7280;
  background: #f3f4f6;
  white-space: nowrap;
}

html.dark .user-onboard-badge-soon {
  background: #374151;
  border-color: #4b5563;
  color: #9ca3af;
}

/* ─── Check icon ────────────────────────────────────── */
.user-onboard-check-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  margin-left: auto;
}

.user-onboard-check-blue {
  color: #2563eb;
}

.user-onboard-check-purple {
  color: #9333ea;
}

.user-onboard-check-indigo {
  color: #4f46e5;
}

html.dark .user-onboard-check-blue {
  color: #60a5fa;
}

html.dark .user-onboard-check-purple {
  color: #c084fc;
}

html.dark .user-onboard-check-indigo {
  color: #818cf8;
}

/* ─── Levels list (step 3) ──────────────────────────── */
.user-onboard-levels-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.user-onboard-level-option {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.75rem;
  border: 2px solid #e5e7eb;
  cursor: pointer;
  transition: border-color 0.15s;
}

.user-onboard-level-option:hover {
  border-color: #d1d5db;
}

html.dark .user-onboard-level-option {
  border-color: #4b5563;
}

html.dark .user-onboard-level-option:hover {
  border-color: #6b7280;
}

.user-onboard-level-selected {
  border-color: #6366f1;
  background: rgba(238, 242, 255, 0.5);
}

html.dark .user-onboard-level-selected {
  border-color: #818cf8;
  background: rgba(55, 48, 163, 0.2);
}

.user-onboard-level-body {
  flex: 1;
}

.user-onboard-level-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

.user-onboard-level-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border: 1px solid #d1d5db;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #374151;
}

html.dark .user-onboard-level-badge {
  border-color: #4b5563;
  color: #d1d5db;
}

.user-onboard-level-badge-selected {
  border-color: #6366f1;
  color: #4338ca;
}

html.dark .user-onboard-level-badge-selected {
  border-color: #818cf8;
  color: #a5b4fc;
}

.user-onboard-level-title {
  font-size: 0.9375rem;
  color: #111827;
  font-weight: 500;
}

html.dark .user-onboard-level-title {
  color: #f9fafb;
}

.user-onboard-level-desc {
  font-size: 0.8125rem;
  color: #6b7280;
  margin: 0;
}

html.dark .user-onboard-level-desc {
  color: #9ca3af;
}

/* ─── Plans list (step 4) ───────────────────────────── */
.user-onboard-plans-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.user-onboard-plan-option {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: 0.75rem;
  border: 2px solid #e5e7eb;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: border-color 0.15s;
}

.user-onboard-plan-option:hover {
  border-color: #d1d5db;
}

.user-onboard-plan-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

html.dark .user-onboard-plan-option {
  border-color: #4b5563;
}

html.dark .user-onboard-plan-option:hover {
  border-color: #6b7280;
}

.user-onboard-plan-selected-blue {
  border-color: #3b82f6;
  background: rgba(239, 246, 255, 0.5);
}

html.dark .user-onboard-plan-selected-blue {
  border-color: #60a5fa;
  background: rgba(30, 58, 138, 0.2);
}

.user-onboard-plan-selected-purple {
  border-color: #a855f7;
  background: rgba(250, 245, 255, 0.5);
}

html.dark .user-onboard-plan-selected-purple {
  border-color: #c084fc;
  background: rgba(88, 28, 135, 0.2);
}

.user-onboard-plan-selected-indigo {
  border-color: #6366f1;
  background: rgba(238, 242, 255, 0.5);
}

html.dark .user-onboard-plan-selected-indigo {
  border-color: #818cf8;
  background: rgba(55, 48, 163, 0.2);
}

.user-onboard-plan-badge-popular {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
  color: white;
  background: linear-gradient(to right, #2563eb, #9333ea);
}

.user-onboard-plan-body {
  flex: 1;
}

.user-onboard-plan-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.375rem;
}

.user-onboard-plan-name {
  font-size: 1rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

html.dark .user-onboard-plan-name {
  color: #f9fafb;
}

.user-onboard-plan-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.user-onboard-plan-price-original {
  font-size: 1.45rem;
  font-weight: 500;
  color: #94a3b8;
  text-decoration: line-through;
  align-self: center;
}

html.dark .user-onboard-plan-price-original {
  color: #64748b;
}

.user-onboard-plan-price {
  font-size: 1.5rem;
  font-weight: 600;
  color: #111827;
}

html.dark .user-onboard-plan-price {
  color: #f9fafb;
}

.user-onboard-plan-price-pro {
  background: linear-gradient(to right, #2563eb, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html.dark .user-onboard-plan-price-pro {
  background: linear-gradient(to right, #60a5fa, #c084fc);
  -webkit-background-clip: text;
  background-clip: text;
}

.user-onboard-plan-period {
  font-size: 0.875rem;
  color: #6b7280;
}

html.dark .user-onboard-plan-period {
  color: #9ca3af;
}

.user-onboard-plan-features {
  font-size: 0.8125rem;
  color: #6b7280;
  margin: 0;
}

html.dark .user-onboard-plan-features {
  color: #9ca3af;
}

.user-onboard-plan-trial-note {
  text-align: center;
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

html.dark .user-onboard-plan-trial-note {
  color: #9ca3af;
}

/* ─── Navigation ────────────────────────────────────── */
.user-onboard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
}

html.dark .user-onboard-nav {
  border-top-color: #4b5563;
}

.user-onboard-btn-back {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  background: transparent;
  color: #374151;
  cursor: pointer;
  font-size: 0.875rem;
  transition:
    border-color 0.15s,
    color 0.15s;
}

.user-onboard-btn-back:hover:not(:disabled) {
  border-color: #9ca3af;
}

.user-onboard-btn-back:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

html.dark .user-onboard-btn-back {
  border-color: #4b5563;
  color: #d1d5db;
}

.user-onboard-btn-next {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  border: none;
  border-radius: 0.5rem;
  background: linear-gradient(to right, #2563eb, #9333ea, #4f46e5);
  color: white;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  transition: opacity 0.15s;
}

.user-onboard-btn-next:hover {
  opacity: 0.9;
}

/* ─── Skip ──────────────────────────────────────────── */
.user-onboard-skip {
  text-align: center;
  margin-top: 1rem;
}

.user-onboard-skip-btn {
  font-size: 0.875rem;
  color: #6b7280;
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

.user-onboard-skip-btn:hover {
  color: #374151;
}

html.dark .user-onboard-skip-btn {
  color: #9ca3af;
}

html.dark .user-onboard-skip-btn:hover {
  color: #d1d5db;
}

/* ─── Completing fade transitions ───────────────────── */
.user-onboard-fade-enter {
  transition: opacity 0.2s ease;
}
.user-onboard-fade-enter-start {
  opacity: 0;
}
.user-onboard-fade-enter-end {
  opacity: 1;
}

/* ─── Loading view ──────────────────────────────────── */
.user-onboard-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
  padding: 3rem 2rem;
}

.user-onboard-loading-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  background: linear-gradient(135deg, #2563eb, #9333ea, #4f46e5);
  margin-bottom: 0.5rem;
}

.user-onboard-loading-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

html.dark .user-onboard-loading-title {
  color: #f9fafb;
}

.user-onboard-loading-message {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
  min-height: 1.25rem;
  transition: opacity 0.15s ease;
}

html.dark .user-onboard-loading-message {
  color: #9ca3af;
}

.user-onboard-loading-bar-track {
  width: 100%;
  height: 0.5rem;
  background: #e5e7eb;
  border-radius: 9999px;
  overflow: hidden;
  margin-top: 0.5rem;
}

html.dark .user-onboard-loading-bar-track {
  background: #374151;
}

.user-onboard-loading-bar-fill {
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(to right, #2563eb, #9333ea, #4f46e5);
  transition: width 0.45s ease;
}

.user-onboard-loading-percent {
  font-size: 0.75rem;
  color: #9ca3af;
  margin: 0;
}

/* ============================================================
   Page Layout
   ============================================================ */

.user-signin-page {
  height: 100vh;
  background: white;
  display: flex;
  overflow: hidden;
}

html.dark .user-signin-page {
  background: #111827;
}

/* ============================================================
   Left Side
   ============================================================ */

.user-signin-left {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .user-signin-left {
    width: 50%;
  }
}

/* Background gradient */
.user-signin-bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    #f9fafb,
    rgba(219, 234, 254, 0.3),
    rgba(237, 233, 254, 0.3)
  );
}

html.dark .user-signin-bg-gradient {
  background: linear-gradient(
    to bottom right,
    #030712,
    rgba(23, 37, 84, 0.2),
    rgba(46, 16, 101, 0.2)
  );
}

/* Blur orbs */
.user-signin-bg-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.user-signin-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
}

.user-signin-orb-top-right {
  top: 0;
  right: 0;
  width: 384px;
  height: 384px;
  background: rgba(96, 165, 250, 0.1);
}

html.dark .user-signin-orb-top-right {
  background: rgba(59, 130, 246, 0.05);
}

.user-signin-orb-bottom-left {
  bottom: 0;
  left: 0;
  width: 320px;
  height: 320px;
  background: rgba(192, 132, 252, 0.1);
}

html.dark .user-signin-orb-bottom-left {
  background: rgba(168, 85, 247, 0.05);
}

/* Form wrapper - fade up on load */
.user-signin-form-wrapper {
  width: 100%;
  max-width: 448px;
  position: relative;
  z-index: 10;
  animation: user-signin-fade-up 0.5s ease both;
}

@keyframes user-signin-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile back button */
.user-signin-back-mobile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4b5563;
  text-decoration: none;
  margin-bottom: 24px;
  transition: color 0.2s;
}

.user-signin-back-mobile:hover {
  color: #111827;
}

html.dark .user-signin-back-mobile {
  color: #9ca3af;
}

html.dark .user-signin-back-mobile:hover {
  color: #f9fafb;
}

.user-signin-back-mobile svg {
  transition: transform 0.2s;
}

.user-signin-back-mobile:hover svg {
  transform: translateX(-4px);
}

.user-signin-back-mobile span {
  font-size: 14px;
}

@media (min-width: 1024px) {
  .user-signin-back-mobile {
    display: none;
  }
}

/* Mobile logo */
.user-signin-logo-mobile {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

@media (min-width: 1024px) {
  .user-signin-logo-mobile {
    display: none;
  }
}

.user-signin-logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(to bottom right, #2563eb, #9333ea);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.user-signin-logo-mobile span {
  font-size: 20px;
  color: #111827;
}

html.dark .user-signin-logo-mobile span {
  color: #f9fafb;
}

/* Card */
.user-signin-card {
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

html.dark .user-signin-card {
  border-color: rgba(55, 65, 81, 0.6);
  background: rgba(17, 24, 39, 0.7);
}

@media (min-width: 1280px) {
  .user-signin-card {
    padding: 32px;
  }
}

/* Card header */
.user-signin-card-header {
  margin-bottom: 24px;
}

.user-signin-card-header h2 {
  font-size: 30px;
  color: #111827;
  margin: 0 0 8px 0;
  font-weight: 400;
}

html.dark .user-signin-card-header h2 {
  color: #f9fafb;
}

.user-signin-card-header p {
  color: #4b5563;
  margin: 0;
  font-size: 14px;
}

html.dark .user-signin-card-header p {
  color: #9ca3af;
}

/* Form */
.user-signin-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}

.user-signin-field {
  display: flex;
  flex-direction: column;
}

.user-signin-field label {
  font-size: 14px;
  color: #374151;
  margin-bottom: 6px;
  display: block;
}

html.dark .user-signin-field label {
  color: #d1d5db;
}

.user-signin-field-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.user-signin-field-header label {
  margin-bottom: 0;
}

.user-signin-forgot {
  font-size: 12px;
  color: #2563eb;
  text-decoration: none;
  transition: color 0.2s;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}

.user-signin-forgot:hover {
  color: #1d4ed8;
}

html.dark .user-signin-forgot {
  color: #60a5fa;
}

html.dark .user-signin-forgot:hover {
  color: #93c5fd;
}

.user-signin-field input {
  height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  color: #111827;
  outline: none;
  transition:
    box-shadow 0.2s,
    border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.user-signin-field input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
}

html.dark .user-signin-field input {
  border-color: #374151;
  background: rgba(31, 41, 55, 0.8);
  color: #f9fafb;
}

html.dark .user-signin-field input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.user-signin-field input::placeholder {
  color: #9ca3af;
}

/* Error message */
.user-signin-error {
  font-size: 13px;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 12px;
}

html.dark .user-signin-error {
  color: #fca5a5;
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.35);
}

/* Unverified error row (message + resend button) */
.user-signin-error-unverified {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.user-signin-resend-btn {
  flex-shrink: 0;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(220, 38, 38, 0.5);
  background: none;
  color: #dc2626;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  transition: background 0.15s;
}

.user-signin-resend-btn:hover {
  background: rgba(220, 38, 38, 0.1);
}

.user-signin-resend-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

html.dark .user-signin-resend-btn {
  color: #fca5a5;
  border-color: rgba(252, 165, 165, 0.4);
}

html.dark .user-signin-resend-btn:hover {
  background: rgba(220, 38, 38, 0.2);
}

.user-signin-resend-spinner {
  display: block;
  animation: user-signin-spin 1s linear infinite;
}

/* Submit button */
.user-signin-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(to right, #2563eb, #9333ea, #4f46e5);
  color: white;
  font-size: 15px;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.15s;
}

.user-signin-submit:hover {
  background: linear-gradient(to right, #1d4ed8, #7e22ce, #4338ca);
  transform: scale(1.01);
}

.user-signin-submit:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.user-signin-submit-spinner {
  display: block;
  animation: user-signin-spin 1s linear infinite;
}

@keyframes user-signin-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Divider */
.user-signin-divider {
  position: relative;
  margin-bottom: 20px;
}

.user-signin-divider-line {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.user-signin-divider-line hr {
  width: 100%;
  border: none;
  border-top: 1px solid #d1d5db;
  margin: 0;
}

html.dark .user-signin-divider-line hr {
  border-color: #374151;
}

.user-signin-divider-text {
  position: relative;
  display: flex;
  justify-content: center;
}

.user-signin-divider-text span {
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.7);
  color: #6b7280;
  font-size: 12px;
}

html.dark .user-signin-divider-text span {
  background: rgba(17, 24, 39, 0.7);
  color: #9ca3af;
}

/* Social buttons */
.user-signin-social {
  display: grid;
  grid-template-columns: 1fr;

  /*? When Facebook Logo is included */
  /* grid-template-columns: 1fr 1fr; */

  /*? When Facebook & Apple Logo are included */
  /* grid-template-columns: 1fr 1fr 1fr; */

  gap: 10px;
  margin-bottom: 20px;
}

.user-signin-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  background: white;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.15s;
  color: #111827;
}

.user-signin-social-btn:hover {
  background: #f3f4f6;
  transform: scale(1.02);
}

html.dark .user-signin-social-btn {
  border-color: #374151;
  background: transparent;
  color: #f9fafb;
}

html.dark .user-signin-social-btn:hover {
  background: #1f2937;
}

/* Sign up link */
.user-signin-signup-link {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #d1d5db;
}

html.dark .user-signin-signup-link {
  border-color: #374151;
}

.user-signin-signup-link p {
  font-size: 14px;
  color: #4b5563;
  margin: 0;
}

html.dark .user-signin-signup-link p {
  color: #9ca3af;
}

.user-signin-signup-link a {
  color: #2563eb;
  text-decoration: none;
  transition: color 0.2s;
}

.user-signin-signup-link a:hover {
  color: #1d4ed8;
}

html.dark .user-signin-signup-link a {
  color: #60a5fa;
}

html.dark .user-signin-signup-link a:hover {
  color: #93c5fd;
}

/* ============================================================
   Right Side
   ============================================================ */

.user-signin-right {
  display: none;
}

@media (min-width: 1024px) {
  .user-signin-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 50%;
    padding: 40px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom right, #2563eb, #9333ea, #4338ca);
  }
}

@media (min-width: 1280px) {
  .user-signin-right {
    padding: 48px;
  }
}

html.dark .user-signin-right {
  background: linear-gradient(to bottom right, #1d4ed8, #7e22ce, #3730a3);
}

/* Decorative background */
.user-signin-right-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.user-signin-right-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
}

.user-signin-right-orb-1 {
  top: 80px;
  left: 40px;
  width: 320px;
  height: 320px;
  background: rgba(255, 255, 255, 0.1);
}

.user-signin-right-orb-2 {
  bottom: 80px;
  right: 40px;
  width: 384px;
  height: 384px;
  background: rgba(196, 181, 253, 0.1);
}

/* Floating particles */
.user-signin-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.user-signin-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  animation: user-signin-float linear infinite;
}

.user-signin-particle:nth-child(1) {
  left: 15%;
  top: 20%;
  animation-duration: 18s;
  animation-delay: 0s;
}
.user-signin-particle:nth-child(2) {
  left: 75%;
  top: 60%;
  animation-duration: 22s;
  animation-delay: -5s;
}
.user-signin-particle:nth-child(3) {
  left: 40%;
  top: 80%;
  animation-duration: 16s;
  animation-delay: -8s;
}
.user-signin-particle:nth-child(4) {
  left: 85%;
  top: 15%;
  animation-duration: 20s;
  animation-delay: -3s;
}
.user-signin-particle:nth-child(5) {
  left: 25%;
  top: 55%;
  animation-duration: 25s;
  animation-delay: -12s;
}
.user-signin-particle:nth-child(6) {
  left: 60%;
  top: 35%;
  animation-duration: 19s;
  animation-delay: -7s;
}

@keyframes user-signin-float {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(30px, -40px);
  }
  50% {
    transform: translate(-20px, -80px);
  }
  75% {
    transform: translate(40px, -50px);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* Decorative overlay container */
.user-signin-decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Progress circle */
.user-signin-progress-circle {
  position: absolute;
  top: 25%;
  right: 64px;
  width: 112px;
  height: 112px;
  animation: user-signin-scale-in 0.6s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)
    both;
}

.user-signin-progress-svg {
  width: 112px;
  height: 112px;
  animation: user-signin-spin 20s linear infinite;
}

@keyframes user-signin-spin {
  from {
    transform: rotate(-90deg);
  }
  to {
    transform: rotate(270deg);
  }
}

.user-signin-progress-fill {
  stroke-dasharray: 0 283;
  animation: user-signin-progress-draw 2s 0.5s ease-out forwards;
}

@keyframes user-signin-progress-draw {
  to {
    stroke-dasharray: 212 283;
  }
}

.user-signin-progress-label {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.user-signin-progress-pct {
  color: white;
  font-size: 18px;
  animation: user-signin-fade-in 0.4s 1s both;
}

.user-signin-progress-complete {
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
}

/* Mini stats card */
.user-signin-stats-card {
  position: absolute;
  bottom: 25%;
  right: 80px;
  width: 144px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: user-signin-slide-up 0.5s 0.8s ease both;
}

.user-signin-stats-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.user-signin-stats-icon {
  padding: 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.user-signin-stats-header > span {
  color: rgba(255, 255, 255, 0.9);
  font-size: 12px;
}

.user-signin-stats-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-signin-stats-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
}

.user-signin-stats-label {
  color: rgba(255, 255, 255, 0.6);
}

.user-signin-stats-value {
  color: white;
  animation: user-signin-fade-in 0.4s ease both;
}

.user-signin-stats-row:nth-child(1) .user-signin-stats-value {
  animation-delay: 1.2s;
}
.user-signin-stats-row:nth-child(2) .user-signin-stats-value {
  animation-delay: 1.4s;
}

/* Achievement badge */
.user-signin-achievement {
  position: absolute;
  top: 50%;
  right: 112px;
  width: 64px;
  height: 64px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: user-signin-bounce-in 0.7s 1s cubic-bezier(0.34, 1.56, 0.64, 1)
    both;
}

.user-signin-achievement-icon {
  color: #fde047;
}

/* Shared keyframes */
@keyframes user-signin-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes user-signin-scale-in {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

@keyframes user-signin-bounce-in {
  from {
    transform: scale(0) rotate(-180deg);
  }
  to {
    transform: scale(1) rotate(0deg);
  }
}

@keyframes user-signin-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Right top - back button */
.user-signin-right-top {
  position: relative;
  z-index: 10;
}

.user-signin-back-desktop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}

.user-signin-back-desktop:hover {
  color: white;
}

.user-signin-back-desktop svg {
  transition: transform 0.2s;
}

.user-signin-back-desktop:hover svg {
  transform: translateX(-4px);
}

.user-signin-back-desktop span {
  font-size: 14px;
}

/* Right content */
.user-signin-right-content {
  position: relative;
  z-index: 10;
  color: white;
}

/* Badge */
.user-signin-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 16px;
  animation: user-signin-badge-in 0.4s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)
    both;
}

@keyframes user-signin-badge-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.user-signin-badge span {
  font-size: 12px;
}

.user-signin-right-content h1 {
  color: white;
  font-size: 40px;
  line-height: 1.2;
  margin: 0 0 16px 0;
  font-weight: 400;
  animation: user-signin-fade-up 0.5s 0.3s ease both;
}

@media (min-width: 1280px) {
  .user-signin-right-content h1 {
    font-size: 48px;
  }
}

.user-signin-brand {
  color: #bfdbfe;
}

.user-signin-right-content > p {
  font-size: 16px;
  color: #bfdbfe;
  margin: 0 0 32px 0;
  line-height: 1.6;
  max-width: 448px;
  opacity: 0.9;
  animation: user-signin-fade-in 0.5s 0.4s ease both;
}

/* Features */
.user-signin-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 448px;
}

.user-signin-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.05);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    background 0.2s,
    transform 0.2s;
  animation: user-signin-slide-in-left 0.5s ease both;
}

.user-signin-feature:nth-child(1) {
  animation-delay: 0.5s;
}
.user-signin-feature:nth-child(2) {
  animation-delay: 0.6s;
}

.user-signin-feature:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(1.02);
}

@keyframes user-signin-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.user-signin-feature-icon {
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.user-signin-feature-body h3 {
  font-size: 14px;
  margin: 0 0 2px 0;
  font-weight: 400;
  color: white;
}

.user-signin-feature-body p {
  font-size: 12px;
  color: #bfdbfe;
  margin: 0;
  line-height: 1.5;
  opacity: 0.9;
}

/* Right footer */
.user-signin-right-footer {
  position: relative;
  z-index: 10;
  animation: user-signin-fade-in 0.5s 1s ease both;
}

.user-signin-right-footer p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  margin: 0;
}

/* ============================================================
   Forgot Password Panel
   ============================================================ */

.user-signin-forgot-panel-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6b7280;
  font-size: 14px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  margin-bottom: 24px;
  transition: color 0.2s;
}

.user-signin-forgot-panel-back:hover {
  color: #111827;
}

html.dark .user-signin-forgot-panel-back {
  color: #9ca3af;
}

html.dark .user-signin-forgot-panel-back:hover {
  color: #f9fafb;
}

.user-signin-forgot-panel-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 8px 0;
}

.user-signin-forgot-panel-success-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.1),
    rgba(139, 92, 246, 0.1)
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3b82f6;
}

.user-signin-forgot-panel-success h3 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

html.dark .user-signin-forgot-panel-success h3 {
  color: #f9fafb;
}

.user-signin-forgot-panel-success p {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

html.dark .user-signin-forgot-panel-success p {
  color: #9ca3af;
}

/* ============================================================
   Page Layout
   ============================================================ */

.user-signup-page {
  height: 100vh;
  background: white;
  display: flex;
  overflow: hidden;
}

html.dark .user-signup-page {
  background: #111827;
}

/* ============================================================
   Left Side - Presentation (gradient panel)
   ============================================================ */

.user-signup-left {
  display: none;
}

@media (min-width: 1024px) {
  .user-signup-left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 50%;
    padding: 40px;
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom right, #2563eb, #9333ea, #4338ca);
  }
}

@media (min-width: 1280px) {
  .user-signup-left {
    padding: 48px;
  }
}

html.dark .user-signup-left {
  background: linear-gradient(to bottom right, #1d4ed8, #7e22ce, #3730a3);
}

/* Decorative background */
.user-signup-left-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.user-signup-left-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
}

.user-signup-left-orb-1 {
  top: 80px;
  left: 40px;
  width: 320px;
  height: 320px;
  background: rgba(255, 255, 255, 0.1);
}

.user-signup-left-orb-2 {
  bottom: 80px;
  right: 40px;
  width: 384px;
  height: 384px;
  background: rgba(196, 181, 253, 0.1);
}

/* Floating particles */
.user-signup-particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.user-signup-particle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  animation: user-signup-float linear infinite;
}

.user-signup-particle:nth-child(1) {
  left: 15%;
  top: 20%;
  animation-duration: 18s;
  animation-delay: 0s;
}
.user-signup-particle:nth-child(2) {
  left: 75%;
  top: 60%;
  animation-duration: 22s;
  animation-delay: -5s;
}
.user-signup-particle:nth-child(3) {
  left: 40%;
  top: 80%;
  animation-duration: 16s;
  animation-delay: -8s;
}
.user-signup-particle:nth-child(4) {
  left: 85%;
  top: 15%;
  animation-duration: 20s;
  animation-delay: -3s;
}
.user-signup-particle:nth-child(5) {
  left: 25%;
  top: 55%;
  animation-duration: 25s;
  animation-delay: -12s;
}
.user-signup-particle:nth-child(6) {
  left: 60%;
  top: 35%;
  animation-duration: 19s;
  animation-delay: -7s;
}

@keyframes user-signup-float {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(30px, -40px);
  }
  50% {
    transform: translate(-20px, -80px);
  }
  75% {
    transform: translate(40px, -50px);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* ============================================================
   Flashcard mockups
   ============================================================ */

.user-signup-cards {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.user-signup-card-mockup {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.user-signup-card-mockup-1 {
  top: 25%;
  right: 64px;
  width: 192px;
  animation: user-signup-card-float-1 6s ease-in-out infinite;
}

.user-signup-card-mockup-2 {
  top: 50%;
  right: 128px;
  width: 176px;
  animation: user-signup-card-float-2 7s ease-in-out infinite;
  animation-delay: -1s;
}

.user-signup-card-mockup-3 {
  bottom: 25%;
  right: 80px;
  width: 160px;
  padding: 12px;
  animation: user-signup-card-float-3 8s ease-in-out infinite;
  animation-delay: -2s;
}

@keyframes user-signup-card-float-1 {
  0% {
    transform: translateY(0) rotate(-5deg);
  }
  50% {
    transform: translateY(-10px) rotate(-3deg);
  } /* was translateY(10px) but going up first looks better */
  100% {
    transform: translateY(0) rotate(-5deg);
  }
}

@keyframes user-signup-card-float-2 {
  0% {
    transform: translateY(10px) rotate(3deg);
  }
  50% {
    transform: translateY(-10px) rotate(5deg);
  }
  100% {
    transform: translateY(10px) rotate(3deg);
  }
}

@keyframes user-signup-card-float-3 {
  0% {
    transform: translateY(15px) rotate(-3deg);
  }
  50% {
    transform: translateY(-15px) rotate(-1deg);
  }
  100% {
    transform: translateY(15px) rotate(-3deg);
  }
}

.user-signup-card-word {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  margin-bottom: 8px;
}

.user-signup-card-word-sm {
  font-size: 12px;
  margin-bottom: 4px;
}

.user-signup-card-translation {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
}

.user-signup-card-lines {
  margin-top: 12px;
  display: flex;
  gap: 4px;
}

.user-signup-card-line {
  width: 24px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.user-signup-card-line-short {
  width: 16px;
}
.user-signup-card-line-med {
  width: 20px;
}
.user-signup-card-line-xs {
  width: 16px;
  height: 2px;
}

/* ============================================================
   Stats orb
   ============================================================ */

.user-signup-stats-orb {
  position: absolute;
  top: 33%;
  left: 48px;
  pointer-events: none;
  animation: user-signup-scale-in 0.6s 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)
    both;
}

.user-signup-stats-orb-inner {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: user-signup-orb-pulse 3s ease-in-out infinite;
}

@keyframes user-signup-orb-pulse {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
  }
  50% {
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.2);
  }
}

.user-signup-stats-orb-number {
  color: white;
  font-size: 18px;
  animation: user-signup-fade-in 0.4s 0.8s both;
}

.user-signup-stats-orb-label {
  color: rgba(255, 255, 255, 0.6);
  font-size: 10px;
}

/* ============================================================
   Left top / content / footer
   ============================================================ */

.user-signup-left-top {
  position: relative;
  z-index: 10;
}

.user-signup-back-desktop {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  transition: color 0.2s;
}

.user-signup-back-desktop:hover {
  color: white;
}

.user-signup-back-desktop svg {
  transition: transform 0.2s;
}

.user-signup-back-desktop:hover svg {
  transform: translateX(-4px);
}

.user-signup-back-desktop span {
  font-size: 14px;
}

.user-signup-left-content {
  position: relative;
  z-index: 10;
  color: white;
}

/* Badge */
.user-signup-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 16px;
  animation: user-signup-badge-in 0.4s 0.2s cubic-bezier(0.34, 1.56, 0.64, 1)
    both;
}

@keyframes user-signup-badge-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.user-signup-badge span {
  font-size: 12px;
}

.user-signup-left-content h1 {
  font-size: 40px;
  line-height: 1.2;
  margin: 0 0 16px 0;
  font-weight: 400;
  color: white;
  animation: user-signup-fade-up 0.5s 0.3s ease both;
}

@media (min-width: 1280px) {
  .user-signup-left-content h1 {
    font-size: 48px;
  }
}

.user-signup-brand {
  color: #bfdbfe;
}

.user-signup-left-content > p {
  font-size: 16px;
  color: #bfdbfe;
  margin: 0 0 32px 0;
  line-height: 1.6;
  max-width: 448px;
  opacity: 0.9;
  animation: user-signup-fade-in 0.5s 0.4s ease both;
}

/* Features */
.user-signup-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 448px;
}

.user-signup-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.05);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    background 0.2s,
    transform 0.2s;
  animation: user-signup-slide-in-left 0.5s ease both;
}

.user-signup-feature:nth-child(1) {
  animation-delay: 0.5s;
}
.user-signup-feature:nth-child(2) {
  animation-delay: 0.6s;
}

.user-signup-feature:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(1.02);
}

@keyframes user-signup-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.user-signup-feature-icon {
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.user-signup-feature-body {
  flex: 1;
}

.user-signup-feature-body h3 {
  font-size: 14px;
  margin: 0 0 2px 0;
  font-weight: 400;
  color: white;
}

.user-signup-feature-body p {
  font-size: 12px;
  color: #bfdbfe;
  margin: 0;
  line-height: 1.5;
  opacity: 0.9;
}

.user-signup-feature-check {
  color: #86efac;
  flex-shrink: 0;
  animation: user-signup-scale-in 0.4s ease both;
}

.user-signup-feature:nth-child(1) .user-signup-feature-check {
  animation-delay: 0.8s;
}
.user-signup-feature:nth-child(2) .user-signup-feature-check {
  animation-delay: 0.9s;
}

/* Left footer */
.user-signup-left-footer {
  position: relative;
  z-index: 10;
  animation: user-signup-fade-in 0.5s 1s ease both;
}

.user-signup-left-footer p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  margin: 0;
}

/* ============================================================
   Right Side - Form
   ============================================================ */

.user-signup-right {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .user-signup-right {
    width: 50%;
  }
}

/* Background gradient */
.user-signup-bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    #f9fafb,
    rgba(219, 234, 254, 0.3),
    rgba(237, 233, 254, 0.3)
  );
}

html.dark .user-signup-bg-gradient {
  background: linear-gradient(
    to bottom right,
    #030712,
    rgba(23, 37, 84, 0.2),
    rgba(46, 16, 101, 0.2)
  );
}

/* Blur orbs */
.user-signup-bg-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.user-signup-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
}

.user-signup-orb-top-right {
  top: 0;
  right: 0;
  width: 384px;
  height: 384px;
  background: rgba(96, 165, 250, 0.1);
}

html.dark .user-signup-orb-top-right {
  background: rgba(59, 130, 246, 0.05);
}

.user-signup-orb-bottom-left {
  bottom: 0;
  left: 0;
  width: 320px;
  height: 320px;
  background: rgba(192, 132, 252, 0.1);
}

html.dark .user-signup-orb-bottom-left {
  background: rgba(168, 85, 247, 0.05);
}

/* Form wrapper */
.user-signup-form-wrapper {
  width: 100%;
  max-width: 448px;
  position: relative;
  z-index: 10;
  animation: user-signup-fade-up 0.5s ease both;
}

@keyframes user-signup-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile back button */
.user-signup-back-mobile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4b5563;
  text-decoration: none;
  margin-bottom: 24px;
  transition: color 0.2s;
}

.user-signup-back-mobile:hover {
  color: #111827;
}

html.dark .user-signup-back-mobile {
  color: #9ca3af;
}

html.dark .user-signup-back-mobile:hover {
  color: #f9fafb;
}

.user-signup-back-mobile svg {
  transition: transform 0.2s;
}

.user-signup-back-mobile:hover svg {
  transform: translateX(-4px);
}

.user-signup-back-mobile span {
  font-size: 14px;
}

@media (min-width: 1024px) {
  .user-signup-back-mobile {
    display: none;
  }
}

/* Mobile logo */
.user-signup-logo-mobile {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

@media (min-width: 1024px) {
  .user-signup-logo-mobile {
    display: none;
  }
}

.user-signup-logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: linear-gradient(to bottom right, #2563eb, #9333ea);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.user-signup-logo-mobile span {
  font-size: 20px;
  color: #111827;
}

html.dark .user-signup-logo-mobile span {
  color: #f9fafb;
}

/* Card */
.user-signup-card {
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 16px;
  padding: 24px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

html.dark .user-signup-card {
  border-color: rgba(55, 65, 81, 0.6);
  background: rgba(17, 24, 39, 0.7);
}

@media (min-width: 1280px) {
  .user-signup-card {
    padding: 32px;
  }
}

/* Card header */
.user-signup-card-header {
  margin-bottom: 24px;
}

.user-signup-card-header h2 {
  font-size: 30px;
  color: #111827;
  margin: 0 0 8px 0;
  font-weight: 400;
}

html.dark .user-signup-card-header h2 {
  color: #f9fafb;
}

.user-signup-card-header p {
  color: #4b5563;
  margin: 0;
  font-size: 14px;
}

html.dark .user-signup-card-header p {
  color: #9ca3af;
}

/* Social buttons - full width stacked */
.user-signup-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.user-signup-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  background: white;
  color: #111827;
  font-size: 14px;
  cursor: pointer;
  transition:
    background 0.2s,
    transform 0.15s;
}

.user-signup-social-btn:hover {
  text-decoration: none;
  background: #f3f4f6;
  transform: scale(1.01);
}

html.dark .user-signup-social-btn {
  border-color: #374151;
  background: transparent;
  color: #f9fafb;
}

html.dark .user-signup-social-btn:hover {
  background: #1f2937;
}

/* Terms */
.user-signup-terms {
  font-size: 12px;
  color: #4b5563;
  text-align: center;
  margin: 0 0 20px 0;
}

html.dark .user-signup-terms {
  color: #9ca3af;
}

.user-signup-terms-link {
  color: #2563eb;
  text-decoration: none;
  transition: text-decoration 0.1s;
}

.user-signup-terms-link:hover {
  text-decoration: underline;
}

html.dark .user-signup-terms-link {
  color: #60a5fa;
}

/* Divider */
.user-signup-divider {
  position: relative;
  margin: 20px 0;
}

.user-signup-divider-line {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}

.user-signup-divider-line hr {
  width: 100%;
  border: none;
  border-top: 1px solid #d1d5db;
  margin: 0;
}

html.dark .user-signup-divider-line hr {
  border-color: #374151;
}

.user-signup-divider-text {
  position: relative;
  display: flex;
  justify-content: center;
}

.user-signup-divider-text span {
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.7);
  color: #6b7280;
  font-size: 12px;
}

html.dark .user-signup-divider-text span {
  background: rgba(17, 24, 39, 0.7);
  color: #9ca3af;
}

/* Email toggle button */
.user-signup-email-toggle {
  position: relative;
  top: -10px;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  background: transparent;
  border: 2px solid #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
  font-family: inherit;
  transition:
    border-color 0.2s,
    background 0.2s,
    transform 0.15s;
}

.user-signup-email-toggle:hover {
  border-color: #9ca3af;
  background: #f9fafb;
  transform: scale(1.01);
}

html.dark .user-signup-email-toggle {
  border-color: #374151;
  color: #d1d5db;
}

html.dark .user-signup-email-toggle:hover {
  border-color: #4b5563;
  background: #1f2937;
}

/* Form back button */
.user-signup-form-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: #6b7280;
  padding: 0;
  margin-bottom: 16px;
  font-family: inherit;
  transition: color 0.2s;
}

.user-signup-form-back:hover {
  color: #111827;
}

html.dark .user-signup-form-back {
  color: #9ca3af;
}

html.dark .user-signup-form-back:hover {
  color: #f9fafb;
}

/* Fields */
.user-signup-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.user-signup-field {
  display: flex;
  flex-direction: column;
}

.user-signup-field label {
  font-size: 14px;
  color: #374151;
  margin-bottom: 6px;
  display: block;
}

html.dark .user-signup-field label {
  color: #d1d5db;
}

.user-signup-field input {
  height: 44px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  color: #111827;
  outline: none;
  transition:
    box-shadow 0.2s,
    border-color 0.2s;
  width: 100%;
  box-sizing: border-box;
}

.user-signup-field input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
}

html.dark .user-signup-field input {
  border-color: #374151;
  background: rgba(31, 41, 55, 0.8);
  color: #f9fafb;
}

html.dark .user-signup-field input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
}

.user-signup-field input::placeholder {
  color: #9ca3af;
}

/* Error message */
.user-signup-error {
  font-size: 13px;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
  border-radius: 8px;
  padding: 8px 12px;
}

html.dark .user-signup-error {
  color: #fca5a5;
  background: rgba(220, 38, 38, 0.15);
  border-color: rgba(220, 38, 38, 0.35);
}

/* Submit button */
.user-signup-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(to right, #2563eb, #9333ea, #4f46e5);
  color: white;
  font-size: 15px;
  cursor: pointer;
  font-family: inherit;
  transition:
    background 0.2s,
    transform 0.15s;
  margin-top: 4px;
}

.user-signup-submit-btn:hover {
  background: linear-gradient(to right, #1d4ed8, #7e22ce, #4338ca);
  transform: scale(1.01);
}

.user-signup-submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

.user-signup-submit-btn span {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Success state */
.user-signup-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 16px 0;
}

.user-signup-success-icon {
  width: 64px;
  height: 64px;
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.1),
    rgba(147, 51, 234, 0.1)
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2563eb;
}

html.dark .user-signup-success-icon {
  background: linear-gradient(
    135deg,
    rgba(59, 130, 246, 0.15),
    rgba(147, 51, 234, 0.15)
  );
  color: #60a5fa;
}

.user-signup-success h3 {
  font-size: 20px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

html.dark .user-signup-success h3 {
  color: #f9fafb;
}

.user-signup-success p {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
  line-height: 1.5;
}

html.dark .user-signup-success p {
  color: #9ca3af;
}

/* Spinner */
.user-signup-submit-spinner {
  display: block;
  animation: user-signup-spin 1s linear infinite;
}

@keyframes user-signup-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Sign in link */
.user-signup-signin-link {
  text-align: center;
  padding-top: 20px;
  border-top: 1px solid #d1d5db;
}

html.dark .user-signup-signin-link {
  border-color: #374151;
}

.user-signup-signin-link p {
  font-size: 14px;
  color: #4b5563;
  margin: 0;
}

html.dark .user-signup-signin-link p {
  color: #9ca3af;
}

.user-signup-signin-link a {
  color: #2563eb;
  text-decoration: none;
  transition: color 0.2s;
}

.user-signup-signin-link a:hover {
  color: #1d4ed8;
}

html.dark .user-signup-signin-link a {
  color: #60a5fa;
}

html.dark .user-signup-signin-link a:hover {
  color: #93c5fd;
}

/* ============================================================
   Shared keyframes
   ============================================================ */

@keyframes user-signup-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes user-signup-scale-in {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

/* ============================================================
   USER USAGE 2 — Two-column layout
   Left: upgrade offer  |  Right: radial progress stats
   ============================================================ */

/* Container */
.user-usage-container {
  min-height: 100vh;
  padding: 24px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    #f9fafb 0%,
    rgba(250, 245, 255, 0.3) 50%,
    rgba(253, 242, 248, 0.4) 100%
  );
}

html.dark .user-usage-container {
  background: linear-gradient(
    135deg,
    #111827 0%,
    rgba(59, 7, 100, 0.2) 50%,
    rgba(80, 7, 36, 0.2) 100%
  );
}

/* Two-column card */
.user-usage-card {
  display: flex;
  flex-direction: row;
  max-width: 900px;
  width: 100%;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(40px);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  animation: user-usage-fade-in 0.6s ease-out both;
}

html.dark .user-usage-card {
  background: rgba(31, 41, 55, 0.65);
  border: 1px solid rgba(55, 65, 81, 0.4);
}

/* ── LEFT COLUMN ── */
.user-usage-left {
  flex: 1;
  padding: 48px 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.user-usage-left-premium {
  align-items: center;
  text-align: center;
  justify-content: center;
}

/* Alert badge */
.user-usage-alert-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(254, 215, 170, 0.9);
  border: 1px solid rgba(253, 186, 116, 0.7);
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #c2410c;
  margin-bottom: 20px;
  animation: user-usage-fade-in 0.5s ease-out 0.1s both;
}

html.dark .user-usage-alert-badge {
  background: rgba(124, 45, 18, 0.5);
  border: 1px solid rgba(154, 52, 18, 0.6);
  color: #fb923c;
}

.user-usage-alert-badge-near {
  background: rgba(254, 243, 199, 0.9);
  border: 1px solid rgba(252, 211, 77, 0.7);
  color: #b45309;
}

html.dark .user-usage-alert-badge-near {
  background: rgba(120, 53, 15, 0.5);
  border: 1px solid rgba(180, 83, 9, 0.6);
  color: #fbbf24;
}

.user-usage-alert-badge-unlimited {
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.4);
  color: #4f46e5;
}

html.dark .user-usage-alert-badge-unlimited {
  background: rgba(99, 102, 241, 0.2);
  border: 1px solid rgba(129, 140, 248, 0.5);
  color: #818cf8;
}

.user-usage-alert-badge-info {
  background: rgba(219, 234, 254, 0.9);
  border: 1px solid rgba(147, 197, 253, 0.7);
  color: #1d4ed8;
}

html.dark .user-usage-alert-badge-info {
  background: rgba(30, 58, 138, 0.5);
  border: 1px solid rgba(37, 99, 235, 0.6);
  color: #93c5fd;
}

.user-usage-alert-badge-icon {
  flex-shrink: 0;
}

/* Title */
.user-usage-title {
  font-size: 1.875rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.2;
  margin-bottom: 12px;
  animation: user-usage-fade-in 0.5s ease-out 0.2s both;
}

html.dark .user-usage-title {
  color: #f3f4f6;
}

/* Subtitle */
.user-usage-subtitle {
  font-size: 0.9375rem;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 24px;
  animation: user-usage-fade-in 0.5s ease-out 0.25s both;
}

html.dark .user-usage-subtitle {
  color: #9ca3af;
}

.user-usage-subtitle-bold {
  font-weight: 600;
  color: #374151;
}

html.dark .user-usage-subtitle-bold {
  color: #e5e7eb;
}

/* Plan upgrade row */
.user-usage-plan-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  animation: user-usage-fade-in 0.5s ease-out 0.3s both;
}

.user-usage-plan-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.user-usage-plan-pill-current {
  background: rgba(229, 231, 235, 0.8);
  border: 1px solid rgba(209, 213, 219, 0.8);
  color: #6b7280;
}

html.dark .user-usage-plan-pill-current {
  background: rgba(55, 65, 81, 0.6);
  border: 1px solid rgba(75, 85, 99, 0.6);
  color: #9ca3af;
}

.user-usage-plan-pill-premium {
  background: linear-gradient(
    135deg,
    rgba(243, 232, 255, 0.9),
    rgba(237, 233, 254, 0.9)
  );
  border: 1px solid rgba(216, 180, 254, 0.7);
  color: #7c3aed;
}

html.dark .user-usage-plan-pill-premium {
  background: linear-gradient(
    135deg,
    rgba(88, 28, 135, 0.4),
    rgba(109, 40, 217, 0.3)
  );
  border: 1px solid rgba(139, 92, 246, 0.5);
  color: #c084fc;
}

.user-usage-plan-arrow {
  color: #9ca3af;
  display: flex;
  align-items: center;
}

html.dark .user-usage-plan-arrow {
  color: #6b7280;
}

/* Unlock label */
.user-usage-unlock-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
  margin-bottom: 12px;
  animation: user-usage-fade-in 0.5s ease-out 0.35s both;
}

html.dark .user-usage-unlock-label {
  color: #6b7280;
}

/* Features list */
.user-usage-features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: user-usage-fade-in 0.5s ease-out 0.4s both;
}

.user-usage-feature {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  color: #374151;
}

html.dark .user-usage-feature {
  color: #d1d5db;
}

.user-usage-feature-check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(243, 232, 255, 0.9),
    rgba(237, 233, 254, 0.9)
  );
  border: 1px solid rgba(216, 180, 254, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #7c3aed;
}

html.dark .user-usage-feature-check {
  background: rgba(88, 28, 135, 0.3);
  border: 1px solid rgba(139, 92, 246, 0.4);
  color: #c084fc;
}

/* Primary upgrade button */
.user-usage-btn-primary {
  position: relative;
  width: 100%;
  padding: 14px 28px;
  background: linear-gradient(90deg, #9333ea, #db2777, #9333ea);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 10px 20px -4px rgba(147, 51, 234, 0.4);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  margin-bottom: 12px;
  animation: user-usage-fade-in 0.5s ease-out 0.45s both;
}

.user-usage-btn-primary:hover {
  transform: scale(1.02);
  box-shadow: 0 16px 28px -4px rgba(147, 51, 234, 0.5);
}

.user-usage-btn-primary:active {
  transform: scale(0.98);
}

/* Animated gradient background layer */
.user-usage-btn-primary-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #9333ea, #db2777, #9333ea);
  background-size: 200% 200%;
  animation: user-usage-gradient-shift 3s ease infinite alternate;
}

/* Sweeping shine layer */
.user-usage-btn-primary-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  pointer-events: none;
  animation: user-usage-shine-sweep 3.5s ease-in-out infinite;
}

/* Blurred glow layer */
.user-usage-btn-primary-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(167, 139, 250, 0.5),
    rgba(244, 114, 182, 0.5)
  );
  filter: blur(1rem);
  pointer-events: none;
}

/* Label sits above all layers */
.user-usage-btn-primary-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}

.user-usage-zap-icon {
  transition: transform 0.2s ease;
}

.user-usage-btn-primary:hover .user-usage-zap-icon {
  transform: rotate(12deg);
}

/* Back link */
.user-usage-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: center;
  padding: 6px 12px;
  font-size: 0.875rem;
  color: #9ca3af;
  text-decoration: none;
  transition: color 0.2s ease;
  animation: user-usage-fade-in 0.5s ease-out 0.5s both;
}

.user-usage-back-btn:hover {
  color: #374151;
}

html.dark .user-usage-back-btn {
  color: #6b7280;
}

html.dark .user-usage-back-btn:hover {
  color: #d1d5db;
}

.user-usage-back-icon {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.user-usage-back-btn:hover .user-usage-back-icon {
  transform: translateX(-3px);
}

/* ── VERTICAL DIVIDER ── */
.user-usage-divider {
  width: 1px;
  background: rgba(229, 231, 235, 0.8);
  flex-shrink: 0;
  margin: 24px 0;
}

html.dark .user-usage-divider {
  background: rgba(55, 65, 81, 0.8);
}

/* ── RIGHT COLUMN ── */
.user-usage-right {
  flex: 0 0 360px;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    160deg,
    rgba(255, 247, 237, 0.6) 0%,
    rgba(254, 242, 242, 0.5) 100%
  );
  animation: user-usage-fade-in 0.6s ease-out 0.15s both;
}

html.dark .user-usage-right {
  background: linear-gradient(
    160deg,
    rgba(124, 45, 18, 0.12) 0%,
    rgba(127, 29, 29, 0.12) 100%
  );
}

/* Stats heading */
.user-usage-stats-heading {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9ca3af;
  margin-bottom: 28px;
}

html.dark .user-usage-stats-heading {
  color: #6b7280;
}

/* Ring wrapper */
.user-usage-ring-wrapper {
  position: relative;
  width: 220px;
  height: 220px;
  margin-bottom: 20px;
}

.user-usage-ring {
  width: 100%;
  height: 100%;
  display: block;
}

/* SVG track circle — styled via CSS to support dark mode */
.user-usage-ring-track {
  stroke: #e5e7eb;
}

html.dark .user-usage-ring-track {
  stroke: #374151;
}

/* Progress circle — animates drawing on load */
.user-usage-ring-progress {
  animation: user-usage-ring-fill 1.4s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both;
}

/* Infinite shimmer arc — rotates continuously around the track */
.user-usage-ring-shimmer {
  transform-origin: 110px 110px;
  animation: user-usage-ring-spin 2s linear infinite;
}

html.dark .user-usage-ring-shimmer {
  opacity: 0.7;
}

/* Center text overlay */
.user-usage-ring-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.user-usage-ring-number {
  font-size: 3.25rem;
  font-weight: 700;
  color: #111827;
  line-height: 1;
}

html.dark .user-usage-ring-number {
  color: #f3f4f6;
}

.user-usage-ring-total {
  font-size: 0.875rem;
  color: #9ca3af;
  margin-top: 4px;
}

html.dark .user-usage-ring-total {
  color: #6b7280;
}

.user-usage-ring-pct {
  font-size: 1rem;
  font-weight: 700;
  color: #ea580c;
  margin-top: 2px;
}

html.dark .user-usage-ring-pct {
  color: #fb923c;
}

/* Feature label */
.user-usage-feature-label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #374151;
  text-align: center;
  margin-bottom: 16px;
}

html.dark .user-usage-feature-label {
  color: #d1d5db;
}

/* Badges row */
.user-usage-badges-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 24px;
}

.user-usage-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(254, 215, 170, 0.9);
  border: 1px solid rgba(253, 186, 116, 0.6);
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #c2410c;
}

html.dark .user-usage-status-badge {
  background: rgba(124, 45, 18, 0.4);
  border: 1px solid rgba(154, 52, 18, 0.5);
  color: #fb923c;
}

.user-usage-status-dot {
  width: 8px;
  height: 8px;
  background: #f97316;
  border-radius: 50%;
  flex-shrink: 0;
  animation: user-usage-pulse-dot 1.5s ease-in-out infinite;
}

.user-usage-reset-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(243, 232, 255, 0.9);
  border: 1px solid rgba(216, 180, 254, 0.6);
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #7c3aed;
}

html.dark .user-usage-reset-badge {
  background: rgba(88, 28, 135, 0.3);
  border: 1px solid rgba(139, 92, 246, 0.4);
  color: #c084fc;
}

/* Secondary button */
.user-usage-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(16px);
  color: #374151;
  border: 1.5px solid #d1d5db;
  border-radius: 10px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.user-usage-btn-secondary:hover {
  text-decoration: none;
}

html.dark .user-usage-btn-secondary {
  background: rgba(31, 41, 55, 0.7);
  color: #e5e7eb;
  border: 1.5px solid #4b5563;
}

.user-usage-btn-secondary:hover {
  background: white;
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

html.dark .user-usage-btn-secondary:hover {
  background: #1f2937;
}

/* ── INACTIVE SUBSCRIPTION WARNING ── */

.user-usage-card:has(.user-usage-inactive-warning) .user-usage-container,
.user-usage-container:has(.user-usage-inactive-warning) {
  background: linear-gradient(
    135deg,
    #fffbeb 0%,
    rgba(255, 251, 235, 0.6) 50%,
    rgba(255, 243, 205, 0.4) 100%
  );
}

html.dark .user-usage-container:has(.user-usage-inactive-warning) {
  background: linear-gradient(
    135deg,
    #111827 0%,
    rgba(58, 46, 0, 0.3) 50%,
    rgba(28, 26, 15, 0.2) 100%
  );
}

.user-usage-card:has(.user-usage-inactive-warning) {
  border-color: #fcd34d;
}

html.dark .user-usage-card:has(.user-usage-inactive-warning) {
  border-color: #92400e;
}

.user-usage-inactive-warning {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: auto;
  margin-bottom: 1rem;
}

.user-usage-inactive-warning-msg {
  font-size: 0.9375rem;
  color: #92400e;
  line-height: 1.6;
  margin: 0;
}

html.dark .user-usage-inactive-warning-msg {
  color: #fcd34d;
}

.user-usage-inactive-warning-btn {
  display: block;
  width: 100%;
  background: transparent;
  color: #92400e;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 12px;
  border: 1.5px solid #d97706;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
  transition: background 0.2s ease, color 0.2s ease;
}

.user-usage-inactive-warning-btn:hover {
  background: #d97706;
  color: #fff;
  text-decoration: none;
}

html.dark .user-usage-inactive-warning-btn {
  color: #fcd34d;
  border-color: #92400e;
}

html.dark .user-usage-inactive-warning-btn:hover {
  background: #92400e;
  color: #fff;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .user-usage-card {
    flex-direction: column;
  }

  .user-usage-left {
    padding: 36px 28px 28px;
  }

  .user-usage-divider {
    width: auto;
    height: 1px;
    margin: 0 24px;
  }

  .user-usage-right {
    flex: none;
    padding: 28px 28px 36px;
  }

  .user-usage-ring-wrapper {
    width: 180px;
    height: 180px;
  }
}

/* ── ANIMATIONS ── */
@keyframes user-usage-fade-in {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Ring draws from empty → actual usage percentage on load */
@keyframes user-usage-ring-fill {
  from {
    stroke-dashoffset: 565.49;
  }
  to {
    stroke-dashoffset: var(--user-usage-ring-end-offset, 0);
  }
}

@keyframes user-usage-gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes user-usage-shine-sweep {
  0% {
    transform: translateX(-200%) skewX(12deg);
  }
  30% {
    transform: translateX(300%) skewX(12deg);
  }
  100% {
    transform: translateX(300%) skewX(12deg);
  }
}

@keyframes user-usage-ring-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes user-usage-pulse-dot {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.5;
  }
}

/* ============================================================
   Page Layout
   ============================================================ */

.user-reset-password-page {
  height: 100vh;
  background: white;
  display: flex;
  overflow: hidden;
}

html.dark .user-reset-password-page {
  background: #111827;
}

/* ============================================================
   Left Side
   ============================================================ */

.user-reset-password-left {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .user-reset-password-left {
    width: 50%;
  }
}

.user-reset-password-bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    #f9fafb,
    rgba(219, 234, 254, 0.3),
    rgba(237, 233, 254, 0.3)
  );
}

html.dark .user-reset-password-bg-gradient {
  background: linear-gradient(
    to bottom right,
    #030712,
    rgba(23, 37, 84, 0.2),
    rgba(46, 16, 101, 0.2)
  );
}

.user-reset-password-bg-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.user-reset-password-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
}

.user-reset-password-orb-top-right {
  top: 0;
  right: 0;
  width: 384px;
  height: 384px;
  background: rgba(96, 165, 250, 0.1);
}

html.dark .user-reset-password-orb-top-right {
  background: rgba(59, 130, 246, 0.05);
}

.user-reset-password-orb-bottom-left {
  bottom: 0;
  left: 0;
  width: 384px;
  height: 384px;
  background: rgba(167, 139, 250, 0.1);
}

html.dark .user-reset-password-orb-bottom-left {
  background: rgba(124, 58, 237, 0.05);
}

/* ============================================================
   Form Wrapper
   ============================================================ */

.user-reset-password-form-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
}

/* ============================================================
   Top Row (back button + lang switcher)
   ============================================================ */

.user-reset-password-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}

.user-reset-password-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6b7280;
  font-size: 14px;
  text-decoration: none;
}

.user-reset-password-back:hover {
  color: #111827;
}

html.dark .user-reset-password-back {
  color: #9ca3af;
}

html.dark .user-reset-password-back:hover {
  color: #f9fafb;
}

/* ============================================================
   Lang Switcher
   ============================================================ */

.user-reset-password-lang {
  position: relative;
}

.user-reset-password-lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.625rem;
  border-radius: 0.375rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background-color: rgba(255, 255, 255, 0.7);
  color: #374151;
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease;
  text-transform: uppercase;
  font-family: inherit;
}

.user-reset-password-lang-btn:hover {
  background-color: rgba(255, 255, 255, 0.9);
  border-color: rgba(0, 0, 0, 0.2);
}

html.dark .user-reset-password-lang-btn {
  background-color: rgba(55, 65, 81, 0.7);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e5e7eb;
}

html.dark .user-reset-password-lang-btn:hover {
  background-color: rgba(75, 85, 99, 0.9);
}

.user-reset-password-lang-flag {
  width: 1.125rem;
  height: 0.875rem;
  object-fit: cover;
  border-radius: 0.125rem;
  flex-shrink: 0;
}

.user-reset-password-lang-code {
  line-height: 1;
}

.user-reset-password-lang-chevron {
  opacity: 0.6;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.user-reset-password-lang-chevron-open {
  transform: rotate(180deg);
}

.user-reset-password-lang-dropdown {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  min-width: 7rem;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  z-index: 100;
}

html.dark .user-reset-password-lang-dropdown {
  background-color: #1f2937;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.user-reset-password-lang-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  color: #374151;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  transition: background-color 0.1s ease;
}

.user-reset-password-lang-option:hover {
  text-decoration: none;
  background-color: #f3f4f6;
  color: #111827;
}

html.dark .user-reset-password-lang-option {
  color: #e5e7eb;
}

html.dark .user-reset-password-lang-option:hover {
  background-color: #374151;
  color: #f9fafb;
}

.user-reset-password-lang-option-active {
  background-color: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
}

html.dark .user-reset-password-lang-option-active {
  background-color: rgba(29, 78, 216, 0.15);
  color: #93c5fd;
}

.user-reset-password-lang-option-active:hover {
  background-color: #dbeafe;
}

html.dark .user-reset-password-lang-option-active:hover {
  background-color: rgba(29, 78, 216, 0.25);
}

html.dark .user-reset-password-back {
  color: #9ca3af;
}

html.dark .user-reset-password-back:hover {
  color: #f9fafb;
}

/* ============================================================
   Logo Mobile
   ============================================================ */

.user-reset-password-logo-mobile {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  font-weight: 700;
  font-size: 18px;
  color: #111827;
}

html.dark .user-reset-password-logo-mobile {
  color: #f9fafb;
}

@media (min-width: 1024px) {
  .user-reset-password-logo-mobile {
    display: none;
  }
}

.user-reset-password-logo-icon {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

/* ============================================================
   Card
   ============================================================ */

.user-reset-password-card {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

html.dark .user-reset-password-card {
  background: #1f2937;
  border-color: #374151;
}

.user-reset-password-card-header {
  margin-bottom: 24px;
}

.user-reset-password-card-header h2 {
  font-size: 24px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px;
}

html.dark .user-reset-password-card-header h2 {
  color: #f9fafb;
}

.user-reset-password-card-header p {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

html.dark .user-reset-password-card-header p {
  color: #9ca3af;
}

/* ============================================================
   Form Fields
   ============================================================ */

.user-reset-password-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.user-reset-password-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.user-reset-password-field label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

html.dark .user-reset-password-field label {
  color: #d1d5db;
}

.user-reset-password-field input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  color: #111827;
  background: white;
  box-sizing: border-box;
  outline: none;
}

.user-reset-password-field input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

html.dark .user-reset-password-field input {
  background: #111827;
  border-color: #374151;
  color: #f9fafb;
}

html.dark .user-reset-password-field input:focus {
  border-color: #3b82f6;
}

/* ============================================================
   Error
   ============================================================ */

.user-reset-password-error {
  font-size: 13px;
  color: #dc2626;
  background: rgba(220, 38, 38, 0.05);
  border: 1px solid rgba(220, 38, 38, 0.2);
  border-radius: 8px;
  padding: 10px 14px;
}

html.dark .user-reset-password-error {
  color: #fca5a5;
  background: rgba(220, 38, 38, 0.1);
  border-color: rgba(220, 38, 38, 0.3);
}

/* ============================================================
   Submit Button
   ============================================================ */

.user-reset-password-submit {
  width: 100%;
  padding: 12px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.user-reset-password-submit:hover {
  opacity: 0.9;
}

.user-reset-password-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.user-reset-password-submit-spinner {
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   Right Side
   ============================================================ */

.user-reset-password-right {
  display: none;
}

@media (min-width: 1024px) {
  .user-reset-password-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 50%;
    background: linear-gradient(135deg, #1e3a5f, #1e1b4b);
    padding: 48px;
    position: relative;
    overflow: hidden;
    color: white;
  }
}

.user-reset-password-right-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.user-reset-password-right-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
}

.user-reset-password-right-orb-1 {
  top: -100px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: rgba(96, 165, 250, 0.15);
}

.user-reset-password-right-orb-2 {
  bottom: -100px;
  left: -100px;
  width: 400px;
  height: 400px;
  background: rgba(167, 139, 250, 0.15);
}

.user-reset-password-right-content {
  position: relative;
  z-index: 10;
  color: white;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-bottom: 24px;
}

.user-reset-password-right-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  color: white;
  margin-bottom: 32px;
}

.user-reset-password-right-logo-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-reset-password-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  margin-bottom: 16px;
  animation: user-reset-password-badge-in 0.4s 0.2s
    cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes user-reset-password-badge-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.user-reset-password-badge span {
  font-size: 12px;
}

.user-reset-password-right-content h1 {
  color: white;
  font-size: 40px;
  line-height: 1.2;
  margin: 0 0 16px 0;
  font-weight: 400;
  animation: user-reset-password-fade-up 0.5s 0.3s ease both;
}

@media (min-width: 1280px) {
  .user-reset-password-right-content h1 {
    font-size: 48px;
  }
}

@keyframes user-reset-password-fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.user-reset-password-right-heading-brand {
  background: linear-gradient(135deg, #60a5fa, #c084fc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.user-reset-password-right-content > p {
  font-size: 16px;
  color: #bfdbfe;
  margin: 0 0 32px 0;
  line-height: 1.6;
  max-width: 448px;
  opacity: 0.9;
  animation: user-reset-password-fade-in 0.5s 0.4s ease both;
}

@keyframes user-reset-password-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.user-reset-password-tips {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 448px;
}

.user-reset-password-tip {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  backdrop-filter: blur(4px);
  background: rgba(255, 255, 255, 0.05);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition:
    background 0.2s,
    transform 0.2s;
  animation: user-reset-password-slide-in 0.5s ease both;
}

.user-reset-password-tip:nth-child(1) {
  animation-delay: 0.5s;
}
.user-reset-password-tip:nth-child(2) {
  animation-delay: 0.6s;
}
.user-reset-password-tip:nth-child(3) {
  animation-delay: 0.7s;
}

.user-reset-password-tip:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: scale(1.02);
}

@keyframes user-reset-password-slide-in {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.user-reset-password-tip-icon {
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.user-reset-password-tip-body h3 {
  font-size: 14px;
  margin: 0 0 2px 0;
  font-weight: 400;
  color: white;
}

.user-reset-password-tip-body p {
  font-size: 12px;
  color: #bfdbfe;
  margin: 0;
  line-height: 1.5;
  opacity: 0.9;
}

.user-reset-password-right-footer {
  position: relative;
  z-index: 10;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
}

/* ============================================================
   Page Layout
   ============================================================ */

.user-verify-email-page {
  min-height: 100vh;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  position: relative;
  overflow: hidden;
}

html.dark .user-verify-email-page {
  background: #111827;
}

/* ============================================================
   Background
   ============================================================ */

.user-verify-email-bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom right,
    #f9fafb,
    rgba(219, 234, 254, 0.3),
    rgba(237, 233, 254, 0.3)
  );
}

html.dark .user-verify-email-bg-gradient {
  background: linear-gradient(
    to bottom right,
    #030712,
    rgba(23, 37, 84, 0.2),
    rgba(46, 16, 101, 0.2)
  );
}

.user-verify-email-bg-orbs {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.user-verify-email-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
}

.user-verify-email-orb-top-right {
  top: 0;
  right: 0;
  width: 384px;
  height: 384px;
  background: rgba(96, 165, 250, 0.1);
}

html.dark .user-verify-email-orb-top-right {
  background: rgba(59, 130, 246, 0.05);
}

.user-verify-email-orb-bottom-left {
  bottom: 0;
  left: 0;
  width: 384px;
  height: 384px;
  background: rgba(167, 139, 250, 0.1);
}

html.dark .user-verify-email-orb-bottom-left {
  background: rgba(124, 58, 237, 0.05);
}

/* ============================================================
   Wrapper
   ============================================================ */

.user-verify-email-wrapper {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  max-width: 440px;
}

/* ============================================================
   Logo
   ============================================================ */

.user-verify-email-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  font-weight: 700;
  color: #111827;
}

html.dark .user-verify-email-logo {
  color: #f9fafb;
}

.user-verify-email-logo-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

/* ============================================================
   Card
   ============================================================ */

.user-verify-email-card {
  width: 100%;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

html.dark .user-verify-email-card {
  background: #1f2937;
  border-color: #374151;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.user-verify-email-card h2 {
  font-size: 22px;
  font-weight: 700;
  color: #111827;
  margin: 0;
}

html.dark .user-verify-email-card h2 {
  color: #f9fafb;
}

.user-verify-email-card p {
  font-size: 15px;
  color: #6b7280;
  margin: 0;
  line-height: 1.6;
}

html.dark .user-verify-email-card p {
  color: #9ca3af;
}

/* ============================================================
   Card Icon
   ============================================================ */

.user-verify-email-card-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.user-verify-email-card-icon-loading {
  background: linear-gradient(
    135deg,
    rgba(79, 70, 229, 0.12),
    rgba(6, 182, 212, 0.12)
  );
  color: #4f46e5;
}

html.dark .user-verify-email-card-icon-loading {
  background: linear-gradient(
    135deg,
    rgba(79, 70, 229, 0.2),
    rgba(6, 182, 212, 0.2)
  );
  color: #818cf8;
}

.user-verify-email-card-icon-success {
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.12),
    rgba(5, 150, 105, 0.12)
  );
  color: #059669;
}

html.dark .user-verify-email-card-icon-success {
  background: linear-gradient(
    135deg,
    rgba(16, 185, 129, 0.2),
    rgba(5, 150, 105, 0.2)
  );
  color: #34d399;
}

.user-verify-email-card-icon-error {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.12),
    rgba(220, 38, 38, 0.12)
  );
  color: #dc2626;
}

html.dark .user-verify-email-card-icon-error {
  background: linear-gradient(
    135deg,
    rgba(239, 68, 68, 0.2),
    rgba(220, 38, 38, 0.2)
  );
  color: #f87171;
}

/* ============================================================
   Spinner
   ============================================================ */

@keyframes user-verify-email-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.user-verify-email-spinner {
  animation: user-verify-email-spin 0.8s linear infinite;
}

/* ============================================================
   Back Link
   ============================================================ */

.user-verify-email-back-link {
  display: inline-flex;
  align-items: center;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #4f46e5;
  text-decoration: none;
}

.user-verify-email-back-link:hover {
  text-decoration: underline;
}

html.dark .user-verify-email-back-link {
  color: #818cf8;
}