@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap");

:root {
  --c-primary:      #3b5d50;
  --c-primary-dark: #2d4840;
  --c-secondary-lt: #f9bf29;
  --c-text:         #3a3a3a;
  --c-muted:        #595959;
  --c-bg:           #eff2f1;
  --c-card:         #ffffff;
  --c-border:       #c8d3d1;
  --c-focus:        #005fcc;
  --c-error:        #b91c1c;
  --c-success:      #166534;
  --font:           'Noto Sans TC', sans-serif;
  --radius-sm:      6px;
  --radius-md:      12px;
  --radius-lg:      20px;
  --shadow-sm:      0 1px 4px rgba(0,0,0,.08);
  --shadow-lg:      0 8px 32px rgba(0,0,0,.14);
  --trans:          .22s ease;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 100%; }
body {
  font-family: var(--font); font-size: 1rem; line-height: 1.75;
  color: var(--c-text); background-color: var(--c-bg);
  min-height: 100vh; display: flex; flex-direction: column;
}

.skip-link {
  position: absolute; top: -120px; left: 1rem; z-index: 9999;
  padding: .7rem 1.4rem; background: var(--c-primary); color: #fff;
  font-weight: 700; border-radius: var(--radius-sm); text-decoration: none;
  transition: top var(--trans);
}
.skip-link:focus { top: 1rem; outline: 3px solid var(--c-focus); outline-offset: 2px; }

:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
a { color: var(--c-primary); text-decoration: underline; transition: color var(--trans); }
a:hover { color: var(--c-primary-dark); text-decoration: none; }

/* ── 頂端細條 */
.top-bar { background: var(--c-primary); height: 5px; width: 100%; flex-shrink: 0; }

/* ── 主體置中容器 */
.auth-wrapper { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1rem; }

/* ── 卡片 */
.auth-card {
  background: var(--c-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 2.5rem 2.25rem; width: 100%; max-width: 420px;
}

/* ── 品牌區 */
.auth-brand { text-align: center; margin-bottom: 1.75rem; }
.auth-brand a { display: inline-block; text-decoration: none; }
.auth-brand img { max-height: 64px; width: auto; display: block; margin: 0 auto .75rem; }
.auth-brand-name { font-size: .875rem; color: var(--c-muted); line-height: 1.5; }
.auth-divider { border: none; border-top: 1px solid var(--c-border); margin: 0 0 1.75rem; }

/* ── 標題 */
.auth-title { font-size: 1.35rem; font-weight: 700; color: var(--c-text); margin: 0 0 1.5rem; text-align: center; }

/* ── 表單欄位 */
.form-field { margin-bottom: 1.1rem; }
.form-field label { display: block; font-size: .9rem; font-weight: 600; color: var(--c-text); margin-bottom: .35rem; }
.form-field .required-mark { color: var(--c-error); margin-left: .2rem; font-weight: 700; }
.form-field .field-hint { font-size: .8rem; color: var(--c-muted); margin-top: .25rem; }

/* 兩欄並排（姓 + 名） */
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 400px) { .form-row { grid-template-columns: 1fr; } }

