/* === CSS 重置与基础设置 === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    background-color: #f8f8f8; padding: 0 15px; color: #333;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* === 1. 顶部导航栏样式 (保持不变) === */
.top-nav { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; background-color: #f8f8f8; position: sticky; top: 0; z-index: 10; border-bottom: 1px solid #eee; margin-bottom: 15px; }
.back-button { font-size: 24px; font-weight: bold; color: #555; text-decoration: none; padding: 5px 10px; }
.title { font-size: 18px; font-weight: 600; color: #000; }
.pill-buttons { display: flex; border: 1px solid #ccc; border-radius: 15px; overflow: hidden; }
.pill-buttons button { background-color: transparent; border: none; padding: 5px 10px; font-size: 16px; cursor: pointer; color: #555; }
.dots-button { border-right: 1px solid #ccc; font-weight: bold; letter-spacing: 1px; }
.minus-button .circle-minus { display: inline-block; width: 16px; height: 16px; border: 1px solid #555; border-radius: 50%; line-height: 14px; text-align: center; font-weight: bold; }

/* === 2. 学校信息红色抬头区域样式 (保持不变) === */
.school-info { background-color: #c10000; border-radius: 0; margin-bottom: 15px; overflow: hidden; line-height: 0; }
.school-header-image { display: block; width: 100%; height: auto; }

/* === 3. 通用卡片基础样式 (保持不变) === */
.card-section { background-color: #ffffff; border-radius: 12px; padding: 20px; margin-bottom: 15px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); position: relative; overflow: hidden; }

/* === 4. 信息卡片样式 (时间, 照片, 姓名, 学院) === */
.info-card { text-align: center; }
.time-display { font-size: 20px; font-weight: 500; color: #333; margin-bottom: 20px; letter-spacing: 1px; }
.student-photo-container { position: relative; display: inline-block; margin-bottom: 15px; }
/* 新增：为包裹照片的 label 添加鼠标手势 */
.student-photo-container label {
    cursor: pointer; /* 鼠标悬停时显示手型光标，提示可点击 */
    display: inline-block; /* 使 label 尺寸适应内部图片 */
}
.student-pic { display: block; width: 120px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; margin: 0 auto; border: 3px solid #e0e0e0; }
.status-overlay { position: absolute; bottom: 5px; left: 5px; right: 5px; background-color: rgba(128, 128, 128, 0.7); padding: 4px 0; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px; }
.status-text { color: #28a745; font-size: 14px; font-weight: bold; }
.student-name { font-size: 18px; font-weight: bold; color: #000; margin-bottom: 5px; padding: 2px 5px; /* 微调内边距，给聚焦框留空间 */ min-height: 1.2em; /* 防止内容为空时塌陷 */ }
.student-department { font-size: 16px; color: #555; padding: 2px 5px; /* 微调内边距 */ min-height: 1.2em; /* 防止内容为空时塌陷 */ }

/* 新增：为可编辑元素添加聚焦样式 */
[contenteditable="true"]:focus {
    outline: 2px solid #88cffa; /* 聚焦时显示蓝色外轮廓 */
    background-color: #f0f8ff; /* 聚焦时使用淡蓝色背景 */
    border-radius: 3px; /* 轻微圆角 */
    box-shadow: 0 0 5px rgba(136, 207, 250, 0.5); /* 添加一点阴影效果 */
}


/* === 5. 通行权限标题卡片样式 (保持不变) === */
.permission-title-card { padding: 15px 20px; }
.permission-title { font-size: 16px; font-weight: bold; color: #333; text-align: center; }

/* === 6. “今日”/“明日”卡片容器样式 (保持不变) === */
.permission-status-container { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 15px; }

/* === 7. 单个“今日”或“明日”卡片样式 (保持不变) === */
.day-card { flex: 1; padding: 15px; text-align: center; margin-bottom: 0; position: relative; overflow: hidden; background-color: #ffffff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.day-status { /* */ }
.day-label { display: block; font-size: 14px; color: #555; margin-bottom: 8px; }
.day-permission { font-size: 18px; font-weight: bold; }
.day-permission.available { color: #28a745; }

/* === 8. 水印样式 (保持不变) === */
.watermark { position: absolute; font-size: 25px; font-weight: bold; color: rgba(0, 0, 0, 0.08); transform: rotate(-15deg); white-space: nowrap; user-select: none; pointer-events: none; z-index: 0; }
.watermark-1 { top: 50px; left: 50%; transform: translateX(-50%) rotate(-15deg); }
.watermark-2 { top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-15deg); }

/* === 9. 响应式设计媒体查询 (保持不变) === */
@media (max-width: 360px) {
    body { padding: 0 10px; }
    .time-display { font-size: 18px; }
    .student-pic { width: 100px; }
    .watermark { font-size: 20px; }
    .permission-status-container { gap: 10px; }
    .day-card { padding: 12px; }
    .day-permission { font-size: 16px; }
}