/* ============================================================
 * 邮箱推送系统 - 用户端移动端适配
 * 自动切换：通过 @media 在小屏幕下生效，不影响桌面端
 * ============================================================ */

/* ========== 平板（≤1024px） ========== */
@media (max-width: 1024px) {
    .topbar-inner {
        max-width: 100%;
        padding: 0 16px;
    }

    .topbar-logo {
        margin-right: 16px;
        font-size: 15px;
    }

    /* 导航缩小间距 */
    .topbar-nav {
        gap: 6px;
    }

    .topbar-nav .menu > a {
        padding: 0 10px;
        font-size: 13px;
    }

    /* 容器统一收窄 */
    .container-1, .container-2, .container-4,
    .container-5, .container-6, .container-8, .container-9 {
        max-width: 100%;
        padding: 16px;
    }
}

/* ========== 手机（≤768px） ========== */
@media (max-width: 768px) {

    /* ---- 顶部导航栏 ---- */
    .topbar {
        padding: 0 12px;
        height: 52px;
    }

    .topbar-inner {
        padding: 0;
        flex-wrap: nowrap;
    }

    .topbar-logo {
        font-size: 14px;
        margin-right: auto;
    }

    .menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        font-size: 22px;
        border-radius: 8px;
        background: rgba(255,255,255,.08);
    }

    .topbar-nav {
        display: none;
        position: fixed;
        top: 52px;
        left: 0;
        right: 0;
        bottom: 0;
        background: #263445;
        flex-direction: column;
        padding: 0;
        gap: 0;
        z-index: 999;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .topbar-nav.open {
        display: flex;
    }

    .topbar-nav .menu {
        width: 100%;
        height: auto;
        border-bottom: 1px solid rgba(255,255,255,.06);
    }

    .topbar-nav .menu > a {
        width: 100%;
        padding: 14px 16px;
        font-size: 15px;
        border-radius: 0;
    }

    .dropdown {
        position: static;
        display: none;
        box-shadow: none;
        background: rgba(0,0,0,.2);
        border-radius: 0;
        padding: 0;
        min-width: 100%;
    }

    .topbar-nav .menu.open .dropdown {
        display: block;
    }

    .topbar-nav .dropdown a {
        color: #cfd8dc;
        padding: 12px 32px;
        font-size: 14px;
    }

    .topbar-nav .dropdown a:hover,
    .topbar-nav .dropdown a.active {
        color: #409eff;
        background: rgba(64,158,255,.1);
    }

    .topbar-nav .menu.open > a::after {
        content: ' ▲';
        float: right;
    }

    /* ---- 右侧工具栏 ---- */
    .topbar-tools {
        flex-shrink: 0;
        gap: 6px;
    }

    .lang-btn {
        height: 32px;
        padding: 0 8px;
        font-size: 12px;
    }

    .lang-label {
        display: none;
    }

    .lang-dropdown {
        right: 0;
        left: auto;
    }

    .user-trigger {
        font-size: 13px;
        padding: 4px 8px;
        max-width: 100px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .guest-links {
        gap: 6px;
    }

    .guest-links a {
        font-size: 13px;
        padding: 6px 12px;
    }

    /* ---- 通用容器 ---- */
    .container-1, .container-2, .container-4,
    .container-5, .container-6, .container-8, .container-9 {
        padding: 12px;
        max-width: 100%;
    }

    /* ---- 卡片 ---- */
    .card-4, .card-5, .card-6 {
        border-radius: 12px;
        margin-bottom: 12px;
    }

    .card-header-4 {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 14px 16px;
    }

    .card-header-4 h2,
    .card-header-4 h3 {
        font-size: 16px;
    }

    .card-body-4 {
        padding: 14px 16px;
    }

    /* ---- 页面标题 ---- */
    .admin-header-4 {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 14px;
    }

    .admin-header-4 h1 {
        font-size: 20px;
    }

    /* ---- 按钮 ---- */
    .btn-4, .btn-3 {
        padding: 10px 18px;
        font-size: 14px;
    }

    .btn-4 + .btn-4 {
        margin-left: 0;
        margin-top: 8px;
    }

    /* ---- 表单 ---- */
    .form-group-3,
    .form-group-4 {
        margin-bottom: 14px;
    }

    .form-group-3 input,
    .form-group-4 input,
    .form-group-3 textarea,
    .form-group-4 textarea,
    .form-group-3 select,
    .form-group-4 select {
        font-size: 16px; /* ≥16px 防止 iOS 自动缩放 */
    }

    /* ---- 行布局改列 ---- */
    .row-4 {
        flex-direction: column;
        gap: 12px;
    }

    .row-4 > * {
        width: 100% !important;
        flex: none !important;
    }

    /* ---- 数据表格 ---- */
    .data-table-6 {
        font-size: 13px;
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    .data-table-6 th,
    .data-table-6 td {
        padding: 10px 12px;
    }

    /* ---- 网格布局 ---- */
    .grid-4,
    .quota-grid,
    .header-quota-cards {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

    .dash-overview {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .dash-month-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* ---- Dashboard 专用 ---- */
    .dash-container {
        padding: 12px 12px 20px;
    }

    .dash-welcome {
        padding: 18px 16px;
        border-radius: 14px;
    }

    .dash-welcome__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .dash-welcome__greeting {
        font-size: 17px;
    }

    .dash-overview__card {
        padding: 14px;
    }

    .dash-overview__value {
        font-size: 15px;
    }

    .dash-overview__icon {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .dash-card {
        padding: 14px;
        border-radius: 14px;
    }

    .dash-main {
        grid-template-columns: 1fr;
    }

    .dash-apikey {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .dash-apikey__btns {
        justify-content: flex-end;
    }

    .dash-chart__bars {
        height: 140px;
    }

    .dash-health__count {
        font-size: 32px;
    }

    .dash-marquee {
        padding: 8px 12px;
        margin-bottom: 14px;
    }

    .dash-marquee__icon {
        width: 24px;
        height: 24px;
        font-size: 11px;
        margin-right: 8px;
    }

    .dash-marquee__text {
        font-size: 13px;
    }

    /* ---- 标签页（Tabs） ---- */
    .tabs-4,
    .tab-bar-4 {
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        padding: 0;
    }

    .tabs-4 .tab,
    .tab-bar-4 .tab {
        flex-shrink: 0;
        padding: 10px 16px;
        font-size: 14px;
        white-space: nowrap;
    }

    /* ---- 弹窗 ---- */
    .modal-box-2,
    .modal-box-4,
    .user-modal-box {
        width: 92% !important;
        max-width: 92% !important;
        padding: 24px 18px;
        border-radius: 16px;
    }

    .modal-actions-2,
    .modal-actions-4,
    .user-modal-actions {
        flex-direction: column;
        gap: 8px;
    }

    .modal-btn-2,
    .modal-btn-4,
    .user-modal-btn {
        width: 100%;
    }

    .user-modal-mask {
        padding: 16px;
    }

    /* ---- API 密钥 ---- */
    .api-key-box-2 {
        flex-direction: column;
        gap: 8px;
    }

    .api-key-input-wrap {
        min-width: 100%;
    }

    .api-key-display-2 input,
    .api-key-display-2 button {
        width: 100%;
    }

    /* ---- 充值/购买 ---- */
    .quota-card,
    .recharge-card {
        padding: 16px;
    }

    .quota-packages-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* ---- 群发页面 ---- */
    .mass-edit-page-4 .form-group-3,
    .mass-edit-page-4 .form-group-4 {
        margin-bottom: 14px;
    }

    .recipient-header-5,
    .recipient-item-5 {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    /* ---- 分页 ---- */
    .pagination-4,
    .pagination {
        flex-wrap: wrap;
        gap: 4px;
        justify-content: center;
    }

    .pagination-4 a,
    .pagination-4 span,
    .pagination a,
    .pagination span {
        padding: 6px 10px;
        font-size: 13px;
    }

    /* ---- 统计卡片 ---- */
    .stat-card-4,
    .stat-box-4 {
        padding: 14px;
    }

    .stat-card-4 .stat-value,
    .stat-box-4 .stat-value {
        font-size: 22px;
    }

    /* ---- 推广页面 ---- */
    .affiliate-page .card-4 {
        margin-bottom: 12px;
    }

    .affiliate-link-box {
        flex-direction: column;
        gap: 8px;
    }

    .affiliate-link-box input {
        width: 100%;
    }

    /* ---- 登录/注册页 ---- */
    .login-page-3,
    .login-page-4,
    .register-page {
        padding: 16px;
    }

    .auth-box-3 {
        padding: 28px 20px;
        border-radius: 14px;
    }

    .auth-box-3 h2 {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .captcha-wrapper-3 {
        gap: 8px;
    }

    /* ---- 实名认证 ---- */
    .realname-page .card-4 {
        padding: 16px;
    }

    /* ---- 通用文字 ---- */
    body {
        font-size: 14px;
    }

    h1 { font-size: 20px; }
    h2 { font-size: 18px; }
    h3 { font-size: 16px; }

    /* ---- 隐藏桌面端冗余 ---- */
    .hide-mobile {
        display: none !important;
    }

    /* ---- 底部 ---- */
    .footer-4,
    .footer {
        padding: 16px 12px;
        text-align: center;
        font-size: 12px;
    }
}

/* ========== 小手机（≤480px） ========== */
@media (max-width: 480px) {
    .topbar {
        padding: 0 10px;
    }

    .topbar-logo {
        font-size: 13px;
    }

    .container-1, .container-2, .container-4,
    .container-5, .container-6, .container-8, .container-9 {
        padding: 10px;
    }

    .dash-overview {
        grid-template-columns: 1fr;
    }

    .dash-month-grid {
        grid-template-columns: 1fr;
    }

    .card-header-4 h2,
    .card-header-4 h3 {
        font-size: 15px;
    }

    .admin-header-4 h1 {
        font-size: 18px;
    }

    .data-table-6 {
        font-size: 12px;
    }

    .data-table-6 th,
    .data-table-6 td {
        padding: 8px 10px;
    }

    .stat-card-4 .stat-value,
    .stat-box-4 .stat-value {
        font-size: 18px;
    }

    .auth-box-3 {
        padding: 22px 16px;
    }

    .auth-box-3 h2 {
        font-size: 18px;
    }

    .btn-4, .btn-3 {
        padding: 10px 16px;
        font-size: 13px;
    }
}

/* ========== 超小屏（≤375px） ========== */
@media (max-width: 375px) {
    .topbar-logo {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .user-trigger {
        max-width: 70px;
    }

    .container-1, .container-2, .container-4,
    .container-5, .container-6, .container-8, .container-9 {
        padding: 8px;
    }

    .card-body-4 {
        padding: 12px;
    }
}