* { box-sizing: border-box; }
body {
  margin: 0; background: #eef1f5; color: #222;
  font: 14px/1.5 -apple-system, "Microsoft YaHei", system-ui, sans-serif;
}

/* 登录页 */
.login-view {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1f4fb0 0%, #2f6fed 100%);
}
.login-card {
  background: #fff; border-radius: 14px; padding: 32px 28px; width: 340px;
  box-shadow: 0 12px 40px rgba(0,0,0,.2);
}
.login-title { font-size: 20px; font-weight: 700; text-align: center; color: #1f4fb0; }
.login-sub { font-size: 13px; color: #6b7280; text-align: center; margin: 8px 0 22px; }
.login-card input {
  width: 100%; padding: 11px 14px; margin-bottom: 12px; border: 1px solid #d1d5db;
  border-radius: 8px; font-size: 15px; outline: none;
}
.login-card input:focus { border-color: #2f6fed; }
.login-card button {
  width: 100%; padding: 11px; border: none; border-radius: 8px; background: #2f6fed;
  color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
}
.login-card button:hover { background: #1d4ed8; }
.login-err { color: #dc2626; font-size: 13px; margin-top: 10px; text-align: center; min-height: 18px; }

/* 主应用 */
.wrap { max-width: 440px; margin: 0 auto; padding-bottom: 40px; }
.head { position: sticky; top: 0; z-index: 50; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.titlebar { background: #1f4fb0; color: #fff; padding: 8px 12px; text-align: center; }
.titlebar .t { font-weight: 700; font-size: 15px; letter-spacing: .5px; }
.titlebar .s { font-size: 12px; opacity: .95; margin-top: 2px; }
.nav {
  background: #2f6fed; color: #fff;
  padding: 8px 10px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
}
.nav input {
  width: 64px; padding: 5px 6px; border: none; border-radius: 5px;
  font-size: 14px; text-align: center;
}
.nav button {
  padding: 5px 9px; border: none; border-radius: 5px; cursor: pointer;
  background: #fff; color: #2f6fed; font-weight: 600; font-size: 13px;
}
.nav button.alt { background: #ffd166; color: #7a5a00; }
.nav button.gr { background: #c7f0d8; color: #167a44; }
.nav button.sec { background: #fee2e2; color: #991b1b; margin-left: auto; }
.p {
  background: #fff; margin: 10px; border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.08); scroll-margin-top: 100px;
  border-left: 4px solid transparent;
}
.ph {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  background: #f0f4ff; border-bottom: 1px solid #e2e8f5; flex-wrap: wrap;
}
.ph .no { font-weight: 700; color: #2f6fed; }
.ph .nm { font-weight: 700; font-size: 15px; }
.ph .st { display: flex; gap: 4px; }
.ph .dn { margin-left: auto; font-size: 12px; color: #444; display: flex; align-items: center; gap: 10px; }
.ph .dn label { display: flex; align-items: center; gap: 3px; cursor: pointer; }
.ph .dn input { width: 15px; height: 15px; }
.tg { padding: 2px 6px; border-radius: 4px; font-size: 11px; color: #fff; }
.tg.done { background: #1a9e55; }
.tg.exist { background: #e08a00; }
.f {
  display: grid; grid-template-columns: 96px 1fr auto; align-items: center;
  gap: 6px; padding: 6px 12px; border-bottom: 1px solid #f3f5f8;
}
.f:last-child { border-bottom: none; }
.f .l { color: #888; font-size: 12px; }
.f .v { word-break: break-all; font-size: 14px; }
.f .cp {
  padding: 3px 8px; border: none; border-radius: 5px; cursor: pointer;
  background: #eaf1ff; color: #2f6fed; font-size: 12px; white-space: nowrap;
}
.f .cp.ok { background: #1a9e55; color: #fff; font-weight: 600; }
.done { border-left-color: #1a9e55; }
.done .ph { background: #e7f9ee; }
.done .ph .no { color: #1a9e55; }
.exist .ph { background: #fff4e6; }
.tip { text-align:center; color:#999; font-size:12px; padding:6px; line-height:1.7; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.75); color: #fff; padding: 8px 16px; border-radius: 6px;
  font-size: 13px; z-index: 100; pointer-events: none; opacity: 0; transition: opacity .2s;
}
.toast.show { opacity: 1; }

/* 用户管理 */
.up-head { background:#2f6fed; color:#fff; padding:8px 10px; display:flex; gap:6px; align-items:center; }
.up-head strong { font-size:15px; }
.user-table { width:calc(100% - 20px); border-collapse:collapse; background:#fff; margin:10px; border-radius:10px; overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.user-table th, .user-table td { padding:10px 12px; text-align:left; border-bottom:1px solid #f0f2f5; font-size:13px; }
.user-table th { background:#f0f4ff; color:#444; font-weight:600; }
.user-table tr:last-child td { border-bottom:none; }
.role-tag { padding:2px 8px; border-radius:4px; font-size:12px; color:#fff; }
.role-admin { background:#2f6fed; }
.role-entry { background:#1a9e55; }
.user-actions button { padding:4px 10px; border:none; border-radius:5px; cursor:pointer; font-size:12px; font-weight:600; }
.user-actions .gr { background:#c7f0d8; color:#167a44; }
.user-actions .sec { background:#fee2e2; color:#991b1b; }

/* 弹窗 */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:200; align-items:center; justify-content:center; }
.modal-overlay.show { display:flex; }
.modal { background:#fff; border-radius:12px; width:340px; max-width:92vw; box-shadow:0 16px 48px rgba(0,0,0,.3); overflow:hidden; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; border-bottom:1px solid #eee; }
.modal-header h3 { margin:0; font-size:16px; color:#1f4fb0; }
.modal-close { border:none; background:none; font-size:22px; cursor:pointer; color:#999; line-height:1; }
.modal-body { padding:16px 18px; }
.form-group { margin-bottom:12px; }
.form-group label { display:block; font-size:13px; color:#555; margin-bottom:4px; }
.form-group input, .form-group select { width:100%; padding:9px 11px; border:1px solid #d1d5db; border-radius:7px; font-size:14px; outline:none; box-sizing:border-box; }
.form-group input:focus, .form-group select:focus { border-color:#2f6fed; }
.modal-footer { display:flex; justify-content:flex-end; gap:10px; padding:12px 18px; border-top:1px solid #eee; }
.modal-footer button { padding:8px 18px; border:none; border-radius:7px; cursor:pointer; font-size:14px; font-weight:600; }
.modal-footer .btn-primary { background:#2f6fed; color:#fff; }
.modal-footer .btn-default { background:#e5e7eb; color:#333; }