/* ==========================================================================
   朝夕说 · UI polish layer (2026-10-11)
   Scope: home / bank picker, mobile layout & nav, study dashboard + word cards.
   Loaded AFTER styles.css. Pure CSS overrides — delete this file and its
   <link> in index.html to revert. Backup: backups/ui-optimize-20261011/.
   ========================================================================== */

:root {
  --vp-card-line: #e6e3da;
  --vp-card-line-hover: #bfe5c8;
  --vp-card-radius: 14px;
  --vp-tile-bg: #eef8f1;
  --vp-tile-ink: #1f8f3d;
  --vp-card-shadow-hover: 0 8px 22px rgba(36, 42, 46, 0.07);
}

/* --------------------------------------------------------------------------
   1. Desktop home / bank picker
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  /* Hero was pushed to the vertical middle of a 100vh shell, leaving a large
     empty band above and below it. Let content flow from the top instead. */
  .home-shell:has(> .home-hero) { min-height: 0; gap: 8px; }
  .home-shell:has(> .home-hero) > .home-hero { margin-top: 0; }
  .home-shell:has(> .home-hero) > .bank-picker { margin-bottom: 0; }
  .home-hero.compact { padding-top: 40px; padding-bottom: 4px; }
  .home-hero.compact h1 { letter-spacing: -0.01em; }

  .desktop-bank-panels { gap: 32px; margin-top: 20px; }

  /* Both column headers sit on the same baseline (right one was 22px lower). */
  .desktop-bank-panels .dbp-col .industry-panel-section-head {
    margin: 0 2px 14px !important;
    min-height: 44px;
    align-items: flex-end;
  }
  /* Eyebrow label was 9px — too small to read. */
  .desktop-bank-panels .industry-panel-section-head span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #8a8f93;
  }
  .desktop-bank-panels .industry-panel-section-head strong {
    font-size: 19px;
    font-weight: 650;
    margin-top: 4px;
  }
  .desktop-bank-panels .industry-panel-section-head em {
    font-style: normal;
    font-size: 12px;
    color: #8a8f93;
  }

  /* One card language for every tile in both columns
     (was: white cards, grey/green-bordered cards and shadowed cards mixed). */
  .desktop-bank-panels .bank-card,
  .desktop-bank-panels .prof-book-card,
  .desktop-bank-panels .mobile-course-chip {
    min-height: 92px;
    padding: 16px 18px;
    border: 1px solid var(--vp-card-line) !important;
    border-radius: var(--vp-card-radius) !important;
    background: #fff !important;
    box-shadow: none !important;
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  }
  .desktop-bank-panels .bank-card:hover,
  .desktop-bank-panels .prof-book-card:hover,
  .desktop-bank-panels .mobile-course-chip:hover {
    border-color: var(--vp-card-line-hover) !important;
    box-shadow: var(--vp-card-shadow-hover) !important;
    transform: translateY(-1px);
  }
  .desktop-bank-panels .bank-card:focus-visible,
  .desktop-bank-panels .prof-book-card:focus-visible,
  .desktop-bank-panels .mobile-course-chip:focus-visible {
    outline: 2px solid #34c759;
    outline-offset: 2px;
  }

  .desktop-bank-panels .bank-grid,
  .desktop-bank-panels .prof-series-books,
  .desktop-bank-panels .mobile-chip-grid { gap: 12px !important; }
  /* The industry grid was butted directly against the textbook cards. */
  .desktop-bank-panels .prof-series-books + .mobile-chip-grid { margin-top: 12px !important; }

  /* Matching icon tiles (bare 22px glyphs vs grey squares before). */
  .desktop-bank-panels .bank-emoji,
  .desktop-bank-panels .prof-book-emoji,
  .desktop-bank-panels .mobile-course-chip > span:first-child {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center;
    border-radius: 10px !important;
    background: var(--vp-tile-bg) !important;
    color: var(--vp-tile-ink) !important;
    margin-bottom: 10px;
  }
  .desktop-bank-panels .bank-emoji svg,
  .desktop-bank-panels .prof-book-emoji svg,
  .desktop-bank-panels .mobile-course-chip > span:first-child svg {
    width: 19px !important;
    height: 19px !important;
  }

  .desktop-bank-panels .bank-name,
  .desktop-bank-panels .prof-book-main strong,
  .desktop-bank-panels .mobile-course-chip strong {
    font-size: 16px !important;
    font-weight: 650 !important;
    color: #1d1d1f;
  }
  /* Word counts: calm grey instead of small bright-green text. */
  .desktop-bank-panels .bank-meta,
  .desktop-bank-panels .prof-book-main em {
    margin-top: 4px;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    font-style: normal;
    color: #7a8085 !important;
  }
  .desktop-bank-panels .bank-series-caret { color: #9aa0a5; }
}

