/* Mobile nav / profile / history 20260730
   说明：只在手机端生效；新增底部功能栏、“我的”抽屉、历史记录入口。 */

@media (max-width: 820px) {
  body {
    padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
  }

  body.mobile-panel-open {
    overflow: hidden;
  }

  .mobile-bottom-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    z-index: 9200;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px;
    padding: 7px 7px 8px;
    border: 1px solid rgba(225, 213, 179, .52);
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(34, 65, 55, .86), rgba(18, 38, 32, .92));
    box-shadow: 0 16px 38px rgba(16, 31, 27, .32), inset 0 1px 0 rgba(255,255,255,.16);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }

  .mobile-bottom-nav button {
    appearance: none;
    border: 0;
    border-radius: 16px;
    min-width: 0;
    padding: 7px 2px 6px;
    color: rgba(255, 250, 230, .72);
    background: transparent;
    font: 600 11px/1.15 "Noto Serif SC", "Microsoft YaHei", system-ui, sans-serif;
    letter-spacing: .5px;
    text-align: center;
    transition: background .18s ease, color .18s ease, transform .18s ease;
  }

  .mobile-bottom-nav button .mi {
    display: block;
    margin-bottom: 3px;
    font-size: 16px;
    line-height: 1;
  }

  .mobile-bottom-nav button.is-active {
    color: #fff7d8;
    background: linear-gradient(180deg, rgba(227, 209, 149, .24), rgba(227, 209, 149, .10));
    box-shadow: inset 0 0 0 1px rgba(236, 221, 167, .28);
  }

  .mobile-bottom-nav button:active {
    transform: translateY(1px) scale(.98);
  }

  .mobile-bottom-nav button[hidden] {
    display: none !important;
  }

  .mobile-bottom-nav.is-compact {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .mobile-sheet-mask {
    position: fixed;
    inset: 0;
    z-index: 9400;
    display: none;
    align-items: flex-end;
    background: rgba(12, 24, 20, .42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  .mobile-sheet-mask.open {
    display: flex;
  }

  .mobile-sheet {
    width: 100%;
    max-height: min(78vh, 680px);
    overflow: auto;
    margin: 0;
    padding: 18px 18px calc(22px + env(safe-area-inset-bottom, 0px));
    border-radius: 26px 26px 0 0;
    border: 1px solid rgba(222, 207, 166, .56);
    border-bottom: 0;
    background:
      radial-gradient(circle at 20% 0%, rgba(233, 218, 168, .18), transparent 34%),
      linear-gradient(180deg, rgba(247, 242, 221, .96), rgba(233, 224, 196, .96));
    box-shadow: 0 -18px 46px rgba(16, 30, 26, .34);
    color: #2d372f;
  }

  .mobile-sheet-handle {
    width: 46px;
    height: 4px;
    margin: 0 auto 14px;
    border-radius: 999px;
    background: rgba(69, 91, 76, .25);
  }

  .mobile-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }

  .mobile-sheet-title {
    margin: 0;
    color: #294f43;
    font-size: 21px;
    line-height: 1.25;
    letter-spacing: 4px;
    font-weight: 700;
  }

  .mobile-sheet-subtitle {
    margin: 6px 0 0;
    color: rgba(56, 69, 58, .72);
    font-size: 12px;
    line-height: 1.65;
    letter-spacing: 1px;
  }

  .mobile-sheet-close {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(69, 91, 76, .2);
    background: rgba(255,255,255,.46);
    color: #315646;
    font-size: 20px;
    line-height: 1;
  }

  .mobile-profile-card,
  .mobile-history-card {
    margin: 12px 0;
    padding: 14px;
    border: 1px solid rgba(167, 151, 105, .30);
    border-radius: 18px;
    background: rgba(255, 252, 238, .55);
    box-shadow: 0 8px 22px rgba(69, 61, 43, .07);
  }

  .mobile-info-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dashed rgba(152, 135, 93, .30);
    color: rgba(41, 52, 43, .82);
    font-size: 13px;
    line-height: 1.55;
  }

  .mobile-info-row:last-child {
    border-bottom: 0;
  }

  .mobile-info-row b,
  .mobile-info-row strong {
    max-width: 62%;
    text-align: right;
    color: #244b3f;
    word-break: break-word;
  }

  .mobile-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    border: 1px solid rgba(151, 128, 74, .3);
    color: #6c4c17;
    background: rgba(235, 215, 150, .30);
  }

  .mobile-badge.on {
    color: #225840;
    background: rgba(112, 174, 132, .22);
    border-color: rgba(86, 150, 112, .35);
  }

  .mobile-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
  }

  .mobile-action-grid button,
  .mobile-wide-action {
    min-height: 42px;
    border: 1px solid rgba(74, 105, 88, .22);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(54, 101, 82, .95), rgba(31, 74, 61, .96));
    color: #fff7df;
    font-weight: 700;
    letter-spacing: 1px;
    box-shadow: 0 8px 18px rgba(35, 65, 54, .18);
  }

  .mobile-action-grid button.secondary,
  .mobile-wide-action.secondary {
    background: rgba(255, 255, 255, .44);
    color: #315646;
    box-shadow: none;
  }

  .mobile-wide-action {
    width: 100%;
    margin-top: 12px;
  }

  .mobile-history-empty {
    padding: 18px 8px;
    color: rgba(55, 65, 55, .66);
    font-size: 13px;
    line-height: 1.8;
    text-align: center;
  }

  .mobile-history-list {
    display: grid;
    gap: 10px;
  }

  .mobile-history-item {
    width: 100%;
    text-align: left;
    padding: 12px 13px;
    border: 1px solid rgba(151, 128, 74, .24);
    border-radius: 15px;
    background: rgba(255,255,255,.44);
    color: #2c3d34;
  }

  .mobile-history-item strong {
    display: block;
    color: #294f43;
    font-size: 14px;
    line-height: 1.5;
  }

  .mobile-history-item span {
    display: block;
    margin-top: 4px;
    color: rgba(53, 66, 55, .64);
    font-size: 12px;
    line-height: 1.55;
  }

  .mobile-history-item p {
    margin: 7px 0 0;
    color: rgba(45, 55, 47, .78);
    font-size: 12.5px;
    line-height: 1.65;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

@media (min-width: 821px) {
  .mobile-bottom-nav,
  .mobile-sheet-mask {
    display: none !important;
  }
}