:root {
  --primary: #6C7DFF;           /* 主题蓝紫 */
  --primary-light: #A6B2FF;
  --primary-dark: #4F5CE7;

  --gradient-1: linear-gradient(90deg, #FF8A80, #FFDD94, #A8FFCF, #84C6FF);
  --gradient-2: linear-gradient(135deg, #6C7DFF, #8EA2FF);
  --gradient-3: linear-gradient(135deg, #5EE7DF, #B490CA);

  --bg: #F2F4FF;                /* 整体背景：柔和浅紫白 */
  --card-bg: #ffffff;
  --border: #E3E6F5;
  --text: #1E1F3B;
  --muted: #7C7FA8;

  --green: #53D86A;
  --yellow: #FFCF4B;
  --red: #FF6B6B;
}


*{box-sizing:border-box;}
*::-webkit-scrollbar {
    display: none;
}

* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
body{
  margin:0;
  font-family: "Segoe UI", "PingFang SC", "Helvetica Neue", sans-serif;
  background:#E1E5E9;
  color: var(--text);
  font-size:15px;
  line-height:1.6;
}


a{text-decoration:none;color:inherit;}


/* 孩子标签区域 */
.kid-tabs{
  display:flex;
  gap:6px;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding-bottom:4px;
}

.kid-tab{
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:14px;
  cursor:pointer;
  background:#fff;
  white-space:nowrap;
}
.kid-tab.active{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
}

/* 新增孩子按钮 */
.add-kid-btn{
  padding:6px;
  background:#888;
  color:#111;
  border:none;
  border-radius:50%;
  cursor:pointer;
  font-size:10px;
}
.add-kid-btn:hover{
  background:#111;
}

/* 让孩子多时自动横向滚动，不挤压布局 */
.kid-tabs::-webkit-scrollbar{
  height:4px;
}
.kid-tabs::-webkit-scrollbar-thumb{
  background:#ddd;
  border-radius:4px;
}


/* 页面主体容器 */
.page{
  max-width:1400px;
  margin:0 auto;
  padding:20px 22px 50px;
}

/* 顶部概要卡片 */
.summary-row{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:22px;
}
.summary-card{
  flex:1 1 250px;
  background:var(--card-bg);
  border-radius:14px;
  padding:14px 18px;
  border:1px solid var(--border);
}
.summary-label{
  font-size:14px;
  color:#444444;
}
.summary-value{
  font-size:28pt;
  font-weight:700;
  margin-top:4px;
  color:#111111;
}
.summary-sub{
  font-size:13px;
  margin-top:6px;
  color:#969696;
}

/* section 标题 */
.section{
  margin-top:30px;
  background:#fff;
  padding:20px;
  border-radius:8px;
  border: none;                 /* 去掉硬线条 */
}
.section-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
}
.section-title{
  font-size:18px;
  font-weight:600;
}
.section-sub{
  font-size:13px;
  color:var(--muted);
}

/* 筛选器 */
.filters{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.filter-select{
  padding:6px 10px;
  border-radius:8px;
  border:1px solid var(--border);
  font-size:14px;
  background:#fff;
}

/* 通用卡片 + 表格 */
/*.card{*/
/*  background:var(--card-bg);*/
/*  border-radius:14px;*/
/*  border:1px solid var(--border);*/
/*  box-shadow:0 1px 3px rgba(0,0,0,0.06);*/
/*  padding:10px 12px;*/
/*  overflow:hidden;*/
/*}*/
.summary-card,
.day,
.modal-panel {
  border-radius:8px;
  border: none;                 /* 去掉硬线条 */
}
#subjectTable tbody tr:hover {
    background-color: #f0f7ff;
}
.table-wrapper{overflow-x:auto;}
table{
  width:100%;
  border-collapse:collapse;
  min-width:700px;
  font-size:15px;
}
th,td{
  border-bottom:1px solid var(--border);
  padding:10px 12px;
  text-align:left;
  white-space:nowrap;
  height:42px;
}
th{
  background:#f3f4f6;
  font-weight:600;
}

/* 状态 TAG */
.tag{
  display:inline-block;
  padding:4px 4px;
  border-radius:999px;
  font-size:10px;
  line-height:1.3;
  color:#fff;
  width:30px;
  text-align:center;
  margin-right:10px;
}
.tag.green{background:var(--green);}
.tag.yellow{background:var(--yellow);color:#000;}
.tag.red{background:var(--red);}
.tag.gray{background:#6b7280;}

/* 小圆点 */
.dot{
  display:inline-block;
  width:10px;
  height:10px;
  border-radius:50%;
  margin-right:6px;
}
.dot.green{background:var(--green);}
.dot.yellow{background:var(--yellow);}
.dot.red{background:var(--red);}


/* 动画 */
@keyframes popup{
  from{transform:scale(0.85); opacity:0;}
  to{transform:scale(1); opacity:1;}
}

/* =============================== */
/*       📌 作业中心：布局结构      */
/* =============================== */

.homework-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 左中右分布 */
  margin-bottom: 10px;
}

/* 左侧：标题 + 描述 */
.homework-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 中间：模式切换（周历 / 列表） */
.homework-tabs {
  display: flex;
  gap: 8px;
}

.hw-tab {
  padding: 6px 14px;
  background: #e5e7eb;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: 0.2s;
}
.hw-tab:hover {
  background: #d1d5db;
}
.hw-tab.active {
  background: var(--primary);
  color: #fff;
}

/* 筛选器（列表模式使用） */
.hw-filter-box {
  margin: 10px 0;
  display: flex;
  justify-content: flex-start;
}
.hw-filter-box select {
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
}

/* 右侧新增按钮 */
.homework-right {
  display: flex;
  justify-content: flex-end;
}

.btn-add {
  padding: 6px 14px;
  background: var(--primary);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: 0.2s;
}
.btn-add:hover {
  background: var(--primary-dark);
}


.day {
  background: #f9fafb;
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 12px;
  min-height: 120px;
}

.day-header {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}

.day-date {
  font-size: 12px;
  color: var(--muted);
}

.day-task {
  display: flex;
  align-items: center;
  font-size: 14px;
  margin-bottom: 4px;
  line-height: 1.4;
}

/* 提示区 */
.calendar-tip {
  margin-top: 8px;
  font-size: 11px;
  color: var(--muted);
}

/* =============================== */
/*          📌 弹窗 Modal          */
/* =============================== */

.modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 3000;
  align-items: center;
  justify-content: center;
  pointer-events: auto;      /* 支持点外关闭 */
}

.modal-panel {
  background: #ffffff;
  width: 340px;
  padding: 22px 20px;
  border-radius:6px;
  animation: popup 0.18s ease-out;
  pointer-events: auto;       /* 内容可点击 */
}

.modal-panel h3 {
  font-size: 18px;
  margin: 0 0 14px;
  text-align: center;
}

.modal-input, 
.modal-panel input,
.modal-panel select,
.modal-panel textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 12px;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.modal-panel button {
  padding: 10px;
  background: var(--primary);
  border: none;
  border-radius: 8px;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
}
.modal-panel button:hover {
  background: var(--primary-dark);
}

.modal-panel a {
  display: block;
  text-align: center;
  margin-top: 6px;
  font-size: 13px;
  color: var(--primary-dark);
}

/* 弹窗动画 */
@keyframes popup {
  from { transform: scale(0.85); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}


/* =============================== */
/*        📱 响应式优化            */
/* =============================== */

@media (max-width: 880px) {
  .homework-header {
    flex-wrap: wrap;
    gap: 10px;
  }
  .homework-right {
    width: 100%;
    justify-content: flex-end;
  }
}
/* ================== */
/*  横向滑动周历核心   */
/* ================== */

.calendar-scroll {
  display: flex;
  overflow-x: auto;
  gap: 6px;

  scroll-snap-type: x mandatory;
  padding-bottom: 10px;

  -webkit-overflow-scrolling: touch;
}

.calendar-scroll::-webkit-scrollbar { display:none; }

.calendar-scroll .day {
	flex: 0 0 200px;
	scroll-snap-align: start;
	background: #f9fafb;
	border-radius: 6px;
	border: 1px solid var(--border);
	padding: 12px;
	min-height: 140px;
}

@media (min-width: 900px){
  /* 电脑端：7天自动铺满，不滑动 */
  .calendar-scroll {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    overflow-x: hidden;
  }
  .calendar-scroll .day {
    flex: none;
  }
}

/* 当天弹窗：作业行 */
.day-task-line {
	margin-bottom:10px;
  padding: 6px 0;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
}
.modal-panel button:nth-child(7) {
  background:#dc2626 !important;
}
/* 科目表格的小按钮 */
.btn-mini{
  padding:3px 8px;
  font-size:12px;
  border-radius:6px;
  border:none;
  cursor:pointer;
  margin-right:6px;
  background:#e5e7eb;
}
.btn-mini:hover{
  background:#d1d5db;
}

.btn-red{
  background:#dc2626;
  color:#fff;
}
.btn-red:hover{
  background:#b91c1c;
}
.btn-add,
.hw-tab.active,
.add-kid-btn {
  background: var(--gradient-2);
  border-radius:999px;
  border: none;
  color: #fff;
  font-weight: 400;
  box-shadow: 0 3px 8px rgba(120,125,255,0.3);
}

.btn-add:hover,
.hw-tab.active:hover {
  opacity: 0.9;
}
.day {
  background: #ffffff;
/*  border-radius: 20px;*/
  padding: 14px;
/*  transition: transform 0.15s ease, box-shadow 0.2s;*/
}

.day:hover {
/*  transform: translateY(4px);*/
  background: #eef1ff;
}

.day.today {
  border: 1px solid var(--primary);
  background: #eef1ff;
}
.tag.green  { background: #53D86A; }
.tag.yellow { background: #FFCF4B; color:#000; }
.tag.red    { background: #FF6B6B; }
.tag.gray   { background: #B7B8D7; }
.modal-panel {
  background: #ffffff;
  border-radius: 20px;
  padding: 26px 22px;
  animation: popup 0.25s ease-out;
}

.modal {
  backdrop-filter: blur(3px);
}
.modal-panel input,
.modal-panel textarea,
.modal-panel select{
  border-radius: 12px;
  border: 1px solid #CDD2FF;
  background: #F7F8FF;
}
.subject-select{
    position: relative;
    width: 100%;
	margin-bottom: 12px;
}

#subjectInput{
	width: 100%;
	padding: 10px;
	font-size: 14px;
	border-radius: 10px;
	border: 1px solid var(--border);
	background: #F7F8FF;
}

.subject-dropdown{
	position: absolute;
	left: 0;
	right: 0;
	top:80%;
	margin-top: 0px;
	max-height: 220px;
	background:#fff;
	border: 1px solid var(--border);
	box-shadow: 0 6px 16px rgba(0,0,0,0.12);
	overflow-y:auto;
	display:none;
	z-index: 5000;
}

/* 单项 */
.subject-item{
  padding: 2px 10px;
  font-size: 14px;
  cursor: pointer;
  display:flex;
  align-items:center;
  gap:6px;
}
.subject-item-icon{
  width:16px;
  text-align:center;
  opacity:.8;
}
.subject-item:hover{
    background:#eef2ff;
}

.subject-left{
    display: flex;
    align-items: center;
    gap: 10px;
}

.subject-left i{
    font-size: 18px;
    color: #444;
}

.subject-right{
    font-size: 13px;
    color: #8a8aa5;
}


/* 科目输入 + 下拉框 */
.subject-select {
  position: relative;
}

.subject-select input {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}

.subject-dropdown {
  position: absolute;
  top: 42px;
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  z-index: 9999;
  display: none;
  max-height: 200px;
  overflow-y: auto;
}

.subject-dropdown div {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 14px;
}

.subject-dropdown div:hover {
  background: #eef4ff;
}

/*课程表*/
.tt-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  font-size: 15px;
}

.tt-table th, .tt-table td {
  border: 1px solid #e5e7eb;
  text-align:center;
}

.tt-period {
/*  background: #F3F4F6;*/
  text-align:center;
/*  font-weight: bold;*/
}

.tt-cell {
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
}

.tt-cell:hover {
  background: #dbe2ff;
}

.tt-empty {
  cursor: pointer;
  color: #aaa;
}

.tt-empty:hover {
  background: #f3f4f6;
  color: #666;
}

.tt-remark {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}
/* 今日列标题高亮 */
.tt-today {
	background: #eef1ff !important;
	color: #4f46e5 !important;
	border: 2px solid #a5b4fc !important;
	font-weight: 700;
}

/* 今日在单元格中的高亮 */
.tt-today-cell {
/*	background: #f5f6ff !important;*/
	border: 2px solid #a5b4fc !important;
}

/* 核心科目高亮（语/数/外） */
.tt-core {
/*	background: #fff7ed !important;*/
/*  border: 1px solid #fdba74 !important;*/
/*	font-weight: 600;*/
	color: #9a3412;
}
/* 外层滚动容器 */
.tt-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* ★ iOS 惯性滑动 */
  padding-bottom: 10px;
  margin-bottom: 20px;
}

.tt-scroll-wrapper::-webkit-scrollbar {
  height: 6px;
}
.tt-scroll-wrapper::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

/* 表格本体 */
.tt-scroll {
  min-width: 900px; /* 手机端自动横向滚动 */
}

/* 课程表 */
.tt-table {
  width: 100%;
  border-collapse: collapse;
}

/* 固定节次列 */
.tt-period {
  position: sticky;
  left: 0;
  background: #f3f4f6;
  z-index: 2;
  font-weight: 600;
}

/* 单元格样式 */
.tt-cell,
.tt-empty {
  width: 12vw;
  min-width: 120px;
  padding: 10px;
  text-align: center;
  border: 1px solid #e5e7eb;
  cursor: pointer;
}

.tt-empty {
/*  background: #f8fafc;*/
  color: #9ca3af;
  font-size: 20px;
}

/* 今日列高亮 */
.tt-today {
/*  background: #eef1ff !important;*/
  color: #4f46e5 !important;
  font-weight: 700;
}

.tt-today-cell {
/*  background: #f5f6ff !important;*/
  border: 2px solid #a5b4fc !important;
}

/* 核心科目标记 */
.tt-core {
/*  background: #fff7ed !important;*/
/*  border: 2px solid #fdba74 !important;*/
  font-weight: 600;
  color: #9a3412;
}

/* 手机端优化 */
@media (max-width: 768px) {
  .tt-cell, .tt-empty {
	  width: 80vw;
	  min-width: 200px;
  }
}
/* 今日课程标记（红） */
.flag-today {
  width:12px;
  height:12px;
  margin-left:6px;
  border-radius:4px;
  background:#25D366;        /* 蓝 */
  border:2px solid #25D366;
  font-size:9px;
  color:#fff;
}

/* 明日课程标记（蓝） */
.flag-tomorrow {
  width:12px;
  height:12px;
  margin-left:6px;
  border-radius:4px;
  background:#ff6b6b;       /* 红 */
  border:2px solid #ff6b6b; /* 柔和 */
  font-size:9px;
  color:#fff;
}
/* =============================== */
/*          月历 Month View        */
/* =============================== */

.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}


.month-task {
  font-size: 12px;
  line-height: 1.2;
  margin-bottom: 3px;
  padding-left: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.month-today {
  border: 1px solid #3b82f6;
  background: #eff6ff;
}
/* 月历导航栏 */
.month-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}

/* 上一月 / 下一月按钮 */
.month-nav-btn {
  border: none;
  background: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 10px;
  color:#ccc;
}
.month-nav-btn:hover {
  background: #d1d5db;
}

/* 星期标题栏 */
.month-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 8px;
  text-align: center;
  font-weight: 600;
  color: #374151;
}

/* 月格子布局 */
.month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0px;
}
/* 月历格子强制正方形 */
.month-cell {
	min-height:48px;
	height: auto !important;      /* 覆盖你原来的 height:90px */
	aspect-ratio: 1 / 1;          /* ✅正方形 */
	overflow: hidden;        /* 内部内容不撑开格子 */
	border: 1px solid #e5e7eb;
	background: #ffffff;
	padding: 6px;
	position: relative;
	cursor: pointer;
	transition: 0.2s;
	display: flex;
	flex-direction: column;
}

.month-tasks-box {
  flex: 1;
  overflow-y: auto;        /* ← 内容多了出现滚动条 */
  padding-right: 4px;
}

.month-cell:hover {
  background: #eef2ff;
}

.month-date {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}

/* 防止任务文本遮挡点击 */
.month-cell * {
  pointer-events: none;
}

/* 今日高亮 */
.month-today {
  border: 1px solid #3b82f6;
  background: #eff6ff;
}
/* 作业状态颜色标记 */
.hw-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 4px;
}

