/* ═══════════════════════════════════════════════════════
   common.css —— 两站通用（admin / 用户胶囊基础）
   quiz 页引用安全：本文件不含任何与 quiz 冲突的选择器
   admin 专属样式全部用 .box 作用域，不会影响其他页
   ═══════════════════════════════════════════════════════ */

/* ---------- ① 变量 & 基础 ---------- */
:root{ --primary-color:#1890ff; --success-color:#52c41a; --error-color:#f5222d; --warning-color:#faad14; }
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,BlinkMacSystemFont,sans-serif;color:#333;line-height:1.6;background:#f4f6f8}
/* 注意：quiz 的 body 布局(height/flex/overflow)在 exam.css，这里故意不放 */

/* ---------- ② admin 页骨架（.box 作用域） ---------- */
.box{max-width:960px;margin:0 auto}
h1{font-size:20px}
.bar{display:flex;gap:10px;margin:12px 0}
.table-wrap{overflow-x:auto;background:#fff;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,.08)}
table{width:100%;border-collapse:collapse}
th,td{padding:9px 8px;border-bottom:1px solid #f0f0f0;font-size:14px;text-align:left;vertical-align:middle;white-space:nowrap}
th{background:#fafafa;color:#666;font-size:13px}
.box input,.box select{padding:6px;border:1px solid #d9d9d9;border-radius:6px;font-size:14px;width:110px}
.msg{text-align:center;font-size:14px;margin-top:12px;min-height:20px}
.on{color:#52c41a;font-weight:700}.off{color:#bbb}

/* ---------- ③ 通用按钮色板 ---------- */
.btn{padding:5px 10px;border:none;border-radius:6px;font-size:13px;cursor:pointer;color:#fff;transition:opacity .2s}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-blue{background:var(--primary-color)}
.btn-green{background:var(--success-color)}
.btn-yellow{background:var(--warning-color)}
.btn-red{background:var(--error-color)}
.btn-ghost{background:#fff;border:1px solid #d9d9d9;color:#333}
.btn-lg{padding:9px 16px;border-radius:8px;font-size:14px}
.op{display:flex;gap:8px;flex-wrap:wrap}

/* ---------- ④ 密码列 ---------- */
.pw{display:inline-flex;align-items:center;gap:4px}
.pw button{padding:5px 9px;border:none;border-radius:6px;cursor:pointer;font-size:13px;color:#fff;background:#1890ff}
.pw .eye{padding:5px 7px;background:#fff;border:1px solid #d9d9d9;color:#333}

/* ---------- ⑤ 长短文字切换 ---------- */
.t-short{display:none}
@media (max-width:600px){
  .t-long{display:none}.t-short{display:inline}
  th,td{padding:7px 6px;font-size:13px}
  .box input,.box select{width:92px}
}

/* ---------- ⑥ admin 手机端：操作按钮不换行（配合表格横滚） ---------- */
@media (max-width:600px){
  .op{flex-wrap:nowrap;gap:6px}
  .op .btn{padding:5px 9px;font-size:12px}
}