/* iAOP 登录页（issue #150 / PRD 8.2）—— 深色主题，对齐 web/cockpit、web/studio 调色 */
:root {
  --auth-bg: #0f172a;
  --auth-surface: #111c33;
  --auth-surface-2: #0b1526;
  --auth-border: #1e293b;
  --auth-fg: #e2e8f0;
  --auth-fg-muted: #94a3b8;
  --auth-accent: #0ea5e9;
  --auth-accent-2: #38bdf8;
  --auth-danger: #ff3b30;
  --auth-ok: #22c55e;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  background: var(--auth-bg); color: var(--auth-fg);
}
body { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
a { color: var(--auth-accent-2); }

.auth-card {
  width: 360px; max-width: 92vw;
  background: var(--auth-surface);
  border: 1px solid var(--auth-border);
  border-radius: 10px;
  padding: 28px 26px 22px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.45);
}
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.auth-logo {
  width: 30px; height: 30px; border-radius: 7px;
  background: linear-gradient(135deg, var(--auth-accent), var(--auth-accent-2));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 16px;
}
.auth-brand h1 { margin: 0; font-size: 17px; color: var(--auth-accent-2); font-weight: 600; }
.auth-sub { color: var(--auth-fg-muted); font-size: 12px; margin: 4px 0 22px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 12px; color: var(--auth-fg-muted); margin-bottom: 6px; }
.field input {
  width: 100%; padding: 10px 12px;
  background: var(--auth-surface-2);
  border: 1px solid var(--auth-border);
  border-radius: 7px; color: var(--auth-fg); font-size: 14px;
  outline: none; transition: border-color .15s;
}
.field input:focus { border-color: var(--auth-accent); }
.field input[aria-invalid="true"] { border-color: var(--auth-danger); }

.auth-actions { display: flex; gap: 10px; margin-top: 6px; }
.btn {
  flex: 1; padding: 10px 16px; border: none; border-radius: 7px;
  font-size: 14px; cursor: pointer; font-weight: 500;
}
.btn-primary { background: var(--auth-accent); color: #fff; }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--auth-fg-muted); border: 1px solid var(--auth-border); flex: 0 0 auto; }

.alert {
  font-size: 12px; padding: 8px 10px; border-radius: 6px; margin-bottom: 14px;
  display: none;
}
.alert.show { display: block; }
.alert-error { background: rgba(255,59,48,0.12); color: var(--auth-danger); border: 1px solid rgba(255,59,48,0.3); }
.alert-ok { background: rgba(34,197,94,0.12); color: var(--auth-ok); border: 1px solid rgba(34,197,94,0.3); }

.auth-foot { margin-top: 18px; font-size: 11px; color: var(--auth-fg-muted); text-align: center; line-height: 1.6; }
.role-hint { margin-top: 14px; font-size: 11px; color: var(--auth-fg-muted); background: var(--auth-surface-2); border: 1px dashed var(--auth-border); border-radius: 6px; padding: 8px 10px; }