@layer responsive {
@media (max-width:859px) {
  body,body[data-template-density="compact"],body[data-template-density="spacious"] { max-width:100%; padding:0 20px calc(32px + var(--bottom-nav-height) + var(--safe-bottom)); }
  .app-header { min-height:76px; margin-bottom:24px; padding:16px 0; gap:12px; flex-wrap:nowrap; }
  /* 顶部账户栏不是表单按钮行：避免 legacy 的 button{width:100%}
     把“退出”撑满剩余空间，进而把品牌锁定区压成 0 宽。 */
  .brand-lockup { display:flex; align-items:center; flex:1 1 auto; min-width:0; }
  .app-title { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; }
  .brand-caption { display:none; }
  .app-title { font-size:22px; }
  .app-user { font-size:12px; }
  .header-right { width:auto; flex:0 0 auto; min-width:0; margin-left:0; justify-content:flex-end; }
  #logout-btn { width:auto; max-width:none; flex:0 0 auto; margin:0; }
  #app-main { display:block; width:100%; }
  .page-heading { padding:0 0 24px; }
  .page-heading h1 { font-size:26px; letter-spacing:.01em; }
  .page-heading .page-intro { font-size:14px; margin-top:8px; }
  .page-kicker { margin-bottom:10px; }
  #bazi-zone { max-width:620px; }
  #bazi-zone .mode-switch { margin-bottom:20px; max-width:none; }
  #profile-card { padding:24px; }
  #profile-actions-card { padding:0 24px 24px; }
  #profile-card .date-time-row { grid-template-columns:1fr; gap:20px; }
  .form-heading { align-items:flex-start; flex-wrap:wrap; margin-bottom:16px; gap:4px 12px; }
  .form-heading h2 { font-size:20px; }
  .sample-aux-link { flex:0 0 auto; min-height:32px; }
  #profile-card .seg-switch { max-width:none; }
  #profile-card .form-row { margin-top:20px; }
  .subject-select { margin-top:20px; }
  .ss-row { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ss-btn { font-size:13px; padding:10px 4px; min-height:44px; }
  .gender-big .gender-btn { gap:6px; padding:10px 6px; font-size:14px; }
  .advanced-details .row > div { flex-basis:100%; }
  .bazi-input-grid,.grid-2col,.grid-3col { grid-template-columns:1fr; }
  .xg-inline { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
  .xg-inline > div:last-child { grid-column:1 / -1; }
  .xg-inline > div:last-child > label:first-child { display:none; }
  .xg-inline > div:last-child > label { white-space:normal; }
  .ask-box { flex-direction:column; align-items:stretch; }
  .ask-box textarea,.ask-box button { width:100%; }
  .ask-box textarea { flex:none; }
  .ii-ask-row { flex-wrap:wrap; }
  .ii-ask-row .ask-send { width:100%; max-width:none; }
  .image-interpret { padding:20px; }
  .ii-row { flex-wrap:wrap; }
  .ii-file-btn { min-width:0; }
  .card { padding:24px; }
  #daily-zone,#settings-zone { padding:0; }
  .card h3 { font-size:20px; }
  .settings-hero { display:block; padding-top:0; }
  .settings-hero h3 { font-size:26px; }
  .settings-section,.settings-card { padding:24px; }
  .settings-grid { grid-template-columns:1fr; }
  .settings-account-row { flex-wrap:wrap; gap:12px; }
  .settings-account-main { flex:1; }
  .settings-actions { width:100%; margin-top:8px; }
  .settings-actions button { flex:1; }
  .settings-records { grid-template-columns:1fr; }
  .settings-section-title small { width:100%; }
  #daily-zone > .page-kicker { padding-top:0; }
  #daily-zone > h3 { font-size:25px; gap:10px; margin-bottom:24px; }
  #daily-zone #daily-user-profile { padding:24px; }
  .daily-member-actions { grid-template-columns:1fr; }
  /* 移动端签到区改为单列后必须占满父级，否则 flex item 会按内容宽度收缩，右侧留下大片空白。 */
  #daily-zone .daily-profile-actions > .daily-member-actions { flex:1 1 100%; width:100%; min-width:0; }
  .daily-streak-progress { justify-content:center; }
  .daily-quick-grid { grid-template-columns:1fr; }
  .daily-module-guide { margin:20px 0; padding:18px; }
  .daily-module-guide-heading h3 { font-size:20px; }
  .daily-module-guide-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .daily-module-card { min-height:84px; padding:13px; }
  .daily-module-card-primary { grid-column:1 / -1; }
  .daily-reading-tier > summary { line-height:1.5; }
  #daily-zone .daily-anchor-nav { top:0; gap:4px; }
  #daily-zone .daily-retention-actions { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end; }
  #daily-zone .daily-retention-actions #daily-share-btn { grid-column:1 / -1; }
  #daily-zone .daily-retention-actions .daily-retention-action-note { grid-column:1 / -1; min-height:22px; }
  #daily-zone .daily-retention-actions button { width:100%; min-height:44px; height:auto; margin:0; }
  #daily-zone .daily-retention-actions .daily-reminder-time-label {
    display:flex;
    align-items:center;
    gap:5px;
    width:100%;
    min-width:0;
    margin:0;
  }
  #daily-zone .daily-retention-actions .daily-reminder-time-label input {
    flex:1 1 auto;
    width:auto;
    min-width:0;
  }
  #daily-zone .daily-history-actions { flex-wrap:nowrap; overflow-x:auto; padding:2px 0 8px; scroll-snap-type:x proximity; }
  #daily-zone .daily-history-actions > span { flex:0 0 auto; }
  #daily-zone .daily-history-actions button { flex:0 0 auto; width:auto; min-width:64px; min-height:44px; height:44px; margin:0; padding:8px 12px; scroll-snap-align:start; }
  .daily-hero { display:flex; flex-direction:column; padding:20px; gap:16px; }
  .daily-hero-main { align-items:stretch; gap:14px; }
  .daily-live-time { min-width:154px; padding:12px 14px; }
  .daily-live-time time { font-size:34px; }
  .daily-traditional-hours { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .daily-traditional-hour { grid-template-columns:1fr auto; gap:3px 8px; }
  .daily-traditional-hour span { grid-column:1 / -1; grid-row:2; }
  .daily-almanac-pair { grid-template-columns:1fr; gap:0; }
  .daily-plain-heading { margin-top:28px; }
  .daily-energy-head { order:0; margin:0; padding:16px; }
  .daily-section { padding:20px; }
  .daily-highlights-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .bazi-chart-table,.liuyao-table { display:block; max-width:100%; overflow-x:auto; }
  .qimen-grid,.ziwei-palaces { max-width:100%; overflow-x:auto; }
  body.keyboard-visible .mobile-bottom-nav { display:none !important; }
  .btn-free-wrap { width:100%; flex-wrap:wrap; }
  .btn-free-wrap .cost-badge { white-space:normal; margin:6px 0; }
  .module-drawer-content { max-height:85dvh; overflow-y:auto; }
  .account-menu-panel { width:min(320px,calc(100vw - 40px)); right:0; }
  .auth-card .auth-close {
    width:44px;
    height:44px;
    min-height:44px;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    font-size:24px;
    line-height:1;
  }
  .account-menu > summary {
    min-height:44px;
    padding:8px 8px 8px 12px;
    border-radius:8px;
  }
  .account-menu > summary::after {
    content:'▾';
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:18px;
    height:18px;
    color:var(--ink-soft);
    font-size:13px;
    transition:transform .15s ease;
  }
  .account-menu[open] > summary::after { transform:rotate(180deg); }
  .account-menu > summary:hover,
  .account-menu > summary:focus-visible { background:var(--bg-subtle); color:var(--ink); }

  .pwa-update-prompt { align-items:flex-start; padding:12px 14px; }
  .pwa-update-actions { display:flex; flex:0 0 auto; gap:6px; }
  .pwa-update-actions button { width:auto; min-width:64px; margin:0; }

  .mobile-primary-action {
    display:none;
    align-items:center;
    gap:12px;
    margin:0 0 16px;
    padding:10px 12px;
    background:var(--card);
    border:1px solid var(--line);
    border-radius:10px;
    box-shadow:none;
  }
  .mobile-primary-action:not([hidden]) { display:flex; }
  .mobile-primary-action-label {
    min-width:0;
    flex:1;
    color:var(--ink-soft);
    font-size:13px;
    line-height:1.4;
    white-space:nowrap;
  }
  .mobile-primary-action .btn-primary {
    flex:0 0 auto;
    width:auto;
    min-width:148px;
    min-height:48px;
    margin:0;
  }
  body.drawer-open .mobile-primary-action { display:none !important; }
}

@layer responsive {
  @media (max-width:900px) {
    .qimen-form-grid, .ziwei-form-grid,
    #qm-input-panel > .row:not(.qimen-form-grid),
    #zw-input-panel > .row:not(.ziwei-form-grid) { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .module-action-cell, .module-secondary-action { grid-column:1 / -1; }
    .module-action-cell .btn-free-wrap, .module-secondary-action .btn-free-wrap { max-width:none; }
  }
  @media (max-width:640px) {
    #liuyao-zone, #qimen-zone, #ziwei-zone, #xiang-zone { padding:18px 16px; }
    #liuyao-zone > h3, #qimen-zone > h3, #ziwei-zone > h3, #xiang-zone > h3 { font-size:21px; }
    .module-input-panel { padding:14px; }
    .qimen-form-grid, .ziwei-form-grid,
    #qm-input-panel > .row:not(.qimen-form-grid),
    #zw-input-panel > .row:not(.ziwei-form-grid) { grid-template-columns:1fr; gap:14px; }
    .qm-time-row { display:grid; grid-template-columns:1fr; gap:8px; }
    .qm-time-row input,.qm-time-row .btn-small { width:100%; min-width:0; }
    .result-flow-heading { display:grid; grid-template-columns:1fr; gap:10px; }
    .result-next-action { width:100%; }
    .daily-almanac-details > summary { align-items:flex-start; gap:10px; }
    .daily-almanac-details > summary small { line-height:1.55; }
    .daily-almanac-body { padding-top:14px; }
    .module-collapsed-summary { align-items:flex-start; }
    .module-summary-copy { align-items:flex-start; }
    .module-edit-input { min-width:84px; }
    .liuyao-method-help > summary { align-items:flex-start; flex-direction:column; gap:2px; }
    /* 六爻成卦后的徽标栏：按钮必须回到容器内换行，不能被 desktop 的
       min-width:fit-content 撑出 449px 手机视口。 */
    #liuyao-zone .hexagram-badge-bar { flex-direction:column; align-items:stretch; gap:8px; }
    #liuyao-zone .hexagram-badge-bar > span { width:100%; }
    #liuyao-zone .hexagram-badge-bar .actions { flex:0 0 auto; width:100%; max-width:100%; flex-wrap:wrap; }
    #liuyao-zone .hexagram-badge-bar .actions button,
    #liuyao-zone .hexagram-badge-bar .actions .btn-text { flex:1 1 100%; width:100%; min-width:0; max-width:100%; white-space:normal; overflow-wrap:anywhere; margin-top:0; }
    #xiang-zone .subtabs { position:sticky; top:72px; z-index:4; padding:6px; background:var(--bg); }
    #daily-zone #daily-user-profile { padding:12px 14px; }
    #daily-zone .daily-profile-actions { margin-top:4px; }
    #daily-zone .daily-hero, #daily-zone .daily-section, #daily-zone .daily-foundation { padding:16px; }
    .pwa-update-prompt.active { position:relative; right:auto; top:auto; bottom:auto; width:auto; margin:8px 0 12px; }
  }
}
@media (max-width:430px) {
  body,body[data-template-density="compact"],body[data-template-density="spacious"] { padding-inline:16px; }
  #profile-card { padding:20px; }
  #profile-actions-card { padding:0 20px 24px; }
  .page-heading h1 { font-size:25px; }
  .ss-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ss-row .ss-btn:last-child { grid-column:1 / -1; }
  .settings-section,.settings-card { padding:20px; }
  .daily-highlights-grid { grid-template-columns:1fr; }
  .daily-hero-main { display:grid; grid-template-columns:1fr; }
  .daily-live-time { width:100%; }
  .app-user { display:inline-block; max-width:138px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
}
}