.login-page { margin:0; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; background:#f6f8fc; color:#202124; font:14px/1.65 "Segoe UI","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif; color-scheme:light }
.login-page *,.auth-session-guard * { box-sizing:border-box }
.login-page button,.login-page input,.auth-session-guard button { font:inherit }
.login-color-rule { height:4px; background:linear-gradient(90deg,#4285f4 0 40%,#ea4335 40% 60%,#fbbc05 60% 80%,#34a853 80%); flex-shrink:0 }
.login-main { flex:1; display:grid; place-items:center; padding:52px 24px 36px }
.login-card { position:relative; width:100%; max-width:450px; border:1px solid transparent; border-radius:20px; padding:38px 40px 30px; background:linear-gradient(#fff,#fff) padding-box,linear-gradient(135deg,#d1e1fd 0 25%,#f4cdc9 45%,#f9dfad 65%,#c5e5d0 100%) border-box; box-shadow:0 8px 36px #30466808 }
.login-card::before { content:""; position:absolute; top:-1px; left:22px; right:22px; height:4px; border-radius:0 0 4px 4px; background:linear-gradient(90deg,#4285f4 0 25%,#ea4335 25% 50%,#f9ab00 50% 75%,#34a853 75% 100%); pointer-events:none }
.login-brand { margin:0; font-size:28px; font-weight:650; letter-spacing:-.7px }
.login-brand span { font-weight:400; color:#626b79 }
.login-guide { margin:2px 0 0; font-size:12px; letter-spacing:.12em; color:#677386 }
.login-heading { margin:29px 0 26px }
.login-heading h1 { margin:0 0 10px; font-size:26px; line-height:1.5; font-weight:550 }
.login-heading p { margin:0; color:#627083; font-size:13px; line-height:1.8 }
.login-field { margin-top:19px }
.login-field label { display:block; margin-bottom:7px; font-size:13px; font-weight:600 }
.login-field input { display:block; width:100%; min-height:48px; border:1px solid #bdc6d4; border-radius:7px; padding:11px 13px; color:#202124; background:#fff; font-size:16px }
.login-password { position:relative }
.login-password input { padding-right:65px }
.login-password button { position:absolute; inset:4px 4px 4px auto; min-width:54px; padding:0 9px; border:0; border-radius:5px; background:transparent; color:#3268ad; cursor:pointer; font-size:12px }
.login-password button:hover { background:#eef4fd }
.login-status { min-height:24px; margin:16px 0 14px; color:#5b687b; font-size:12px; line-height:1.7; overflow-wrap:anywhere }
.login-status[data-error="true"] { color:#b3261e }
.auth-primary-button { min-height:44px; padding:10px 24px; border:1px solid #1a73e8; border-radius:7px; background:#1a73e8; color:#fff; cursor:pointer; font:inherit; font-weight:600 }
.auth-primary-button:hover { background:#1769d1 }
.login-page .auth-primary-button { width:100% }
.login-page button:disabled,.auth-session-guard button:disabled { opacity:.6; cursor:wait }
.login-page :focus-visible,.auth-session-guard :focus-visible,.site-logout:focus-visible { outline:3px solid #8bb7f7; outline-offset:3px }
.login-help { margin:24px 0 0; color:#738093; text-align:center; font-size:11px; line-height:1.9 }
.login-footer { padding:12px 24px 24px; text-align:center; color:#8390a1; font-size:11px }
.auth-demo-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:8px 18px }
.site-logout { display:inline-flex; align-items:center; justify-content:center; min-height:32px; padding:5px 12px; border:1px solid #d1d9e5; border-radius:6px; background:#fff; color:#53647a; font:inherit; font-size:12px; line-height:1.6; white-space:nowrap; cursor:pointer }
.site-logout:hover { background:#f0f5fc; border-color:#b2c7e6 }
.site-logout[hidden] { display:none !important }
.demo-bar .site-logout { min-height:26px; padding:2px 9px; font-size:11px }
.auth-pending body { overflow:hidden !important }
.auth-pending body > :not(.auth-session-guard) { visibility:hidden !important }
.auth-session-guard { position:fixed; inset:0; z-index:2147483647; display:grid; place-items:center; width:100vw; height:100vh; height:100dvh; max-width:none; max-height:none; margin:0; border:0; border-radius:0; padding:24px; background:#f6f8fc; color:#202124; font:14px/1.8 "Segoe UI","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif }
.auth-session-guard:not([open]) { display:none !important }
.auth-session-card { width:min(100%,440px); padding:32px; border:1px solid #dfe5ee; border-radius:16px; background:#fff; text-align:center }
.auth-session-title { margin:0 0 12px; font-size:18px; font-weight:600 }
.auth-session-message { margin:0; color:#627083; font-size:13px; white-space:pre-line }
.auth-session-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:22px }
.auth-session-actions[hidden] { display:none !important }
.auth-session-secondary { padding:9px 15px; border:1px solid #cbd6e5; border-radius:7px; background:#fff; color:#3268ad; cursor:pointer }
@media(max-width:500px) {
  .login-main { padding:28px 16px 20px }
  .login-card { padding:28px 24px 25px; border-radius:16px }
  .login-brand { font-size:26px }
  .login-heading { margin-block:23px }
  .login-heading h1 { font-size:24px }
  .auth-demo-actions { gap:5px 10px }
  .demo-bar .site-logout { font-size:10px; padding:2px 7px }
  .site-header nav .site-logout { font-size:11px; min-height:30px }
  .auth-session-card { padding:25px 20px }
}
@media print { .site-logout { display:none !important } }