/*
 * BNI 分會管理系統 - login page
 * Geometry is measured from ui/login.png (design width 1672px) so the rendered
 * page lands on the same pixels as the mock-up.
 */

:root {
  --bni-red: #c8102e;
  --btn-red: #cf2f3f;
  --ink: #1f232a;
  --ink-soft: #6e737c;
  --placeholder: #a8adb5;
  --field-border: #dcdfe4;
  --page-bg: #f4f6f9;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; }

/* ---------------- top bar ---------------- */
.topbar {
  height: 82px;
  background: #fff;
  border-bottom: 1px solid #edeff3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 45px 0 44px;
}

.topbar .brand { display: flex; align-items: center; }
.topbar .brand img { width: 92px; height: 38px; display: block; position: relative; top: -1px; }
.topbar .brand .rule { width: 2px; height: 24px; background: #dadde2; margin-left: 18px; }
.topbar .brand .chapter {
  font-size: 29.7px; font-weight: 700; color: var(--ink);
  margin-left: 23px; position: relative; top: -3px;
}
.topbar .brand .system {
  font-size: 18.4px; color: #7d818a; margin-left: 27px; position: relative; top: 0;
}
.topbar .slogan { font-size: 18.5px; color: #8f939c; position: relative; top: 2px; }
.topbar .slogan i { font-style: normal; margin: 0 3px; }

/* ---------------- card ---------------- */
.wrap { padding-top: 55px; }

.card {
  width: 1362px;
  height: 722px;
  margin: 0 auto;
  display: flex;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 28px rgba(24, 30, 45, .06);
}

/* ---------------- left panel ---------------- */
.panel-left {
  position: relative;
  width: 675px;
  flex: none;
  background: url('../img/login-left.png') 0 0 / 100% 100% no-repeat;
}

.panel-left .logo { position: absolute; left: 72px; top: 47px; width: 82px; height: 34px; }

.panel-left h1 {
  position: absolute;
  left: 73px;
  top: 101px;
  margin: 0;
  font-size: 62.8px;
  line-height: 73px;
  font-weight: 700;
  color: var(--ink);
}

.panel-left .lead {
  position: absolute;
  left: 73px;
  top: 265px;
  margin: 0;
  font-size: 28.3px;
  line-height: 1;
  color: var(--ink-soft);
}

.panel-left .givers {
  position: absolute;
  left: 0;
  right: 0;
  padding-left: 10px;
  top: 668px;
  text-align: center;
  font-size: 19.2px;
  line-height: 1;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
}
.panel-left .givers b { color: var(--bni-red); font-weight: 700; }
.panel-left .givers i { width: 2px; height: 15px; background: #c9ccd2; margin: 0 11px; }

/* ---------------- right panel ---------------- */
.panel-right { position: relative; flex: 1; }

.panel-right h2 {
  position: absolute;
  left: 81px;
  top: 93px;
  margin: 0;
  font-size: 56px;
  line-height: 1;
  font-weight: 700;
  color: var(--ink);
}

.panel-right .lead {
  position: absolute;
  left: 82px;
  top: 170px;
  margin: 0;
  font-size: 27.1px;
  line-height: 1;
  color: var(--ink-soft);
}

.panel-right form { position: absolute; left: 82px; top: 0; width: 540px; }

.field-label {
  position: absolute;
  left: 0;
  font-size: 18.5px;
  line-height: 1;
  font-weight: 700;
  color: #5f646d;
}
.field-label.email { top: 254px; }
.field-label.password { top: 379px; }

.field {
  position: absolute;
  left: 0;
  width: 540px;
  height: 60px;
}
.field.email { top: 288px; }
.field.password { top: 413px; }

.field input {
  width: 100%;
  height: 100%;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  background: #fff;
  padding: 0 56px 2px 63px;
  font-family: inherit;
  font-size: 18.7px;
  color: var(--ink);
}
.field input::placeholder { color: var(--placeholder); }
.field input:focus { outline: none; border-color: #c3c7ce; }

.field .lead-icon {
  position: absolute;
  left: 21px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ba1a9;
  pointer-events: none;
  display: flex;
}
.field.password .lead-icon { left: 23px; }
.field .peek {
  position: absolute;
  right: 21px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: #9ba1a9;
  display: flex;
}

.remember {
  position: absolute;
  left: 0;
  top: 499px;
  width: 540px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.remember label { display: flex; align-items: center; font-size: 19px; color: #5f646d; cursor: pointer; }
.remember input { width: 25px; height: 25px; margin: 0 13px 0 0; accent-color: var(--bni-red); }
.remember a { font-size: 19px; color: var(--btn-red); margin-right: -2px; }

.submit {
  position: absolute;
  left: 0;
  top: 559px;
  width: 540px;
  height: 60px;
  border: 0;
  border-radius: 10px;
  background: var(--btn-red);
  color: #fff;
  font-family: inherit;
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
}
.submit:hover { background: #bd2334; }
.submit svg { display: block; }

.help {
  position: absolute;
  left: 0;
  top: 649px;
  width: 540px;
  margin: 0;
  padding-left: 2px;
  text-align: center;
  font-size: 18.3px;
  line-height: 1;
  color: #9298a1;
}

.dev-login {
  position: absolute;
  left: 0;
  top: 688px;
  width: 540px;
  margin: 0;
  text-align: center;
  font-size: 16px;
  line-height: 1;
}
.dev-login a { color: var(--btn-red); }

.flash {
  position: absolute;
  left: 0;
  top: 212px;
  width: 540px;
  margin: 0;
  font-size: 18px;
  line-height: 1;
  color: #b4223a;
}
.flash.ok { color: #17803d; }

/* ---------------- footer ---------------- */
.page-foot {
  margin: 33px 0 0;
  text-align: center;
  font-size: 16.25px;
  line-height: 1;
  color: #9aa1ab;
}

@media (max-width: 1420px) {
  .card { width: 1100px; height: 584px; }
  .panel-left { width: 546px; }
  .panel-left h1 { font-size: 51px; line-height: 59px; top: 82px; left: 56px; }
  .panel-left .logo { left: 57px; top: 39px; width: 66px; height: 28px; }
  .panel-left .lead { font-size: 23px; top: 214px; left: 57px; }
  .panel-left .givers { top: 540px; font-size: 15.5px; }
  .panel-right form { left: 66px; width: 437px; }
  .panel-right h2 { font-size: 46px; top: 75px; left: 64px; }
  .panel-right .lead { font-size: 22px; top: 137px; left: 65px; }
  .field-label.email { top: 205px; }
  .field-label.password { top: 306px; }
  .field { width: 437px; height: 49px; }
  .field.email { top: 233px; }
  .field.password { top: 334px; }
  .field input { font-size: 15px; padding: 0 45px 0 50px; }
  .remember { top: 404px; width: 437px; }
  .remember label, .remember a { font-size: 15.5px; }
  .submit { top: 451px; width: 437px; height: 50px; font-size: 18px; }
  .help { top: 524px; width: 437px; font-size: 15px; }
  .dev-login { top: 556px; width: 437px; font-size: 13px; }
  .flash { top: 172px; width: 437px; font-size: 15px; }
}