.form-control-custom {
  display: block; width: 100%; height: 48px; padding: .5rem .85rem;
  font-family: var(--font); font-size: 1rem; color: var(--c-text);
  background: #fff; border: 2px solid var(--c-border); border-radius: var(--radius-sm);
  transition: border-color var(--trans), box-shadow var(--trans); appearance: none;
}
.form-control-custom:focus {
  border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(59,93,80,.2); outline: none;
}
.form-control-custom::placeholder { color: #9eaaa8; }
.form-control-custom.is-invalid { border-color: var(--c-error); }
.form-control-custom.is-invalid:focus { box-shadow: 0 0 0 3px rgba(185,28,28,.15); }
.form-control-custom.is-valid { border-color: #16a34a; }

/* ── 密碼欄位 */
.password-wrap { position: relative; }
.password-wrap .form-control-custom { padding-right: 3rem; }
.btn-pw-toggle {
  position: absolute; top: 50%; right: .75rem; transform: translateY(-50%);
  background: none; border: none; padding: .25rem; cursor: pointer;
  color: var(--c-muted); font-size: 1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: color var(--trans);
}
.btn-pw-toggle:hover { color: var(--c-primary); }
.btn-pw-toggle:focus-visible { outline: 3px solid var(--c-focus); border-radius: var(--radius-sm); }

/* ── 密碼強度條 */
.pw-strength { margin-top: .45rem; }
.pw-strength-bar { height: 5px; border-radius: 3px; background: var(--c-border); overflow: hidden; margin-bottom: .25rem; }
.pw-strength-fill { height: 100%; border-radius: 3px; width: 0; transition: width .3s ease, background .3s ease; }
.pw-strength-text { font-size: .78rem; color: var(--c-muted); }

/* ── 記住我 / 條款同意 */
.auth-options {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.5rem; flex-wrap: wrap; gap: .5rem;
}
.form-check-custom { display: flex; align-items: flex-start; gap: .5rem; margin-bottom: 1.5rem; }
.form-check-custom input[type="checkbox"] {
  width: 18px; height: 18px; margin-top: .15rem; flex-shrink: 0;
  cursor: pointer; accent-color: var(--c-primary);
}
.form-check-custom label { font-size: .875rem; color: var(--c-text); cursor: pointer; margin: 0; }
.forgot-link { font-size: .875rem; color: var(--c-primary); }

/* ── 主按鈕 */
.btn-auth {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; height: 50px; padding: 0 1.5rem;
  background: var(--c-primary); color: #fff;
  border: 2px solid transparent; border-radius: var(--radius-sm);
  font-family: var(--font); font-size: 1rem; font-weight: 700;
  cursor: pointer; transition: background var(--trans); margin-bottom: 1.25rem;
}
.btn-auth:hover { background: var(--c-primary-dark); }
.btn-auth:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

/* ── 頁尾切換連結 */
.auth-footer-link { text-align: center; font-size: .9rem; color: var(--c-muted); margin-bottom: 1.5rem; }
.auth-footer-link a { font-weight: 700; }

/* ── 返回首頁 */
.auth-back { text-align: center; font-size: .875rem; padding-top: 1.25rem; border-top: 1px solid var(--c-border); margin-top: .25rem; }
.auth-back a { display: inline-flex; align-items: center; gap: .35rem; color: var(--c-muted); text-decoration: none; }
.auth-back a:hover { color: var(--c-primary); }

/* ── 錯誤提示 */
.field-error { font-size: .8rem; color: var(--c-error); margin-top: .3rem; display: flex; align-items: center; gap: .3rem; }

/* ── 下拉選單 */
select.form-control-custom {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23595959' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .75rem center;
  background-size: .9rem;
  padding-right: 2.5rem;
}
select.form-control-custom:disabled { background-color: #f3f3f3; color: var(--c-muted); cursor: not-allowed; }

/* ── 圖文驗證 */
.captcha-wrap { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.captcha-img {
  flex: 1; height: 48px;
  background: repeating-linear-gradient(45deg, #dce4e2, #dce4e2 2px, #eef1f0 2px, #eef1f0 8px);
  border: 2px solid var(--c-border); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; color: #2a4d42; letter-spacing: .28em;
  font-family: 'Courier New', monospace; font-weight: 700; font-style: italic;
  user-select: none; overflow: hidden; padding: 0 .5rem;
  text-shadow: 1px 1px 0 rgba(255,255,255,.5), -1px 0 0 rgba(59,93,80,.3);
}
.captcha-audio,
.captcha-refresh {
  flex-shrink: 0; width: 40px; height: 40px;
  background: var(--c-bg); border: 2px solid var(--c-border); border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--c-muted); font-size: .95rem;
  transition: color var(--trans), border-color var(--trans), transform var(--trans);
}
.captcha-audio:hover { color: #1a56cc; border-color: #1a56cc; }
.captcha-audio:focus-visible { outline: 3px solid var(--c-focus); border-radius: var(--radius-sm); }
.captcha-refresh:hover { color: var(--c-primary); border-color: var(--c-primary); transform: rotate(180deg); }
.captcha-refresh:focus-visible { outline: 3px solid var(--c-focus); border-radius: var(--radius-sm); }

/* ── 忘記密碼（僅連結行） */
.forgot-only { text-align: right; margin-bottom: 1.25rem; }
.forgot-only .forgot-link { font-size: .875rem; }

/* ── 頁尾 */
.auth-page-footer {
  background: var(--c-primary); color: rgba(255,255,255,.7);
  text-align: center; font-size: .8rem; padding: .9rem 1rem; flex-shrink: 0;
}
.auth-page-footer a { color: rgba(255,255,255,.85); }

.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}