From 79afd967a71e9b9019b81ae98af2ce6bd749e178 Mon Sep 17 00:00:00 2001
From: bot_dev1 <bot_dev1@xayunmei.com>
Date: Wed, 5 Aug 2026 02:07:44 +0000
Subject: [PATCH] =?UTF-8?q?feat(#150):=20=E7=99=BB=E5=BD=95=E9=A1=B5?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=20auth.css=EF=BC=88=E6=B7=B1=E8=89=B2?=
 =?UTF-8?q?=E4=B8=BB=E9=A2=98=EF=BC=8C=E5=AF=B9=E9=BD=90=20cockpit/studio?=
 =?UTF-8?q?=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/auth/auth.css | 71 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 web/auth/auth.css

diff --git a/web/auth/auth.css b/web/auth/auth.css
new file mode 100644
index 0000000..ed0b4ac
--- /dev/null
+++ b/web/auth/auth.css
@@ -0,0 +1,71 @@
+/* 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; }