:root {
    /* 主题配色：提取自目标UI的清爽蓝色 */
    --primary-blue: #4b89ff; 
    --bg-color: #f0f4f8;       /* 页面底色：极淡的蓝灰色 */
    --card-bg: #ffffff;        /* 卡片背景：纯白 */
    --item-bg: #f4f8ff;        /* 列表项背景：带一点点蓝 */
    --text-main: #333333;
    --text-muted: #999999;
    --border-color: #e2e8f0;
}

/* 全局移动端去默认样式 */
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* 去除安卓/iOS点击时的灰色背景 */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    background-color: var(--bg-color);
    margin: 0;
    padding: 15px; /* 手机端四周的安全距离 */
    color: var(--text-main);
}

.app-container {
    max-width: 500px; /* 限制在PC端的最大宽度，手机端会自动撑满 */
    margin: 0 auto;
}

/* 卡片通用样式 */
.card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); /* 增加极其轻微的高级感阴影 */
}

/* 头部样式 */
.main-title {
    text-align: center;
    color: var(--primary-blue);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 15px 0;
}

.instructions {
    background: #f7f9fa;
    padding: 12px 15px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.8;
}

.instructions p { margin: 2px 0; }
.highlight-text { color: var(--primary-blue); margin-top: 8px !important; font-size: 12px; }

/* 核心内容区 */
.main-content {
    padding: 20px 15px;
}

.input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

/* 优化手机端输入框 */
input[type="text"] {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 16px; /* 必须是16px，否则iOS会在此处强制放大页面 */
    outline: none;
    -webkit-appearance: none; /* 去除iOS内部阴影 */
    text-align: center;
}

input[type="text"]:focus {
    border-color: var(--primary-blue);
}

/* 主按钮 */
.btn-primary {
    background-color: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 0 20px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
    min-height: 44px; /* 满足苹果官方建议的最小触控热区要求 */
}

.refresh-status {
    text-align: center;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 15px;
}
.refresh-status span { color: var(--primary-blue); font-weight: bold; }

/* 列表容器与单项 */
.list-container {
    display: flex;
    flex-direction: column;
    gap: 12px; /* 列表项之间的间距 */
}

.list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 15px;
    background: var(--item-bg);
    border-radius: 8px;
    /* 模仿目标UI左侧的粗蓝色标识线 */
    border-left: 4px solid var(--primary-blue); 
}

.item-info {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.code-text {
    font-size: 18px;
    font-weight: bold;
    color: var(--text-main);
    letter-spacing: 1px;
}

.time-text {
    font-size: 12px;
    color: var(--text-muted);
}

/* 跳转小按钮 */
.btn-jump {
    background-color: var(--primary-blue);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.btn-jump:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

/* --- 新增：已使用状态的卡片专属样式 --- */
.list-item.used {
    background: #f8f9fa; /* 更暗淡的灰白底色，与第二张图一致 */
    border-left: 4px solid #d1d5db; /* 左侧高亮线变为灰色 */
}

/* 针对已使用卡片，让左侧的验证码颜色也稍微变淡一点，视觉更统一 */
.list-item.used .code-text {
    color: #666666; 
}

/* 新增：已使用状态的右侧纯文本（替代原来的按钮） */
.status-used {
    font-size: 14px;
    color: #9ca3af; /* 灰色文字 */
    font-weight: normal;
    padding: 8px 4px; /* 稍微留点内边距对齐 */
}