/* UnrEal 账号商店 — 浅色卡片风格 */
:root{
  --bar:#0f1115;
  --bar-sub:#4a4f57;
  --bg:#eceef2;
  --card:#ffffff;
  --text:#12161c;
  --text2:#2a2f37;
  --muted:#6f7783;
  --line:#e4e8ee;
  --tile:#1b2027;
  --radius:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei","PingFang SC","Hiragino Sans GB",sans-serif;
  font-size:15px;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
input{font-family:inherit}

/* ---------------- 顶栏 ---------------- */
.topbar{position:sticky;top:0;z-index:30}
.bar-main{
  background:var(--bar);color:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;gap:12px;
}
.bar-left{font-size:16px;font-weight:500;letter-spacing:.2px}
.bar-left b{font-size:20px;font-weight:700;margin-left:2px;letter-spacing:.5px}
.bar-right{display:flex;gap:8px;flex-shrink:0}
.bar-btn{
  border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:13.5px;padding:7px 14px;border-radius:9px;
  transition:.15s;white-space:nowrap;
}
.bar-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.4)}
.bar-sub{
  background:var(--bar-sub);color:#fff;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 16px;font-size:13.5px;
}
.db-status{font-size:12px;opacity:.8}
.db-status.ok{opacity:.95}
.db-status.err{color:#ffc9c9;opacity:1}

/* ---------------- 工具条 ---------------- */
.toolbar{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px 4px;max-width:1180px;margin:0 auto;
}
.search-wrap{
  position:relative;flex:1;display:flex;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:11px;
  padding:0 12px;box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.search-wrap:focus-within{border-color:#b7c0cd;box-shadow:0 0 0 3px rgba(17,19,21,.06)}
.search-ico{width:17px;height:17px;color:#9aa2ae;flex-shrink:0}
.search-wrap input{
  border:0;outline:0;background:transparent;flex:1;
  padding:10px 8px;font-size:14.5px;color:var(--text);
}
.search-wrap input::-webkit-search-cancel-button{display:none}
.tool-btn{
  font-size:13.5px;color:#39404b;background:#fff;border:1px solid var(--line);
  padding:9px 14px;border-radius:11px;white-space:nowrap;
}
.tool-btn:hover{border-color:#c8ced8;color:#12161c}

/* ---------------- 卡片列表 ---------------- */
.list{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(348px,1fr));
  gap:12px;max-width:1180px;margin:0 auto;padding:10px 16px 30px;
}
.card{
  background:var(--card);border:1px solid #e8ebf0;border-radius:var(--radius);
  padding:13px 15px 8px;
  box-shadow:0 1px 2px rgba(16,24,40,.05);
  transition:box-shadow .16s, transform .16s;
  display:flex;flex-direction:column;
}
.card:hover{box-shadow:0 4px 16px rgba(16,24,40,.10);transform:translateY(-1px)}
.card-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.card-id{font-size:15px;font-weight:700;color:var(--text);white-space:nowrap}
.card-id .mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-weight:700}
.card-mail{
  font-size:13.5px;color:var(--text2);text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%;
}
.card-mail .tag{color:var(--muted);font-weight:400}
.card-line{
  margin-top:8px;font-size:14.5px;line-height:1.6;color:var(--text2);
  word-break:break-word;
}
.card-line b{color:var(--text);font-weight:600}
.card-line .empty-v{color:#a3aab5}
.card-foot{
  margin-top:auto;padding-top:8px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.card-region{font-size:13.5px;color:var(--muted);white-space:nowrap}
.card-actions{display:flex;gap:2px;margin-left:auto}
.link-btn{
  font-size:13.5px;color:#39404b;padding:6px 9px;border-radius:8px;transition:.13s;white-space:nowrap;
}
.link-btn:hover{background:#f1f3f7;color:#000}
.link-btn.view{font-weight:600;color:#12161c}

/* ---------------- 空状态 ---------------- */
.empty{padding:26px 16px 60px;display:flex;justify-content:center}
.empty-box{
  background:#fff;border:1px dashed #cfd6e0;border-radius:18px;
  padding:34px 26px;text-align:center;max-width:520px;width:100%;
}
.empty-title{font-size:18px;font-weight:700}
.empty-sub{color:var(--muted);font-size:14px;margin-top:8px}
.empty-tip{color:#98a0ac;font-size:12.5px;margin-top:16px;line-height:1.7}
.solid{
  background:#12161c;color:#fff;padding:9px 20px;border-radius:10px;
  font-size:14px;font-weight:500;transition:.15s;
}
.solid:hover{background:#000}
.solid.big{margin-top:18px;padding:11px 26px;border-radius:11px}
.ghost{
  border:1px solid var(--line);background:#fff;color:#39404b;
  padding:9px 18px;border-radius:10px;font-size:14px;
}
.ghost:hover{border-color:#c8ced8}

/* ---------------- 加载更多 ---------------- */
.more{display:flex;justify-content:center;padding:0 16px 48px}

/* ---------------- 覆盖层 / 面板 ---------------- */
.overlay{
  position:fixed;inset:0;z-index:60;display:none;
  align-items:center;justify-content:center;
  background:rgba(10,13,18,.55);backdrop-filter:blur(2px);
  padding:16px;
}
.overlay.show{display:flex}
.panel{
  background:#fff;border-radius:18px;width:min(460px,100%);
  box-shadow:0 24px 64px rgba(0,0,0,.28);overflow:hidden;
  animation:pop .16s ease-out;
}
@keyframes pop{from{transform:scale(.97);opacity:.6}to{transform:scale(1);opacity:1}}
.panel-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 8px}
.panel-head h3{margin:0;font-size:16.5px}
.x{font-size:22px;line-height:1;color:#8b939f;padding:2px 6px;border-radius:8px}
.x:hover{background:#f1f3f7;color:#12161c}
.panel-body{padding:6px 18px 4px}
.group{margin:14px 0 18px}
.group label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:9px;letter-spacing:.5px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1px solid var(--line);background:#fff;color:#39404b;
  padding:8px 14px;border-radius:20px;font-size:13.5px;transition:.14s;
}
.chip:hover{border-color:#c3cad4}
.chip.on{background:#12161c;color:#fff;border-color:#12161c}
.panel-foot{
  display:flex;justify-content:space-between;gap:10px;
  padding:14px 18px 18px;border-top:1px solid #f0f2f6;margin-top:6px;
}

/* ---------------- 商店图片 ---------------- */
.shot{padding:12px}
.shot-sheet{
  background:#fff;border-radius:16px;width:min(720px,100%);
  max-height:92vh;display:flex;flex-direction:column;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.4);animation:pop .18s ease-out;
}
.shot-head{background:var(--bar-sub);color:#fff;text-align:center;padding:11px 16px 12px;flex-shrink:0}
.shot-line1{font-size:15px;line-height:1.65}
.shot-line2{font-size:13px;opacity:.92;margin-top:2px}
.shot-body{overflow-y:auto;padding:6px 12px 18px;background:#fff}
.shot-body h4{
  text-align:center;font-size:20px;font-weight:600;letter-spacing:3px;
  margin:12px 0;color:#3b4149;
}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile{
  position:relative;background:var(--tile);border-radius:3px;
  aspect-ratio:16/10;overflow:hidden;
}
.tile img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;padding:10px;transition:transform .2s;
}
.tile:hover img{transform:scale(1.05)}
.tile .price{
  position:absolute;top:8px;right:8px;display:flex;align-items:center;gap:5px;
  color:#fff;font-size:13.5px;font-weight:600;
  background:rgba(0,0,0,.34);border-radius:16px;padding:3px 9px 3px 7px;
  backdrop-filter:blur(4px);
}
.tile .price svg{width:15px;height:15px}
.tile .name{
  position:absolute;left:10px;bottom:8px;right:10px;
  color:#fff;font-size:14px;font-weight:600;line-height:1.3;
  text-shadow:0 1px 4px rgba(0,0,0,.9);
}
.tile .noname{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:#7d858f;font-size:13px;text-align:center;padding:10px;
}
.night-empty{text-align:center;color:#9aa2ae;font-size:18px;letter-spacing:2px;margin:14px 0 18px}
.shot-foot{
  display:flex;justify-content:flex-end;gap:10px;flex-shrink:0;
  padding:11px 14px;border-top:1px solid #eef0f4;background:#fbfcfd;
}

/* ---------------- 拖拽 / toast ---------------- */
.drop-hint{
  position:fixed;inset:12px;z-index:80;display:none;
  align-items:center;justify-content:center;
  border:2px dashed #12161c;border-radius:18px;
  background:rgba(255,255,255,.94);color:#12161c;
  font-size:19px;font-weight:600;pointer-events:none;
}
.drop-hint.show{display:flex}
.toast{
  position:fixed;left:50%;bottom:38px;transform:translate(-50%,14px);
  background:rgba(16,19,24,.94);color:#fff;font-size:13.5px;
  padding:10px 18px;border-radius:22px;opacity:0;pointer-events:none;
  transition:.22s;z-index:100;max-width:80vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:640px){
  .list{grid-template-columns:1fr;padding:10px 10px 30px}
  .toolbar{padding:10px 10px 2px}
  .bar-main{padding:12px 14px}
  .bar-left{font-size:14.5px}
  .bar-left b{font-size:18px}
  .bar-btn{padding:6px 11px;font-size:12.5px}
  .card-mail{max-width:52%;font-size:12.5px}
  .tiles{gap:6px}
  .tile .name{font-size:12.5px}
}

/* ---------------- 登录门 ---------------- */
.login-overlay{
  position:fixed;inset:0;z-index:200;display:flex;
  align-items:center;justify-content:center;
  background:#12161c;
}
.login-overlay.hide{display:none}
.login-box{
  width:min(88vw,360px);background:#1a1f27;border:1px solid #2a313c;
  border-radius:16px;padding:34px 28px 26px;text-align:center;
  box-shadow:0 18px 60px rgba(0,0,0,.5);
}
.login-title{color:#fff;font-size:21px;font-weight:700;letter-spacing:1px}
.login-sub{color:#9aa2ae;font-size:13px;margin:8px 0 22px}
.login-box input{
  width:100%;box-sizing:border-box;background:#0e1116;border:1px solid #2a313c;
  color:#fff;font-size:15px;padding:11px 14px;border-radius:10px;outline:none;
  text-align:center;letter-spacing:2px;
}
.login-box input:focus{border-color:#4d8dff}
.login-btn{width:100%;margin-top:14px;padding:11px 0;font-size:15px;border-radius:10px;cursor:pointer}
.login-err{color:#ff6b6b;font-size:12.5px;min-height:18px;margin-top:12px}
.login-box.shake{animation:shake .3s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

.role-badge{
  display:inline-block;margin-left:10px;padding:2px 9px;border-radius:10px;
  font-size:11.5px;vertical-align:2px;
}
.role-badge.boss{background:rgba(255,178,61,.16);color:#ffb43d;border:1px solid rgba(255,178,61,.4)}
.role-badge.staff{background:rgba(140,160,190,.15);color:#9fb4d0;border:1px solid rgba(140,160,190,.35)}

/* ---- 员工密码管理 ---- */
.sk-list{list-style:none;margin:0 0 10px;padding:0;max-height:220px;overflow:auto}
.sk-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 12px;border:1px solid #e7eaf1;border-radius:9px;margin-bottom:7px;font-size:13.5px}
.sk-list li b{font-family:ui-monospace,Consolas,monospace;letter-spacing:1px}
.sk-list .sk-del{background:none;border:none;color:#e5484d;font-size:12.5px;cursor:pointer;padding:3px 6px;border-radius:6px}
.sk-list .sk-del:hover{background:rgba(229,72,77,.08)}
.sk-addrow{display:flex;gap:8px}
.sk-addrow input{flex:1;height:36px;border:1px solid #dfe3ec;border-radius:9px;padding:0 12px;font-size:13.5px;outline:none}
.sk-addrow input:focus{border-color:#7aa7ff}
.sk-tip{margin-top:10px;font-size:12px;color:#8a94a6;line-height:1.6}

/* ---- LOGO ---- */
.bar-side{display:flex;align-items:center;gap:10px;min-width:0}
.brand-logo{width:30px;height:30px;border-radius:50%;display:block;flex-shrink:0;
  border:1.5px solid rgba(255,255,255,.35);box-shadow:0 2px 8px rgba(0,0,0,.35)}
.login-logo{width:76px;height:76px;border-radius:50%;display:block;margin:0 auto 12px;
  box-shadow:0 8px 24px rgba(0,0,0,.45)}

/* ---- 员工密码行（备注 / 修改 / 删除） ---- */
.sk-row{gap:8px}
.sk-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#333}
.sk-noname{color:#a8b0be;font-style:normal}
.sk-ops{display:flex;gap:4px;flex-shrink:0}
.sk-row b{font-family:ui-monospace,Consolas,monospace;letter-spacing:.5px;font-size:13px;color:#1a1f27}
.sk-edit,.sk-save,.sk-cancel{background:none;border:none;font-size:12.5px;cursor:pointer;padding:3px 6px;border-radius:6px}
.sk-edit{color:#3b7ddd}
.sk-edit:hover{background:rgba(59,125,221,.08)}
.sk-save{color:#1f9d55}
.sk-save:hover{background:rgba(31,157,85,.1)}
.sk-cancel{color:#8a94a6}
.sk-cancel:hover{background:rgba(138,148,166,.12)}
.sk-row.editing{background:#f7f9ff;border-color:#c8d7f5}
.sk-en,.sk-ep{height:30px;border:1px solid #dfe3ec;border-radius:7px;padding:0 8px;font-size:12.5px;outline:none;min-width:0}
.sk-en{flex:1}
.sk-ep{flex:0 0 38%;font-family:ui-monospace,Consolas,monospace}
.sk-en:focus,.sk-ep:focus{border-color:#7aa7ff}
.sk-empty{justify-content:center;color:#a8b0be;font-size:13px}
.sk-addrow #sk-note{flex:0 0 34%}
.sk-addrow .solid{flex:0 0 auto;white-space:nowrap;padding:0 16px;height:36px}