/* Words Scroll UI polish layer: presentation only. */
:root {
  --ws-polish-nav-h: 74px;
  --ws-polish-radius-lg: 22px;
  --ws-polish-radius-md: 16px;
  --ws-polish-card: color-mix(in srgb, var(--card, var(--surface, #fffaf7)) 92%, transparent);
  --ws-polish-surface: color-mix(in srgb, var(--surface, #fffaf7) 94%, transparent);
  --ws-polish-border: color-mix(in srgb, var(--border, #d8cec5) 64%, transparent);
  --ws-polish-text: var(--text, #32272b);
  --ws-polish-muted: var(--mutedText, #766b70);
  --ws-polish-primary: var(--primary, #168b68);
  --ws-polish-shadow: 0 14px 40px color-mix(in srgb, var(--shadow, #21130f) 12%, transparent);
  --ws-polish-shadow-soft: 0 8px 24px color-mix(in srgb, var(--shadow, #21130f) 8%, transparent);
}

body.ws-apple-polish {
  color: var(--ws-polish-text);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.ws-apple-polish * {
  box-sizing: border-box;
}

.ws-apple-polish :where(.card, .panel, .section, .module, .tile, .stat-card, .summary-card, .setting-card, .profile-card, .wordbook-card, .achievement-card, .modal, .dialog, [class*="card"], [class*="panel"]) {
  border-color: var(--ws-polish-border);
}

.ws-apple-polish :where(button, .btn, [role="button"]) {
  letter-spacing: 0;
}

.ws-apple-polish .ws-polish-secondary-label,
.ws-apple-polish .ws-nav-extra {
  display: none !important;
}

.ws-apple-polish :where(img, svg) {
  max-width: 100%;
}

.ws-apple-polish .ws-hero-empty {
  position: relative;
  min-height: clamp(150px, 17vw, 230px);
}

.ws-apple-polish .ws-hero-fallback {
  position: absolute;
  inset: clamp(18px, 3vw, 36px) auto auto clamp(22px, 4vw, 52px);
  max-width: min(680px, 58vw);
  pointer-events: none;
  color: var(--ws-polish-text);
}

.ws-apple-polish .ws-hero-fallback__eyebrow {
  margin-bottom: 8px;
  color: var(--ws-polish-primary);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.ws-apple-polish .ws-hero-fallback__title {
  margin: 0;
  font-size: clamp(28px, 3vw, 48px);
  line-height: 1.08;
  font-weight: 760;
}

.ws-apple-polish .ws-hero-fallback__desc {
  margin: 14px 0 0;
  max-width: 54em;
  color: var(--ws-polish-muted);
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.7;
}

@media (min-width: 769px) {
  .ws-apple-polish :where(main, .main, .content, .page, .app-main, .workspace, [class*="content"], [class*="main"]) {
    min-width: 0;
  }

  .ws-apple-polish :where(.desktop-main, .main-content, .page-content, .app-content, .content-area, main) > :where(.container, .content-inner, .page-inner, .wrap, .wrapper) {
    width: min(100%, 1720px);
    margin-inline: auto;
  }

  .ws-apple-polish :where(.desktop-main, .main-content, .page-content, .app-content, .content-area, main) {
    padding-left: clamp(20px, 2vw, 36px);
    padding-right: clamp(20px, 2vw, 36px);
  }

  .ws-apple-polish :where(aside, .sidebar, .side-nav, [class*="sidebar"]) {
    border-color: color-mix(in srgb, var(--ws-polish-border) 78%, transparent);
  }

  .ws-apple-polish :where(aside, .sidebar, .side-nav, [class*="sidebar"]) :where(a, button, [role="button"], li) {
    min-height: 42px;
    font-size: 15px;
    line-height: 1.25;
  }

  .ws-apple-polish :where(h1, .page-title, [class*="title"]) {
    letter-spacing: 0;
  }

  .ws-apple-polish :where(.card, .panel, .module, .section, .tile, .stat-card, [class*="card"], [class*="panel"]) {
    border-radius: var(--ws-polish-radius-lg);
    box-shadow: var(--ws-polish-shadow-soft);
  }

  .ws-apple-polish :where(.hero, .banner, .carousel, [class*="hero"], [class*="banner"], [class*="carousel"]) {
    border-radius: 24px;
  }
}

@media (max-width: 768px) {
  :root {
    --ws-polish-nav-h: 78px;
  }

  .ws-apple-polish body,
  body.ws-apple-polish {
    width: 100%;
    max-width: 100vw;
  }

  .ws-apple-polish :where(.mobile-page, .mobile-shell, .page, main, .content, .app-content, [class*="mobile"], [class*="page"]) {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .ws-apple-polish:not(.ws-page-study) :where(main, .page, .mobile-page, .content, .app-content, [class*="mobile-shell"]) {
    padding-bottom: calc(var(--ws-polish-nav-h) + env(safe-area-inset-bottom) + 28px);
  }

  .ws-apple-polish :where(h1, h2, h3, .page-title, .section-title, .module-title, .card-title, .item-title) {
    letter-spacing: 0 !important;
  }

  .ws-apple-polish :where(.muted, .hint, .caption, .subtext, small, [class*="desc"], [class*="hint"], [class*="muted"]) {
    color: var(--ws-polish-muted) !important;
  }

  .ws-apple-polish :where(.tag, .badge, .pill, [class*="tag"], [class*="badge"], [class*="pill"]) {
    min-height: 22px;
    padding: 4px 8px;
    border-radius: 999px;
  }

  .ws-apple-polish :where(.number, .metric, .stat-number, [class*="count"], [class*="number"], [class*="metric"]) {
    letter-spacing: 0;
  }

  .ws-apple-polish :where(.card, .panel, .section, .module, .tile, .stat-card, .summary-card, .setting-card, .profile-card, .wordbook-card, .achievement-card, [class*="card"], [class*="panel"]) {
    border-radius: var(--ws-polish-radius-md) !important;
    padding: clamp(14px, 4vw, 17px) !important;
    box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow, #20130f) 7%, transparent) !important;
  }

  .ws-apple-polish :where(button, .btn, [role="button"]) {
    min-height: 36px;
    border-radius: 999px;
  }

  .ws-apple-polish :where(.primary, .primary-btn, .start-btn, [class*="primary"], [class*="start"]) {
    min-height: 44px;
  }

  .ws-apple-polish :where(.icon, .entry-icon, .nav-icon, [class*="icon"]) {
    width: 22px;
    height: 22px;
  }

  .ws-apple-polish :where(.settings-grid, .settings-list, .profile-actions, .shortcut-grid, [class*="settings"], [class*="shortcut"]) {
    gap: 10px !important;
  }

  .ws-apple-polish.ws-page-settings :where(.setting-card, .settings-section, .module, [class*="setting"], [class*="profile-card"]),
  .ws-apple-polish.ws-page-mine :where(.setting-card, .settings-section, .module, [class*="mine"], [class*="profile-card"]) {
    padding: 14px !important;
  }

  .ws-apple-polish.ws-page-settings :where(.setting-item, .menu-item, .entry, .action-item, [class*="item"]),
  .ws-apple-polish.ws-page-mine :where(.setting-item, .menu-item, .entry, .action-item, [class*="item"]) {
    min-height: 42px;
    padding: 8px 6px;
  }

  .ws-apple-polish.ws-page-settings :where(.setting-item img, .setting-item svg, .menu-item img, .menu-item svg, [class*="item"] img, [class*="item"] svg),
  .ws-apple-polish.ws-page-mine :where(.setting-item img, .setting-item svg, .menu-item img, .menu-item svg, [class*="item"] img, [class*="item"] svg) {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px;
  }

  .ws-apple-polish.ws-page-settings :where(.profile-card img, .avatar, [class*="avatar"]),
  .ws-apple-polish.ws-page-mine :where(.profile-card img, .avatar, [class*="avatar"]) {
    width: 52px !important;
    height: 52px !important;
  }

  .ws-apple-polish .ws-mobile-bottom-nav {
    position: fixed !important;
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: calc(10px + env(safe-area-inset-bottom));
    z-index: 80;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    align-items: center;
    gap: 0 !important;
    min-height: 64px;
    max-width: 520px;
    margin-inline: auto;
    padding: 7px 8px !important;
    border: 1px solid var(--ws-polish-border) !important;
    border-radius: 22px !important;
    background: color-mix(in srgb, var(--ws-polish-surface) 88%, transparent) !important;
    box-shadow: 0 14px 36px color-mix(in srgb, var(--shadow, #21130f) 14%, transparent) !important;
    backdrop-filter: blur(18px) saturate(1.08);
    -webkit-backdrop-filter: blur(18px) saturate(1.08);
    overflow: hidden;
  }

  .ws-apple-polish.ws-page-study .ws-mobile-bottom-nav {
    display: none !important;
  }

  .ws-apple-polish .ws-mobile-bottom-nav :where(a, button, [role="button"], .nav-item, li) {
    min-width: 0 !important;
    min-height: 50px !important;
    padding: 4px 2px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    border-radius: 15px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .ws-apple-polish .ws-mobile-bottom-nav :where(svg, img, .icon, [class*="icon"]) {
    width: 21px !important;
    height: 21px !important;
    margin: 0 !important;
  }

  .ws-apple-polish :where(.modal, .dialog, [role="dialog"], [class*="modal"], [class*="dialog"]) {
    max-width: min(92vw, 430px) !important;
    max-height: calc(100dvh - 36px - env(safe-area-inset-bottom)) !important;
    overflow: auto !important;
    border-radius: 22px !important;
  }

  .ws-apple-polish :where([class*="online"], [class*="dict"], [class*="dictionary"], [class*="translation"]) {
    max-width: 100%;
  }

  .ws-apple-polish .ws-hero-fallback {
    inset: 18px 18px auto 18px;
    max-width: none;
  }

  .ws-apple-polish .ws-hero-fallback__title {
    font-size: 24px;
  }
}