/* 栾山 SSO 认证布局：源力设计系统
   组件一律使用官方 components.css（tabs-line / ui-input / btn / alert / form），
   本文件只承担页面级布局与官方缺失的最小补充（spinner、密码可见性按钮）。 */
:root {
  --auth-page-bg: var(--color-bg-4);
  --auth-card-bg: var(--color-white);
  --auth-brand-bg: linear-gradient(145deg, var(--primary-1), var(--color-white));
}

html, body { min-height: 100%; }
body { overflow: auto; background: var(--auth-page-bg); }
.auth-stage {
  position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: var(--space-8) var(--space-5); overflow: hidden; background: var(--auth-page-bg);
}
.auth-stage::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .45;
  background-image: linear-gradient(var(--primary-2) 1px, transparent 1px), linear-gradient(90deg, var(--primary-2) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(ellipse at center, #000 15%, transparent 75%);
}
.aurora { position: absolute; width: 420px; height: 420px; border-radius: 50%; pointer-events: none; filter: blur(90px); opacity: .55; }
.aurora.a1 { top: -220px; left: -120px; background: var(--primary-2); }
.aurora.a2 { right: -160px; bottom: -220px; background: var(--primary-1); }
.aurora.a3, .grid-mask { display: none; }
.auth-wrap {
  position: relative; z-index: 1; display: flex; width: min(100%, 960px); min-height: 565px;
  overflow: hidden; background: var(--auth-card-bg); border: 1px solid var(--border-1);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-4);
}

/* 品牌面板（页面布局，官方无对应组件） */
.auth-brand {
  display: flex; flex: 1 1 52%; flex-direction: column; min-height: 565px; padding: var(--space-10);
  color: var(--text-1); background: var(--auth-brand-bg); border-right: 1px solid var(--border-1);
}
.brand-logo { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-h4); font-weight: var(--font-weight-semibold); }
.brand-logo img { width: 36px; height: 36px; object-fit: contain; }
.brand-hero { margin-top: 72px; }
.brand-hero h1 { max-width: 390px; margin-bottom: var(--space-4); font-size: 30px; line-height: 1.35; font-weight: var(--font-weight-semibold); }
.brand-hero p { max-width: 390px; color: var(--text-3); line-height: 1.8; }
.brand-points { display: grid; gap: var(--space-4); margin-top: var(--space-8); }
.brand-point { display: flex; align-items: center; gap: var(--space-3); color: var(--text-2); }
.bp-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; color: var(--primary-6); background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-1); }
.brand-foot { margin-top: auto; color: var(--text-3); font-size: var(--font-size-caption); }

/* 表单面板（布局） */
.auth-panel { display: flex; flex: 1 1 48%; align-items: center; padding: var(--space-10); background: var(--color-white); }
.auth-panel-inner { width: min(100%, 360px); margin: auto; }
.auth-title { margin-bottom: var(--space-2); color: var(--color-text-1); font-size: var(--font-size-h1); line-height: var(--line-height-h1); font-weight: var(--font-weight-semibold); }
.auth-sub { margin-bottom: var(--space-6); color: var(--color-text-3); font-size: var(--font-size-body); line-height: var(--line-height-body); }
.auth-switch-page { margin-top: var(--space-6); color: var(--color-text-3); text-align: center; font-size: var(--font-size-body); }
.auth-switch-page a { color: var(--primary-6); }

/* 官方组件在本页的布局扩展 */
.auth-panel-inner .ui-input, .consent-card .ui-input { width: 100%; }
.auth-tabs { margin-bottom: var(--space-6); }
.auth-alert { margin-bottom: var(--space-4); }
.auth-pane { display: none; }
.auth-pane.active { display: flex; }
.auth-submit { width: 100%; margin-top: var(--space-2); }
.code-row { display: flex; gap: var(--space-2); }
.code-row .ui-input { flex: 1; }
.code-row .btn { flex: none; white-space: nowrap; }

/* 密码可见性切换（官方无内嵌按钮结构，btn 样式对齐 btn-icon 的透明态） */
.pwd-wrap { position: relative; }
.pwd-wrap .ui-input { padding-right: 40px; }
.pwd-eye {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  color: var(--color-text-3); border-radius: var(--radius-sm); cursor: pointer;
}
.pwd-eye:hover { color: var(--primary-6); background: var(--color-bg-4); }
.pwd-eye svg { width: 16px; height: 16px; }

/* 加载指示（官方无 spinner 组件） */
.spinner {
  display: inline-block; width: 14px; height: 14px; vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: var(--color-white);
  border-radius: 50%; animation: spinner-rotate .8s linear infinite;
}
@keyframes spinner-rotate { to { transform: rotate(360deg); } }

/* OAuth 授权确认页（布局） */
.consent-wrap { position: relative; z-index: 1; width: min(100%, 480px); }
.consent-card { padding: var(--space-8); background: var(--color-white); border: 1px solid var(--border-1); border-radius: var(--radius-lg); box-shadow: var(--shadow-4); }
.consent-head { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.consent-app-logo { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; flex: none; color: var(--color-white); background: linear-gradient(135deg, var(--primary-5), var(--primary-6)); border-radius: var(--radius-md); }
.consent-app-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-md); }
.consent-app-name { color: var(--text-1); font-size: 17px; font-weight: var(--font-weight-semibold); }
.consent-app-meta { margin-top: var(--space-1); color: var(--text-3); font-size: var(--font-size-caption); }
.consent-user { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); padding: var(--space-3); color: var(--text-2); background: var(--color-bg-4); border: 1px solid var(--border-1); border-radius: var(--radius-sm); }
.avatar-s { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: none; overflow: hidden; color: var(--color-white); background: var(--primary-6); border-radius: 50%; }
.consent-scopes { margin-bottom: var(--space-5); }
.consent-scope { display: flex; gap: var(--space-3); padding: var(--space-3) 0; color: var(--text-2); border-bottom: 1px solid var(--border-1); }
.consent-scope:last-child { border-bottom: 0; }
.s-ico { color: var(--primary-6); }
.consent-actions { display: flex; gap: var(--space-3); margin-top: var(--space-5); }
.consent-actions .btn { flex: 1; }
.auth-tip { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-4); padding: var(--space-3); color: var(--primary-7); background: var(--primary-1); border-radius: var(--radius-sm); font-size: var(--font-size-body); }

@media (max-width: 860px) {
  .auth-brand { display: none; }
  .auth-wrap { width: min(100%, 430px); min-height: 0; }
  .auth-panel { padding: var(--space-8) var(--space-6); }
}
@media (max-width: 480px) {
  .auth-stage { padding: var(--space-4); }
  .consent-card { padding: var(--space-6); }
}