/* ============ V2 后台设计系统（Element 风格）============ */
:root{
  --bg:#f0f2f5;--card:#fff;--txt:#303133;--muted:#909399;
  --pri:#409eff;--pri-d:#337ecc;--ok:#67c23a;--warn:#e6a23c;--err:#f56c6c;
  --bd:#e4e7ed;--bd-l:#ebeef5;
  --sidebar-w:220px;--header-h:60px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Microsoft YaHei',sans-serif;background:var(--bg);color:var(--txt);font-size:14px}

/* ===== 左侧深色侧边栏 ===== */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);background:#1a1f36;z-index:100;display:flex;flex-direction:column;box-shadow:2px 0 8px rgba(0,0,0,.15)}
.sidebar .logo{height:60px;display:flex;align-items:center;padding:0 18px;color:#fff;font-size:16px;font-weight:600;letter-spacing:.5px;border-bottom:1px solid rgba(255,255,255,.08);gap:10px}
.sidebar .logo .logo-icon{width:28px;height:28px;border-radius:6px;background:linear-gradient(135deg,#409eff,#337ecc);display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(64,158,255,.35)}
.sidebar .logo .logo-icon svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sidebar .logo .logo-text{white-space:nowrap}
.sidebar nav{flex:1;padding:8px 0;overflow-y:auto}
.sidebar nav::-webkit-scrollbar{width:0}
.nav-item{position:relative;display:flex;align-items:center;height:48px;padding:0 18px 0 22px;color:rgba(255,255,255,.7);text-decoration:none;font-size:14px;cursor:pointer;transition:all .2s;gap:12px;user-select:none}
.nav-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pri);transform:scaleY(0);transition:transform .2s;border-radius:0 2px 2px 0}
.nav-item:hover{color:#fff;background:rgba(255,255,255,.05)}
.nav-item.active{color:#fff;background:rgba(64,158,255,.15)}
.nav-item.active::before{transform:scaleY(1)}
.nav-item .ico{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-item .ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ===== 顶部白色标题栏 ===== */
.admin-header{position:fixed;top:0;left:var(--sidebar-w);right:0;height:var(--header-h);background:#fff;border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;padding:0 24px;z-index:90;box-shadow:0 1px 4px rgba(0,0,0,.03)}
.admin-header .htitle{font-size:17px;font-weight:600}
.admin-header .logout{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border:1px solid #fde2e2;border-radius:4px;background:#fef0f0;color:#f56c6c;font-size:13px;cursor:pointer;transition:all .2s;white-space:nowrap;min-width:96px;justify-content:center}
.admin-header .logout:hover{background:#f56c6c;color:#fff;border-color:#f56c6c}
.admin-header .logout svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ===== 内容工作区 ===== */
.wrap{padding:calc(var(--header-h) + 24px) 28px 48px calc(var(--sidebar-w) + 28px)}
.card{position:relative;background:var(--card);border:1px solid var(--bd-l);border-radius:8px;padding:20px 20px 20px 24px;margin-bottom:16px;box-shadow:0 1px 3px rgba(0,0,0,.05),0 2px 10px rgba(0,0,0,.02);transition:box-shadow .2s}
.card::before{content:'';position:absolute;left:0;top:16px;bottom:16px;width:4px;background:var(--pri);border-radius:0 3px 3px 0}
.card:hover{box-shadow:0 2px 8px rgba(0,0,0,.07),0 4px 16px rgba(0,0,0,.03)}
h1{font-size:19px;font-weight:600;margin-bottom:14px}
h2{position:relative;font-size:15px;font-weight:600;margin-bottom:10px;color:var(--txt);padding-left:10px}
h2::before{content:'';position:absolute;left:0;top:3px;bottom:3px;width:3px;background:var(--pri);border-radius:2px}
.muted{color:var(--muted);font-size:13px;line-height:1.7}

/* 登录卡（仅 index.html） */
#login{max-width:400px;margin:9vh auto 0}
#login h1{margin-bottom:16px}
#login::before{display:none}

/* ===== 按钮 ===== */
button{border:none;border-radius:4px;padding:9px 18px;font-size:14px;cursor:pointer;background:var(--pri);color:#fff;transition:all .15s;font-family:inherit;line-height:1.4}
button:hover{background:var(--pri-d)}
button:active{transform:translateY(1px)}
button.ghost{background:#fff;color:var(--txt);border:1px solid #dcdfe6}
button.ghost:hover{color:var(--pri);border-color:var(--pri);background:#ecf5ff}
button.warn{background:var(--warn)}button.warn:hover{background:#cf9236}
button.err{background:var(--err)}button.err:hover{background:#c45656}
button.ok{background:var(--ok)}button.ok:hover{background:#529b2e}
button.big{width:100%;padding:13px;font-size:16px;letter-spacing:2px}
button:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ===== 表单 ===== */
input,select{border:1px solid #dcdfe6;border-radius:4px;padding:9px 12px;font-size:14px;width:100%;color:var(--txt);background:#fff;outline:none;transition:border-color .2s,box-shadow .2s;font-family:inherit}
input:focus,select:focus{border-color:var(--pri);box-shadow:0 0 0 3px rgba(64,158,255,.12)}
input[type=file]{padding:6px}
input::placeholder{color:#c0c4cc}

/* ===== 表格 ===== */
table{width:100%;border-collapse:collapse;background:#fff;border-radius:6px;overflow:hidden}
th,td{border:1px solid var(--bd-l);padding:10px 12px;text-align:center;font-size:14px}
th{background:#f5f7fa;color:#606266;font-weight:600}
tbody tr:hover td{background:#f5f7fa}

/* ===== 页签（控制台五环节 / 排名页）===== */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tab{padding:8px 18px;border:1px solid var(--bd);border-radius:6px;background:#fff;color:var(--txt);font-size:14px;cursor:pointer;transition:all .15s;font-family:inherit}
.tab:hover{color:var(--pri);border-color:var(--pri)}
.tab.active{background:var(--pri);border-color:var(--pri);color:#fff;font-weight:600}

/* ===== 盲盒宫格（抽题进度）===== */
.box-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;margin-top:10px}
.bx{aspect-ratio:1;border-radius:10px;border:1px solid rgba(64,158,255,.35);background:#f5faff;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;color:var(--txt);gap:2px}
.bx .bn{font-size:18px;font-weight:800;color:var(--pri)}
.bx.taken{border-color:var(--ok);background:#f0f9eb}
.bx.taken .bn{color:var(--ok);font-size:14px}
.bx.taken .bl{color:var(--ok);font-size:11px;font-weight:600}

/* ===== 分项打分行 ===== */
.dim-line{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px dashed var(--bd);font-size:14px}
.dim-line b{color:var(--pri)}

/* ===== 布局 & 杂项 ===== */
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grow{flex:1}
.tag{display:inline-block;padding:2px 10px;border-radius:20px;font-size:12px;background:#ecf5ff;color:#409eff}
.tag.ok{background:#f0f9eb;color:#67c23a}
.tag.err{background:#fef0f0;color:#f56c6c}
.tag.warn{background:#fdf6ec;color:#e6a23c}
.hidden{display:none!important}
a{text-decoration:none}

/* 选项按钮（设备答题/打分） */
.op{display:block;width:100%;text-align:left;margin:8px 0;padding:12px 14px;border:1.5px solid var(--bd);border-radius:8px;background:#fff;font-size:15px;color:var(--txt);transition:all .15s}
.op:hover{border-color:#c6e2ff;background:#f5faff}
.op.sel{border-color:var(--pri);background:#ecf5ff;color:var(--pri);font-weight:600;box-shadow:0 0 0 3px rgba(64,158,255,.1)}
.q{margin-bottom:16px}
.q .stem{font-weight:600;margin-bottom:6px;line-height:1.6}

/* 计时器 */
.timer{font-size:34px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums;color:var(--txt)}
.timer.hot{color:var(--err)}

/* 进度条 */
.prog-track{height:14px;background:#eef2f8;border-radius:8px;overflow:hidden}
.prog-fill{height:100%;width:0%;background:linear-gradient(90deg,#409eff,#67c23a);transition:width .5s;border-radius:8px}

/* 登录页未登录时隐藏公共 chrome */
body.no-chrome .sidebar,
body.no-chrome .admin-header{display:none}
body.no-chrome .wrap{padding:24px 28px 48px}

/* iframe 内的环节控制台页面：去掉为侧边栏预留的左内边距，保持左对齐 */
body.iframe-mode .wrap{padding:24px 28px 48px}

/* 平板/窄屏：侧边栏收窄为图标 */
@media (max-width:900px){
  :root{--sidebar-w:64px}
  .sidebar .logo{font-size:0;padding:0;justify-content:center}
  .sidebar .logo .logo-icon{margin:0}
  .nav-item{justify-content:center;padding:0}
  .nav-item span{display:none}
  .admin-header .hsub{display:none}
  .wrap{padding:calc(var(--header-h) + 16px) 14px 32px calc(var(--sidebar-w) + 14px)}
}