/* Final theme layer for the 2026-06 UI/UX refresh. */
:root {
  --ux-surface: rgba(255, 255, 255, 0.92);
  --ux-border: rgba(19, 143, 136, 0.17);
  --ux-shadow: 0 12px 34px rgba(22, 103, 101, 0.10);
  --ux-shadow-float: 0 18px 48px rgba(22, 103, 101, 0.16);
  --ux-focus: 0 0 0 4px rgba(32, 191, 169, 0.18);
}

body {
  min-height: 100dvh;
  background:
    radial-gradient(circle at 8% -8%, rgba(32, 191, 169, 0.18), transparent 24rem),
    radial-gradient(circle at 100% 28%, rgba(73, 168, 242, 0.11), transparent 25rem),
    linear-gradient(180deg, #f8fdfc 0%, #f3faf9 100%);
}

.app-shell { padding-top: max(20px, env(safe-area-inset-top)); }
.topbar { margin-bottom: 20px; }
.brand-logo { border-radius: 20px; background: rgba(255,255,255,.72); }

.round-button,
.export-words-button,
.deck-icon-button,
.letter-filter button { min-width: 44px; min-height: 44px; }

button:focus-visible,
label:focus-within,
input:focus-visible,
textarea:focus-visible { outline: none; box-shadow: var(--ux-focus); }

.learning-prompt,
.collection-guide,
.review-hero,
.letters-hero,
.ai-tutor-entry {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--ux-border);
  box-shadow: var(--ux-shadow);
}

.learning-prompt::after,
.collection-guide::after,
.review-hero::after,
.letters-hero::after {
  position: absolute;
  z-index: -1;
  top: -42px;
  right: -28px;
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: rgba(32, 191, 169, 0.08);
  content: "";
}

.capture-card,
.word-card,
.recall-card,
.notebook-empty { border-color: var(--ux-border); box-shadow: var(--ux-shadow); }

.empty-state { padding-top: 38px; }
.input-methods { gap: 12px; }
.input-method {
  min-height: 76px;
  border-width: 1px;
  box-shadow: 0 5px 14px rgba(21, 104, 102, 0.06);
}
.input-method:hover,
.saved-word:hover { transform: translateY(-2px); }

.primary-button,
.save-button,
.review-start-button { min-height: 56px; border-radius: 17px; }

.analysis-loading {
  align-items: center;
  gap: 18px;
  padding: 20px;
  border: 1px solid var(--ux-border);
  border-radius: 24px;
  background: var(--ux-surface);
  box-shadow: var(--ux-shadow);
}
.analysis-mascot-wrap { position: relative; width: 108px; height: 108px; flex: 0 0 auto; }
.analysis-mascot-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  animation: detective-search 1.3s ease-in-out infinite alternate;
}
.analysis-mascot-wrap .loader {
  position: absolute;
  right: 2px;
  bottom: 6px;
  width: 26px;
  height: 26px;
  border-width: 3px;
  background: white;
}

.review-home-coach { width: 150px; height: 136px; }
.review-home-coach img {
  width: 154px;
  height: 154px;
  object-fit: contain;
  transform: translate(-4px, -8px);
}
.recall-coach img { width: 82px; height: 82px; object-fit: contain; }
.review-complete-mascot { height: 170px; }
.review-complete-mascot img { width: 190px; height: 180px; }
.review-complete-mascot span { z-index: 2; top: 8px; right: calc(50% - 82px); }

.letters-hero { min-height: 188px; padding-left: 168px; }
.letters-hero-mascot {
  position: absolute;
  z-index: 1;
  left: -18px;
  bottom: -14px;
  width: 196px;
  height: 196px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(21, 89, 88, .12));
}
.letters-hero > div,
.letters-hero .letter-demo-button { position: relative; z-index: 2; }

.dialog-mascot { width: 154px; height: 154px; top: -78px; }
.query-mascot-wrap img { transform: scale(1.34); }

.bottom-nav {
  width: min(calc(100% - 24px), 540px);
  bottom: max(10px, env(safe-area-inset-bottom));
  padding: 8px;
  border: 1px solid rgba(19, 143, 136, 0.16);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: var(--ux-shadow-float);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
}
.nav-item { min-height: 58px; border-radius: 17px; }
.nav-item.active { background: var(--blue-soft); color: var(--blue-deep); }
.nav-item.active .nav-icon-wrapper { border: 0; background: transparent; box-shadow: none; }

@media (max-width: 480px) {
  .app-shell {
    padding-right: 16px;
    padding-left: 16px;
    padding-bottom: calc(108px + env(safe-area-inset-bottom));
  }
  .topbar { margin-top: 2px; }
  .learning-prompt { min-height: 102px; }
  .empty-state { padding: 34px 18px 30px; }
  .analysis-loading { align-items: flex-start; }
  .analysis-mascot-wrap { width: 88px; height: 88px; }
  .review-hero { min-height: 190px; }
  .review-home-coach {
    position: absolute;
    right: -12px;
    bottom: -4px;
    opacity: .9;
  }
  .review-hero > div:first-child { position: relative; z-index: 2; max-width: 72%; }
  .letters-hero { min-height: 210px; padding: 24px 16px 22px 142px; }
  .letters-hero-mascot { left: -34px; bottom: -8px; width: 190px; height: 190px; }
  .letters-hero .letter-demo-button { align-self: flex-end; }
  .dialog-mascot { right: 42px; width: 138px; height: 138px; }
}

@media (prefers-reduced-motion: reduce) {
  .analysis-mascot-wrap img { animation: none; }
}