/* 基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f5f5f5;
}

/* 导航栏 */
.navbar {
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand a {
    font-size: 1.5rem;
    font-weight: bold;
    color: #667eea;
    text-decoration: none;
}

.nav-links a {
    margin-left: 1.5rem;
    color: #666;
    text-decoration: none;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: #667eea;
}

/* 容器 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    min-height: calc(100vh - 140px);
}

/* 页脚 */
.footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 1.5rem;
}

/* 按钮 */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
}

.btn-primary {
    background-color: #667eea;
    color: white;
}

.btn-primary:hover {
    background-color: #5568d3;
}

.btn-secondary {
    background-color: #e0e0e0;
    color: #333;
}

.btn-secondary:hover {
    background-color: #d0d0d0;
}

.btn-danger {
    background-color: #e74c3c;
    color: white;
}

.btn-danger:hover {
    background-color: #c0392b;
}

.btn-success {
    background-color: #27ae60;
    color: white;
}

.btn-success:hover {
    background-color: #229954;
}

.btn-block {
    display: block;
    width: 100%;
    text-align: center;
}

.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.875rem;
}

/* 表单 */
.form-group {
    margin-bottom: 1rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.form-control {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
}

.form-control:focus {
    outline: none;
    border-color: #667eea;
}

.form-control-sm {
    padding: 0.4rem;
    font-size: 0.875rem;
    width: 150px;
}

/* 验证码 */
.captcha-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.captcha-input {
    flex: 1;
}

.captcha-image {
    height: 44px;
    cursor: pointer;
    border-radius: 4px;
    border: 1px solid #ddd;
}

.captcha-image:hover {
    opacity: 0.8;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.checkbox-group {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkbox-group input[type="checkbox"] {
    width: auto;
}

.error {
    color: #e74c3c;
    font-size: 0.875rem;
}

/* 提示框 */
.alert {
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-warning {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.alert-info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* 主页 */
.hero {
    text-align: center;
    padding: 4rem 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.25rem;
    margin-bottom: 2rem;
    opacity: 0.9;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.hero-buttons .btn {
    min-width: 150px;
}

.features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
}

.feature-card h3 {
    color: #667eea;
    margin-bottom: 1rem;
}

/* 认证页面 */
.auth-container {
    max-width: 400px;
    margin: 2rem auto;
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.auth-container h2 {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #333;
}

.text-center {
    text-align: center;
}

/* 个人中心 */
.dashboard h2 {
    margin-bottom: 1.5rem;
}

.stats-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-align: center;
}

.stat-card h3 {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.stat-card .amount {
    font-size: 2rem;
    font-weight: bold;
    color: #667eea;
}

.dashboard-section {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 1.5rem;
}

.dashboard-section h3 {
    margin-bottom: 1rem;
    color: #333;
}

/* 表格 */
.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid #e0e0e0;
}

.table th {
    font-weight: 600;
    color: #666;
    background-color: #f8f9fa;
}

/* 徽章 */
.badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    background-color: #e0e0e0;
    color: #666;
}

.badge-success {
    background-color: #d4edda;
    color: #155724;
}

.badge-warning {
    background-color: #fff3cd;
    color: #856404;
}

.badge-danger {
    background-color: #f8d7da;
    color: #721c24;
}

/* 空状态 */
.empty {
    text-align: center;
    color: #999;
    padding: 2rem;
}

.empty-state {
    text-align: center;
    padding: 3rem;
    color: #999;
}

/* 订单验证 */
.verify-container {
    max-width: 600px;
    margin: 0 auto;
}

.verify-form {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 1.5rem;
}

.order-result {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 1.5rem;
}

.order-result h3 {
    color: #27ae60;
    margin-bottom: 1rem;
}

.order-details {
    margin-bottom: 1.5rem;
}

.detail-row {
    display: flex;
    padding: 0.75rem 0;
    border-bottom: 1px solid #e0e0e0;
}

.detail-row .label {
    width: 100px;
    color: #666;
}

.detail-row .value {
    flex: 1;
    font-weight: 500;
}

.detail-row .value.amount {
    color: #667eea;
    font-size: 1.25rem;
}

.order-actions {
    display: flex;
    gap: 1rem;
}

.verify-help {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
}

.verify-help h4 {
    margin-bottom: 1rem;
}

.verify-help ol {
    padding-left: 1.5rem;
}

.verify-help li {
    margin-bottom: 0.5rem;
}

/* 兑换物品 */
.rewards-container h2 {
    margin-bottom: 1rem;
}

.balance-bar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.balance-bar .amount {
    font-size: 1.5rem;
    font-weight: bold;
}

.rewards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.reward-card {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.reward-card:hover {
    transform: translateY(-4px);
}

.reward-card.disabled {
    opacity: 0.6;
}

.reward-card h3 {
    margin-bottom: 0.5rem;
    color: #333;
}

.reward-card .description {
    color: #666;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    min-height: 40px;
}

.reward-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.reward-info .price {
    font-size: 1.5rem;
    font-weight: bold;
    color: #667eea;
}

.reward-info .stock {
    font-size: 0.875rem;
    color: #666;
}

.reward-info .stock.unlimited {
    color: #27ae60;
}

.reward-info .stock.out {
    color: #e74c3c;
}

/* 兑换记录 */
.redemptions-container h2 {
    margin-bottom: 1.5rem;
}

.redemptions-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.redemption-card {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.redemption-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.redemption-header h3 {
    color: #333;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-completed {
    background-color: #d4edda;
    color: #155724;
}

.status-pending {
    background-color: #fff3cd;
    color: #856404;
}

.status-cancelled {
    background-color: #f8d7da;
    color: #721c24;
}

.redemption-body .description {
    color: #666;
    margin-bottom: 0.75rem;
}

.redemption-info {
    display: flex;
    justify-content: space-between;
    color: #999;
    font-size: 0.875rem;
}

.redemption-info .amount {
    color: #667eea;
    font-weight: 500;
}

.remark {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 0.875rem;
}

/* 管理后台 */
.admin-layout {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
}

.admin-sidebar {
    background: white;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    height: fit-content;
}

.admin-sidebar h3 {
    margin-bottom: 1rem;
    color: #333;
}

.admin-sidebar ul {
    list-style: none;
}

.admin-sidebar li {
    margin-bottom: 0.5rem;
}

.admin-sidebar a {
    display: block;
    padding: 0.5rem;
    color: #666;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s;
}

.admin-sidebar a:hover {
    background-color: #f5f5f5;
    color: #667eea;
}

.admin-content {
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.admin-content h2 {
    margin-bottom: 1.5rem;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.admin-stats .stat-card {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    text-align: center;
}

.admin-stats .stat-card h3 {
    font-size: 0.875rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.admin-stats .stat-card .number {
    font-size: 2rem;
    font-weight: bold;
    color: #667eea;
}

.admin-quick-links {
    margin-top: 2rem;
}

.admin-quick-links h3 {
    margin-bottom: 1rem;
}

.quick-links {
    display: flex;
    gap: 1rem;
}

.admin-form-section {
    background: #f8f9fa;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.admin-form-section h3 {
    margin-bottom: 1rem;
}

.admin-table-section {
    margin-top: 2rem;
}

.admin-table-section h3 {
    margin-bottom: 1rem;
}

.admin-table-container {
    overflow-x: auto;
}

/* 响应式 */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }
    
    .nav-brand a {
        font-size: 1.2rem;
    }
    
    .nav-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
    
    .nav-links a {
        margin: 0;
        padding: 0.5rem;
        font-size: 0.9rem;
    }
    
    .container {
        padding: 1rem;
    }
    
    .hero {
        padding: 2rem 1rem;
    }
    
    .hero h1 {
        font-size: 1.5rem;
    }
    
    .hero p {
        font-size: 1rem;
    }
    
    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    /* 后台移动端适配 */
    .admin-layout {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .admin-sidebar {
        order: -1;
        padding: 1rem;
    }
    
    .admin-sidebar h3 {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }
    
    .admin-sidebar ul {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .admin-sidebar li {
        margin-bottom: 0;
    }
    
    .admin-sidebar a {
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
        white-space: nowrap;
    }
    
    .admin-content {
        padding: 1rem;
    }
    
    .admin-content h2 {
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }
    
    .admin-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .admin-stats .stat-card {
        padding: 1rem;
    }
    
    .admin-stats .stat-card .number {
        font-size: 1.5rem;
    }
    
    .admin-form-section {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .admin-form-section h3 {
        font-size: 1rem;
    }
    
    /* 表格横向滚动 */
    .admin-table-container,
    .table-scroll-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .admin-table {
        min-width: 600px;
        font-size: 0.85rem;
    }
    
    .admin-table th,
    .admin-table td {
        padding: 0.5rem;
        white-space: nowrap;
    }
    
    /* 按钮适配 */
    .btn {
        padding: 0.6rem 1rem;
        font-size: 0.9rem;
    }
    
    .btn-sm {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }
    
    .order-actions {
        flex-direction: column;
    }
    
    /* 兑换卡片适配 */
    .rewards-grid {
        grid-template-columns: 1fr;
    }
    
    .reward-card {
        padding: 1rem;
    }
    
    /* 详情页适配 */
    .detail-row {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .detail-row .label {
        width: auto;
        font-size: 0.85rem;
    }
    
    /* 认证页面适配 */
    .auth-container {
        margin: 1rem;
        padding: 1.5rem;
    }
    
    /* 统计卡片适配 */
    .stats-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .stat-card .amount {
        font-size: 1.5rem;
    }
}

/* 超小屏幕适配 */
@media (max-width: 480px) {
    .nav-brand a {
        font-size: 1rem;
    }
    
    .admin-sidebar a {
        padding: 0.3rem 0.5rem;
        font-size: 0.8rem;
    }
    
    .admin-stats {
        grid-template-columns: 1fr;
    }
    
    .stats-cards {
        grid-template-columns: 1fr;
    }
    
    .hero h1 {
        font-size: 1.25rem;
    }
    
    .captcha-group {
        flex-direction: column;
        align-items: stretch;
    }
    
    .captcha-image {
        height: 50px;
        align-self: center;
    }
    
    /* 页脚适配 */
    .footer {
        padding: 1rem;
        font-size: 0.85rem;
    }
    
    .footer p {
        margin: 0;
        line-height: 1.5;
    }
}