:root {
--bg: #0b1220;
--card-bg: #ffffff;
--border: #e5e7eb;
--text: #111827;
--muted: #6b7280;
--primary: #3866c4;
--danger: #ef4444;
}
html, body { height: 100%; }
body {
  margin: 0;
  color: var(--text);
  background: #EBE2E5;              /* ← 換成你要的淺色底 */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, "Noto Sans JP", 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  display: grid;
  place-items: center;
}

.auth-wrap { width: 100%; padding: 24px; }
.card {
width: min(920px, 92vw);
background: var(--card-bg);
border: 1px solid var(--border);
box-shadow: 0 10px 25px rgba(0,0,0,.12);
border-radius: 14px;
margin: 0 auto; overflow: hidden;
display: grid; grid-template-columns: 1fr 1fr; gap: 0;
}
@media (max-width: 820px) { .card { grid-template-columns: 1fr; } }
.aside {
background: radial-gradient(1200px 500px at -10% -10%, rgba(37,99,235,.12), transparent),
radial-gradient(900px 400px at 120% 120%, rgba(236,72,153,.10), transparent);
padding: 32px; display: grid; place-items: center; text-align: center;
}
.aside h1 { color: #0b1220; font-weight: 800; font-size: 22px; letter-spacing: .3px; }
.aside p { color: #374151; margin: 8px 0 0; }
.main { padding: 28px; }
.section-title { margin: 6px 0 10px; font-size: 18px; font-weight: 700; }
.row { position: relative; margin: 10px 0; display: flex; gap: 10px; }
.row > input { flex: 1; padding: 12px 42px 12px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 15px; }
.eye-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; cursor: pointer; padding: 4px; }
.eye-btn svg { width: 20px; height: 20px; }
.split { height: 1px; background: var(--border); margin: 18px 0; }
.btn { padding: 11px 14px; border: 0; border-radius: 10px; background: var(--primary); color: #fff; cursor: pointer; font-weight: 600; }
.btn[disabled] { background: #9ca3af; cursor: not-allowed; }
.muted { color: var(--muted); font-size: 13px; }
.msg { margin: 8px 0 12px; padding: 10px 12px; background: #f1f5f9; border-left: 4px solid var(--primary); border-radius: 8px; font-size: 14px; }
.msg.error { background: #fef2f2; border-left-color: var(--danger); }
.actions { display: flex; align-items: center; gap: 10px; }
.stack > * + * { margin-top: 10px; }
.auth-link { color: var(--primary); text-decoration: none; }

/* 右上語言切換列 */
.topbar {
  position: fixed; top: 12px; right: 14px;
  display: flex; gap: 8px; z-index: 40;
  font-size: 13px;
}
.topbar a {
  color: #1f2937;                    /* 深灰字色，適合淺底 */
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 999px;
  background: #ffffffcc;             /* 淺白底 + 微透明 */
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.topbar a:hover { background: #ffffff; }
.topbar a.active {
  background: #e8f0fe;               /* 淺藍高亮 */
  border-color: #93c5fd;
}


/* 讓上方留出空間，避免語言列被卡片擋住 */
.auth-wrap {
  padding-top: 84px; /* 原本可能是 24px；加大一些 */
}

/* 語言列層級拉高，保證可點 */
.topbar {
  z-index: 2147483647;
}

/* 卡片自身層級降低，避免覆蓋 topbar 的點擊 */
.card {
  position: relative;
  z-index: 1;
}

/* 加上提示文字樣式 */
.field-hint{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted, #64748b);
}