body { font-family:"Microsoft YaHei", sans-serif; background:#f4f6f8; margin:0; padding:0; }
h2 { text-align:center; margin:20px 0; font-size:26px; color:#333; }

/* 导航栏 */
.nav {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
    padding: 0 10px;
}

.nav button {
    padding: 14px 18px;
    border: none;
    border-radius: 30%;
    cursor: pointer;
    background: linear-gradient(135deg, #f0f4f7, #d9e2ec);
    color: #333;
    flex: 0 0 50px;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    outline: none;
    text-transform: uppercase;
}

.nav button:hover {
    transform: scale(1.1);
    background: linear-gradient(135deg, #cfd8e4, #e3ebf3);
}

.nav button:active {
    transform: scale(0.95);
}

.nav button.active {
    background: linear-gradient(135deg, #4facfe, #00f2fe);
    color: #fff;
    box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

.nav button:focus,
.nav button:focus-visible {
    outline: none;
    box-shadow: none;
}
.nav button {
    -webkit-tap-highlight-color: transparent; /* 移动端点击高亮 */
}
/* 表格 */
table {
    width: 95%;
    max-width: 800px;
    margin: 0 auto 15px auto;
    border-collapse: collapse;
    background:#fff;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 2px 10px rgba(0,0,0,0.1);
}
th, td {
    padding:12px;
    text-align:center;
    border-bottom:1px solid #e0e0e0;
    font-size:16px;
    word-break:break-word;
}
th {
    background:#007acc;
    color:#fff;
    font-size:16px;
}
tr.current {
    background: #d4f7d4;  /* 当前课程浅绿色 */
    font-weight: bold;
}
tr:last-child td { border-bottom:none; }

/* 倒计时固定底部 */
.countdown {
    position: fixed;       /* 固定在屏幕 */
    bottom: 0;             /* 底部对齐 */
    left: 0;               /* 左对齐 */
    width: 100%;           /* 宽度全屏 */
    max-width: 100%;
    margin: 0;             /* 取消原来的 margin */
    padding: 12px 0;       /* 上下内边距 */
    font-size: 16px;
    text-align: center;
    border-radius: 0;      /* 可选，去掉圆角让底部贴合 */
    box-shadow: 0 -2px 6px rgba(0,0,0,0.1); /* 底部阴影 */
    z-index: 1000;         /* 保证在上层 */
}

/* 状态颜色保持不变 */
.countdown.upcoming { background: #c0392b; color:#fff; }  /* 下节课未开始深红 */
.countdown.ongoing  { background: #27ae60; color:#fff; }  /* 上课中深绿 */
.countdown.finished { background: #d35400; color:#fff; }  /* 今日无课深橙 */
 
@media(max-width:480px){
    h2 { font-size:22px; }
    .nav button { font-size:16px; padding:12px; flex:0 0 40px; }
    th, td { font-size:14px; padding:8px; }
    .countdown { font-size:16px; padding:10px 12px; }
}
/* 全屏显示样式 */
.fullscreen-view {
    display: none;                /* 默认隐藏 */
    position: fixed;              /* 固定覆盖整个屏幕 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #222;             /* 深色背景，全屏效果明显 */
    color: #fff;                  /* 字体白色 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;                /* 保证在最上层 */
}

.fullscreen-view .fs-countdown {
    font-size: 3rem;              /* 倒计时大字体 */
    margin-bottom: 20px;
}

.fullscreen-view .fs-current,
.fullscreen-view .fs-next,
.fullscreen-view .fs-date {
    font-size: 2rem;              /* 当前课程、下一节、日期 */
    margin: 10px 0;
}

.fullscreen-view button.exit-fullscreen {
    margin-top: 30px;
    font-size: 1.2rem;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: #f39c12;          /* 橙色按钮 */
    color: #fff;
}

/* 移动端适配 */
@media(max-width:480px){
    .fullscreen-view .fs-countdown { font-size: 2rem; }
    .fullscreen-view .fs-current,
    .fullscreen-view .fs-next,
    .fullscreen-view .fs-date { font-size: 1.5rem; }
}