.hw-red {
    background-color: #ef4444; /* 红色：未完成 */
}

.hw-green {
    background-color: #22c55e; /* 绿色：已完成 */
}

/* 月历任务条（颜色点 + 文本） */
.month-task {
    font-size: 12px;
    line-height: 1.2;
    margin-bottom: 3px;
    padding-left: 2px;
    display: flex;
    align-items: center;
}
.day-task {
    cursor: pointer;
}
/* 当日作业弹窗：鼠标悬停某行高亮显示 */
.day-task-line {
    padding: 6px 8px;
    border-radius: 8px;
	
}

.day-task-line:hover {
    background: #eef4ff;
    cursor: pointer;

}
.month-add-btn {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 16px;
    font-weight: bold;
    color: #aaa;
    cursor: pointer;
    user-select: none;
    opacity: 0.6;
	display: none;              /* 默认不显示 */
  pointer-events: auto !important;
  z-index: 10;
}
/* 鼠标移到日期格子时才出现 */
.month-cell:hover .month-add-btn {
    display: block;
}
.month-add-btn:hover {
    opacity: 1;
    color: #111;
}
.res-item {
    padding: 6px 0;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.res-item a {
    color: var(--primary);
    font-weight: 500;
}

.res-item:hover {
    background: #f5f7ff;
}
.res-icons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.res-icon {
  width: 26px;
  height: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  background: #f3f4f6;
  cursor: pointer;
  transition: 0.15s ease;
}

.res-icon:hover {
  background: #e0e7ff;
  transform: translateY(-2px);
}

.res-icon img { 
  width: 20px; 
  height: 20px; 
}

.res-icon.pdf i {
  color: #d93025; 
  font-size: 18px;
}

.res-icon.video i {
  color: #2563eb;
  font-size: 16px;
}

.res-icon.web img {
  border-radius: 3px;
}
/* 固定课程进度表各列宽度 */
#subjectTable {
  table-layout: fixed;   /* ← 关键：让列宽固定不随内容变化 */
  width: 100%;
}

