/* --- 在原有 style.css 基础上覆盖或增加 --- */

/* 1. 响应式容器 */
.container {
    width: 98%; /* 手机端两边留白 */
    max-width: 720px;
    margin: 10px auto; /* 缩小间距 */
}

/* 2. 响应式表格 (移动端常见痛点) */
@media screen and (max-width: 600px) {
    /* 让表格在小屏幕下可以横向滚动，或者变成块状显示 */
    .content { padding: 15px; }
    
    table, thead, tbody, th, td, tr { 
        display: block; 
    }
    
    thead tr { position: absolute; top: -9999px; left: -9999px; }
    
    tr { border: 1px solid #dee7f6; margin-bottom: 10px; border-radius: 6px; }
    
    td { 
        border: none;
        border-bottom: 1px solid #eee; 
        position: relative;
        padding-left: 50%; 
        text-align: right;
    }
    
    td:before { 
        position: absolute;
        left: 10px;
        width: 45%; 
        padding-right: 10px; 
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        content: attr(data-label); /* 需要在 HTML 中配合 data-label 属性 */
    }
    
    /* 调整标题和导航 */
    .header { padding: 15px; text-align: center; }
    .user-nav { 
        float: none; 
        margin-top: 10px; 
        background: rgba(255,255,255,0.5); 
        padding: 5px;
        border-radius: 4px;
    }
}

/* 3. 输入框优化 (手机上高度要够，方便手指点击) */
input[type="text"], input[type="password"], input[type="email"], select {
    font-size: 16px; /* 防止 iOS 自动缩放 */
    padding: 12px 8px; 
}

.btn {
    padding: 10px 15px; /* 更大的点击区域 */
    text-align: center;
}