/* ==================== 全局基础样式 ==================== */
body {
    margin: 0;
    padding: 60px 0;
    background-color: #EFEFEF;
    font-family: "微软雅黑", "Microsoft Yahei", sans-serif;
    color: #666;
}

/* ==================== Logo区域（全局通用） ==================== */
.logo-wrapper {
    text-align: center;
    margin-bottom: 40px;
}
.logo-placeholder {
    display: inline-block;
    width: 220px;
    height: 80px;
    border: 1px solid #ddd;
    border-radius: 30px;
    background-color: #fff;
    line-height: 80px;
    text-align: center;
}

/* ==================== 登录页样式 ==================== */
.login-card {
    width: 80%;
    max-width: 400px;
    margin: 0 auto;
    padding: 40px 25px;
    background-color: #fff;
    border-radius: 30px;
    box-sizing: border-box;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08);
}
.login-card h2 {
    margin: 0 0 35px;
    text-align: center;
    font-size: 24px;
    color: #666;
}

.input-group {
    margin-bottom: 28px;
}
.input-group label {
    display: block;
    margin-bottom: 12px;
    font-size: 15px;
    color: #666;
}
.input-group input {
    width: 100%;
    height: 48px;
    padding: 0 18px;
    border: 1px solid #ddd;
    border-radius: 30px;
    box-sizing: border-box;
    font-size: 15px;
    color: #666;
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.05),
                inset -2px -2px 4px rgba(255, 255, 255, 0.9);
    outline: none;
    line-height: 48px;
}
.input-group input:focus {
    border-color: #79B3C9;
}

.login-btn {
    width: 100%;
    height: 48px;
    padding: 0;
    background-color: #79B3C9;
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: 17px;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 8px 12px rgba(121, 179, 201, 0.25);
    line-height: 48px;
}
.login-btn:hover {
    background-color: #68a1b8;
    box-shadow: 0 10px 15px rgba(121, 179, 201, 0.3);
}

.agreement-area {
    width: 80%;
    max-width: 400px;
    margin: 30px auto 0;
    font-size: 14px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 10px;
}
.agreement-area input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #79B3C9;
    box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.05),
                inset -1px -1px 2px rgba(255, 255, 255, 0.8);
    border-radius: initial;
    cursor: pointer;
}
.agreement-area label {
    cursor: pointer;
    line-height: 1.5;
}
.agreement-area a {
    color: #79B3C9;
    text-decoration: none;
}
.agreement-area a:hover {
    text-decoration: underline;
}

/* ==================== Staff权限选择页样式 ==================== */
.staff-card {
    width: 80%;
    max-width: 400px;
    margin: 0 auto;
    padding: 40px 25px;
    background-color: #fff;
    border-radius: 30px;
    box-sizing: border-box;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08);
    text-align: center;
}
.staff-card h2 {
    margin: 0 0 20px;
    font-size: 24px;
    color: #666;
}
.staff-card p {
    margin: 0 0 35px;
    font-size: 15px;
    color: #888;
    line-height: 1.6;
}

.btn-primary {
    width: 100%;
    height: 48px;
    padding: 0;
    background-color: #79B3C9;
    color: #fff;
    border: none;
    border-radius: 30px;
    font-size: 17px;
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
    box-shadow: 0 8px 12px rgba(121, 179, 201, 0.25);
    line-height: 48px;
    margin-bottom: 18px;
}
.btn-primary:hover {
    background-color: #68a1b8;
    box-shadow: 0 10px 15px rgba(121, 179, 201, 0.3);
}

.btn-outline {
    width: 100%;
    height: 48px;
    padding: 0;
    background-color: #fff;
    color: #79B3C9;
    border: 1px solid #79B3C9;
    border-radius: 30px;
    font-size: 17px;
    cursor: pointer;
    transition: background-color 0.3s;
    line-height: 48px;
}
.btn-outline:hover {
    background-color: #f5f9fa;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    display: none;
}
.modal-content {
    width: 75%;
    max-width: 350px;
    background-color: #fff;
    border-radius: 30px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.15);
}
.modal-content h3 {
    margin: 0 0 25px;
    font-size: 20px;
    color: #666;
}
.modal-link {
    display: block;
    width: 100%;
    padding: 15px 0;
    margin-bottom: 15px;
    border-radius: 30px;
    font-size: 16px;
    text-decoration: none;
    transition: background-color 0.3s;
}
.primary-link {
    background-color: #79B3C9;
    color: #fff;
    box-shadow: 0 6px 10px rgba(121, 179, 201, 0.2);
}
.primary-link:hover {
    background-color: #68a1b8;
}
.backup-link {
    background-color: #f5f5f5;
    color: #79B3C9;
    font-size: 15px;
}
.backup-link:hover {
    background-color: #eee;
}