#subjectTable th:nth-child(1),
#subjectTable td:nth-child(1) {
  width: 160px;          /* 科目列（带标签 + 数字） */
  overflow: hidden;
  text-overflow: ellipsis;
}

#subjectTable th:nth-child(2),
#subjectTable td:nth-child(2) {
  width: 420px;          /* WeekTarget 列 */
  overflow: hidden;
  text-overflow: ellipsis;
}

#subjectTable th:nth-child(3),
#subjectTable td:nth-child(3) {
  width: 150px;          /* Progress / 资源图标 */
  overflow: hidden;
  text-overflow: ellipsis;
}

#subjectTable th:nth-child(4),
#subjectTable td:nth-child(4) {
  width: 40px;          /* 状态列 */
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 1) 整页不滚动：滚动只发生在内部 scroll-y */
html, body { height: 100%; }
body { overflow: hidden; }

/* 2) 三栏主布局 */
.page.dashboard{
  max-width: none;
  height: 100vh;
  padding: 12px;
}

.dashboard{
  height: calc(100vh - 24px);
  display: grid;
  grid-template-columns:260px 1fr 380px;
  gap: 14px;
}

/* 允许子容器内部滚动的关键：min-height:0 */
.col{
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* section 不要再用 margin-top 堆高度 */
.section{ margin-top:0 !important; }

/* 填充剩余高度的块 */
.section.fill{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* 内部滚动容器 */
.scroll-y{
  min-height: 0;
  overflow: auto;
}

/* 你之前全局隐藏滚动条，会让人误判“不能滚动”：
   在 scroll-y 里强制显示滚动条（更具体的选择器压过 *::-webkit-scrollbar） */
.scroll-y::-webkit-scrollbar{ display:block; width:8px; height:8px; }
.scroll-y::-webkit-scrollbar-thumb{ background:#d1d5db; border-radius:8px; }
.scroll-y{ scrollbar-width: auto; }

/* 左栏 summary 改竖排 */
.col-left .summary-row{
  flex-direction: column;
  flex-wrap: nowrap;
  margin: 0;
}
.col-left .summary-card{
  flex: 0 0 auto;
}

/* 右栏顶部栏（孩子名/退出/下拉） */
.right-topbar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  position: relative;
  z-index: 7000;
}
.right-topbar-inner{
  display:flex;
  align-items:center;
  gap:10px;
  position: relative;
}
.kid-mini-btn{
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width: 100px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  cursor:pointer;
  font-weight: 800;
  color:#1D4ED8;

}
.kid-caret{ opacity:.7; }
.kid-logout-btn{
  padding: 8px 14px;
  border:none;
  border-radius: 999px;
  cursor:pointer;
  background:#fee2e2;
  color:#b91c1c;
  font-weight:600;
}
.kid-logout-btn:hover{ background:#fecaca; }

.kid-dropdown{
  position:absolute;
  top: 44px;
  right: 0;
  width: 200px;
  background:#fff;
  border:1px solid var(--border);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.14);
  padding: 10px;
  display:none;
}
.kid-dd-title{ font-weight:900; margin: 4px 6px 8px; }
.kid-dd-list{ display:flex; flex-direction:column; gap:6px; }
.kid-dd-list .kid-tab{
  width:100%;
  text-align:left;
  border-radius: 10px;
  padding:8px 10px;
}
.kid-dd-divider{ height:1px; background:#eee; margin:10px 0; }
.kid-dd-btn{
  width:100%;
  padding:10px;
  border:none;
  border-radius: 10px;
  cursor:pointer;
  background: var(--gradient-2);
  color:#fff;
  font-weight:900;
}
.kid-dd-link{
  display:block;
  margin-top:10px;
  text-align:center;
  font-weight:700;
  color: var(--primary-dark);
}
.kid-dd-foot{
  margin-top:10px;
  font-size:12px;
  color:#666;
  text-align:center;
}

/* 月历紧凑显示：隐藏任务正文，只显示数量徽标（JS 会输出 month-count） */
.month-grid-compact .month-task,
.month-grid-compact .month-tasks-box{
  display:none !important;
}
.month-count{
  position:absolute;
  right:8px;
  bottom:8px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:#1D4ED8;
  color:#fff;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
}
/* 左栏允许下拉溢出显示（别被列容器裁掉） */
.col-left{ overflow: visible; }

/* 顶部栏放左侧后，改为左对齐 */
.col-left .right-topbar{
  justify-content: flex-start;
}

/* 下拉菜单在左栏时，从左边展开更自然 */
.col-left .kid-dropdown{
  left: 0;
  right: auto;
}
/* ===== 月历：面板 + 放大按钮 + 遮罩 ===== */
.month-panel{ position:relative; }
.month-zoom-btn{
  position:absolute;
  top:0px;
  right:0px;
  border:none;
  cursor:pointer;
  font-size:16px;
  z-index:5;background:#fff; 
}
.month-zoom-btn:hover{ background:#ddd; }

.month-backdrop{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:2600;
}

/* ===== 小态：右栏占位，格子正方形，隐藏任务文字 ===== */
#monthPanel.compact .month-cell{
  aspect-ratio: 1 / 1;     /* ✅ 正方形 */
  height:auto !important;
  min-height:42px;
  padding:6px;
  border:0px;
}
#monthPanel.compact .month-cell:hover{
  border:1px solid #000;
  border-radius:6px;
}
#monthPanel.compact .month-today {
  border: 1px solid #3b82f6;
  background: #eff6ff;
  border-radius:6px;
}
#monthPanel.compact .month-tasks-box{ display:none; }  /* 小态不显示文字 */
#monthPanel.compact .month-count-badge{ display:flex; }

/* ===== 大态：弹出覆盖层，恢复“原先大月历”风格，显示文字 ===== */
#monthPanel.expanded{
  position:fixed;
  top: var(--mz-top, 80px);
  right: var(--mz-right, 20px);
  left:auto;
  transform:none;

  transform-origin: top right;      /* ✅ 从右上角(放大按钮附近)向左下展开 */

  width: min(980px, calc(100vw - 30px));
  height: min(82vh, 780px);
  overflow:auto;

  background:#fff;
  border-radius:18px;
  box-shadow:0 12px 40px rgba(0,0,0,.25);
  padding:14px 14px 18px;
  z-index:2700;
}

