/* 照榜单后台「积分与抽奖」那一页的样式来:浅灰底、白卡片、行式表单、右侧灰色提示语。
   数值取自那边的 scoped style,尽量一眼看过去是同一套东西。 */
:root{
  --bg:#f2f3f5; --card:#fff; --line:#e6e9ef; --text:#1f2d3d; --label:#333;
  --dim:#909399; --brand:#409eff; --brand2:#2b6cd9; --danger:#f56c6c;
  --warn:#d48806; --ok:#2e9e5b; --tip-bg:#f0f9eb; --tip-line:#e1f3d8;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);
     font:14px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;}
/* 外框:照榜单 Layout.vue —— 顶部深蓝导航 + 左侧白菜单 + 右侧内容靠左铺开 */
.layout{min-height:100vh;display:flex;flex-direction:column}
.topbar{height:52px;background:#0f2743;color:#fff;display:flex;align-items:center;
        justify-content:space-between;padding:0 24px;flex-shrink:0;position:sticky;top:0;z-index:15}
.brand{font-size:16px;font-weight:600;letter-spacing:.3px}
.brand small{font-size:13px;color:#c8d3e0;font-weight:400;margin-left:6px}
.user{color:#fff;font-size:14px;display:flex;gap:14px;align-items:center}
.user a{color:#c8d3e0;cursor:pointer} .user a:hover{color:#fff}
.burger{display:none;color:#fff;font-size:15px;cursor:pointer;margin-right:16px;white-space:nowrap}
.body{flex:1;display:flex;min-height:0}
aside{width:220px;background:#fff;border-right:1px solid var(--line);flex-shrink:0;
      position:sticky;top:52px;height:calc(100vh - 52px);overflow-y:auto}
.asub{padding:18px 20px 8px;color:var(--dim);font-size:12px;letter-spacing:.5px}
#menu button{display:block;width:100%;text-align:left;border:0;background:none;
      padding:12px 20px;font-size:14px;color:#1f2d3d;font-weight:500;cursor:pointer;
      border-left:3px solid transparent}
#menu button:hover{background:#f5f7fa}
#menu button.on{color:var(--brand2);font-weight:700;background:#ecf5ff;border-left-color:var(--brand2)}
main{flex:1;padding:24px 28px 60px;min-width:0}
main > *{max-width:1200px}
.dmask{display:none}
@media (max-width:820px){
  .burger{display:inline-block}
  .topbar{padding:0 12px;justify-content:flex-start}
  .brand{flex:1}.brand small{display:none}
  aside{position:fixed;left:0;top:52px;z-index:25;transform:translateX(-100%);
        transition:transform .2s;box-shadow:2px 0 12px #0002}
  aside.open{transform:none}
  .dmask.open{display:block;position:fixed;inset:52px 0 0 0;background:#0004;z-index:20}
  main{padding:16px 14px 60px}
}
.title{font-size:22px;color:#1f2d3d;margin:0 0 8px;font-weight:600}
.tip{background:var(--tip-bg);border:1px solid var(--tip-line);border-radius:6px;
     padding:10px 14px;margin-bottom:14px}
.tip .t{color:#529b2e;font-weight:600;margin-bottom:4px}
.note{line-height:1.8;color:#1f2d3d;font-size:13px}
.bar{margin-bottom:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pick{font-size:14px;color:#333}
select.sel{width:300px;max-width:100%}
.ov{background:#fff;border:1px solid var(--line);border-radius:8px;padding:12px 16px;
    margin-bottom:12px;line-height:1.9;font-size:14px}
.ov.bad{background:#fff8e6;border-color:#f0d98a}
.sep{margin:0 10px;color:#dcdfe6}
.dim{color:var(--dim);font-size:13px;font-weight:400}
.warn{color:var(--warn)}
.box{background:#fff;border:1px solid var(--line);border-radius:8px;
     padding:14px 18px;margin-bottom:14px}
.h{font-weight:700;color:#1f2d3d;margin-bottom:10px}
.row{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.lb{width:150px;color:var(--label);font-size:14px;flex-shrink:0}
.lb2{margin-left:18px;color:var(--label);font-size:14px}
.hint{color:var(--dim);font-size:13px;line-height:1.6}
.btns{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.need{color:var(--dim);padding:22px 4px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:1000px){.two{grid-template-columns:1fr}.lb{width:110px}}
.ucard{background:#f7fbff;border:1px solid #d9ecff;border-radius:6px;padding:10px 14px;margin-top:8px}
.big{font-size:20px;color:var(--brand2)}
.up{color:var(--ok)} .down{color:#d03050}
.g{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px dashed #eef0f4}
.gname{width:110px;font-weight:700}
input[type=text],input[type=number],input[type=password],textarea,select{
  border:1px solid #dcdfe6;border-radius:4px;padding:6px 10px;font-size:14px;
  color:var(--text);background:#fff;outline:none;font-family:inherit}
input:focus,textarea:focus,select:focus{border-color:var(--brand)}
input[type=number]{width:120px}
textarea{width:100%;max-width:520px}
.btn{border:1px solid #dcdfe6;background:#fff;color:#606266;border-radius:4px;
     padding:8px 16px;font-size:14px;cursor:pointer}
.btn:hover{color:var(--brand);border-color:#c6e2ff}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:hover{background:#66b1ff;color:#fff}
.btn.sm{padding:5px 11px;font-size:13px}
.btn.link{border:0;background:none;color:var(--brand);padding:4px 6px}
.btn.link.danger{color:var(--danger)}
.btn:disabled{opacity:.6;cursor:not-allowed}
/* 开关 */
.sw{position:relative;display:inline-block;width:40px;height:20px;flex-shrink:0}
.sw input{opacity:0;width:0;height:0}
.sw i{position:absolute;inset:0;background:#dcdfe6;border-radius:10px;transition:.2s;cursor:pointer}
.sw i:before{content:"";position:absolute;width:16px;height:16px;left:2px;top:2px;
  background:#fff;border-radius:50%;transition:.2s}
.sw input:checked + i{background:var(--brand)}
.sw input:checked + i:before{transform:translateX(20px)}
/* 表格 */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:#909399;font-weight:500;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:8px 10px;border-bottom:1px solid #f2f3f5}
tr:last-child td{border-bottom:0}
.tag{display:inline-block;font-size:12px;padding:1px 8px;border-radius:3px;
     background:#f4f4f5;color:#909399;border:1px solid #e9e9eb}
.tag.ok{background:#f0f9eb;color:#529b2e;border-color:#e1f3d8}
.tag.bad{background:#fef0f0;color:#f56c6c;border-color:#fde2e2}
.tag.wa{background:#fdf6ec;color:#e6a23c;border-color:#faecd8}
/* 弹窗 */
.mask{position:fixed;inset:0;background:#00000050;display:flex;align-items:center;
      justify-content:center;padding:16px;z-index:20}
.dlg{background:#fff;border-radius:8px;padding:18px 20px;width:560px;max-width:100%;
     max-height:88vh;overflow:auto}
.dlg .dt{font-size:17px;font-weight:600;margin-bottom:14px}
.dlg .foot{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);background:#000c;
       color:#fff;padding:10px 18px;border-radius:6px;font-size:14px;z-index:30}

/* 大屏放大一档:2K/4K 屏上 14px 的字和 1200 宽的内容会缩成中间一小块(09-26 用户反馈)。
   普通笔记本不动,屏越宽字越大、内容越宽。 */
@media (min-width:1600px){
  body{font-size:15px}
  main{padding:28px 36px 60px}
  main > *{max-width:1480px}
  aside{width:240px}
  #menu button{font-size:15px;padding:13px 22px}
  .title{font-size:24px}
  .lb{width:170px;font-size:15px}.lb2{font-size:15px}
  .hint,.dim{font-size:14px}
  input[type=text],input[type=number],textarea,select{font-size:15px;padding:8px 12px}
  input[type=number]{width:140px}
  .btn{font-size:15px;padding:9px 18px}
  table{font-size:14px} th,td{padding:10px 12px}
  .box{padding:18px 24px}
  .dlg{width:640px}
}
@media (min-width:2200px){
  body{font-size:16px}
  main > *{max-width:1700px}
  aside{width:260px}
  #menu button{font-size:16px;padding:14px 24px}
  .title{font-size:26px}
  .lb{width:190px;font-size:16px}.lb2{font-size:16px}
  .hint,.dim{font-size:15px}
  input[type=text],input[type=number],textarea,select{font-size:16px;padding:9px 13px}
  input[type=number]{width:150px}
  .btn{font-size:16px;padding:10px 20px}
  table{font-size:15px}
  .topbar{height:58px}.brand{font-size:18px}
  aside{top:58px;height:calc(100vh - 58px)}
  .dlg{width:720px}
}
@media (min-width:1600px){
  .note,.ov,.pick,#role,.asub{font-size:15px}
  .tip .t{font-size:16px}
  select.sel{width:340px}
}
@media (min-width:2200px){
  .note,.ov,.pick,#role{font-size:16px}
  .tip .t{font-size:17px}
  .asub{font-size:14px}
  select.sel{width:380px}
}