/* style.css - 最终调整版 (增加间距) */
* {
    padding: 0; margin: 0; box-sizing: border-box;
}

html, body {
    width: 100%; 
    min-height: 100%; 
    background-color: #eaf4fc;
    font-family: "Microsoft YaHei", sans-serif;
    display: flex; flex-direction: column; align-items: center; 
    position: relative; 
    overflow-y: auto; 
}

/* 顶部栏 */
.top-bar {
    width: 100%; height: 40px; position: relative; margin-top: 10px; flex-shrink: 0;
}
form { position: absolute; left: 20px; top: 0; }
select { height: 28px; border: 1px solid #ccc; border-radius: 4px; padding: 0 5px; }
.volume { width: 28px; height: 28px; position: absolute; right: 20px; top: 0; cursor: pointer; }

/* Logo 区域 */
.logo-area {
    margin-top: -20px; /* 保持图片整体偏上 */
    flex-shrink: 0;
    display: flex; 
    align-items: center;     
    justify-content: center; 
    position: relative; 
    padding: 0 10px;
    min-height: 100px;     
}

.logo-img {
    width: 90px; height: 90px; 
    border-radius: 50%; border: 3px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    flex-shrink: 0; 
}

/* 统计框样式 */
.stats-box {
    margin-left: 20px; 
    background: #fff; 
    padding: 8px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 4px; 
    box-shadow: none; 
    font-size: 12px; 
    color: #666; 
    display: none; 
    animation: popIn 0.3s ease;
    text-align: center; 
    min-width: 480px; 
    max-width: 600px;
    position: relative; 
    z-index: 10;
}

@keyframes popIn { 
    from { opacity: 0; transform: translateX(-5px); } 
    to { opacity: 1; transform: translateX(0); } 
}

/* 本次时间标记 */
.current-tag {
    font-size: 12px;
    color: #2ecc71; 
    font-weight: bold;
    border-bottom: 1px solid #f5f5f5;
    padding-bottom: 4px;
    margin-bottom: 4px;
}

.stats-header {
    font-size: 20px;
    color: #999;
    margin-bottom: 4px;
}
.stats-header strong { color: #e74c3c; font-size: 20px; margin: 0 2px; }

.no-history {
    font-size: 15px; color: #ccc; padding: 2px 0; font-style: italic;
}

/* 历史时间列表 */
.time-list {
    max-height: 120px;
    overflow-y: auto;
    font-size: 15px; 
    color: #999;
    padding-top: 5px;
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 15px; 
}

/* 单条历史记录 */
.time-item {
    background: transparent;
    border: none;
    padding: 1px 0;
    display: flex;
    flex-direction: column; 
    align-items: center;    
    justify-content: center;
}

.time-item span.idx { 
    font-weight: normal; 
    margin-bottom: 2px;
    font-size: 10px;
    line-height: 1;
    opacity: 0.6; 
}

/* 颜色循环 */
.time-item:nth-child(4n+1) { color: #3498db; }
.time-item:nth-child(4n+2) { color: #9b59b6; }
.time-item:nth-child(4n+3) { color: #34495e; }
.time-item:nth-child(4n+4) { color: #16a085; }

.time-list::-webkit-scrollbar { width: 3px; }
.time-list::-webkit-scrollbar-thumb { background: #eee; border-radius: 2px; }

/* --- 名字显示区 (修改点：增加了上下间距) --- */
.student {
    flex-grow: 1; 
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    font-size: 180px; font-weight: bold; color: #85a2b6;
    letter-spacing: 60px; text-indent: 60px;
    
    text-shadow: 2px 2px 4px rgba(255,255,255,0.8); line-height: 1;
    min-height: 200px; 
    
    /* --- 这里控制间距 --- */
    margin-top: 60px;    /* 图片与名字之间的距离 */
    margin-bottom: 70px; /* 名字与下方按钮区域之间的距离 */
}
#name { color: #e74c3c; word-break: keep-all; white-space: nowrap; }

/* 底部区域 */
.bottom-area {
    width: 100%; text-align: center; flex-shrink: 0; padding-bottom: 10px;
    display: flex; flex-direction: column; align-items: center;
}
.button-wrap { margin-bottom: 15px; }
button.default-button {
    width: 130px; height: 50px; border: 0; border-radius: 25px;
    font-size: 20px; color: #fff; background: linear-gradient(135deg, #2ecc71, #27ae60);
    box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4); cursor: pointer; transition: transform 0.2s;
}
button.default-button:active { transform: scale(0.95); }
button.disable-button {
    width: 130px; height: 50px; border: 0; border-radius: 25px;
    font-size: 20px; color: #ccc; background: #f0f0f0; cursor: not-allowed;
}
.restriction-control { color: #888; font-size: 13px; margin-bottom: 15px; user-select: none; }
.restriction-control label { cursor: pointer; vertical-align: middle; margin-left: 5px; }
.restriction-control input { vertical-align: middle; }

/* 记录列表 */
#saved-container {
    margin: 0 auto 15px auto; width: 85%; max-width: 900px;
    text-align: center; padding: 15px;
    background: rgba(255,255,255,0.7); border-radius: 12px;
    max-height: 160px; overflow-y: auto;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
#saved-container h3 { font-size: 16px; color: #0e06f5; margin-bottom: 10px; font-weight: normal; }
#saved-list { list-style: none; padding: 0; }

#saved-list li {
    display: inline-block;
    background: #fff;
    border-radius: 8px;
    padding: 4px 8px 4px 12px;
    margin: 5px;
    font-size: 18px; color: #555;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.3s;
    border: 1px solid transparent; 
    vertical-align: middle;
}

.list-btn {
    display: inline-block; border: 1px solid transparent;
    font-size: 18px; margin-left: 8px; cursor: pointer;
    padding: 2px 8px; border-radius: 4px; outline: none; transition: all 0.2s;
}

.save-btn-small { color: #3498db; background: transparent; border: 1px solid #3498db; }
.save-btn-small:hover { background: #3498db; color: white; }

.del-btn { color: #e74c3c; background: transparent; border: 1px solid #e74c3c; font-family: "Microsoft YaHei", sans-serif; }
.del-btn:hover { background: #e74c3c; color: white; }

li.unsaved { border-color: #3498db !important; }
li.saved { border-color: #eee !important; }

.reset-btn {
    font-size: 12px; color: #e74c3c; background: transparent;
    border: 1px solid #e74c3c; padding: 5px 15px; border-radius: 15px;
    cursor: pointer; transition: all 0.2s; margin-top: 5px;
}
.reset-btn:hover { background: #e74c3c; color: white; }

.copyright { width: 100%; text-align: center; color: #bbb; font-size: 12px; padding: 10px 0; flex-shrink: 0; }
.admin-link { display: inline-block; margin-top: 5px; color: #bbb; text-decoration: none; }