/* ==================== 验票页样式（修正二维码畸形） ==================== */
.checkin-card {
    width: 80%;
    max-width: 380px;
    margin: 0 auto;
    padding: 0;
    background-color: #fff;
    border-radius: 30px;
    box-sizing: border-box;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* 身份标题栏 */
.identity-header {
    width: 100%;
    padding: 18px 0;
    text-align: center;
    border-radius: 30px 30px 0 0;
}
.identity-header h1 {
    margin: 0;
    font-size: 22px;
    font-weight: bold;
}

.header-staff {
    background-color: #2A82E4;
    color: #fff;
}
.header-minor {
    background-color: #43CF7C;
    color: #fff;
}
.header-sponsor {
    background-color: #FFC300;
    color: #000;
}
.header-accommodation {
    background-color: #E33C64;
    color: #fff;
}

/* 二维码区域（核心修正：严格1:1 + 溢出隐藏） */
.qrcode-section {
    padding: 30px 25px;
    text-align: center;
}
.qrcode-container {
    width: 180px;
    height: 180px; /* 严格1:1 */
    margin: 0 auto 15px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* 关键：隐藏溢出内容 */
    position: relative; /* 防止内部元素偏移 */
}
/* 强制二维码画布/图片为正方形 */
.qrcode-container canvas,
.qrcode-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain; /* 保证内容不拉伸 */
}
.qrcode-tip {
    margin: 0;
    color: #888;
    font-size: 14px;
    line-height: 1.4;
}

/* 用户信息区域 */
.user-info-section {
    background-color: #f5f5f5;
    padding: 25px;
    margin: 0 25px 25px;
    border-radius: 15px;
    text-align: center;
}
.fursona-name {
    margin: 0 0 5px;
    font-size: 20px;
    color: #333;
    font-weight: 500;
}
.fursona-en {
    margin: 0 0 20px;
    font-size: 14px;
    color: #666;
    text-transform: uppercase;
}
.contact-info {
    margin: 8px 0;
    font-size: 14px;
    color: #666;
}

/* 刷新按钮 */
#refreshQrcodeBtn {
    width: calc(100% - 50px);
    margin: 0 25px 30px;
}

/* 验票页刷新按钮 */
#refreshQrcodeBtn {
    width: calc(100% - 50px);
    margin: 0 25px 15px; /* 调整底部间距，给登出按钮留空间 */
}

/* 新增登出按钮样式 */
#logoutBtn {
    width: calc(100% - 50px);
    margin: 0 25px 30px;
    background-color: #f8f8f8; /* 浅灰背景区分主按钮 */
}
#logoutBtn:hover {
    background-color: #f0f0f0;
    color: #E33C64; /* hover变红，强化退出提示 */
    border-color: #E33C64;
}

/* ==================== 登录页遮罩样式 ==================== */
.global-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    /* 默认隐藏 */
    display: none;
}
.mask-content {
    background-color: #fff;
    padding: 30px 40px;
    border-radius: 30px;
    font-size: 18px;
    color: #666;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    text-align: center;
    min-width: 200px;
}
/* 错误提示文字颜色 */
.mask-content.error {
    color: #E33C64;
}

/* 未成年标签样式 - 绿色圆角矩形 */
.minor-tag {
    display: none; /* 默认隐藏 */
    background-color: #4CAF50; /* 绿色参考值，可替换为你指定的数值 */
    color: #ffffff;
    padding: 4px 12px;
    border-radius: 20px; /* 圆角矩形 */
    font-size: 12px;
    font-weight: normal;
    margin-left: 8px;
    vertical-align: middle;
}
/* 显示未成年标签 */
.minor-tag.show {
    display: inline-block;
}

/* 二维码容器样式 - 180x180 1:1比例 */
#qrcodeContainer {
    width: 180px !important; /* 改为180px */
    height: 180px !important;
    margin: 48 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 兼容QRCode.js生成的canvas/img，强制1:1 */
#qrcodeContainer canvas,
#qrcodeContainer img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain; /* 防止拉伸变形 */
}

/* 保留之前的未成年标签样式，微调适配新DOM */
.minor-tag {
    display: none;
    background-color: #4CAF50;
    color: #ffffff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: normal;
    margin-left: 8px;
    vertical-align: middle;
}
.minor-tag.show {
    display: inline-block;
}

