:root {
  color-scheme: dark;
  --bg: #0b0d0f;
  --panel: #14191b;
  --line: rgba(224, 237, 233, 0.13);
  --line-strong: rgba(224, 237, 233, 0.24);
  --text: #eef3ef;
  --muted: #9ba8a4;
  --soft: #66736f;
  --accent: #b8f36c;
  --accent-dark: #121b0c;
  --danger: #ff9e91;
  font-family: "Avenir Next", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--text); background: radial-gradient(circle at 0 0, rgba(184, 243, 108, 0.08), transparent 28rem), var(--bg); }
button, input, textarea { font: inherit; }
button { cursor: pointer; }
.admin-shell { width: min(100% - 36px, 1180px); margin: auto; padding: 28px 0 45px; }
.admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 42px; }
.admin-brand { display: flex; gap: 8px; align-items: center; font-family: "SFMono-Regular", Consolas, monospace; font-size: 13px; }
.admin-brand a { color: var(--text); text-decoration: none; }
.admin-brand span { color: var(--soft); }
.login-card { width: min(100%, 360px); margin: 15vh auto 0; padding: 25px; border: 1px solid var(--line); border-radius: 15px; background: var(--panel); }
h1 { margin: 0; font-size: 24px; letter-spacing: -0.05em; }
.login-card h1 { margin-bottom: 20px; }
.login-card form { display: flex; gap: 8px; }
input, textarea { border: 1px solid var(--line-strong); border-radius: 9px; outline: none; color: var(--text); background: #0a0d0e; }
input { min-width: 0; width: 100%; padding: 11px 12px; }
input:focus, textarea:focus { border-color: rgba(184, 243, 108, 0.6); }
.primary-button, .outline-button, .danger-button { padding: 10px 13px; border-radius: 9px; font-size: 11px; font-weight: 750; white-space: nowrap; }
.primary-button { border: 1px solid var(--accent); color: var(--accent-dark); background: var(--accent); }
.primary-button:hover { background: #c9f895; }
.outline-button { border: 1px solid var(--line-strong); color: var(--muted); background: transparent; }
.outline-button:hover { color: var(--text); border-color: var(--muted); }
.link-button { padding: 0; border: 0; color: var(--soft); background: transparent; font-size: 11px; }
.link-button:hover { color: var(--accent); }
.records-toolbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.records-toolbar h1 span { margin-left: 6px; color: var(--accent); font-family: "SFMono-Regular", Consolas, monospace; font-size: 12px; font-weight: 400; }
.records-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; }
.table-wrap, .detail-panel { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); overflow: hidden; }
table { width: 100%; border-collapse: collapse; font-size: 12px; }
th { padding: 12px 14px; color: var(--soft); font-size: 10px; font-weight: 500; text-align: left; letter-spacing: 0.08em; }
td { padding: 14px; border-top: 1px solid var(--line); color: var(--muted); vertical-align: middle; }
tr.record-row { cursor: pointer; }
tr.record-row:hover td { color: var(--text); background: rgba(184, 243, 108, 0.035); }
.email-cell { max-width: 190px; overflow: hidden; color: var(--text); text-overflow: ellipsis; white-space: nowrap; }
.id-cell { max-width: 160px; overflow: hidden; font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.row-action { padding: 0; border: 0; color: var(--accent); background: transparent; font-size: 11px; }
.empty-state { padding: 36px 15px; color: var(--soft); font-size: 12px; text-align: center; }
.detail-panel { padding: 18px; overflow: visible; }
.detail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 17px; font-size: 13px; font-weight: 700; }
dl { display: grid; grid-template-columns: 68px 1fr; gap: 8px; margin: 0 0 15px; font-size: 11px; }
dt { color: var(--soft); }
dd { min-width: 0; margin: 0; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
#detail-json { display: block; width: 100%; min-height: 260px; resize: vertical; padding: 12px; color: #d0efa9; background: #090c0d; font-family: "SFMono-Regular", Consolas, monospace; font-size: 10px; line-height: 1.6; }
.detail-actions { display: flex; gap: 8px; margin-top: 10px; }
.danger-button { border: 1px solid rgba(255, 158, 145, 0.3); color: var(--danger); background: transparent; }
.danger-button:hover { border-color: var(--danger); background: rgba(255, 158, 145, 0.07); }
.admin-error { min-height: 17px; margin: 11px 0 0; color: var(--danger); font-size: 11px; line-height: 1.5; }

@media (max-width: 860px) {
  .records-layout { grid-template-columns: 1fr; }
  .detail-panel { order: -1; }
}
@media (max-width: 600px) {
  .admin-shell { width: min(100% - 24px, 540px); padding-top: 18px; }
  .login-card { margin-top: 12vh; }
  .login-card form { display: block; }
  .login-card .primary-button { width: 100%; margin-top: 8px; }
  th:nth-child(3), td:nth-child(3) { display: none; }
}