/* ============================================================
   responsive.css - 共享响应式与跨浏览器兼容样式
   作用：移动端适配 + 跨浏览器兼容 + 通用美化（追加式，不覆盖页面核心样式）
   引入方式：在各页面 </style> 之后、</head> 之前引入
   ============================================================ */

/* ---------- 跨浏览器兼容补丁 ---------- */
* { -webkit-tap-highlight-color: transparent; }

/* ---------- 全局按钮统一样式（去下划线 + 居中对齐） ---------- */
.btn, .btn:hover, .btn:active, .btn:focus, .btn:visited,
a.btn, a.btn:hover, a.btn:active, a.btn:focus, a.btn:visited,
a[class*="btn"]:hover, a[class*="btn"]:active, a[class*="btn"]:focus {
    text-decoration: none !important;
}
.btn {
    text-align: center !important;
    vertical-align: middle !important;
}

html { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; }

body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* backdrop-filter 兼容（Safari/旧版浏览器） */
.nav, .topbar, .sidebar, .card {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* 渐变文字兼容 */
.brand, .gradient-text {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 输入框外观兼容（iOS 圆角问题） */
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="search"], input[type="tel"], input[type="url"], input[type="date"],
select, textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* 复选框/单选框恢复原生 */
input[type="checkbox"], input[type="radio"] {
    -webkit-appearance: checkbox;
    -moz-appearance: radio;
    appearance: auto;
}

/* 焦点可见性（键盘可访问性） */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
    outline: 2px solid #4ecdc4;
    outline-offset: 2px;
}

/* 滚动条美化（WebKit） */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
::-webkit-scrollbar-thumb { background: rgba(78,205,196,0.4); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(78,205,196,0.6); }

/* ---------- 通用响应式工具类 ---------- */

/* 表格水平滚动容器（移动端表格不挤压） */
.table-wrap, .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
}

/* 触控友好按钮（最小 44px 触摸目标） */
.btn, .btn-primary, .btn-secondary, .btn-danger, .btn-sm,
.btn-redeem, .plan-btn, .toggle-btn {
    min-height: 40px;
    touch-action: manipulation;
}

/* 图片响应式 */
img { max-width: 100%; height: auto; }

/* ---------- 移动端断点：≤768px（平板/大手机） ---------- */
@media screen and (max-width: 768px) {
    /* 导航栏适配 */
    .nav, .topbar {
        padding: 10px 14px;
        flex-wrap: wrap;
        gap: 8px;
    }
    .nav-left {
        gap: 12px;
        flex-wrap: wrap;
    }
    .nav-left a, .nav-left .brand {
        font-size: 13px;
    }
    .nav-left .brand {
        font-size: 16px;
    }
    .nav-right {
        gap: 10px;
        font-size: 12px;
        flex-wrap: wrap;
    }

    /* 容器缩小内边距 */
    .container {
        padding: 0 12px;
        margin: 16px auto;
    }

    /* 卡片内边距减小 */
    .card, .status-card, .redeem-card, .log-card {
        padding: 16px;
        border-radius: 10px;
        margin-bottom: 14px;
    }

    /* 页面标题缩小 */
    .page-title {
        font-size: 18px;
        margin-bottom: 14px;
    }

    /* 卡片标题缩小 */
    .card h3 {
        font-size: 15px;
        margin-bottom: 12px;
    }

    /* 表格字号缩小 */
    th, td {
        padding: 8px 6px;
        font-size: 12px;
        white-space: nowrap;
    }

    /* 表单输入框增大触控区 */
    .form-group input, .form-group select, .form-group textarea,
    .form-input {
        padding: 11px 13px;
        font-size: 15px; /* ≥16px 避免 iOS 缩放 */
    }

    /* 按钮全宽便于触摸 */
    .btn-primary, .btn-redeem {
        width: 100%;
        padding: 12px;
        font-size: 15px;
    }

    /* 统计卡片单列 */
    .stat-grid {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
        gap: 10px;
    }
    .stat-card {
        padding: 14px;
    }
    .stat-card .stat-num {
        font-size: 24px;
    }

    /* 会员对比表单列 */
    .plans-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    /* 状态卡片堆叠 */
    .status-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .status-info {
        width: 100%;
        min-width: 0;
    }
    .status-stats {
        gap: 16px;
    }
    .stat-value {
        font-size: 16px;
    }

    /* 兑换表单单列 */
    .redeem-form {
        flex-direction: column;
    }
    .redeem-form input[type="text"] {
        min-width: 0;
        width: 100%;
    }

    /* 游戏列表项堆叠 */
    .game-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    /* 字段复选框网格 */
    .field-checkbox {
        display: inline-flex;
        width: 48%;
    }

    /* 分享链接容器 */
    .share-link-box {
        padding: 12px;
    }
    .share-link {
        font-size: 12px;
        word-break: break-all;
    }

    /* 弹窗适配 */
    .modal-box {
        width: 92%;
        padding: 22px 18px;
    }
    .modal-icon { font-size: 40px; }
    .modal-title { font-size: 17px; }
    .modal-msg { font-size: 13px; }

    /* 信息提示框 */
    .info-box {
        padding: 10px;
    }
    .info-box p {
        font-size: 11px;
    }

    /* 切换按钮全宽 */
    .toggle-btn {
        width: 100%;
        padding: 12px;
    }
}

/* ---------- 移动端断点：≤480px（小手机） ---------- */
@media screen and (max-width: 480px) {
    .nav, .topbar {
        padding: 8px 10px;
    }
    .nav-left {
        gap: 8px;
    }
    .nav-left a {
        font-size: 12px;
    }
    .nav-left .brand {
        font-size: 15px;
    }

    .container {
        padding: 0 8px;
        margin: 10px auto;
    }

    .card, .status-card, .redeem-card, .log-card {
        padding: 12px;
        border-radius: 8px;
    }

    /* 字段复选框单列 */
    .field-checkbox {
        width: 100%;
    }

    /* 统计卡片单列 */
    .stat-grid {
        grid-template-columns: 1fr !important;
    }
    .plans-grid {
        gap: 10px;
    }

    /* 状态统计纵向 */
    .status-stats {
        flex-direction: column;
        gap: 10px;
    }

    /* 表格更紧凑 */
    th, td {
        padding: 6px 4px;
        font-size: 11px;
    }

    /* 按钮组横向滚动 */
    .btn-group, .action-buttons {
        display: flex;
        gap: 6px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .btn-group .btn, .action-buttons .btn {
        white-space: nowrap;
        flex-shrink: 0;
    }
}

/* ---------- 打印样式 ---------- */
@media print {
    .nav, .topbar, .sidebar, .btn, .btn-primary, .btn-secondary, .btn-danger,
    .toggle-btn, .share-link-box, .info-box, .modal-overlay {
        display: none !important;
    }
    body {
        background: #fff !important;
        color: #000 !important;
    }
    .card, .table-wrap {
        border: 1px solid #ccc !important;
        box-shadow: none !important;
    }
}