/* Login-only presentation. Shared styles, authenticated views and admin stay independent. */
#auth {
  color: #183f3d;
  background: radial-gradient(ellipse at 12% 0%, #cceee4 0, transparent 48%), linear-gradient(135deg, #e7f6ef, #edf7f5 58%, #e2f0f2);
  padding: 40px 28px;
  min-height: 100vh;
  min-height: 100svh;
}
#auth .user-login-layout { width: min(1120px, 100%); margin: auto; }
#auth .user-login-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 0 4px 28px; }
#auth .auth-brand { position: static; color: #183f3d; gap: 14px; }
#auth .user-brand-mark { width: 52px; height: 52px; display: grid; place-items: center; flex-shrink: 0; border-radius: 16px; background: #218979; color: #effdf7; box-shadow: 0 8px 20px #2189791c; }
#auth .user-brand-mark svg { width: 30px; height: 30px; }
#auth .auth-brand strong { font-size: 22px; letter-spacing: -.04em; }
#auth .auth-brand small { margin-top: 6px; color: #496f68; font-size: 10px; font-weight: 700; letter-spacing: .2em; }
#auth .user-admin-link { display: inline-flex; align-items: center; gap: 14px; padding: 12px 17px; border: 1px solid #a6ccc1; border-radius: 10px; background: #e3f2eb; color: #205a50; text-decoration: none; font-size: 13px; font-weight: 700; white-space: nowrap; }
#auth .user-admin-link:hover { background: #d1e9df; border-color: #72aa99; }
#auth .user-login-container { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid #bcded2; border-radius: 28px; background: #edf8f2; box-shadow: 0 24px 64px #285b4612; }
#auth .user-login-intro { position: relative; display: flex; flex-direction: column; padding: 52px 44px 36px; background: linear-gradient(145deg, #bce7d6, #ccece0 62%, #b7ded4); }
#auth .user-intro-label { margin: 0 0 54px; color: #235c50; font-size: 10px; font-weight: 800; letter-spacing: .18em; }
#auth .user-intro-label span { margin-right: 8px; color: #1a7761; }
#auth .user-login-intro h2 { margin: 0; color: #164b3f; font-size: clamp(30px, 3.3vw, 43px); font-weight: 750; line-height: 1.18; letter-spacing: -.055em; }
#auth .user-intro-copy { max-width: 350px; margin: 22px 0 0; color: #356659; font-size: 16px; line-height: 1.8; }
#auth .user-login-features { display: grid; gap: 22px; list-style: none; margin: 36px 0 40px; padding: 0; }
#auth .user-login-features li { display: flex; gap: 12px; align-items: flex-start; }
#auth .user-login-features li > span { display: grid; place-items: center; width: 25px; height: 25px; flex-shrink: 0; border-radius: 50%; background: #a0d6c1; color: #185941; font-size: 14px; }
#auth .user-login-features strong { display: block; padding-top: 2px; color: #1e5042; font-size: 14px; font-weight: 650; }
#auth .user-login-features p { margin: 6px 0 0; color: #3f6d5f; font-size: 12px; line-height: 1.6; }
#auth .user-intro-footer { display: flex; align-items: center; gap: 10px; margin: auto 0 0; color: #386756; font-size: 12px; line-height: 1.6; }
#auth .user-intro-footer span { font-size: 24px; }
#auth .auth-card { width: auto; min-width: 0; padding: 48px 44px 32px; border: 0; border-radius: 0; background: #edf8f2; box-shadow: none; }
#auth .user-access-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid #badbce; border-radius: 7px; background: #dcefe4; color: #245f51; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
#auth .user-access-badge span { color: #21866a; font-size: 8px; }
#auth .auth-card h1 { margin: 25px 0 0; color: #163e36; font-size: 36px; line-height: 1.2; letter-spacing: -.045em; }
#auth .auth-copy { margin: 13px 0 20px; color: #527366; font-size: 13px; line-height: 1.7; }
#auth .user-account-note { padding: 12px 14px; margin: 0 0 24px; border: 1px solid #c7e2d3; border-radius: 9px; background: #e0f0e6; color: #3c6555; font-size: 12px; line-height: 1.6; }
#auth .auth-card label { margin: 20px 0 9px; color: #2b5446; font-size: 12px; font-weight: 700; }
#auth .auth-card input { height: 53px; padding: 0 14px; border: 1px solid #b4d2c4; border-radius: 10px; background: #f4faf5; color: #193c31; font-size: 13px; }
#auth .auth-card input::placeholder { color: #617c6f; opacity: 1; }
#auth .auth-card input:focus { border-color: #29876d !important; box-shadow: 0 0 0 3px #29876d20; }
#auth .primary-button { height: 54px; margin-top: 26px; border-radius: 10px; background: #218773; color: #fff; box-shadow: 0 7px 18px #21877320; font-size: 14px; gap: 16px; }
#auth .primary-button:hover { background: #176d5c; }
#auth .account-links { margin-top: 18px; flex-wrap: wrap; font-size: 11px; }
#auth .account-links a { color: #246954; }
#auth .result { line-height: 1.6; overflow-wrap: anywhere; color: #a12c35; }
#auth .user-login-switch { margin-top: 22px; padding-top: 22px; border-top: 1px solid #c9dfd2; color: #4d6e5e; text-align: center; font-size: 12px; line-height: 1.8; }
#auth .user-login-switch a { color: #1c6852; font-weight: 750; text-decoration: none; white-space: nowrap; }
#auth .user-login-switch a:hover { text-decoration: underline; }
#auth .user-login-switch small { display: block; margin-top: 5px; color: #536f61; font-size: 10px; }
#auth .auth-footnote { margin: 24px 0 0; color: #4c7166; font-size: 11px; line-height: 1.8; text-align: center; }
#auth .auth-footnote span { margin: 0 7px; }
#auth a:focus-visible, #auth button:focus-visible { outline: 3px solid #27836b; outline-offset: 4px; }
@media (max-width: 900px) {
  #auth { padding: 30px 22px; }
  #auth .user-login-intro { padding: 38px 28px 30px; }
  #auth .auth-card { padding: 38px 28px 28px; }
  #auth .user-intro-label { margin-bottom: 36px; }
}
@media (max-width: 680px) {
  #auth { padding: 24px 16px; justify-content: flex-start; }
  #auth .user-login-header { gap: 12px; margin: 0 0 22px; align-items: center; }
  #auth .auth-brand { gap: 9px; }
  #auth .user-brand-mark { width: 38px; height: 38px; border-radius: 11px; }
  #auth .user-brand-mark svg { width: 24px; height: 24px; }
  #auth .auth-brand strong { font-size: 16px; }
  #auth .auth-brand small { font-size: 8px; letter-spacing: .15em; }
  #auth .user-admin-link { padding: 10px; gap: 6px; font-size: 11px; }
  #auth .user-login-container { display: flex; flex-direction: column; border-radius: 20px; }
  #auth .auth-card { order: 0; padding: 28px 23px 26px; }
  #auth .auth-card h1 { font-size: 31px; margin-top: 20px; }
  #auth .user-login-intro { order: 1; padding: 30px 23px; }
  #auth .user-intro-label { margin-bottom: 22px; font-size: 9px; }
  #auth .user-login-intro h2 { font-size: 31px; }
  #auth .user-intro-copy { font-size: 14px; margin-top: 16px; }
  #auth .user-login-features { margin: 26px 0 28px; gap: 20px; }
  #auth .auth-footnote { font-size: 10px; }
}
@media (max-width: 360px) {
  #auth { padding: 20px 12px; }
  #auth .auth-brand strong { font-size: 14px; }
  #auth .user-admin-link { padding: 10px 8px; font-size: 10px; }
  #auth .auth-card { padding: 26px 18px; }
}