/* ==================== 全局变量与重置 ==================== */
:root{
  --c-red-l:#FDE8E8;      /* 浅红 */
  --c-red-m:#F9D0D0;      /* 中浅红 */
  --c-red-d:#E8788C;      /* 深红强调 */
  --c-yellow-l:#FFF6E0;   /* 浅黄 */
  --c-yellow-m:#FFEAB8;   /* 中浅黄 */
  --c-cream:#FBF7F0;      /* 米白背景 */
  --c-card:#FFFFFF;       /* 卡片白 */
  --c-text:#5A4A45;       /* 主文字 暖棕 */
  --c-text-l:#9A8A85;     /* 次文字 */
  --c-border:#F0E0DA;     /* 边框 */
  --c-green:#8BC9A0;      /* 绿色点缀 */
  --c-blue:#9BC4D8;       /* 蓝色点缀 */
  --sidebar-w:220px;
  --sidebar-collapsed:64px;
  --radius:14px;
  --shadow:0 2px 12px rgba(180,120,110,.08);
  --shadow-lg:0 8px 32px rgba(180,120,110,.15);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  background:var(--c-cream);
  color:var(--c-text);
  display:flex;
  overflow:hidden;
  font-size:14px;
  line-height:1.6;
}
button{font-family:inherit;cursor:pointer;border:none;outline:none;}
input,textarea,select{font-family:inherit;font-size:14px;outline:none;}

/* ==================== 侧边栏 ==================== */
.sidebar{
  width:var(--sidebar-w);
  min-width:var(--sidebar-w);
  background:linear-gradient(180deg,var(--c-red-l) 0%,var(--c-yellow-l) 100%);
  display:flex;
  flex-direction:column;
  transition:width .3s ease,min-width .3s ease;
  overflow:hidden;
  border-right:1px solid var(--c-border);
  z-index:100;
}
.sidebar-header{
  padding:18px 16px;
  display:flex;
  align-items:center;
  gap:10px;
  border-bottom:1px solid rgba(232,120,140,.15);
  white-space:nowrap;
}
.sidebar-logo{
  width:36px;height:36px;
  min-width:36px;
  border-radius:10px;
  background:linear-gradient(135deg,var(--c-red-d),var(--c-yellow-m));
  display:flex;align-items:center;justify-content:center;
  font-size:20px;color:#fff;
  box-shadow:0 2px 8px rgba(232,120,140,.3);
}
.sidebar-logo svg{width:20px;height:20px;display:block;}
.sidebar-title{
  font-size:16px;font-weight:700;color:var(--c-red-d);
  opacity:1;transition:opacity .2s;
}
.menu-label{opacity:1;transition:opacity .2s;}
.nav-menu{flex:1;padding:10px 8px;overflow-y:auto;}
.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:11px 12px;
  border-radius:10px;
  cursor:pointer;
  color:var(--c-text);
  font-size:14px;
  margin-bottom:4px;
  transition:all .2s;
  white-space:nowrap;
}
.nav-item:hover{background:rgba(255,255,255,.6);}
.nav-item.active{
  background:#fff;
  color:var(--c-red-d);
  font-weight:600;
  box-shadow:var(--shadow);
}
.nav-icon{
  width:22px;min-width:22px;
  display:flex;align-items:center;justify-content:center;
}
.nav-icon svg{width:18px;height:18px;display:block;}
.nav-item.hidden{display:none;}

/* ==================== 主内容区 ==================== */
.main{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.topbar{
  padding:14px 24px;
  background:var(--c-card);
  border-bottom:1px solid var(--c-border);
  display:flex;align-items:center;gap:16px;
  box-shadow:0 1px 4px rgba(180,120,110,.05);
}
.topbar h1{font-size:18px;font-weight:700;color:var(--c-text);}
.content{
  flex:1;
  overflow-y:auto;
  padding:20px 24px;
}

/* 顶栏用户区 */
.topbar-user{position:relative;}
.user-btn{
  display:flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:20px;
  background:var(--c-cream);color:var(--c-text);
  font-size:13px;
}
.user-btn:hover{background:var(--c-red-l);}
.user-avatar{
  width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--c-red-d),var(--c-yellow-m));
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;
}
.user-menu{
  position:absolute;top:48px;right:0;
  background:#fff;border-radius:12px;box-shadow:var(--shadow-lg);
  width:max-content;padding:8px;display:none;z-index:200;
}
.user-menu.show{display:block;}
.user-menu a,.user-menu button{
  display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  padding:9px 12px;border-radius:8px;background:transparent;
  color:var(--c-text);font-size:13px;
  text-decoration:none;border:none;cursor:pointer;
}
.user-menu a svg,.user-menu button svg{width:15px;height:15px;min-width:15px;display:block;}
.user-menu a:hover,.user-menu button:hover{background:var(--c-cream);}