/* --------------------------------------------------------------------------
   2. Desktop study dashboard (今日任务)
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) {
  /* Tabs row lined up with the content column below it. */
  .home-shell .home-tabs {
    width: 100%;
    max-width: 1160px;
    margin: 0 auto 8px;
    box-sizing: border-box;
  }
  /* Right-hand progress card started 12px lower than the task card. */
  .home-shell .desk-home-grid .bank-progress-block { margin-top: 0 !important; }

  /* Primary + secondary actions in one tidy row
     (primary used to float between two stacked ghost buttons). */
  .home-shell .home-cta-row.big {
    margin-top: 4px !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
  }
  .home-shell .home-cta-row.big .home-goal-actions {
    display: flex;
    gap: 12px;
    min-width: 0;
    align-self: center;
  }
  .home-shell .home-cta-row.big .home-goal-actions > .btn-lg { width: auto; padding-inline: 22px; }
  .home-shell .home-cta-row.big > .btn-primary.btn-lg { min-width: 188px; }
}

/* --------------------------------------------------------------------------
   3. Mobile layout & bottom nav
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  /* 学习 / 好友PK tabs were flush with the screen edge (x≈2px). */
  .home-shell .home-tabs {
    margin: 6px 16px 12px !important;
  }
  .home-shell .home-tabs-actions .home-ic { width: 40px; height: 40px; }

  /* Bottom nav: clearer active state, steadier surface. */
  .mobile-bottom-nav,
  #vocpilot-mobile-bottom-nav.vocpilot-global-nav {
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
  }
  .mobile-bottom-nav button,
  #vocpilot-mobile-bottom-nav button {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.01em;
  }
  .mobile-bottom-nav button.is-active,
  .mobile-bottom-nav button[aria-current="page"],
  #vocpilot-mobile-bottom-nav button.is-active,
  #vocpilot-mobile-bottom-nav button[aria-current="page"] {
    font-weight: 650;
  }

  /* Bank tiles: consistent radius/border with desktop. */
  .mobile-app-home .mobile-course-chip:not([class*="series"]),
  .mobile-app-home .prof-book-card {
    border-radius: var(--vp-card-radius) !important;
  }
  .mobile-app-home .mobile-course-chip:active,
  .mobile-app-home .prof-book-card:active { transform: scale(0.98); }
}

/* --------------------------------------------------------------------------
   4. Study / word cards (all widths)
   -------------------------------------------------------------------------- */
/* Back button and progress on one row. On phones the progress text sat on
   its own line ~80px below the back arrow. */
.study-shell > .study-header:has(> .study-back-btn):has(> .study-progress) {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 0 4px !important;
}
.study-shell > .study-header > .study-progress { min-width: 0; }

/* Progress bar was a 4px line almost invisible on the background. */
.study-shell .study-progress .study-bar {
  height: 6px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #e4e2da !important;
  overflow: hidden;
}
.study-shell .study-progress .study-bar > span {
  min-width: 6px;
  border-radius: 999px;
  background: #34c759 !important;
}
/* Bar and "第 1 / 20" counter share one line, level with the back arrow. */
.study-shell > .study-header > .study-progress {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
}
.study-shell > .study-header > .study-progress > .study-bar { flex: 1 1 auto !important; min-width: 40px; width: auto !important; }
.study-shell .study-progress .study-meta {
  flex: 0 0 auto;
  margin: 0 !important;
  font-size: 12px !important;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Listening card: warm background to match the rest of the app (was a cool
   grey column on top of the warm page). */
.study-listen-shell { background: #f6f4ee !important; }
@media (max-width: 1024px) {
  .study-listen-shell { padding-top: 16px !important; }
}

/* "没听出来" read as stray caption text; make it a clear secondary action. */
.study-shell .study-listen-card .btn-dontknow {
  margin-top: 16px !important;
  min-height: 36px !important;
  padding: 6px 16px !important;
  border: 1px solid var(--vp-card-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: #4a5156 !important;
  font: 500 13px/1.2 system-ui, -apple-system, "PingFang SC", sans-serif !important;
}
.study-shell .study-listen-card .btn-dontknow:hover { border-color: #cfccc2 !important; }


@media (prefers-reduced-motion: reduce) {
  .desktop-bank-panels .bank-card,
  .desktop-bank-panels .prof-book-card,
  .desktop-bank-panels .mobile-course-chip { transition: none; }
  .desktop-bank-panels .bank-card:hover,
  .desktop-bank-panels .prof-book-card:hover,
  .desktop-bank-panels .mobile-course-chip:hover { transform: none; }
}