/* 兽设名样式 - 适配标签同行显示 */
.fursona-name {
    display: inline-flex;
    align-items: center;
    margin: 0; /* 清除默认p标签间距 */
    font-size: 16px;
    font-weight: 500;
}


/* 未登录提示样式 */
.not-login-tip {
    text-align: center;
    font-size: 18px;
    color: #E33C64;
    font-weight: 500;
    padding: 60px 20px;
    line-height: 1.5;
}


/* 设置页样式 */
/* 设置页整体样式 */
.setting-container {
    padding: 20px;
    max-width: 400px;
    margin: 0 auto;
}
/* 返回箭头 */
.back-arrow a {
    font-size: 24px;
    color: #666;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 20px;
}
/* 核心：卡片容器 - 同组共用一个卡片，承载背景/阴影/圆角 */
.setting-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 25px;
    overflow: hidden; /* 隐藏子项边框圆角，贴合卡片 */
}
/* 卡片内功能项 - 无独立背景，仅保留内边距和底部分隔线 */
.setting-item {
    padding: 18px 20px;
    font-size: 16px;
    color: #333;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid #f5f5f5; /* 项之间分隔线，视觉区分 */
}
/* 取消最后一个子项的分隔线，避免卡片底部多余线条 */
.setting-card .setting-item:last-child {
    border-bottom: none;
}
/* 项hover效果 */
.setting-item:hover {
    background: #f8f8f8;
}
/* 危险项（登出）红色文字，保留突出显示 */
.setting-item-danger {
    color: #E33C64;
}
/* 底部单独须知项 - 独立卡片样式（同组卡片一致） */
.single-item {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-bottom: none; /* 单独项无分隔线 */
}

#moreFuncBtn {
    width: calc(100% - 50px);
    margin: 0 25px 30px;
    background-color: #f8f8f8; /* 浅灰背景区分主按钮 */
}
#moreFuncBtn:hover {
    background-color: #f0f0f0;
    color: #476FA7; /* hover变红，强化退出提示 */
    border-color: #476FA7;
}

/* ==================== 活动时间表专属样式（复用系统统一风格） ==================== */
/* 主卡片适配 */
.schedule-card {
    width: 85%;
    max-width: 550px;
    margin: 0 auto;
    padding: 40px 30px;
    box-sizing: border-box;
}

/* 区域标题 */
.card-title {
    margin: 0 0 35px;
    text-align: center;
    font-size: 24px;
    color: #666;
    font-weight: 500;
}
.section-title {
    margin: 0 0 15px;
    font-size: 16px;
    color: #666;
    padding-left: 10px;
    border-left: 4px solid #79B3C9;
}

/* 活动区域间距 */
.schedule-section {
    margin-bottom: 30px;
}
/* 活动列表通用样式 */
.schedule-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* 单个活动项（复用系统浅背景+圆角） */
.schedule-item {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    background-color: #f8f8f8;
    border-radius: 15px;
    transition: all 0.3s ease;
}
.schedule-item:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

/* 活动时间块（主色调背景，高亮） */
.schedule-time {
    min-width: 90px;
    padding: 8px 12px;
    background-color: #79B3C9;
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    text-align: center;
    font-weight: 500;
    margin-right: 15px;
}

/* 活动名称 */
.schedule-name {
    flex: 1;
    font-size: 16px;
    color: #333;
    font-weight: 400;
}

/* 当前活动高亮样式（加深主色调+文字高亮） */
.current-activity-list .schedule-item {
    background-color: #eef7fb;
    border: 1px solid #79B3C9;
}
.current-activity-list .schedule-time {
    background-color: #5a9cb8;
}
.current-activity-list .schedule-name {
    color: #5a9cb8;
    font-weight: 500;
}

/* 无数据提示 */
.schedule-empty {
    padding: 20px;
    text-align: center;
    font-size: 14px;
    color: #999;
    background-color: #f8f8f8;
    border-radius: 15px;
}

/* 按钮适配 */
#backBtn {
    width: 100%;
    margin-top: 10px;
}

/* 移动端适配（屏幕<480px） */
@media (max-width: 480px) {
    .schedule-card {
        width: 92%;
        padding: 30px 20px;
    }
    .schedule-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .schedule-time {
        margin-right: 0;
        width: 100%;
        box-sizing: border-box;
    }
    .schedule-name {
        width: 100%;
    }
}