/* ==========================================================
   mobile-ui.css · 返回按钮统一胶囊化 + 手机端自适应排版
   最后加载：覆盖 task-ui / site-theme / figma / auth-refresh 的既有规则。
   ========================================================== */

/* ---------------- 返回按钮：图标 + 文字的胶囊样式 ---------------- */
.global-back-link,
.back-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    width: auto !important;
    min-width: 0 !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 12px 0 9px !important;
    border: 1px solid #e4eaf3 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #46536b !important;
    font-size: 12.5px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    letter-spacing: .01em;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(31,45,77,.05) !important;
    transition: color .2s, background .2s, border-color .2s, box-shadow .2s;
}
.global-back-link svg,
.back-link svg {
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 auto;
}
.global-back-link:hover,
.back-link:hover {
    color: #2563eb !important;
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    box-shadow: 0 5px 14px rgba(37,99,235,.12) !important;
}
.global-back-link:active,
.back-link:active { transform: scale(.97); }
/* 页面标题留出与胶囊返回按钮匹配的左侧空间 */
.page-header:not(.task-page-header) { padding-left: 84px !important; }

/* ---------------- 邀请码锁定 ---------------- */
.invite-code-group.is-locked input,
.invite-code-group.is-locked .form-input {
    padding-right: 34px !important;
    background: #f4f7fb !important;
    border-color: #dce7f5 !important;
    color: #4c5e75 !important;
    cursor: not-allowed !important;
}
.invite-code-group.is-locked input:focus,
.invite-code-group.is-locked .form-input:focus {
    border-color: #c7dbf3 !important;
    box-shadow: none !important;
}
.invite-hint { display: block; margin-top: 6px; color: #7d899c !important; font-size: 12px !important; line-height: 1.5; }
.invite-code-group.is-locked .invite-hint { color: #2563eb !important; font-weight: 600; }

/* 个人中心顶部栏返回按钮保持正方形，避免胶囊样式把标题挤偏 */
.profile-v2-head .global-back-link {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 11px !important;
    background: rgba(255,255,255,.78) !important;
    color: #46536b !important;
    font-size: 12px !important;
    box-shadow: 0 3px 10px rgba(31,45,77,.05) !important;
}
.profile-v2-head .global-back-link i { font-size: 13px !important; }

/* ==========================================================
   手机端（≤768px）：整体缩小字阶、内边距与卡片尺寸
   ========================================================== */
@media (max-width: 768px) {
    body { font-size: 13.5px; }

    /* ---- 顶部导航 ---- */
    .navbar {
        height: 52px !important;
        padding: 0 14px !important;
        justify-content: flex-start !important;
    }
    .navbar-brand { gap: 8px !important; font-size: 15px !important; }
    .navbar-brand-logo { height: 24px !important; max-width: 120px !important; }
    .navbar-brand span { max-width: 180px; }

    /* ---- 主内容区 ---- */
    .main-content {
        width: 100% !important;
        max-width: none !important;
        margin-top: 62px !important;
        padding: 0 12px calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* ---- 页头与返回按钮 ---- */
    .page-header {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: wrap;
        gap: 8px !important;
        margin-bottom: 12px !important;
        padding-bottom: 10px !important;
    }
    .page-header:not(.task-page-header) { padding-left: 0 !important; }
    .page-header h2 {
        flex: 0 1 auto;
        min-width: 0;
        margin: 0 !important;
        font-size: 16.5px !important;
        letter-spacing: -.01em !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .page-header p {
        flex: 1 1 100%;
        order: 3;
        margin: 2px 0 0 !important;
        font-size: 11.5px !important;
        line-height: 1.5;
    }
    .page-header h2 i { display: none !important; }
    .global-back-link {
        position: static !important;
        flex: 0 0 auto;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 10px 0 7px !important;
        border-radius: 9px !important;
        font-size: 12px !important;
    }
    .global-back-link svg { width: 13px !important; height: 13px !important; }
    .task-page-header { gap: 8px !important; }
    .back-link {
        flex: 0 0 auto;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 10px 0 7px !important;
        border-radius: 9px !important;
        background: #fff !important;
        color: #46536b !important;
        border: 1px solid #e4eaf3 !important;
        font-size: 12px !important;
        box-shadow: 0 3px 10px rgba(31,45,77,.05) !important;
    }
    .back-link svg { width: 13px !important; height: 13px !important; }

    /* ---- 通用卡片 / 标题 / 按钮 / 表单 ---- */
    .card, .mat-card, .settings-card, .invite-group-card, .referral-section {
        padding: 13px !important;
        border-radius: 13px !important;
    }
    .mat-card, .history-item { margin-top: 0 !important; margin-bottom: 0 !important; }
    .section-title { font-size: 16.5px !important; margin: 2px 0 10px !important; }
    .home-section-head b { font-size: 16px !important; }
    .home-section-head small { font-size: 10.5px !important; }
    .task-rule { padding: 9px 11px !important; font-size: 11.5px !important; border-radius: 10px !important; }
    label { font-size: 12px !important; margin-bottom: 6px !important; }
    input, textarea, select, .form-input {
        min-height: 42px !important;
        font-size: 14px !important;
        border-radius: 10px !important;
    }
    .btn, button.btn, input[type=submit] {
        min-height: 38px !important;
        padding: 0 16px !important;
        font-size: 13px !important;
        gap: 6px !important;
        border-radius: 11px !important;
    }

    /* ---- 首页工具入口（2×2 紧凑排布） ---- */
    #app > .home-tools {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin-bottom: 16px !important;
    }
    #app > .home-tools .home-tool {
        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-areas: 'icon title' 'icon sub';
        align-items: center !important;
        justify-items: start;
        column-gap: 10px;
        min-height: 0 !important;
        padding: 11px 12px !important;
        border-radius: 12px !important;
        text-align: left !important;
    }
    #app > .home-tools .home-tool-icon {
        grid-area: icon;
        width: 34px !important;
        height: 34px !important;
        margin: 0 !important;
        border-radius: 10px !important;
        font-size: 15px !important;
    }
    #app > .home-tools .home-tool b { grid-area: title; font-size: 12.5px !important; line-height: 1.25; }
    #app > .home-tools .home-tool small { grid-area: sub; margin-top: 2px; font-size: 9.5px !important; line-height: 1.3; }
    .home-welcome-bar h1 { font-size: 19px !important; }
    .home-welcome-bar span { font-size: 11px !important; }

    /* ---- 任务列表卡片 ---- */
    .mat-card {
        grid-template-columns: 54px minmax(0, 1fr) auto !important;
        column-gap: 10px;
        min-height: 0 !important;
        padding: 11px !important;
    }
    .mat-thumb { width: 54px !important; height: 54px !important; font-size: 19px !important; border-radius: 10px !important; }
    .mat-title { font-size: 14px !important; }
    .task-meta, .mat-desc { font-size: 11px !important; }
    .task-price { font-size: 17px !important; }
    .task-side { gap: 6px !important; }
    .task-side .btn { min-height: 32px !important; padding: 0 12px !important; font-size: 11.5px !important; }
    .task-summary { gap: 6px !important; }
    .stats-pill { padding: 8px 6px !important; font-size: 10.5px !important; }
    .task-tabs .btn { padding: 0 14px !important; font-size: 12px !important; min-height: 32px !important; }

    /* ---- 个人中心 ---- */
    .profile-v2 { margin: -8px -12px 0 !important; padding: 0 12px calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
    .profile-v2-head { height: 48px !important; }
    .profile-v2-head b { font-size: 15px !important; }
    .profile-v2-head .global-back-link { width: 30px !important; height: 30px !important; border-radius: 9px !important; }
    .profile-v2-hero { gap: 12px !important; padding: 12px 4px 18px !important; }
    .profile-v2-avatar { width: 62px !important; height: 62px !important; font-size: 27px !important; }
    .profile-v2-hero h2 { font-size: 20px !important; }
    .profile-v2-hero p { font-size: 11.5px !important; }
    .profile-v2-stats { padding: 15px 2px !important; border-radius: 16px !important; }
    .profile-v2-stats i { width: 28px !important; height: 28px !important; margin-bottom: 6px !important; font-size: 13px !important; }
    .profile-v2-stats b { font-size: 17.5px !important; }
    .profile-v2-stats span { font-size: 10.5px !important; }
    .profile-v2-title { margin: 18px 2px 9px !important; }
    .profile-v2-title b { font-size: 17px !important; border-left-width: 4px !important; }
    .profile-v2-grid a {
        min-height: 82px !important;
        padding: 11px !important;
        border-radius: 14px !important;
        grid-template-columns: 34px minmax(0, 1fr) 12px !important;
        column-gap: 8px !important;
    }
    .profile-v2-grid a i { width: 34px !important; height: 34px !important; border-radius: 11px !important; font-size: 15px !important; }
    .profile-v2-grid b { font-size: 12.5px !important; }
    .profile-v2-grid small { font-size: 9.5px !important; }
    .profile-v2-grid em { font-size: 18px !important; }
    .profile-v2-wide { min-height: 70px !important; }
    .profile-v2-actions .btn { min-height: 64px !important; padding: 11px 12px !important; border-radius: 15px !important; grid-template-columns: 34px minmax(0, 1fr) 12px !important; column-gap: 8px !important; }
    .profile-v2-actions .btn i { width: 32px !important; height: 32px !important; font-size: 14px !important; }
    .profile-v2-actions .btn b { font-size: 13px !important; }
    .profile-v2-actions .btn small { font-size: 9.5px !important; }
    .profile-v2-banner { padding: 20px 16px !important; border-radius: 16px !important; }
    .profile-v2-banner b { font-size: 19px !important; }
    .profile-hero { margin: -10px -12px 0 !important; padding: 26px 16px 62px !important; }
    .profile-avatar { width: 58px !important; height: 58px !important; font-size: 26px !important; margin-bottom: 8px !important; }
    .profile-name { font-size: 17px !important; }
    .profile-sub { font-size: 12px !important; }
    .profile-stats { margin: -44px 0 14px !important; padding: 16px 4px !important; border-radius: 14px !important; }
    .profile-stat b { font-size: 18px !important; }
    .profile-stat span { font-size: 11px !important; }
    .profile-menu { margin: 0 0 12px !important; }
    .profile-menu a { min-height: 50px !important; padding: 0 14px !important; gap: 10px !important; font-size: 13px !important; }
    .profile-actions { margin: 12px 0 !important; gap: 10px !important; }
    .profile-actions .btn { min-height: 42px !important; }
    .settings-card h3 { font-size: 13.5px !important; }
    .settings-avatar { width: 60px !important; height: 60px !important; flex-basis: 60px !important; font-size: 24px !important; }

    /* ---- 提现页 ---- */
    .withdraw-hero { padding: 20px !important; }
    .withdraw-hero strong { font-size: 26px !important; }

    /* ---- 历史记录 ---- */
    .history-list { gap: 10px !important; }
    .history-item { padding: 14px !important; gap: 7px !important; }
    .history-item .his-title { font-size: 14.5px !important; }
    .history-record { padding: 7px 0 !important; font-size: 12px !important; }

    /* ---- 邀请 / 团队 ---- */
    .referral-banner { padding: 18px 16px !important; border-radius: 16px !important; margin-bottom: 12px !important; }
    .referral-banner h2 { font-size: 21px !important; }
    .referral-banner p { font-size: 12px !important; }
    .referral-banner > i { font-size: 32px !important; }
    .referral-code-card { padding: 15px !important; gap: 10px !important; }
    .referral-code-card strong { font-size: 20px !important; }
    .referral-stat-grid { gap: 8px !important; margin: 10px 0 !important; }
    .referral-stat-grid > div { padding: 11px 8px !important; border-radius: 12px !important; }
    .referral-stat-grid b { font-size: 17px !important; }
    .referral-stat-grid span { font-size: 10px !important; }
    .referral-section-head h3 { font-size: 14.5px !important; }
    .invite-rate-card, .referral-rate-card { padding: 13px !important; }
    .invite-row { padding: 9px 0 !important; }
    .invite-row b { font-size: 12.5px !important; }

    /* ---- 任务详情页 ---- */
    .task-execution-card { padding: 13px !important; }
    .task-execution-title h3 { font-size: 15.5px !important; }
    .task-section-title b { font-size: 13px !important; }
    .task-section-title small { font-size: 10.5px !important; }
    .task-step { font-size: 10px !important; }

    /* ---- 底部导航（5 项等分，不再溢出） ---- */
    .mobile-tab {
        height: calc(56px + env(safe-area-inset-bottom, 0px)) !important;
        padding: 0 6px env(safe-area-inset-bottom, 0px) !important;
    }
    .mobile-tab a {
        flex: 1 1 0 !important;
        min-width: 0 !important;
        max-width: none !important;
        gap: 2px !important;
        font-size: 10.5px !important;
        padding: 5px 0 !important;
    }
    .mobile-tab a i { font-size: 18px !important; }
    .mobile-tab a.active::before { width: 22px; height: 2px; }

    /* ---- 登录 / 注册 ---- */
    .auth-wrapper { min-height: 100vh; padding: 14px 12px 22px !important; }
    .auth-brand { margin-bottom: 12px !important; }
    .auth-brand-icon { width: 48px !important; height: 48px !important; margin-bottom: 8px !important; border-radius: 14px !important; }
    .auth-brand h1 { font-size: 19px !important; }
    .auth-brand p { font-size: 12px !important; }
    .auth-eyebrow { font-size: 9px !important; margin-bottom: 4px !important; }
    .auth-card { padding: 16px 14px !important; border-radius: 15px !important; }
    .auth-tabs { margin-bottom: 16px !important; padding: 3px !important; }
    .auth-tab { padding: 9px 0 !important; font-size: 12.5px !important; border-radius: 8px !important; }
    .form-group { margin-bottom: 10px !important; }
    .form-group label { font-size: 12px !important; margin-bottom: 5px !important; }
    .form-input { padding: 10px 12px 10px 38px !important; min-height: 40px !important; font-size: 13.5px !important; }
    .input-icon-wrap i { left: 13px !important; font-size: 12px !important; }
    .auth-code-row { gap: 6px !important; }
    .auth-code-btn {
        min-height: 40px !important;
        padding: 0 10px !important;
        font-size: 11.5px !important;
        border-radius: 10px !important;
    }
    .auth-field-hint { font-size: 11px !important; }
    .btn-primary { min-height: 42px !important; font-size: 14px !important; border-radius: 10px !important; }
    .auth-trust-strip { margin-top: 13px !important; padding-top: 11px !important; gap: 6px !important; }
    .auth-trust-strip i { font-size: 13px !important; }
    .auth-trust-strip b { font-size: 10px !important; }
    .auth-trust-strip small { font-size: 9px !important; }
    .auth-footer { margin-top: 14px !important; font-size: 11px !important; }
    .msg-box { padding: 10px 12px !important; border-radius: 10px !important; font-size: 12px !important; margin-bottom: 12px !important; }

    /* ---- 弹层 ---- */
    .picker-sheet { padding: 15px !important; border-radius: 16px !important; }
    .picker-head { margin-bottom: 10px !important; }
    .claim-guide-banner { padding: 10px !important; }
    .claim-guide-banner b { font-size: 13px !important; }

    /* ---- 客服 ---- */
    .support-fab { width: 46px !important; height: 46px !important; font-size: 17px !important; }
}

/* ==========================================================
   窄屏（≤420px）：进一步收紧
   ========================================================== */
@media (max-width: 420px) {
    .main-content { padding-left: 10px !important; padding-right: 10px !important; }
    .page-header h2 { font-size: 15.5px !important; }
    .card, .mat-card { padding: 11px !important; }
    .home-welcome-bar h1 { font-size: 18px !important; }
    .mat-card { grid-template-columns: 48px minmax(0, 1fr) auto !important; column-gap: 9px; }
    .mat-thumb { width: 48px !important; height: 48px !important; }
    .mat-title { font-size: 13.5px !important; }
    .task-price { font-size: 16px !important; }
    .task-side .btn { padding: 0 9px !important; }
    .referral-banner h2 { font-size: 19px !important; }
    .referral-banner > i { display: none; }
    .profile-stats { padding: 14px 3px !important; }
    .profile-stat b { font-size: 16.5px !important; }
    .auth-card { padding: 14px 12px !important; }
    .auth-brand-icon { width: 44px !important; height: 44px !important; }
    .auth-brand h1 { font-size: 18px !important; }
    .auth-trust-strip small { font-size: 8.5px !important; }
    .task-tabs .btn { padding: 0 11px !important; font-size: 11.5px !important; }
}