/*========= 通用变量 & 工具 =========*/
:root{
  --primary:#3b82f6; --danger:#ef4444; --warning:#f59e0b; --success:#10b981;
  --radius:8px; --shadow:0 2px 6px rgba(0,0,0,.08);
  --font:"PingFang SC","Microsoft YaHei",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:var(--font);background:#f9fafb;color:#333;}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
button{cursor:pointer;border:none;border-radius:var(--radius);padding:6px 12px;background:var(--primary);color:#fff;transition:.2s;}
button:hover{background:#2563eb;}
.disabled{opacity:.5;pointer-events:none;}

/*========= 布局框架 =========*/
.header,.footer{background:#fff;border:1px solid #e5e7eb;text-align:center;}
.header{height:10%;display:flex;align-items:center;justify-content:space-between;padding:0 20px;}
.footer{height:5%;line-height:2.2;}
.main{min-height:70%;padding:20px;}
.border-left,.border-right{position:fixed;top:0;width:6.67%;height:100%;background-size:cover;z-index:1;}
.border-left{left:0;}.border-right{right:0;}

/*========= 模块预置 =========*/
/* 任务 */
#taskList{display:flex;flex-direction:column;gap:12px;}
.task-item{display:flex;justify-content:space-between;align-items:center;background:#fff;padding:12px 16px;border-radius:var(--radius);box-shadow:var(--shadow);}
.task-item.complete{background:#d1fae5;}
.checkinBtn{background:var(--success);}.checkinBtn.disabled{background:#9ca3af;}

/* 商城 */
#mallItems{display:flex;flex-wrap:wrap;gap:20px;}
.mall-item{width:160px;background:#fff;border:1px solid #e5e7eb;border-radius:var(--radius);padding:10px;text-align:center;box-shadow:var(--shadow);}
.mall-item img{height:120px;object-fit:contain;margin-bottom:6px;}
.exchangeBtn{background:var(--warning);}

/* 用户 */
#userInfo{background:#fff;padding:20px;border-radius:var(--radius);text-align:center;box-shadow:var(--shadow);}
#userInfo img{width:80px;height:80px;border-radius:50%;margin:0 auto 10px;}
#levelBar{width:200px;height:12px;background:#e5e7eb;border-radius:6px;margin:10px auto;overflow:hidden;}
#levelBar div{height:100%;background:var(--primary);}

/* 皮肤 & 背景 & 日历 & 特效 & 弹窗 & 头像框 等所有文档提到模块的钩子预置 */
.skin-frame{}
.skin-avatar-frame{}
.skin-button{}
.skin-calendar{}
.skin-checkin-effect{}
.skin-background-filter{}
.skin-level-icon{}
.skin-experience-bar{}
.skin-job-costume{}

.calendar-popup{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:999;}
.calendar-container{background:#fff;border-radius:var(--radius);padding:20px;max-width:90%;max-height:80%;overflow:auto;}
.checkin-mark{color:var(--success);font-weight:700;}

.effect-container{position:fixed;inset:0;pointer-events:none;z-index:1000;}
.points-animation{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:32px;font-weight:700;color:var(--success);animation:fadeUp 1s ease-out forwards;}
@keyframes fadeUp{0%{opacity:1;transform:translate(-50%,-50%);}100%{opacity:0;transform:translate(-50%,-120%);}}
body {
  display: flex;
  flex-direction: column;
  align-items: center;          /* 水平居中 */
  min-height: 100vh;
  margin: 0;
  background: #f9fafb;
}

.main {
  width: 100%;
  max-width: 1200px;            /* 大屏留空，小屏满宽 */
  padding: 20px;
  box-sizing: border-box;
}

/* 小块居中 */
.login-box,
.error-box,
#userInfo,
#mallItems,
#taskList {
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
}
/* ===== 导航第二行居中终版 ===== */
.header {
  flex-wrap: wrap;
  padding-bottom: 0;
}
.header h1 {
  width: 100%;
  text-align: center;
  margin: 0;
  line-height: 46px;
}
.header nav {
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 20px;
  padding: 8px 0;
}
.header nav a {
  padding: 6px 16px;
  background: var(--primary);
  color: #fff;
  border-radius: var(--radius);
  text-decoration: none;
  transition: .2s;
}
.header nav a:hover {
  background: #2563eb;
}

/* ===== 原有 main 样式（保持不动） ===== */
.main {
  min-height: 70vh;
  padding: 20px;
  box-sizing: border-box;
}