/*
 * 物星科云图片处理工具系统 V1.0.2
 * © 2018-2026 长沙木星科技有限公司
 * https://www.muxingkeji.com | 商业授权，禁止盗版、逆向、二次分发
 */
/* ===== H5 移动端 ===== */

:root {

  --h5-tabbar-h: 56px;

  --h5-safe-bottom: env(safe-area-inset-bottom, 0px);

}



@media (max-width: 860px) {

  body.h5-mode {

    padding-bottom: calc(var(--h5-tabbar-h) + var(--h5-safe-bottom));

  }



  body.h5-mode .site-footer {

    display: none;

  }



  body.h5-mode .wrap,

  body.h5-mode .member-wrap {

    width: calc(100% - 24px);

  }



  /* 顶栏：底部 Tab 已承担主导航，隐藏重复的功能条 */

  body.h5-mode .nav-toggle,

  body.h5-mode .site-nav-tools {

    display: none !important;

  }



  body.h5-mode .site-header {

    margin: 0 0 4px;

  }



  body.h5-mode .site-header-inner {

    width: calc(100% - 24px);

    padding: 10px 12px 8px;

  }



  body.h5-mode .site-header-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

  }



  body.h5-mode .site-header-user {

    width: auto;

    margin-left: 0;

    padding-top: 0;

    border-top: 0;

    flex-shrink: 0;

  }



  body.h5-mode .brand-tag {

    display: none;

  }



  body.h5-mode .hero {

    padding: 28px 0 20px;

  }



  body.h5-mode .hero h1 {

    font-size: clamp(26px, 7vw, 34px);

  }



  body.h5-mode .hero p br {

    display: none;

  }



  body.h5-mode .tool-cards {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;

  }



  body.h5-mode .tool-card {

    padding: 16px 14px;

  }



  body.h5-mode .tool-hero .hero-cta {

    flex-direction: column;

    align-items: stretch;

  }



  body.h5-mode .studio,

  body.h5-mode .studio-single {

    grid-template-columns: 1fr;

    gap: 16px;

  }



  body.h5-mode .panel-head {

    flex-wrap: wrap;

    gap: 8px;

  }



  body.h5-mode .actions {

    gap: 8px;

  }



  body.h5-mode .actions .btn {

    flex: 1 1 auto;

  }



  body.h5-mode .batch-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  /* 底部 Tab */

  .h5-tabbar {

    position: fixed;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 60;

    display: flex;

    align-items: stretch;

    height: calc(var(--h5-tabbar-h) + var(--h5-safe-bottom));

    padding-bottom: var(--h5-safe-bottom);

    background: rgba(255, 255, 255, 0.94);

    backdrop-filter: blur(16px) saturate(180%);

    -webkit-backdrop-filter: blur(16px) saturate(180%);

    border-top: 1px solid rgba(226, 232, 240, 0.95);

    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);

  }



  .h5-tab {

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 2px;

    padding: 6px 4px;

    border: none;

    background: transparent;

    color: var(--muted);

    text-decoration: none;

    font-family: inherit;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;

    transition: color .2s;

  }



  .h5-tab-icon {

    font-size: 18px;

    line-height: 1;

  }



  .h5-tab-label {

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.02em;

  }



  .h5-tab.is-active {

    color: var(--accent);

  }



  .h5-tab.is-active .h5-tab-icon {

    transform: scale(1.08);

  }



  /* 工具面板 */

  .h5-sheet-mask {

    position: fixed;

    inset: 0;

    z-index: 70;

    background: rgba(15, 23, 42, 0.45);

    opacity: 0;

    transition: opacity .25s;

  }



  .h5-sheet-mask.is-open {

    opacity: 1;

  }



  .h5-tools-sheet {

    position: fixed;

    left: 0;

    right: 0;

    bottom: 0;

    z-index: 80;

    max-height: min(72vh, 520px);

    padding: 0 16px calc(16px + var(--h5-safe-bottom));

    background: #fff;

    border-radius: 20px 20px 0 0;

    box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.12);

    transform: translateY(105%);

    transition: transform .28s cubic-bezier(.32, .72, 0, 1);

    overflow: auto;

  }



  .h5-tools-sheet.is-open {

    transform: translateY(0);

  }



  .h5-sheet-head {

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 16px 4px 12px;

    position: sticky;

    top: 0;

    background: #fff;

    border-bottom: 1px solid var(--line);

    margin-bottom: 12px;

  }



  .h5-sheet-head strong {

    font-size: 16px;

  }



  .h5-sheet-close {

    width: 36px;

    height: 36px;

    border: none;

    border-radius: 50%;

    background: var(--accent-soft);

    color: var(--text);

    font-size: 22px;

    line-height: 1;

    cursor: pointer;

  }



  .h5-tools-grid {

    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 10px;

    padding-bottom: 8px;

  }



  .h5-tool-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 6px;

    padding: 14px 6px;

    border-radius: 14px;

    background: var(--accent-soft);

    color: var(--text);

    text-decoration: none;

    font-size: 12px;

    font-weight: 600;

    text-align: center;

    -webkit-tap-highlight-color: transparent;

  }



  .h5-tool-icon {

    font-size: 20px;

    line-height: 1;

  }



  .h5-tool-name {

    line-height: 1.25;

  }



  .h5-tools-empty {

    grid-column: 1 / -1;

    padding: 24px 12px;

    text-align: center;

    color: var(--muted);

    font-size: 14px;

  }



  /* 会员中心 H5 */

  body.h5-mode .member-layout {

    display: block;

    padding-bottom: 16px;

  }



  body.h5-mode .member-side {

    display: flex;

    flex-direction: row;

    overflow-x: auto;

    gap: 8px;

    padding: 4px 2px 12px;

    margin-bottom: 12px;

    border-radius: 0;

    box-shadow: none;

    background: transparent;

    backdrop-filter: none;

    -webkit-backdrop-filter: none;

    border: 0;

    border-bottom: 1px solid var(--line);

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    position: sticky;

    top: 56px;

    z-index: 20;

  }



  body.h5-mode .member-side::-webkit-scrollbar {

    display: none;

  }



  body.h5-mode .member-side-profile,

  body.h5-mode .member-side-foot {

    display: none;

  }



  body.h5-mode .member-side-nav {

    flex-direction: row;

    padding: 0;

    gap: 8px;

  }



  body.h5-mode .member-nav-link {

    flex: 0 0 auto;

    white-space: nowrap;

    padding: 10px 16px;

    border-radius: 999px;

    border: 1px solid var(--line);

    background: rgba(255, 255, 255, 0.9);

    font-size: 13px;

    box-shadow: none;

  }



  body.h5-mode .member-nav-link.is-active {

    border-color: transparent;

    background: linear-gradient(135deg, var(--accent-light), var(--accent-2));

    color: #fff;

    box-shadow: none;

  }



  body.h5-mode .member-nav-icon {

    display: none;

  }



  body.h5-mode .member-hero,

  body.h5-mode .member-hero-home {

    padding: 22px 18px;

    margin-bottom: 14px;

    border-radius: 18px;

  }



  body.h5-mode .member-hero h1 {

    font-size: 24px;

  }



  body.h5-mode .member-hero-stat {

    width: 100%;

    margin-top: 4px;

  }



  body.h5-mode .member-metrics {

    gap: 12px;

    margin-bottom: 14px;

  }



  body.h5-mode .member-metric {

    padding: 16px 14px;

  }



  body.h5-mode .member-panel {

    border-radius: 18px;

  }



  body.h5-mode .member-wrap {

    padding-bottom: 0;

  }



  body.h5-mode .member-pkg-grid {

    grid-template-columns: 1fr;

    gap: 14px;

  }



  body.h5-mode .member-pkg-actions {

    flex-direction: column;

  }



  body.h5-mode .member-pkg-actions .btn {

    width: 100%;

    justify-content: center;

  }



  body.h5-mode .points-table-wrap {

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

  }



  body.h5-mode .points-table {

    min-width: 520px;

  }



  /* 支付弹窗 → 底部抽屉 */

  body.h5-mode .pay-modal {

    align-items: flex-end;

    padding: 0;

  }



  body.h5-mode .pay-modal-dialog {

    width: 100%;

    max-width: none;

    border-radius: 20px 20px 0 0;

    padding: 24px 20px calc(20px + var(--h5-safe-bottom));

    max-height: min(88vh, 640px);

    overflow: auto;

  }



  body.h5-mode .pay-qr-box-modal {

    min-width: 0;

    width: 100%;

  }



  /* 支付页 */

  body.h5-mode .pay-page-card {

    width: 100%;

    padding: 24px 18px;

    border-radius: 18px;

  }



  body.h5-mode .pay-page-meta {

    font-size: 13px;

    line-height: 1.7;

    word-break: break-all;

  }



  body.h5-mode .pay-page-actions {

    flex-direction: column;

  }



  body.h5-mode .pay-page-actions .btn {

    width: 100%;

    justify-content: center;

  }



  body.h5-mode .pay-qr-box .pay-qr-img {

    max-width: min(260px, 72vw);

    height: auto;

  }



  /* 登录注册 */

  body.h5-mode .page-center {

    min-height: calc(100vh - var(--h5-tabbar-h) - var(--h5-safe-bottom) - 40px);

    padding: 24px 12px;

  }



  body.h5-mode .auth-card {

    width: 100%;

    padding: 24px 20px;

  }



  body.h5-mode .auth-sms-row {

    grid-template-columns: 1fr;

  }



  body.h5-mode .auth-actions {

    flex-direction: column;

  }



  body.h5-mode .auth-actions .btn {

    width: 100%;

    justify-content: center;

  }



  /* 新闻 */

  body.h5-mode .news-list {

    grid-template-columns: 1fr;

  }



  body.h5-mode .news-detail {

    margin-bottom: 24px;

  }



  body.h5-mode .news-detail-content {

    font-size: 15px;

  }



  body.h5-mode .news-search {

    flex-direction: column;

    align-items: stretch;

  }



  body.h5-mode .news-search .btn {

    width: 100%;

  }

}



@media (max-width: 420px) {

  body.h5-mode .tool-cards {

    grid-template-columns: 1fr;

  }



  body.h5-mode .h5-tools-grid {

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }

}



@media (min-width: 861px) {

  .h5-tabbar,

  .h5-sheet-mask,

  .h5-tools-sheet {

    display: none !important;

  }

}