/* DGWEB 账号系统 — 认证 UI 样式（黑金终端风，与门禁 gate.js 一致） */

/* --- 通用输入/按钮 --- */
.auth-form { margin-top: 8px; }
.auth-field { margin-bottom: 18px; }
.auth-label {
  display: block; font-family: "Space Grotesk", sans-serif;
  font-size: 10px; letter-spacing: .32em; color: var(--muted, #888888);
  margin-bottom: 8px; text-transform: uppercase;
}
.auth-input {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid var(--line, #2a2a2a);
  color: var(--fg, #f4f4f2);
  font-family: "Space Grotesk", "Consolas", monospace;
  font-size: 18px; letter-spacing: .06em; padding: 10px 0;
  caret-color: var(--fg, #f4f4f2); border-radius: 0;
  transition: border-color .35s, box-shadow .35s;
}
.auth-input:focus { outline: none; border-color: var(--fg, #f4f4f2); box-shadow: 0 1px 0 var(--fg, #f4f4f2); }
.auth-input::placeholder { color: #4a4a46; }

.auth-inline { display: flex; align-items: flex-end; gap: 12px; }
.auth-inline .auth-input { flex: 1; }
.auth-input-code { letter-spacing: .6em; font-size: 26px; }

.auth-code-btn {
  flex-shrink: 0; padding: 11px 14px;
  background: transparent; border: 1px solid rgba(158,133,79,.5);
  color: var(--fg, #f4f4f2);
  font-family: "Space Grotesk", sans-serif; font-size: 11px; letter-spacing: .2em;
  cursor: pointer; transition: background .3s, color .3s, border-color .3s;
  white-space: nowrap;
}
.auth-code-btn:hover:not(:disabled) { background: var(--fg, #f4f4f2); color: var(--bg, #050505); border-color: var(--fg, #f4f4f2); }
.auth-code-btn:disabled { opacity: .5; cursor: wait; }

.auth-submit {
  width: 100%; margin-top: 26px; padding: 15px 0 15px .3em;
  background: transparent; border: 1px solid rgba(128,128,128,.45);
  color: var(--fg, #f4f4f2); font-family: inherit; font-size: 13px; font-weight: 500;
  letter-spacing: .5em; cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition: background .35s cubic-bezier(.16,1,.3,1), color .35s, border-color .35s, transform .15s, opacity .35s;
}
.auth-submit:hover:not(:disabled) { background: var(--fg, #f4f4f2); color: var(--bg, #050505); border-color: var(--fg, #f4f4f2); }
.auth-submit:active:not(:disabled) { transform: scale(.985); }
.auth-submit:disabled { opacity: .55; cursor: wait; }
.auth-submit.gold { border-color: rgba(224,143,0,.7); }
.auth-submit.gold:hover:not(:disabled) { background: #e08f00; color: #050505; border-color: #e08f00; }

.auth-qq-tip { margin-top: 10px; font-size: 10px; letter-spacing: .1em; text-align: center; color: var(--muted, #888888); opacity: .75; }
.auth-msg { min-height: 18px; margin-top: 16px; font-size: 11px; letter-spacing: .14em; text-align: center; color: var(--muted, #888888); }
.auth-msg.err { color: #e0392f; }
.auth-msg.ok { color: var(--fg, #f4f4f2); }

.auth-switch { margin-top: 22px; text-align: center; }
.auth-switch a {
  color: var(--muted, #888888); font-size: 12px; letter-spacing: .1em;
  cursor: pointer; text-decoration: none; border-bottom: 1px dashed rgba(128,128,128,.4);
  padding-bottom: 1px; transition: color .3s;
}
.auth-switch a:hover { color: var(--fg, #f4f4f2); }

/* --- 登录记录 / 审计表格 --- */
.auth-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.auth-table th, .auth-table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(255,255,255,.06); letter-spacing: .04em; }
.auth-table th { font-family: "Space Grotesk", sans-serif; font-size: 10px; letter-spacing: .24em; color: var(--muted, #888888); text-transform: uppercase; }
.auth-table td { color: var(--fg, #b8b4ac); }
.risk-badge {
  display: inline-block; padding: 2px 8px; border-radius: 3px;
  font-size: 10px; letter-spacing: .1em;
}
.risk-badge.risk { background: rgba(224,57,47,.15); color: #e0392f; border: 1px solid rgba(224,57,47,.4); }
.risk-badge.safe { background: rgba(126,217,168,.12); color: #7ed9a8; border: 1px solid rgba(126,217,168,.3); }

.role-tag { padding: 2px 8px; border-radius: 3px; font-size: 10px; letter-spacing: .1em; }
.role-tag.lv1 { color: #9e854f; border: 1px solid rgba(158,133,79,.4); }
.role-tag.lv2 { color: #e08f00; border: 1px solid rgba(224,143,0,.5); }
.role-tag.max { color: #f0e6d2; background: rgba(224,143,0,.12); border: 1px solid rgba(224,143,0,.6); }