/* Mature application shell. Kept separate from the legacy style bundle so this
   visual system can evolve without adding another inline override block. */
:root {
  --surface-solid: #fbfcf8;
  --surface-soft: rgba(255, 255, 252, .78);
  --shadow-sm: 0 8px 28px rgba(23, 42, 29, .065);
  --shadow-md: 0 22px 60px rgba(23, 42, 29, .105);
}
body[data-theme="summer"] { --surface-solid: #f7fcfe; --surface-soft: rgba(248, 253, 255, .8); }
body[data-theme="autumn"] { --surface-solid: #fdf8ef; --surface-soft: rgba(253, 248, 239, .82); }
body[data-theme="winter"] {
  --surface-solid: #162136; --surface-soft: rgba(23, 34, 53, .82);
  --shadow-sm: 0 10px 30px rgba(0, 0, 0, .2); --shadow-md: 0 24px 64px rgba(0, 0, 0, .32);
}

html { scroll-behavior: smooth; }
body { font-feature-settings: "kern" 1, "tnum" 1; letter-spacing: .005em; }
::selection { color: var(--ink); background: color-mix(in srgb, var(--accent) 24%, transparent); }
.topbar, .hero, .query-studio, .today-panel, .hanzi-page, .card, .tabbar,
.drawer, .me-card, .review-mask { isolation: isolate; }

.hero, .query-studio, .today-panel, .hanzi-page, .demo-box {
  -webkit-backdrop-filter: blur(18px) saturate(1.12);
  backdrop-filter: blur(18px) saturate(1.12);
}
.hero { overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(180deg, var(--accent), var(--accent2));
}
.hero::after {
  content: ""; position: absolute; z-index: -1; width: 230px; height: 230px;
  right: -74px; bottom: -128px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent2) 13%, transparent);
}
.hero-kicker, .hero h1 { text-wrap: balance; }
.query-studio, .today-panel, .hanzi-page { box-shadow: var(--shadow-sm); }

.search input { transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; }
.search input::placeholder { color: color-mix(in srgb, var(--ink-soft) 78%, transparent); }
.search button { transition: transform .15s ease, background-color .2s ease, box-shadow .2s ease; }
.search button:active { transform: translateY(1px) scale(.98); }

.due-entry, .overview-stat, .assessment-history {
  transition: transform .16s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.due-entry:hover, .overview-stat:hover, .assessment-history:hover {
  transform: translateY(-1px); border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  box-shadow: 0 7px 18px var(--glow);
}
#streakEntry {
  min-height: 48px; font-weight: 730;
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 11%, var(--surface-solid)), var(--surface-solid));
}
#vocabEntry { margin-top: 9px; color: var(--accent-deep); font-weight: 720; }
.overview-stat { border: 1px solid transparent; }

.dots::before {
  content: "四季"; align-self: center; padding: 0 2px 0 3px;
  color: var(--ink-soft); font-size: 10px; letter-spacing: .08em;
}
.tabbar .tab { position: relative; }
.tabbar .tab::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--accent); opacity: 0; transform: translateX(-50%);
}
.tabbar .tab.active::after { opacity: 1; }

.drawer-mask { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.drawer, .me-card, .auth-card { box-shadow: var(--shadow-md); }
.auth-mask, .me-mask, .goal-mask, .shot-mask { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

@media (min-width: 961px) {
  body { padding-left: 106px; }
  .wrap {
    max-width: 1180px; min-height: 100vh; padding: 0 28px 62px;
    display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(340px, .78fr);
    align-content: start; column-gap: 20px; row-gap: 0;
  }
  .topbar, .hero, #result, #demoPanel, .err, .hanzi-page { grid-column: 1 / -1; }
  .topbar { min-height: 72px; padding: 16px 4px 10px; }
  .hero {
    grid-template-columns: minmax(0, 1fr) 180px; min-height: 238px;
    margin: 10px 0 6px; padding: 40px 54px; border-radius: 32px;
  }
  .hero h1 { max-width: 720px; font-size: clamp(38px, 4vw, 52px); letter-spacing: -.052em; }
  .hero .zh { margin-top: 9px; font-size: 15px; }
  #mascotHero { width: 144px; }
  #mascotHero .bubble { margin-bottom: 7px; }
  .query-studio { grid-column: 1; min-height: 278px; margin-top: 14px; padding: 26px; }
  .today-panel { grid-column: 2; margin-top: 14px; padding: 24px; }
  .studio-head span, .section-heading span { font-size: 18px; }
  .query-studio .search { margin-top: 24px; }
  .query-studio .hint { margin-top: 13px; }
  .query-studio .samples { margin-top: 20px; }
  .learning-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-stat { padding: 13px 6px; }
  .tabbar {
    left: 16px; top: 50%; bottom: auto; transform: translateY(-50%);
    width: 76px; padding: 8px; flex-direction: column; gap: 4px;
    border: 1px solid var(--line); border-radius: 24px; background: var(--surface-solid);
    box-shadow: 0 18px 44px rgba(18, 34, 23, .16);
  }
  .tabbar .tab { min-height: 65px; flex: none; gap: 4px; padding: 9px 3px 7px; border-radius: 16px; }
  .tabbar .tab .ti { height: 24px; }
  .tabbar .tab::after { bottom: 5px; }
  .tabbar .tab:hover { color: var(--accent-deep); background: color-mix(in srgb, var(--accent) 8%, transparent); }
  .tabbar .tab.active { background: color-mix(in srgb, var(--accent) 13%, transparent); }
  .drawer { width: min(460px, 40vw); }
  .me-mask { align-items: center; padding: 28px; }
  .me-card { max-height: calc(100vh - 56px); border: 1px solid var(--line); border-radius: 28px; }
  .auth-mask { align-items: center; padding: 24px; }
  .auth-card { border-radius: 28px; }
  body.has-result #result { width: min(920px, 100%); justify-self: center; }
  .card { border-radius: 28px; }
  body.hanzi-open .hanzi-page { width: min(920px, 100%); justify-self: center; padding: 30px; }
}

@media (max-width: 960px) {
  .wrap { max-width: 780px; }
  .tabbar { background: var(--surface-solid); }
}

@media (max-width: 720px) {
  body { line-height: 1.58; }
  .dots::before { display: none; }
  .hero { box-shadow: 0 14px 34px rgba(23, 42, 29, .07); }
  .query-studio, .today-panel, .hanzi-page { box-shadow: 0 8px 24px rgba(23, 42, 29, .055); }
  .tabbar .tab::after { bottom: 1px; }
  .today-panel { margin-bottom: 8px; }
}

@media (max-width: 380px) {
  .brand-copy small { display: none; }
  #authBtn { max-width: 112px; overflow: hidden; text-overflow: ellipsis; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}