body.path-login.pagelayout-login.gha-professional-login {
  --gha-leaf: #6f9d45;
  --gha-leaf-dark: #416c35;
  --gha-mint: #eaf5e5;
  --gha-cream: #fffaf0;
  --gha-sun: #f4d776;
  --gha-ink: #284235;
  --gha-muted: #66776d;
  --gha-line: #dce8da;
  min-height: 100vh;
  background: #f7f8f2 !important;
  color: var(--gha-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif;
}

body.gha-professional-login :is(.navbar, #page-header, footer, .login-layout-left, .login-layout-background) { display: none !important; }
body.gha-professional-login #page,
body.gha-professional-login #page-wrapper,
body.gha-professional-login #page-content,
body.gha-professional-login .main-inner,
body.gha-professional-login #region-main {
  min-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.gha-professional-login #page-content { display: flex !important; max-width: none !important; }

.gha-login-shell {
  box-sizing: border-box;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}

.gha-login-intro {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(42px, 5vw, 72px);
  background:
    radial-gradient(circle at 86% 15%, rgba(255, 255, 255, .9) 0 8%, transparent 8.5%),
    radial-gradient(circle at 7% 86%, rgba(244, 215, 118, .35) 0 15%, transparent 15.5%),
    linear-gradient(145deg, #fffdf6 0%, #eef7e7 58%, #dff0d7 100%);
}
.gha-login-intro::before,
.gha-login-intro::after { content: ""; position: absolute; border-radius: 999px; pointer-events: none; }
.gha-login-intro::before { width: 260px; height: 260px; right: -110px; top: -90px; background: rgba(244, 215, 118, .55); }
.gha-login-intro::after { width: 190px; height: 190px; left: -95px; bottom: -90px; border: 34px solid rgba(111, 157, 69, .12); }
.gha-login-brandmark,
.gha-login-copy,
.gha-login-learning,
.gha-login-art { position: relative; z-index: 1; }

.gha-login-brandmark {
  width: fit-content;
  padding: 10px 15px;
  border: 1px solid rgba(111, 157, 69, .18);
  border-radius: 16px;
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 8px 24px rgba(72, 106, 59, .07);
}
.gha-login-logo { display: block; width: 190px; max-width: 45vw; height: auto; }
.gha-login-copy { max-width: 590px; margin-top: clamp(38px, 7vh, 74px); }
.gha-login-eyebrow { margin: 0 0 13px; color: var(--gha-leaf-dark); font-size: .82rem; font-weight: 760; letter-spacing: .18em; }
.gha-login-intro h1 {
  max-width: 620px;
  margin: 0 0 18px;
  color: var(--gha-ink) !important;
  font-size: clamp(2.25rem, 3.7vw, 3.35rem);
  font-weight: 800;
  line-height: 1.16;
  letter-spacing: .025em;
}
.gha-login-lead { max-width: 560px; margin: 0; color: #5c7163; font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.85; }

.gha-login-learning {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  max-width: 700px;
  margin-top: clamp(32px, 6vh, 58px);
}
.gha-login-learning-card {
  min-width: 0;
  padding: 16px 15px;
  border: 1px solid rgba(111, 157, 69, .17);
  border-radius: 18px;
  background: rgba(255, 255, 255, .78);
  box-shadow: 0 9px 24px rgba(65, 108, 53, .06);
}
.gha-login-learning-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 25px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: #f8e6a6;
  color: #6a5522;
  font-size: .72rem;
  font-weight: 800;
}
.gha-login-learning-card strong { display: block; margin-bottom: 5px; color: var(--gha-ink); font-size: .94rem; }
.gha-login-learning-card small { display: block; color: var(--gha-muted); font-size: .78rem; line-height: 1.55; }
.gha-login-art { position: absolute; right: clamp(15px, 3vw, 42px); top: clamp(25px, 4vh, 46px); width: clamp(126px, 15vw, 210px); transform: rotate(2deg); }
.gha-login-mascot { display: block; width: 100%; height: auto; filter: drop-shadow(0 16px 20px rgba(82, 91, 46, .13)); }

.gha-login-panel { display: flex; align-items: center; justify-content: center; padding: clamp(38px, 5vw, 72px); background: #fff; }
body.gha-professional-login .gha-login-panel > #region-main,
body.gha-professional-login .gha-login-panel > .login-layout-right {
  flex: 0 1 470px !important;
  width: min(100%, 470px) !important;
  max-width: 470px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.gha-professional-login .login-layout-right-content,
body.gha-professional-login #region-main-box { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; }
body.gha-professional-login .login-container,
body.gha-professional-login .login-wrapper,
body.gha-professional-login .loginbox {
  box-sizing: border-box !important;
  width: min(100%, 470px) !important;
  max-width: 470px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.gha-login-formhead { margin-bottom: 30px; }
.gha-login-formhead .gha-login-kicker { margin: 0 0 10px; color: var(--gha-leaf); font-size: .76rem; font-weight: 800; letter-spacing: .17em; }
.gha-login-formhead h2 { margin: 0 0 10px; color: var(--gha-ink) !important; font-size: clamp(1.85rem, 3vw, 2.25rem); font-weight: 800; letter-spacing: .02em; }
.gha-login-formhead p { margin: 0; color: var(--gha-muted); font-size: .96rem; line-height: 1.7; }
body.gha-professional-login .login-container :is(.login-heading, h1.h2, .logo, > h2),
body.gha-professional-login .gh-login-brand,
body.gha-professional-login .gh-login-prompt,
body.gha-professional-login .gh-login-values,
body.gha-professional-login .gh-login-scene,
body.gha-professional-login .gh-login-stage-pattern { display: none !important; }

body.gha-professional-login form#login { margin: 0 !important; }
body.gha-professional-login .form-group { display: block !important; margin-bottom: 17px !important; }
body.gha-professional-login label { display: block !important; margin-bottom: 7px; color: var(--gha-ink); font-size: .91rem; font-weight: 700; }
body.gha-professional-login input.form-control,
body.gha-professional-login input[type="text"],
body.gha-professional-login input[type="password"] {
  min-height: 54px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 13px 15px !important;
  border: 1px solid #cbd9cc !important;
  border-radius: 13px !important;
  background: #fbfdf9 !important;
  color: var(--gha-ink) !important;
  font-size: 1rem !important;
  box-shadow: none !important;
}
body.gha-professional-login input:focus { border-color: var(--gha-leaf) !important; box-shadow: 0 0 0 4px rgba(111, 157, 69, .16) !important; }
body.gha-professional-login .login-form-password,
body.gha-professional-login .toggle-sensitive-wrapper {
  position: relative !important;
}
body.gha-professional-login .toggle-sensitive-wrapper {
  display: block !important;
  width: 100% !important;
}
body.gha-professional-login :is(.login-form-password, .toggle-sensitive-wrapper) :is(input.form-control, input[type="password"], input[type="text"]),
body.gha-professional-login input#password,
body.gha-professional-login input[name="password"],
body.gha-professional-login .toggle-sensitive-wrapper input.form-control,
body.gha-professional-login .toggle-sensitive-wrapper input[type="password"],
body.gha-professional-login .toggle-sensitive-wrapper input[type="text"] {
  box-sizing: border-box !important;
  width: 100% !important;
  padding-right: 56px !important;
}
body.gha-professional-login input::-ms-reveal,
body.gha-professional-login input::-ms-clear {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}
body.gha-professional-login :is(.login-form-password, .toggle-sensitive-wrapper) :is(button, .btn, .toggle-sensitive-btn),
body.gha-professional-login .toggle-sensitive-wrapper > button,
body.gha-professional-login .toggle-sensitive-wrapper > .btn,
body.gha-professional-login .toggle-sensitive-wrapper .toggle-sensitive-btn,
body.gha-professional-login .login-form-password .toggle-sensitive-btn {
  position: absolute !important;
  z-index: 4 !important;
  top: 50% !important;
  right: 8px !important;
  bottom: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: 38px !important;
  height: 38px !important;
  min-height: 0 !important;
  max-height: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: translateY(-50%) !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--gha-muted) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  cursor: pointer;
}
body.gha-professional-login .login-form-password > :is(button, .btn, .toggle-sensitive-btn) {
  top: auto !important;
  bottom: 8px !important;
  transform: none !important;
}
body.gha-professional-login :is(.login-form-password, .toggle-sensitive-wrapper) :is(button, .btn, .toggle-sensitive-btn):is(.d-none, [hidden]) {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}
body.gha-professional-login :is(.login-form-password, .toggle-sensitive-wrapper) :is(button, .btn, .toggle-sensitive-btn) :is(.icon, svg, i),
body.gha-professional-login .toggle-sensitive-wrapper .toggle-sensitive-btn :is(.icon, svg),
body.gha-professional-login .toggle-sensitive-wrapper > button :is(.icon, svg) {
  display: none !important;
}
/* Keep the password affordance independent from Moodle's icon-font swap. */
body.gha-professional-login :is(.login-form-password, .toggle-sensitive-wrapper) :is(button, .btn, .toggle-sensitive-btn)::before {
  content: "" !important;
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  background: center / 20px 20px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%2369766d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.75 10s3-5 8.25-5 8.25 5 8.25 5-3 5-8.25 5S1.75 10 1.75 10Z'/%3E%3Ccircle cx='10' cy='10' r='2.25'/%3E%3C/svg%3E") !important;
}
body.gha-professional-login :is(.login-form-password, .toggle-sensitive-wrapper):has(input[type="text"]) :is(button, .btn, .toggle-sensitive-btn)::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%2369766d' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.1 3.1 16.9 16.9'/%3E%3Cpath d='M8.25 5.2A9.6 9.6 0 0 1 10 5c5.25 0 8.25 5 8.25 5a13.3 13.3 0 0 1-2.15 2.65M11.75 14.8A9.6 9.6 0 0 1 10 15c-5.25 0-8.25-5-8.25-5A13.4 13.4 0 0 1 4.2 7.05'/%3E%3Cpath d='M8.4 8.4a2.25 2.25 0 0 0 3.2 3.2'/%3E%3C/svg%3E") !important;
}
body.gha-professional-login :is(.login-form-password, .toggle-sensitive-wrapper) :is(button, .btn, .toggle-sensitive-btn):hover,
body.gha-professional-login :is(.login-form-password, .toggle-sensitive-wrapper) :is(button, .btn, .toggle-sensitive-btn):focus,
body.gha-professional-login .toggle-sensitive-wrapper > button:hover,
body.gha-professional-login .toggle-sensitive-wrapper > .btn:hover,
body.gha-professional-login .toggle-sensitive-wrapper .toggle-sensitive-btn:hover {
  background: rgba(111, 157, 69, .08) !important;
  color: var(--gha-ink) !important;
}
body.gha-professional-login #loginbtn,
body.gha-professional-login button[type="submit"].btn-primary {
  width: 100%;
  min-height: 54px !important;
  border: 1px solid var(--gha-leaf-dark) !important;
  border-radius: 13px !important;
  background: linear-gradient(135deg, #557f3a, #416c35) !important;
  color: #fff !important;
  font-size: 1rem !important;
  font-weight: 760 !important;
  box-shadow: 0 10px 22px rgba(79, 126, 61, .2) !important;
}
body.gha-professional-login #loginbtn:hover { background: linear-gradient(135deg, #486f33, #355c2e) !important; }
body.gha-professional-login :is(a, button, input):focus-visible { outline: 3px solid rgba(49, 105, 170, .42) !important; outline-offset: 3px !important; }
body.gha-professional-login .login-form-forgotpassword { margin: -2px 0 18px !important; text-align: right; }
body.gha-professional-login .login-form-forgotpassword a { color: var(--gha-leaf-dark) !important; font-size: .86rem; }
body.gha-professional-login :is(.login-divider, .login-separator, .login-identityproviders, .potentialidps) { display: none !important; }
body.gha-professional-login :is(.alert-danger, .loginerrors, .loginerror) { border: 1px solid #e6aca3 !important; border-radius: 13px !important; background: #fff1ee !important; color: #813c32 !important; }

.gha-login-admin-note { margin: 19px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--gha-cream); color: #6b5c35; font-size: .82rem; line-height: 1.55; }
.gha-login-help { margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--gha-line); color: var(--gha-muted); font-size: .82rem; line-height: 1.65; }
body.gha-professional-login .langmenu { margin-top: 18px !important; }
body.gha-professional-login .langmenu .btn { border: 0 !important; background: transparent !important; color: var(--gha-leaf-dark) !important; box-shadow: none !important; }

@media (max-width: 1020px) {
  body.gha-professional-login #page-content { display: block !important; }
  .gha-login-shell { width: 100%; min-height: 100vh; grid-template-columns: 1fr; border: 0; border-radius: 0; box-shadow: none; }
  .gha-login-intro { min-height: auto; padding: 30px clamp(22px, 6vw, 54px) 34px; }
  .gha-login-brandmark { padding: 7px 11px; }
  .gha-login-logo { width: 154px; }
  .gha-login-copy { margin-top: 27px; padding-right: 170px; }
  .gha-login-intro h1 { font-size: clamp(2rem, 7vw, 3.1rem); }
  .gha-login-learning { margin-top: 26px; }
  .gha-login-art { width: 142px; right: 30px; top: 92px; }
  .gha-login-panel { padding: 42px 22px 54px; }
}

@media (max-width: 600px) {
  body.gha-professional-login #page,
  body.gha-professional-login #page-wrapper,
  body.gha-professional-login #page-content,
  body.gha-professional-login .main-inner,
  .gha-login-shell,
  .gha-login-intro,
  .gha-login-panel { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; }
  body.gha-professional-login .gha-login-panel > #region-main,
  body.gha-professional-login .gha-login-panel > .login-layout-right,
  body.gha-professional-login .login-layout-right-content,
  body.gha-professional-login #region-main-box,
  body.gha-professional-login .login-container,
  body.gha-professional-login .login-wrapper,
  body.gha-professional-login .loginbox { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; }
  .gha-login-intro { padding: 22px 18px 26px; }
  .gha-login-logo { width: 136px; }
  .gha-login-copy { margin-top: 23px; padding-right: 88px; }
  .gha-login-eyebrow { margin-bottom: 9px; font-size: .7rem; letter-spacing: .12em; }
  .gha-login-intro h1 { margin-bottom: 10px; font-size: 1.6rem; }
  .gha-login-lead { font-size: .9rem; line-height: 1.65; }
  .gha-login-learning { width: 100%; min-width: 0; max-width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 20px; }
  .gha-login-learning-card { padding: 10px 8px; border-radius: 13px; text-align: center; }
  .gha-login-learning-number { width: 28px; height: 23px; margin-bottom: 7px; }
  .gha-login-learning-card strong { margin: 0; overflow-wrap: anywhere; font-size: .78rem; }
  .gha-login-learning-card small { display: none; }
  .gha-login-art { display: none; }
  .gha-login-panel { align-items: flex-start; padding: 34px 20px 44px; }
  .gha-login-formhead { margin-bottom: 24px; }
  .gha-login-formhead h2 { font-size: 1.75rem; }
}
@media (max-width: 380px) { .gha-login-copy { padding-right: 0; } .gha-login-art { display: none; } }
@media (prefers-reduced-motion: reduce) {
  body.gha-professional-login *,
  body.gha-professional-login *::before,
  body.gha-professional-login *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}