/* ====== 用量看板 / 员工账号与权限 · 共用样式（网页版 index.html 与桌面版 desk.html）======
配色跟微米 VI：白底 + 墨黑字 + 主绿点缀，不用系统默认控件的蓝。
⚠️ 两端共用唯一副本，改一次两边都生效，别再往 html 里贴这两个界面的样式。 */
/* ---------- 通用小件 ---------- */
.adSec { margin:18px 0 10px; display:flex; align-items:baseline; gap:8px; }
.adSec .t { font-size:14px; font-weight:700; color:var(--txt); }
.adSec .s { font-size:12px; color:var(--sub); }
.adSec .sp { flex:1; }
/* 角色徽章 */
.adTag { display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:6px;
font-size:11.5px; font-weight:700; letter-spacing:.2px; white-space:nowrap; }
.adTag.admin { background:var(--green); color:#fff; }
.adTag.staff { background:var(--side); color:var(--sub); }
.adTag.idle { background:#fdf3e6; color:#9a6b20; }
/* ---------- 用量看板 ----------
目标：打开就一屏看全，不用滑。所以汇总卡压扁、成员行压到一行半，
占比条并进行背景里（不额外占高度） */
.adStats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.adStat { background:var(--side); border-radius:12px; padding:10px 8px; text-align:center; }
.adStat .n { font-size:20px; font-weight:800; color:var(--txt); line-height:1.15; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.adStat .n.money { color:var(--green-d); }
.adStat .k { font-size:11px; color:var(--sub); margin-top:2px; }
@media (max-width:400px){ .adStat .n { font-size:18px; } }
.adUseSec { margin:14px 0 6px; }
.adRank { display:flex; flex-direction:column; gap:3px; }
/* 整行背景按花费比例填充，就是那根进度条本身 */
.adUse { display:grid; grid-template-columns:18px 1fr auto; gap:9px; align-items:center;
padding:7px 9px; border-radius:9px;
background:linear-gradient(90deg, var(--mint-bg) var(--w,0%), var(--side) var(--w,0%)); }
.adUse .no { font-size:12px; font-weight:700; color:var(--sub); text-align:center; font-variant-numeric:tabular-nums; }
.adUse .no.top { color:var(--green); }
.adUse .who { min-width:0; }
.adUse .nm { font-size:14.5px; font-weight:700; color:var(--txt); display:flex; align-items:center; gap:6px; line-height:1.25; }
.adUse .nm .name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adUse .nm .adTag { height:17px; padding:0 6px; font-size:10.5px; }
.adUse .sub { font-size:11px; color:var(--sub); margin-top:2px; font-variant-numeric:tabular-nums;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.adUse .amt { text-align:right; }
.adUse .amt .c { font-size:15px; font-weight:800; color:var(--green-d); font-variant-numeric:tabular-nums; letter-spacing:-.3px; line-height:1.2; }
.adUse .amt .p { font-size:10.5px; color:var(--sub); margin-top:2px; font-variant-numeric:tabular-nums; }
.adUse.zero { background:var(--side); }
.adUse.zero .amt .c { color:var(--sub); }
.adNote { font-size:11px; color:var(--sub); line-height:1.6; margin-top:10px; text-align:center; }
/* ---------- 员工账号：一人一张卡 ---------- */
.adUsers { display:flex; flex-direction:column; gap:10px; }
.adUser { border:1px solid var(--line); border-radius:14px; padding:13px 14px; background:var(--panel); }
.adUser.me { border-color:var(--mint); background:linear-gradient(180deg,#fbfefc,var(--panel)); }
.adUHead { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.adUHead .nm { font-size:15.5px; font-weight:700; color:var(--txt); }
.adUHead .id { font-size:12px; color:var(--sub); font-variant-numeric:tabular-nums; }
.adUHead .sp { flex:1; }
/* 权限概览：不点开也知道这人能干什么 */
.adPerms { display:flex; flex-wrap:wrap; gap:5px; margin-top:9px; }
.adPerms .p { font-size:11.5px; padding:3px 8px; border-radius:6px; background:var(--mint-bg); color:var(--green-d); font-weight:600; }
.adPerms .p.off { background:var(--side); color:#b6bcb6; font-weight:400; text-decoration:line-through; }
.adPerms .none { font-size:12px; color:var(--sub); }
/* 操作按钮：手机上也要一行放得下，不能再挤成竖排 */
.adOps { display:flex; gap:6px; margin-top:11px; }
.adOps button { flex:1; min-width:0; white-space:nowrap; background:var(--panel); border:1px solid var(--line);
color:var(--txt); border-radius:9px; padding:8px 4px; font-size:13px; cursor:pointer; transition:.12s; }
.adOps button:hover { border-color:var(--green); color:var(--green-d); background:var(--mint-bg); }
.adOps button.danger:hover { border-color:#e0466a; color:#e0466a; background:#fff1f4; }
.adRoleSel { border:1px solid var(--line); background:var(--panel); color:var(--txt);
border-radius:8px; padding:4px 6px; font-size:12.5px; cursor:pointer; }
/* ---------- 权限编辑：绿色开关，不用系统蓝勾选框 ---------- */
.adSwitches { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0; }
@media (max-width:520px){ .adSwitches { grid-template-columns:1fr; } }
.adSw { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line);
border-radius:11px; background:var(--panel); cursor:pointer; font-size:13.5px; color:var(--txt); user-select:none; }
.adSw:hover { border-color:var(--mint); }
.adSw input { display:none; }
.adSw .knob { width:36px; height:21px; border-radius:11px; background:#dfe4df; position:relative; flex-shrink:0; transition:background .18s; }
.adSw .knob::after { content:''; position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%;
background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.22); transition:transform .18s; }
.adSw input:checked + .knob { background:var(--green); }
.adSw input:checked + .knob::after { transform:translateX(15px); }
.adSw.on { border-color:var(--mint); background:#fbfefc; }
.adField { margin-top:12px; }
.adField .lb { font-size:12.5px; color:var(--sub); margin-bottom:6px; }
.adField textarea { width:100%; min-height:64px; border:1px solid var(--line); border-radius:10px;
padding:9px 11px; font-size:13px; font-family:inherit; color:var(--txt); background:#fafcfa; outline:none; resize:vertical; }
.adField textarea:focus { border-color:var(--green); }
/* ---------- 新建账号 ---------- */
.adNew { border:1px dashed var(--line); border-radius:14px; padding:14px; margin-top:14px; background:var(--side); }
.adNew .adSec { margin-top:0; }
.adNewGrid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media (max-width:520px){ .adNewGrid { grid-template-columns:1fr; } }
.adNewGrid input, .adNewGrid select { width:100%; border:1px solid var(--line); border-radius:9px;
padding:9px 11px; font-size:14px; background:var(--panel); color:var(--txt); outline:none; font-family:inherit; }
.adNewGrid input:focus { border-color:var(--green); }
.adBtnMain { width:100%; margin-top:9px; background:var(--green); color:#fff; border:0; border-radius:10px;
padding:11px; font-size:14.5px; font-weight:700; cursor:pointer; }
.adBtnMain:hover { background:var(--green-d); }
/* 空状态 */
.adEmpty { text-align:center; color:var(--sub); font-size:13px; padding:26px 10px; line-height:1.8; }
/* ---------- 后台弹窗自身的排版 ---------- */
/* 关闭按钮原来是 float+sticky，会浮在第一块内容上面挡住字；改成钉在右上角，内容给它让出位置 */
#adminModal .panel { position:relative; padding-top:16px; }
#adminModal .closex { position:absolute; top:6px; right:8px; float:none; margin:0; z-index:6; border-radius:10px; }
#adminModal .subview { padding-top:22px; }
.adTitleRow { margin-top:16px; }
.adTitleRow .t { font-size:16.5px; white-space:nowrap; }
.adMini { flex-shrink:0; white-space:nowrap; background:var(--panel); border:1px solid var(--line); color:var(--txt);
border-radius:9px; padding:6px 11px; font-size:12.5px; cursor:pointer; }
.adMini:hover { border-color:var(--green); color:var(--green-d); background:var(--mint-bg); }
/* 全局模型 */
.adModel { border:1px solid var(--line); border-radius:14px; padding:13px 14px; background:var(--side); }
.adModelOpt { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid transparent;
border-radius:11px; background:var(--panel); cursor:pointer; margin-top:7px; transition:.12s; }
.adModelOpt:first-child { margin-top:0; }
.adModelOpt .l { font-size:14px; font-weight:700; color:var(--txt); white-space:nowrap; flex-shrink:0; }
.adModelOpt .r { font-size:11.5px; color:var(--sub); text-align:right; flex:1; line-height:1.45; }
.adModelOpt:hover { border-color:var(--mint); }
.adModelOpt.on { border-color:var(--green); background:var(--mint-bg); }
.adModelOpt.on .l { color:var(--green-d); }
/* 关闭按钮别再用白底盖住下面的卡片，透明就行 */
#adminModal .closex { background:transparent; }
#adminModal .subview { padding-top:28px; }
/* 手机上模型描述较长，跟标题挤一行还右对齐会很乱，改成上下两行左对齐 */
@media (max-width:520px){
.adModelOpt { flex-direction:column; align-items:flex-start; gap:3px; }
.adModelOpt .r { text-align:left; }
}
/* 宽屏下操作按钮不要被拉得老长，靠左排成正常尺寸 */
@media (min-width:640px){
.adOps { justify-content:flex-start; }
.adOps button { flex:0 0 auto; min-width:92px; padding:8px 14px; }
}