/* ============ 基础 ============ */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", sans-serif;
  background: #0f0f1a;
  color: #e0e0e0;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
}

input, button { font-family: inherit; }

/* ============ 登录页 ============ */
.login-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 360px;
  background: #1a1a2e;
  border-radius: 14px;
  padding: 32px 24px;
  text-align: center;
}
.login-card h1 { font-size: 22px; color: #fff; margin-bottom: 6px; }
.login-card .subtitle { font-size: 13px; color: #888; margin-bottom: 24px; }
.login-card input {
  width: 100%;
  padding: 12px 14px;
  background: #12121f;
  border: 1px solid #2a2a3d;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  outline: none;
  margin-bottom: 16px;
}
.login-card input:focus { border-color: #5b6abf; }
.login-card button {
  width: 100%;
  padding: 12px;
  background: #5b6abf;
  border: none;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.login-card button:hover { background: #6b7acf; }

/* ============ 主页面 ============ */
.container {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 4px 16px;
  border-bottom: 1px solid #2a2a3d;
  margin-bottom: 16px;
}
.page-header h1 { font-size: 18px; color: #fff; font-weight: 600; }
.logout {
  font-size: 13px;
  color: #888;
  text-decoration: none;
}
.logout:hover { color: #ff5252; }

.card {
  background: #1a1a2e;
  border-radius: 12px;
  padding: 18px 16px;
  margin-bottom: 14px;
}
.step-title {
  font-size: 13px;
  color: #8888aa;
  margin-bottom: 12px;
  font-weight: 500;
}

/* 输入 */
.input-group { margin-bottom: 12px; }
.input-group label {
  display: block;
  font-size: 12px;
  color: #8888aa;
  margin-bottom: 4px;
}
.input-group .hint {
  font-size: 11px;
  color: #666;
  margin-top: 4px;
  line-height: 1.4;
}
input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"] {
  width: 100%;
  padding: 10px 12px;
  background: #12121f;
  border: 1px solid #2a2a3d;
  border-radius: 8px;
  color: #fff;
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s;
}
input:focus { border-color: #5b6abf; }
input::placeholder { color: #555; }

/* 用户搜索结果 */
.member-list {
  margin-top: 10px;
  max-height: 280px;
  overflow-y: auto;
}
.member-card {
  padding: 10px 12px;
  background: #12121f;
  border: 1px solid #2a2a3d;
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.15s;
}
.member-card:hover, .member-card:active {
  border-color: #5b6abf;
  background: #16162a;
}
.member-name { font-size: 15px; font-weight: 500; color: #fff; }
.member-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #777;
  margin-top: 3px;
}
.member-meta .points { color: #f0ad4e; }
.empty-hint {
  text-align: center;
  color: #555;
  font-size: 13px;
  padding: 20px 0;
}

/* 已选用户 */
.selected-member {
  padding: 12px 14px;
  background: #1a2e1a;
  border: 1px solid #4caf50;
  border-radius: 8px;
}
.selected-member .name { font-weight: 600; color: #4caf50; font-size: 15px; }
.selected-member .meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #aaa;
  margin-top: 4px;
}
.selected-member .meta .points { color: #f0ad4e; }
.selected-member .clear {
  float: right;
  color: #888;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
}
.selected-member .clear:hover { color: #ff5252; }

/* 按钮 */
.btn {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.btn.primary {
  background: #5b6abf;
  color: #fff;
}
.btn.primary:hover { background: #6b7acf; }
.btn.primary:disabled {
  background: #2a2a3d;
  color: #555;
  cursor: not-allowed;
}
.btn.secondary {
  background: #2a2a3d;
  color: #aaa;
  margin-top: 10px;
}
.btn.secondary:hover { background: #3a3a4d; color: #fff; }

/* 提示 */
.alert {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 12px;
  line-height: 1.5;
}
.alert.error { background: #2e1a1a; border: 1px solid #ff5252; color: #ff7777; }
.alert.success { background: #1a2e1a; border: 1px solid #4caf50; color: #6fcf73; }

/* 加载 */
.loading {
  text-align: center;
  padding: 12px;
  color: #888;
  font-size: 13px;
}
.spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid #333;
  border-top-color: #5b6abf;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  vertical-align: -3px;
  margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* 结果卡片 */
.result-card {
  padding: 14px;
  background: #12121f;
  border-radius: 8px;
  margin-bottom: 12px;
}
.result-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #888;
  padding: 5px 0;
}
.result-row .value { color: #fff; font-weight: 500; }
.result-row .delta { color: #4caf50; font-weight: 600; }

/* 最近列表 */
.recent-list .recent-item {
  padding: 8px 10px;
  background: #12121f;
  border-radius: 6px;
  margin-bottom: 6px;
  font-size: 12px;
}
.recent-item .top {
  display: flex;
  justify-content: space-between;
  color: #ccc;
  margin-bottom: 2px;
}
.recent-item .top .delta { color: #4caf50; font-weight: 600; }
.recent-item .bottom {
  color: #666;
  font-size: 11px;
}

/* ============ 模式切换 Tab ============ */
.tab-row {
  display: flex;
  gap: 6px;
  background: #1a1a2e;
  padding: 4px;
  border-radius: 10px;
  margin-bottom: 14px;
}
.tab {
  flex: 1;
  padding: 10px;
  text-align: center;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: #888;
  font-weight: 500;
  transition: all 0.15s;
}
.tab:hover { color: #ccc; }
.tab.active { background: #5b6abf; color: #fff; }

/* ============ 批量录入 ============ */
.file-input-wrap { text-align: center; }
.batch-summary {
  padding: 10px 12px;
  background: #12121f;
  border-radius: 8px;
  font-size: 13px;
  color: #aaa;
  margin-bottom: 12px;
}
.batch-summary b { font-weight: 700; }

.batch-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
  border: 1px solid #2a2a3d;
}
.batch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.batch-table th, .batch-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid #2a2a3d;
  white-space: nowrap;
}
.batch-table th {
  background: #1a1a2e;
  color: #8888aa;
  font-weight: 500;
  font-size: 11px;
  position: sticky;
  top: 0;
}
.batch-table td { color: #ccc; }
.batch-table tr.row-ok td { background: transparent; }
.batch-table tr.row-error td { background: #2a1a1a; }
.batch-table .status-ok { color: #4caf50; font-weight: 600; }
.batch-table .status-error { color: #ff5252; font-weight: 600; }
.batch-table .error-msg { color: #ff7777; font-size: 11px; }
.batch-table .order-id { color: #5b6abf; font-family: ui-monospace, monospace; font-size: 11px; }
.batch-table .delta-good { color: #4caf50; font-weight: 600; margin-left: 4px; }