:root {
  --primary:#1a3a5c;
  --primary-2:#2a5a7c;
  --bg:#f0f2f5;
  --warn-bg:#fff3e0;
  --warn-bd:#ff9800;
  --row:#e8f0fe;
  --sum:#fff7e6;
}
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg); color:#222; font-size:14px; }
button { cursor:pointer; }
.hide { display:none !important; }

/* Login */
.page-login { min-height:100vh; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg,#1a3a5c,#2a5a7c); padding:20px; position:relative; }
.login-card { background:#fff; border-radius:12px; padding:36px 40px; box-shadow: 0 20px 60px rgba(0,0,0,0.3); width:100%; max-width:400px; }
.login-card h2 { margin:0 0 8px; font-size:24px; color: var(--primary); }
.login-card .subtitle { color:#888; margin-bottom:24px; font-size:13px; }
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-size:13px; color:#555; margin-bottom:5px; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:9px 12px; border:1px solid #d9d9d9; border-radius:6px; font-size:14px; outline:none; font-family:inherit; }
.form-group input:focus, .form-group select:focus { border-color: var(--primary); }
.login-btn { width:100%; padding:11px; border-radius:6px; border:none; font-size:15px; font-weight:600; margin-top:8px; }
.btn-admin { background: var(--primary); color:#fff; }
.btn-admin:hover { background: var(--primary-2); }
.btn-reg { background:#fff; color: var(--primary); border:1px solid var(--primary); }
.btn-reg:hover { background:#f5f8fb; }
.login-divider { text-align:center; color:#aaa; font-size:12px; margin:14px 0 8px; }
.error { color:#d32f2f; font-size:13px; margin-top:8px; padding:6px 10px; background:#ffebee; border-radius:4px; }

/* Header + Nav */
.header { background: linear-gradient(90deg, var(--primary), var(--primary-2)); color:#fff; padding:12px 24px; display:flex; align-items:center; gap:16px; box-shadow:0 2px 8px rgba(0,0,0,0.1); flex-wrap:wrap; }
.header h1 { margin:0; font-size:18px; font-weight:600; flex-shrink:0; }
.header .nav { flex:1; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
.header .nav button { background: transparent; color:#fff; border:1px solid rgba(255,255,255,0.3); padding:6px 12px; border-radius:4px; font-size:13px; }
.header .nav button:hover { background: rgba(255,255,255,0.15); }
.header .nav button.active { background: rgba(255,255,255,0.25); border-color:#fff; }
.user-badge { color:#fff; font-size:13px; margin-right:8px; opacity:0.9; }

/* Container */
.container { max-width:1280px; margin:0 auto; padding:20px; }
.card { background:#fff; border-radius:8px; padding:20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-bottom:16px; }
.card-title { font-size:16px; font-weight:600; color: var(--primary); margin-bottom:14px; padding-bottom:8px; border-bottom:2px solid #eee; display:flex; align-items:center; justify-content:space-between; }
.btn { padding:6px 14px; border-radius:4px; border:1px solid #d9d9d9; background:#fff; font-size:13px; }
.btn:hover { background:#f5f5f5; }
.btn-primary { background: var(--primary); color:#fff; border-color: var(--primary); }
.btn-primary:hover { background: var(--primary-2); }
.btn-danger { background:#d32f2f; color:#fff; border-color:#d32f2f; }
.btn-warn { background: var(--warn-bd); color:#fff; border-color: var(--warn-bd); }
.form-row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; margin-bottom:14px; }
.form-row > .form-group { flex:1; min-width:160px; margin-bottom:0; }

/* Table matrix */
table.matrix { border-collapse: collapse; font-size:11px; width:100%; }
table.matrix th, table.matrix td { border:1px solid #333; padding:3px 4px; text-align:center; }
table.matrix td.content { white-space:normal; word-break:break-all; line-height:1.15; font-size:10px; min-width:32px; }
table.matrix th, table.matrix td.name, table.matrix td.total { white-space:nowrap; }
table.matrix th { background:#d9e2ec; font-weight:600; font-size:10px; }
table.matrix td.name { text-align:left; font-weight:500; background:#fafafa; min-width:56px; }
table.matrix td.total { background: var(--sum); font-weight:600; }
table.matrix .title-row td { background: var(--primary); color:#fff; font-size:13px; font-weight:700; padding:8px; }

.stats { display:flex; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.stat-item { background: var(--row); padding:10px 16px; border-radius:6px; min-width:100px; }
.stat-item .num { font-size:22px; font-weight:700; color: var(--primary); }
.stat-item .label { font-size:12px; color:#888; }

.tag-list { display:flex; flex-wrap:wrap; gap:6px; margin:8px 0; }
.tag { background:#e6f4ff; color:#0958d9; border:1px solid #91caff; padding:3px 10px; border-radius:4px; font-size:12px; display:inline-flex; align-items:center; gap:6px; }
.tag .tag-remove { cursor:pointer; color:#888; font-weight:700; padding:0 2px; }
.tag .tag-remove:hover { color:#d32f2f; }

.leader-list { border:1px solid #f0f0f0; border-radius:6px; padding:10px; margin-top:10px; }
.leader-row { display:flex; gap:8px; align-items:center; padding:6px 0; border-bottom:1px dashed #eee; font-size:13px; }
.leader-row:last-child { border-bottom:none; }
.leader-row .field { min-width:80px; }

/* 组长账号管理：行排列，列位置固定对齐 */
.leader-list-v2 { border:1px solid #e2e8f0; border-radius:8px; margin-top:12px; overflow:hidden; }
.lr { display:grid; grid-template-columns:56px 150px 130px 150px 90px 1fr; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid #eef2f7; font-size:13px; }
.lr:last-child { border-bottom:none; }
.lr:nth-child(even) { background:#fafbfc; }
.lr-empty { background:#fafafa; }
.lr-group { font-weight:700; color:#1a3a5c; font-size:14px; }
.lr-phone { font-family:monospace; color:#555; }
.lr-name { color:#222; }
.lr-time { color:#5a8f5a; font-size:12px; }
.lr-time.lr-never { color:#bbb; }
.lr-loc { color:#888; font-size:12px; }
.lr-ops { display:flex; gap:6px; justify-content:flex-end; flex-wrap:wrap; }
.lr-ops .btn { padding:3px 8px; font-size:11px; white-space:nowrap; }
@media (max-width:720px) {
  .lr { grid-template-columns:1fr 1fr; row-gap:4px; }
  .lr-ops { grid-column:1 / -1; justify-content:flex-start; }

  /* 导航：手机端防错位 */
  .header { padding:10px 12px; gap:8px; }
  .header h1 { font-size:16px; width:100%; text-align:center; }
  .header .nav { width:100%; flex:none; justify-content:center; gap:6px; }
  .header .nav .user-badge { width:100%; text-align:center; margin-bottom:2px; order:-1; }
  .header .nav button { flex:1 1 auto; min-width:0; padding:8px 6px; font-size:13px; white-space:nowrap; }
}

.mini-form { display:flex; gap:6px; align-items:center; margin:8px 0; }
.mini-form input { padding:5px 8px; font-size:13px; border:1px solid #d9d9d9; border-radius:4px; }

/* Toast */
.toast { position:fixed; top:20px; right:20px; padding:12px 20px; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,0.15); z-index:10000; font-size:14px; animation: slideIn 0.2s; max-width:400px; }
.toast.success { background:#e6f7ff; color:#0958d9; border-left:4px solid #1677ff; }
.toast.error { background:#fff1f0; color:#cf1322; border-left:4px solid #ff4d4f; }
.toast.info { background:#f6ffed; color:#389e0d; border-left:4px solid #52c41a; }
@keyframes slideIn { from { transform: translateX(100%); opacity:0; } to { transform: translateX(0); opacity:1; } }

/* Modal */
.modal-mask { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:9999; display:flex; align-items:center; justify-content:center; padding:16px; }
.modal-body { background:#fff; border-radius:10px; max-width:520px; width:100%; padding:24px 26px; }
.modal-body h3 { margin:0 0 12px; color: var(--primary); font-size:18px; }
.modal-body .actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; padding-top:14px; border-top:1px solid #eee; }

/* Onboard */
.onboard-highlight { box-shadow: 0 0 0 3px #faad14, 0 0 16px #faad14 !important; transition: box-shadow 0.3s; border-radius:6px; }

@media print {
  .header, .no-print { display:none !important; }
  .card { box-shadow:none; padding:0; }
}

/* 站长后台 tab 切换（内嵌页面） */
.sa-tab { transition: background .15s; }
.sa-tab.active { background: var(--primary); color:#fff; border-color: var(--primary); }