#monthPanel.expanded .month-cell{
  aspect-ratio:auto;        /* 大态不强制正方形 */
  height:90px !important;   /* ✅ 贴近你原先的大月历 */
}
#monthPanel.expanded .month-tasks-box{ display:block; }
#monthPanel.expanded .month-count-badge{ display:none; }

/* 角标：显示当天任务数量（小示意点/数） */
.month-count-badge{
  position:absolute;
  bottom:6px;
  right:6px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background:#111827;
  color:#fff;
  font-size:9px;
  display:none;
  align-items:center;
  justify-content:center;
  opacity:.85;
  pointer-events:none;
}
/* ========= 1440px 横屏适配（覆盖原固定 260/380 + 固定表格列宽） ========= */

/* 三栏：左右自适应变窄，中间保证不低于 680px */
.dashboard{
  /* 原来是 260px 1fr 380px【:contentReference[oaicite:2]{index=2}】 */
  grid-template-columns:
    clamp(220px, 18vw, 260px)
    minmax(680px, 1fr)
    clamp(320px, 24vw, 360px);
  gap: 12px;
}

/* 1440~1500 这档：把“课程进度表”列宽缩小，避免 770px 撑爆 */
@media (max-width: 1500px){
  /* 原固定列宽 160/420/150/40【:contentReference[oaicite:3]{index=3}】 */
  #subjectTable th:nth-child(1),
  #subjectTable td:nth-child(1){ width: 140px; }

  #subjectTable th:nth-child(2),
  #subjectTable td:nth-child(2){ width: 340px; }

  #subjectTable th:nth-child(3),
  #subjectTable td:nth-child(3){ width: 120px; }

  #subjectTable th:nth-child(4),
  #subjectTable td:nth-child(4){ width: 40px; }

  /* 原来 table min-width:700px【:contentReference[oaicite:4]{index=4}】，这里也缩一档 */
  table{ min-width: 640px; }
}