/* ===========================================================
   拾词 · 手机端（PWA / Mobile Web App）
   仅在 ≤720px 生效；桌面端保持原有布局
   =========================================================== */

.mobile-home-head,
.mobile-page-title,
.mobile-upload-actions,
.mobile-sample-link,
.mobile-quick-links,
.mobile-install,
.mobile-copy { display: none; }

@media (max-width: 720px) {
  :root {
    --mobile-nav-h: 66px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
  }
  html { -webkit-text-size-adjust: 100%; }
  body {
    padding-bottom: calc(var(--mobile-nav-h) + var(--safe-bottom) + 8px);
    overscroll-behavior-y: contain;
    -webkit-tap-highlight-color: transparent;
  }
  button, a, input, select, textarea { touch-action: manipulation; }
  .view {
    padding: 0 16px calc(26px + var(--safe-bottom));
    max-width: 560px;
    margin: 0 auto;
  }
  .view-workspace { padding-top: 0; }

  /* ---------- app bar ---------- */
  .topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    height: auto;
    min-height: calc(56px + var(--safe-top));
    padding: var(--safe-top) 14px 0;
    gap: 10px;
    background: var(--paper);
    border-bottom: 1px solid color-mix(in srgb, var(--line) 65%, transparent);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  .brand { gap: 8px; }
  .brand-text { display: none; }
  .logo-mark { width: 35px; height: 35px; border-radius: 10px; font-size: 18px; }
  .mobile-page-title {
    display: block;
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--ink);
    white-space: nowrap;
  }
  .topbar-actions { margin-left: auto; gap: 2px; }
  .topbar-actions .icon-btn { width: 38px; height: 38px; }
  .topbar-actions .icon-btn .icon { width: 19px; height: 19px; }

  /* ---------- bottom tab bar ---------- */
  .main-nav {
    height: calc(var(--mobile-nav-h) + var(--safe-bottom));
    padding: 5px 8px calc(5px + var(--safe-bottom));
    background: color-mix(in srgb, var(--card-solid) 96%, transparent);
    border-top: 1px solid var(--line);
    box-shadow: 0 -8px 30px -20px rgba(30, 22, 10, .45);
  }
  .nav-btn {
    height: 54px;
    gap: 3px;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--muted);
    border-radius: 14px;
  }
  .nav-btn .icon {
    width: 19px;
    height: 19px;
    padding: 4px;
    box-sizing: content-box;
    border-radius: 9px;
    transition: background .18s, color .18s;
  }
  .nav-btn.active { background: transparent; color: var(--accent); box-shadow: none; }
  .nav-btn.active .icon { background: var(--accent-soft); }
  .nav-btn.active::after { display: none; }
  .nav-badge { top: 4px; right: calc(50% - 21px); }

  /* ---------- mobile home ---------- */
  .mobile-home-head {
    display: block;
    padding: 18px 2px 4px;
  }
  .mobile-home-head .eyebrow { margin-bottom: 10px; font-size: 9.5px; letter-spacing: .17em; }
  .mobile-home-head h1 {
    font-size: clamp(31px, 9vw, 38px);
    line-height: 1.17;
    letter-spacing: -.035em;
    font-weight: 700;
    color: var(--ink);
  }
  .mobile-lede {
    margin-top: 10px;
    max-width: 320px;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.65;
  }
  .mobile-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; }
  .mobile-stats span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: color-mix(in srgb, var(--card) 65%, transparent);
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
  }
  .mobile-stats .icon { width: 12px; height: 12px; color: var(--accent); }
  .mobile-install {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: var(--card);
    color: var(--muted);
    font-size: 11px;
    font-weight: 600;
  }
  .mobile-install .icon { width: 14px; height: 14px; color: var(--accent); }

  .hero, .features, .site-footer { display: none; }

  .import-grid { display: block; margin-top: 16px; }
  .upload-card {
    padding: 22px 20px 18px;
    text-align: left;
    align-items: stretch;
    min-height: 0;
    border: 1px solid var(--line);
    border-style: solid;
    border-radius: 26px;
    background:
      radial-gradient(340px 190px at 100% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
      linear-gradient(150deg, var(--card), color-mix(in srgb, var(--card) 88%, var(--accent-soft)));
    box-shadow: var(--shadow);
  }
  .upload-card:hover, .upload-card:focus-visible, .upload-card.dragging { transform: none; border-color: var(--line); }
  .upload-icon {
    width: 50px;
    height: 50px;
    margin: 0 0 14px;
    border-radius: 15px;
    background: var(--ink);
    color: var(--paper);
  }
  .upload-icon .icon { width: 22px; height: 22px; }
  .upload-icon .upload-ring { inset: -5px; border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
  .upload-card h2 { font-size: 23px; letter-spacing: -.02em; }
  .upload-desc { margin-top: 5px; font-size: 12.5px; line-height: 1.6; }
  .desktop-copy { display: none; }
  .mobile-copy { display: inline; }
  .upload-card > .upload-actions:not(.mobile-upload-actions) { display: none; }
  .mobile-upload-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 18px;
    width: 100%;
  }
  .mobile-upload-actions .btn { height: 50px; border-radius: 14px; font-size: 14px; }
  .mobile-upload-actions .btn-primary { box-shadow: 0 12px 26px -14px rgba(217, 85, 47, .8); }
  .mobile-quick-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
  }
  .mobile-sample-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: auto;
    margin-top: 0;
    padding: 4px 0;
    border: 0;
    background: none;
    color: var(--accent);
    font-size: 11.5px;
    font-weight: 600;
  }
  .quick-link-divider { width: 1px; height: 11px; background: var(--line-strong); }
  .mobile-sample-link:active { opacity: .65; }
  .upload-note { margin-top: 8px; text-align: center; font-size: 9.5px; line-height: 1.5; }
  .upload-corners { display: none; }

  .side-stack { margin-top: 14px; gap: 12px; }
  .quick-card { padding: 17px 16px 14px; border-radius: 20px; }
  .quick-card .card-head { margin-bottom: 12px; }
  .quick-packs {
    display: flex;
    flex-direction: row;
    gap: 8px;
    overflow-x: auto;
    padding: 1px 1px 5px;
    margin: 0 -1px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .quick-packs::-webkit-scrollbar { display: none; }
  .quick-pack {
    flex: 0 0 154px;
    min-width: 154px;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    padding: 12px;
    border: 1px solid var(--line);
    background: var(--card-solid);
    border-radius: 14px;
    scroll-snap-align: start;
  }
  .quick-pack:hover { background: var(--card-solid); border-color: var(--line); }
  .quick-pack:active { transform: scale(.985); }
  .quick-pack-icon { width: 34px; height: 34px; border-radius: 10px; }
  .quick-pack-body b { font-size: 12.5px; }
  .quick-pack-body small { font-size: 9.5px; line-height: 1.35; }
  .quick-pack > .icon { display: none; }
  .quick-card .text-link { margin-top: 11px; font-size: 12px; }
  .tip-card { display: none; }

  .recent-strip { margin-top: 24px; }
  .recent-head { margin-bottom: 10px; }
  .recent-list { grid-template-columns: 1fr; gap: 8px; }
  .recent-item { padding: 13px 14px; border-radius: 14px; }
  .recent-score { width: 40px; height: 40px; }

  /* ---------- generic mobile headings ---------- */
  .view-head { gap: 12px; margin: 14px 0 18px; }
  .view-head h1 { font-size: 27px; line-height: 1.2; }
  .view-head p:not(.eyebrow) { font-size: 12.5px; line-height: 1.6; margin-top: 6px; }
  .view-head .btn { align-self: flex-start; }
  .panel { border-radius: 20px; }
  .panel-head { padding: 14px 16px; }
  .panel-title h2 { font-size: 15px; }
  .panel-sub { display: none; }
  .card-kicker { font-size: 9.5px; }
  .side-card { border-radius: 18px; padding: 16px; }

  /* ---------- review ---------- */
  .view-review { padding-top: 14px; padding-bottom: calc(150px + var(--safe-bottom)); }
  .review-layout { display: block; }
  .review-aside { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 12px; }
  .review-aside > .image-card { grid-column: 1 / -1; }
  .review-aside > .stats-card { grid-column: 1 / -1; }
  .review-aside > .mini-tip { display: none; }
  .image-card { padding: 13px; border-radius: 18px; }
  .image-card-head { margin-bottom: 9px; font-size: 9.5px; }
  .image-thumb { width: 64px; height: 82px; }
  .image-card .text-link { margin-top: 9px; font-size: 11px; }
  .stats-card {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 9px 6px;
  }
  .stat-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 5px 10px;
    border-right: 1px solid var(--line);
    font-size: 10px;
  }
  .stat-line:last-child { border-right: 0; }
  .stat-line b { font-size: 17px; line-height: 1.2; }
  .review-main { gap: 12px; }
  .word-chips { padding: 14px; gap: 7px; min-height: 90px; }
  .word-chip { min-height: 43px; padding: 7px 8px 7px 8px; border-radius: 11px; }
  .chip-input { font-size: 18px; }
  .chip-index { font-size: 9px; }
  .add-word-row { padding: 11px 14px 13px; }
  .add-word-row input { font-size: 16px; }
  .setting-grid { padding: 15px 16px 18px; gap: 15px; }
  .setting-item > label { font-size: 11px; }
  .segmented button { height: 34px; padding: 0 12px; font-size: 12px; }
  .select { height: 40px; font-size: 16px; }
  .voice-row .tool-btn { height: 40px; width: 40px; }
  .review-footer {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(var(--mobile-nav-h) + var(--safe-bottom) + 8px);
    z-index: 45;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 11px 12px 11px 16px;
    border-radius: 18px;
    background: color-mix(in srgb, var(--ink) 94%, transparent);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px -16px rgba(20, 14, 6, .55);
  }
  .review-footer > div { flex: 1; min-width: 0; font-size: 10.5px; line-height: 1.45; }
  .review-footer b { font-size: 18px; }
  .review-footer small { font-size: 9px; }
  .review-footer .btn { width: auto; height: 46px; padding: 0 18px; border-radius: 12px; flex: 0 0 auto; }
  .review-footer .btn .icon { width: 16px; height: 16px; }

  /* ---------- dictation ---------- */
  .view-dictation { padding: 0 12px calc(14px + var(--safe-bottom)); }
  .dictation-top {
    position: sticky;
    top: calc(56px + var(--safe-top));
    z-index: 30;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 -4px 8px;
    padding: 9px 4px 8px;
    background: color-mix(in srgb, var(--paper) 90%, transparent);
    backdrop-filter: blur(14px);
  }
  .dictation-top > .btn { height: 32px; font-size: 10.5px; padding: 0 9px; }
  .dictation-top .progress-wrap { order: 3; flex-basis: 100%; }
  .progress-meta { font-size: 9.5px; }
  .score-pills { margin-left: auto; }
  .pill { height: 27px; padding: 0 8px; font-size: 11px; }
  .dictation-layout { display: block; }
  .dictation-side { display: none; }
  .word-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100dvh - 190px - var(--safe-top));
    padding: 52px 18px 22px;
    border-radius: 26px;
  }
  .word-card-top { position: absolute; top: 18px; left: 18px; right: 18px; }
  .speak-btn { width: 96px; height: 96px; margin: 16px auto 12px; }
  .speak-btn .icon { width: 34px; height: 34px; }
  .sound-wave { height: 18px; margin-bottom: 2px; }
  .word-meta { font-size: 11.5px; margin-bottom: 15px; min-height: 18px; }
  .hint-box { margin-bottom: 12px; padding: 9px 12px; font-size: 11.5px; }
  .answer-field input { height: 58px; font-size: 30px; letter-spacing: .045em; }
  .answer-field input::placeholder { font-size: 12.5px; }
  .letter-count { bottom: 8px; font-size: 9px; }
  .answer-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    width: 100%;
    margin-top: 15px;
  }
  .action-btn {
    height: 47px;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: 0 4px;
    border-radius: 12px;
    font-size: 9.5px;
  }
  .action-btn .icon { width: 17px; height: 17px; }
  .action-btn kbd { display: none; }
  .answer-submit {
    grid-column: 1 / -1;
    height: 50px;
    margin-left: 0;
    font-size: 14px;
    border-radius: 13px;
  }
  .feedback { margin-top: 14px; padding: 13px 14px; }
  .answer-diff { font-size: 20px; }
  .fb-actions .btn { min-height: 38px; }
  .key-hints { display: none; }

  /* ---------- result ---------- */
  .view-result { padding-top: 14px; }
  .result-view-head h1 { font-size: 28px; }
  .result-view-head > .btn { display: none; }
  .result-hero { display: block; padding: 4px 0 8px; margin-bottom: 16px; }
  .score-ring { width: 152px; height: 152px; margin: 0 auto 18px; }
  .ring-text b { font-size: 41px; }
  .ring-text span { margin-top: 6px; font-size: 9px; }
  .result-copy { text-align: center; }
  .grade-chip { margin: 0 auto; }
  .result-copy h2 { font-size: 27px; margin-top: 9px; }
  .result-note { font-size: 12px; margin-left: auto; margin-right: auto; }
  .result-stats { grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 16px; }
  .stat-tile { padding: 8px 4px; border-radius: 11px; text-align: center; }
  .stat-tile b { font-size: 18px; }
  .stat-tile span { font-size: 8.5px; }
  .result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 16px; }
  .result-actions .btn { height: 44px; padding: 0 8px; font-size: 12px; }
  .result-actions .btn:last-child { grid-column: 1 / -1; }
  .result-words { padding: 5px 8px 10px; }
  .result-word { padding: 10px 6px; gap: 10px; }
  .result-word-main b { font-size: 19px; }
  .result-word-main span { font-size: 10.5px; }
  .result-history-tease { flex-direction: column; align-items: flex-start; }
  .legend { display: none; }

  /* ---------- library ---------- */
  .view-library { padding-top: 14px; }
  .library-toolbar { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 14px; }
  .search-box { max-width: none; height: 44px; }
  .search-box input { font-size: 16px; }
  .filter-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .filter-chips::-webkit-scrollbar { display: none; }
  .filter-chip { flex: none; height: 34px; }
  .pack-grid { grid-template-columns: 1fr; gap: 11px; }
  .pack-card { padding: 17px; border-radius: 20px; }
  .pack-title h3 { font-size: 16px; }
  .pack-desc { font-size: 11.5px; margin: 10px 0 12px; }
  .pack-words { margin-bottom: 13px; }
  .pack-word { font-size: 12.5px; }
  .pack-actions { gap: 6px; }
  .pack-actions .btn { flex: 1; height: 38px; font-size: 11.5px; padding: 0 10px; }
  .pack-count { display: none; }
  .library-cta { margin-top: 18px; padding: 20px; border-radius: 20px; }
  .library-cta h3 { font-size: 18px; }

  /* ---------- wrongbook ---------- */
  .view-wrongbook { padding-top: 14px; }
  .wrong-stats { grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 13px; }
  .wrong-stat { padding: 11px 12px; border-radius: 14px; }
  .wrong-stat b { font-size: 22px; }
  .wrong-stat span { font-size: 9px; line-height: 1.4; }
  .wrong-list { padding: 4px 7px; }
  .wrong-row { padding: 11px 7px; gap: 9px; }
  .wrong-word b { font-size: 19px; }
  .wrong-word span { font-size: 10.5px; }
  .wrong-count { font-size: 9px; }
  .wrong-meta { display: none; }
  .wrong-row .icon-btn { width: 32px; height: 32px; }
  .wrong-footer {
    position: sticky;
    bottom: calc(var(--mobile-nav-h) + var(--safe-bottom));
    z-index: 20;
    gap: 8px;
    padding: 11px 14px;
    background: color-mix(in srgb, var(--card) 96%, transparent);
    backdrop-filter: blur(12px);
  }
  .wrong-footer > span { flex-basis: 100%; margin-right: 0; font-size: 10.5px; }
  .wrong-footer .btn { flex: 1; height: 42px; font-size: 12px; }
  .check-all { flex: none; }

  /* ---------- history ---------- */
  .view-history { padding-top: 14px; }
  .history-summary { grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
  .history-stat { padding: 12px; gap: 9px; border-radius: 14px; }
  .history-stat-icon { width: 32px; height: 32px; border-radius: 9px; }
  .history-stat b { font-size: 20px; }
  .history-stat span { font-size: 9px; }
  .chart-panel { margin-bottom: 12px; }
  .week-chart { height: 158px; padding: 16px 12px 13px; gap: 6px; }
  .bar-count { font-size: 9px; }
  .bar-label { font-size: 9px; }
  .session-list { padding: 4px 7px 8px; }
  .session-row { padding: 12px 6px; gap: 10px; }
  .session-score { width: 42px; height: 42px; font-size: 11px; }
  .session-actions { padding-left: 52px; }
  .session-actions .tool-btn { flex: 1; justify-content: center; }

  /* ---------- dialogs as bottom sheets ---------- */
  dialog.modal {
    position: fixed;
    inset: auto 0 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 90dvh;
    margin: 0;
    padding: 20px 18px calc(20px + var(--safe-bottom));
    border-radius: 24px 24px 0 0;
    border: 0;
    border-top: 1px solid var(--line);
    animation: sheetUp .25s cubic-bezier(.2,.8,.2,1);
  }
  dialog.modal::backdrop { background: rgba(20, 16, 10, .48); backdrop-filter: blur(3px); }
  @keyframes sheetUp { from { transform: translateY(24px); opacity: .6; } }
  .modal-head h2 { font-size: 21px; }
  .modal-head .eyebrow { font-size: 9.5px; }
  .modal-desc { font-size: 12px; }
  .modal-actions .btn { min-height: 44px; }
  dialog.lightbox { inset: 0; width: 100%; max-height: 100dvh; border-radius: 0; padding-top: calc(16px + var(--safe-top)); }
  dialog.lightbox img { max-height: 74dvh; }
  textarea#pasteInput { font-size: 16px; min-height: 180px; }

  /* ---------- processing ---------- */
  .processing-card {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 18px;
    border-radius: 22px;
    max-height: calc(100dvh - 32px);
    overflow: auto;
  }
  .proc-photo { height: 180px; }
  .proc-ring { width: 78px; height: 78px; right: 8px; bottom: -18px; }
  .processing-copy h2 { font-size: 21px; }
  .processing-copy > p:not(.eyebrow):not(.proc-note) { font-size: 12px; }
  .proc-note { display: none; }
  .proc-steps { display: none; }
  .proc-progress { margin: 14px 0 6px; }

  /* ---------- misc ---------- */
  .toast { bottom: calc(var(--mobile-nav-h) + var(--safe-bottom) + 16px); font-size: 12px; }
  .icon-btn { min-width: 40px; min-height: 40px; }
  .btn { min-height: 42px; }
  .review-footer .btn { min-height: 46px; }
  .word-chips, .add-word-row, .review-main { min-width: 0; }
  .result-wrap { max-width: none; }
  .result-history-tease { margin-top: 12px; }
}

@media (max-width: 380px) {
  .view { padding-left: 12px; padding-right: 12px; }
  .mobile-home-head h1 { font-size: 29px; }
  .mobile-upload-actions { grid-template-columns: 1fr; }
  .result-stats { grid-template-columns: repeat(2, 1fr); }
  .wrong-stats { grid-template-columns: 1fr 1fr; }
  .wrong-stats > :last-child { grid-column: span 2; }
}