/* ==================== 通用组件 ==================== */
.section-title{
  font-size:16px;font-weight:700;
  margin:6px 0 14px;
  display:flex;align-items:center;gap:8px;
}
.section-title::before{
  content:"";width:4px;height:18px;border-radius:2px;
  background:linear-gradient(180deg,var(--c-red-d),var(--c-yellow-m));
}
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:14px;
  margin-bottom:28px;
}
.work-card{
  background:var(--c-card);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:all .25s;
  border:1px solid transparent;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:14px;
}
.work-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
  border-color:var(--c-red-m);
}
/* 班委卡片：左上职务、左下学生、右上删除按钮 */
.committee-card{
  background:var(--c-card);
  border-radius:var(--radius);
  padding:16px 14px;
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:all .25s;
  border:1px solid transparent;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.committee-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
  border-color:var(--c-red-m);
}
.committee-info{min-width:0;}
.committee-position{
  font-size:16px;
  font-weight:700;
  color:var(--c-title);
  margin-bottom:6px;
}
.committee-student{
  font-size:13px;
  color:var(--c-text);
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* 值日卡片 */
.duty-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
.duty-card{
  background:var(--c-card);
  border-radius:var(--radius);
  padding:16px 16px 14px;
  box-shadow:var(--shadow);
  border:1px solid transparent;
  transition:all .25s;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.duty-card:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-lg);
  border-color:var(--c-red-m);
}
.duty-head{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.duty-weekday{
  background:var(--c-yellow-l);
  color:#B8862B;
  font-size:12px;
  font-weight:600;
  padding:3px 10px;
  border-radius:999px;
  white-space:nowrap;
  border:1px solid var(--c-yellow-m);
}
.duty-group{
  font-size:15px;
  font-weight:700;
  color:var(--c-title);
  margin-right:auto;
  word-break:break-all;
}
.duty-actions{display:flex;gap:6px;flex-shrink:0;}
.duty-body{display:flex;flex-direction:column;gap:8px;}
.duty-field{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:13px;
  line-height:1.5;
}
.duty-label{
  color:var(--c-text-l);
  flex-shrink:0;
  min-width:36px;
}
.duty-value{
  color:var(--c-text);
  word-break:break-all;
  flex:1;
}
@media(max-width:600px){
  .duty-grid{grid-template-columns:1fr;}
}

.work-card-icon{
  width:52px;height:52px;border-radius:14px;
  min-width:52px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:600;
}
.work-card-icon svg{width:26px;height:26px;display:block;}
.bg-red{background:var(--c-red-l);color:var(--c-red-d);}
.bg-yellow{background:var(--c-yellow-l);color:#D9A430;}
.bg-green{background:#E8F5EC;color:var(--c-green);}
.bg-blue{background:#E8F2F8;color:var(--c-blue);}
.work-card-body{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}
.work-card h3{font-size:15px;margin-bottom:4px;}
.work-card p{font-size:12px;color:var(--c-text-l);}
.work-card .count-badge{
  position:absolute;top:14px;right:14px;
  background:var(--c-red-d);color:#fff;
  font-size:11px;padding:2px 8px;border-radius:10px;
  min-width:20px;text-align:center;
}

/* 按钮 */
.btn{
  padding:8px 16px;border-radius:8px;font-size:13px;
  transition:all .2s;display:inline-flex;align-items:center;gap:5px;
}
.btn-primary{background:var(--c-red-d);color:#fff;}
.btn-primary:hover{background:#D66878;}
.btn-secondary{background:var(--c-yellow-m);color:#8A6810;}
.btn-secondary:hover{background:#F5DC9E;}
.btn-ghost{background:transparent;border:1px solid var(--c-border);color:var(--c-text-l);}
.btn-ghost:hover{border-color:var(--c-red-d);color:var(--c-red-d);}
.btn-sm{padding:4px 10px;font-size:12px;}
.btn-danger{background:#fff0f0;color:#d9534f;border:1px solid #f5c6c6;}
.btn-danger:hover{background:#ffe0e0;}
.btn:disabled,.btn.disabled{
  background:#f5f5f5;color:#bbb;border-color:#e4e4e4;
  cursor:not-allowed;opacity:.7;
}
.btn:disabled:hover,.btn.disabled:hover{background:#f5f5f5;}

/* 表格 */
.data-table{width:100%;border-collapse:collapse;font-size:13px;}
.data-table th{
  background:var(--c-yellow-l);
  padding:10px 12px;text-align:left;
  font-weight:600;color:var(--c-text);
  border-bottom:2px solid var(--c-yellow-m);
  white-space:nowrap;
}
.data-table td{
  padding:10px 12px;
  border-bottom:1px solid var(--c-border);
}
.data-table tr:hover td{background:var(--c-cream);}
.data-table .empty-row td{text-align:center;color:var(--c-text-l);padding:30px;}

/* 弹窗 */
.modal-overlay{
  position:fixed;inset:0;
  background:rgba(90,74,69,.35);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;
  opacity:0;pointer-events:none;
  transition:opacity .25s;
}
.modal-overlay.show{opacity:1;pointer-events:auto;}
.modal{
  background:#fff;border-radius:16px;
  width:90%;max-width:560px;max-height:85vh;
  display:flex;flex-direction:column;
  box-shadow:var(--shadow-lg);
  transform:scale(.92);transition:transform .25s;
}
.modal-overlay.show .modal{transform:scale(1);}
.modal-header{
  padding:16px 20px;
  border-bottom:1px solid var(--c-border);
  display:flex;align-items:center;justify-content:space-between;
}
.modal-header h2{font-size:16px;color:var(--c-red-d);}
.modal-close{
  width:30px;height:30px;border-radius:8px;
  background:var(--c-cream);font-size:18px;
  display:flex;align-items:center;justify-content:center;
  color:var(--c-text-l);
}
.modal-close:hover{background:var(--c-red-l);color:var(--c-red-d);}
.modal-body{padding:20px;overflow-y:auto;}
.modal-footer{
  padding:14px 20px;
  border-top:1px solid var(--c-border);
  display:flex;justify-content:flex-end;gap:10px;
}

/* 表单 */
.form-group{margin-bottom:14px;}
.form-group label{
  display:block;font-size:13px;font-weight:600;
  margin-bottom:5px;color:var(--c-text);
}
.form-group label .required{color:var(--c-red-d);}
.form-control{
  width:100%;padding:9px 12px;
  border:1px solid var(--c-border);border-radius:8px;
  background:var(--c-cream);
  transition:border-color .2s;
}
.form-control:focus{border-color:var(--c-red-d);background:#fff;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* 工具栏 */
.toolbar{
  display:flex;align-items:center;gap:10px;
  margin-bottom:16px;flex-wrap:wrap;
}
.toolbar .spacer{flex:1;}
.search-box{
  padding:7px 12px 7px 32px;
  border:1px solid var(--c-border);border-radius:8px;
  background:var(--c-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239A8A85' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") no-repeat 10px center;
  font-size:13px;width:200px;
}

/* 统计卡片 */
.stat-row{display:flex;gap:14px;margin-bottom:20px;flex-wrap:wrap;}

/* 成绩分析：两个并排卡片，窄屏自动堆叠 */
.score-cards{display:flex;gap:20px;align-items:stretch;margin-bottom:20px;}
.score-cards > .score-card-box{
  flex:1;min-width:0;
  background:var(--c-card);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow);
  text-align:center;
}
/* 表格横向滑动容器 */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-scroll .data-table th,
.table-scroll .data-table td{white-space:nowrap;}
@media(max-width:1100px){
  .score-cards{flex-direction:column;}
}
.stat-card{
  background:var(--c-card);border-radius:var(--radius);
  padding:16px 20px;box-shadow:var(--shadow);
  min-width:130px;flex:1;text-align:center;
}
.stat-card .label{font-size:12px;color:var(--c-text-l);}
.stat-card .value{font-size:26px;font-weight:700;margin-top:4px;}
.stat-card.red .value{color:var(--c-red-d);}
.stat-card.yellow .value{color:#D9A430;}
.stat-card.green .value{color:var(--c-green);}
.stat-card.blue .value{color:var(--c-blue);}
/* 成绩分析统计卡片：窄屏固定一行两列 */
@media(max-width:700px){
  .stat-row{display:grid;grid-template-columns:repeat(2,1fr);}
  .stat-card{min-width:0;flex:none;}
}

/* 座次表 */
.seat-chart{
  display:block;width:max-content;
  background:var(--c-card);
  padding:24px;border-radius:var(--radius);box-shadow:var(--shadow);
  margin:0 auto;
}
.seat-grid{
  display:grid;gap:8px;
  justify-content:center;
}
.seat{
  width:72px;height:52px;
  border-radius:8px;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  font-size:12px;
  background:var(--c-yellow-l);
  border:1px solid var(--c-yellow-m);
  color:var(--c-text);
  cursor:pointer;
  transition:all .2s;
}
.seat:hover{background:var(--c-red-l);border-color:var(--c-red-d);}
.seat.empty{background:var(--c-cream);border-style:dashed;color:var(--c-text-l);}
.seat .seat-no{font-size:10px;color:var(--c-text-l);}
.seat.aisle{background:transparent;border:none;pointer-events:none;}
.blackboard{
  background:linear-gradient(90deg,#c8a27a,#b98f63);
  color:#fff;text-align:center;
  width:160px;
  margin:0 auto 16px;
  padding:8px;border-radius:8px;
  font-size:14px;
  letter-spacing:4px;
}
.seat-config{display:flex;gap:10px;align-items:center;margin-bottom:16px;flex-wrap:wrap;}
.seat-config input{width:60px;}

/* 课程表 */
.timetable{width:100%;border-collapse:collapse;min-width:520px;}
.timetable th,.timetable td{
  border:1px solid var(--c-border);
  padding:8px 6px;text-align:center;font-size:12px;
  white-space:nowrap;
}
.timetable th{
  background:var(--c-red-l);color:var(--c-red-d);
  font-weight:600;
}
.timetable td:first-child{
  background:var(--c-yellow-l);font-weight:600;
}
.timetable td.subject{background:#fff;cursor:pointer;}
.timetable td.subject:hover{background:var(--c-red-l);}
.tt-sub{font-weight:600;color:var(--c-title);}
.tt-teacher{font-size:11px;color:var(--c-sub);margin-top:2px;min-height:14px;}

/* 成绩分析 */
.score-input-row{display:grid;grid-template-columns:1fr 80px 80px 80px 80px;gap:8px;margin-bottom:8px;}
.score-input-row input{padding:6px 8px;border:1px solid var(--c-border);border-radius:6px;font-size:12px;}

/* Toast */
.toast{
  position:fixed;bottom:24px;left:50%;
  transform:translateX(-50%) translateY(100px);
  background:var(--c-text);color:#fff;
  padding:10px 20px;border-radius:10px;
  font-size:13px;z-index:2000;
  transition:transform .3s;
  box-shadow:var(--shadow-lg);
}
.toast.show{transform:translateX(-50%) translateY(0);}

/* 空状态 */
.empty-state{
  text-align:center;padding:50px 20px;
  color:var(--c-text-l);
}
.empty-state .icon{font-size:48px;margin-bottom:10px;}
.empty-state .hint{font-size:13px;margin-top:6px;}

/* 登录页 */
.login-wrap{
  position:fixed;inset:0;
  background:linear-gradient(135deg,var(--c-red-l),var(--c-yellow-l));
  display:flex;align-items:center;justify-content:center;
  z-index:3000;
}
.login-card{
  background:#fff;border-radius:18px;
  padding:36px 32px;width:340px;
  box-shadow:var(--shadow-lg);
}
.login-header{
  display:flex;
  justify-content:center;
  align-items:center;
  gap: 10px;
  margin-bottom:20px;
}
.login-logo{
  width:56px;
  height:56px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--c-red-d),var(--c-yellow-m));
  display:flex;align-items:center;justify-content:center;
  font-size:30px;color:#fff;
  box-shadow:0 4px 14px rgba(232,120,140,.35);
}
.login-logo svg{width:30px;height:30px;display:block;}
.login-text{
  display:flex;
  flex-direction:column;
  gap: 1px;
}
.login-text h2{font-size:20px;color:var(--c-text);}
.login-text p{font-size:12px;color:var(--c-text-l);}
.login-group{
  position: relative;
  margin-bottom:14px;
}
.login-group label{
  position: absolute;
  top: 10px;
  left: 24px;
  font-size: 13px;
  color: var(--c-text);
  z-index: 1;
  font-weight: 600;
}
.login-group input{
  width: 100%;
  padding: 9px 12px 9px 60px;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  background: var(--c-cream);
}
.login-group input:focus{
  border-color: var(--c-red-d);
  background: #fff;
}
.login-btn{
  margin-top:6px;
  width:100%;
  padding:8px 16px;
  border-radius:8px;
  font-size:13px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  background:var(--c-red-d);
  color:#fff;
}
.login-btn:hover{background:#D66878;}
.login-hint{margin-top:14px;font-size:11px;color:var(--c-text-l);text-align:center;}

/* 标签页（工作记录分类） */
.tabs{display:flex;gap:8px;margin-bottom:16px;}
.tab{
  padding:7px 16px;border-radius:20px;background:var(--c-cream);
  color:var(--c-text-l);font-size:13px;cursor:pointer;
}
.tab.active{background:var(--c-red-d);color:#fff;}

/* 响应式：窄屏时侧边栏自动变为纯图标模式（隐藏菜单名称，只显示图标） */
@media(max-width:900px){
  .sidebar{
    width:var(--sidebar-collapsed);
    min-width:var(--sidebar-collapsed);
  }
  .sidebar-header{
    justify-content:center;
    padding:18px 8px;
    gap:0;
  }
  .sidebar-title,
  .menu-label{display:none;}
  .nav-menu{padding:10px 6px;}
  .nav-item{
    justify-content:center;
    gap:0;
    padding:11px 0;
  }
  .content{padding:16px;}
  .form-row{grid-template-columns:1fr;}
}
@media(max-width:600px){
  .seat{width:56px;height:44px;font-size:11px;}
}