/* 登录门与管理员面板的样式。
 * 单独一个文件，不动 app.css —— app.css 是从 doc/index.html 原型逐字抽出来的，
 * 原型没有的界面（密码页）一律写在这里，保证原型那份始终可以原样重新抽取。 */

.lock-wrap { max-width: 420px; margin: 8vh auto 0; padding: 0 24px; }
.lock-brand { display: flex; align-items: center; gap: 10px; justify-content: center;
    font-size: 22px; font-weight: 800; margin-bottom: 8px; }
.lock-brand .brand-mark { width: 46px; height: 46px; border-radius: 15px; }
.lock-sub { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 26px; }

.lock-panel { padding: 22px 20px; }
.lock-input { width: 100%; min-height: 52px; box-sizing: border-box;
    border: 1px solid var(--line); border-radius: 14px; background: #f7f6fb;
    padding: 12px 15px; font-size: 16px; color: var(--ink); outline: none;
    -webkit-text-security: disc; }
.lock-input:focus { border-color: var(--primary); background: #fff; }
.lock-input + .lock-input { margin-top: 10px; }

.lock-check { display: flex; align-items: center; gap: 9px; margin: 16px 0 18px;
    font-size: 13px; color: var(--muted); cursor: pointer; }
.lock-check input { width: 20px; height: 20px; accent-color: var(--primary); flex-shrink: 0; }

/* 右上角身份入口 + 身份面板里的头像卡 */
.ident { height: 38px; padding: 0 13px; border-radius: 19px; background: #ecebf2; color: #6f6c85;
    font-size: 12px; font-weight: 650; display: inline-flex; align-items: center; gap: 6px; }
.ident[hidden] { display: none; }
.ident.admin { background: var(--soft); color: var(--primary); }
.ident:before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .55; }
@media (max-width: 359px) { .ident { padding: 0 11px; } }

.id-card { display: flex; align-items: center; gap: 13px; }
.id-badge { width: 44px; height: 44px; border-radius: 15px; flex-shrink: 0; display: grid; place-items: center;
    background: #ecebf2; color: #6f6c85; font-size: 13px; font-weight: 700; }
.id-badge.admin { background: var(--soft); color: var(--primary); }
.id-card h3 { font-size: 15px; }
.id-card p { font-size: 12px; color: var(--muted); margin-top: 4px; }

/* ---------- 空数据状态 ---------- */
.empty-box { text-align: center; padding: 34px 20px; }
.empty-box h3 { font-size: 16px; margin-bottom: 8px; }
.empty-box p { font-size: 13px; color: var(--muted); line-height: 1.7; margin-bottom: 18px; }

/* ---------- 学员管理 / 编辑面板 ---------- */
.song-list { max-height: 46vh; overflow: auto; }
.color-row { display: flex; gap: 10px; flex-wrap: wrap; }
.color-dot { width: 40px; height: 40px; min-height: 40px; border-radius: 13px; background: #ede6fb;
    color: #7563a8; box-shadow: inset 0 0 0 2px transparent; }
.color-dot.on { box-shadow: inset 0 0 0 2px var(--primary); }
.color-dot.peach { background: #ffede0; color: #c58e6d; }
.color-dot.mint { background: #e2f3ed; color: #65a18b; }
.color-dot.blue { background: #e4edfe; color: #7a9bce; }
.color-dot.yellow { background: #fff2d5; color: #b99b57; }

/* 姓名「密码模式」：输入框 + 右侧的显示/隐藏切换 */
.mask-row { display: flex; gap: 8px; align-items: center; }
.mask-row .lock-input { flex: 1; min-width: 0; }
.mask-row .text-btn { flex-shrink: 0; min-height: 52px; padding: 0 14px; }
.mask-hint { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 4px; }

/* 训练参数：本机缓存覆盖默认值时的提示 */
.pref-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 9px;
    background: var(--soft); color: var(--primary); font-size: 10px; font-weight: 650; vertical-align: 1px; }
.pref-note { font-size: 12px; color: var(--muted); line-height: 1.7; margin-top: 12px; }

/* 五个底部导航项在窄屏上均分宽度，避免挤出屏幕 */
@media (max-width: 799px) {
    #nav .nav-item { min-width: 0; flex: 1 1 0; }
    #nav .nav-item span { font-size: 10px; }
}

.lock-error { color: #d93b30; font-size: 13px; margin-bottom: 12px; text-align: center; }
.lock-note { margin-top: 14px; }