:root { --navy:#10243e; --blue:#2457d6; --coral:#e56b4a; --line:#cbd5e3; --muted:#5e6b7d; --pale:#edf3ff; }
* { box-sizing:border-box; }
body { min-height:100vh; margin:0; color:var(--navy); background:#f7f9fc; font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif; }
a { color:inherit; text-decoration:none; }
.auth-header { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:0 max(24px,calc((100vw - 1180px)/2)); background:white; border-bottom:1px solid var(--line); }
.auth-brand { display:inline-flex; align-items:center; gap:12px; font:700 15px Georgia,"Noto Serif TC",serif; }
.auth-brand span { display:grid; place-items:center; width:40px; height:40px; color:white; background:var(--navy); font-size:18px; }
.back-link,.text-link { color:var(--blue); font-size:14px; font-weight:700; }
.auth-main { width:min(calc(100% - 48px),1180px); min-height:calc(100vh - 72px); display:grid; grid-template-columns:1.12fr .88fr; align-items:center; gap:90px; margin:auto; padding-block:72px; }
.auth-kicker,.panel-label { margin:0 0 18px; color:var(--coral); font-size:12px; font-weight:850; letter-spacing:.17em; }
.auth-context h1,.denied-main h1 { margin:0; color:var(--navy); font:700 clamp(44px,5vw,70px)/1.16 Georgia,"Noto Serif TC",serif; letter-spacing:-.04em; }
.auth-context>p:not(.auth-kicker) { max-width:650px; margin:28px 0 0; color:#47566b; font-size:17px; line-height:1.9; }
.auth-context ul { margin:36px 0 0; padding:0; list-style:none; border-top:2px solid var(--navy); }
.auth-context li { display:grid; grid-template-columns:48px 1fr; gap:14px; padding:15px 0; color:#3d4c62; border-bottom:1px solid var(--line); }
.auth-context li span { color:var(--blue); font:750 13px/1.75 system-ui; }
.login-panel { padding:46px; background:white; border:1px solid var(--line); box-shadow:0 30px 80px rgba(16,36,62,.13); }
.lock-mark { display:grid; place-items:center; width:54px; height:54px; margin-bottom:28px; color:white; background:var(--navy); }
.lock-mark svg { width:28px; fill:currentColor; }
.panel-label { color:var(--blue); margin-bottom:10px; }
.login-panel h2 { margin:0; font:700 32px/1.25 Georgia,"Noto Serif TC",serif; }
.login-panel>p:not(.panel-label) { margin:16px 0 0; color:var(--muted); line-height:1.75; }
.google-button { min-height:52px; display:flex; align-items:center; justify-content:center; gap:12px; margin-top:30px; padding:10px 20px; color:white; background:var(--blue); border:1px solid var(--blue); font-weight:800; transition:transform .2s ease,box-shadow .2s ease; }
.google-button:hover { transform:translateY(-2px); box-shadow:0 15px 32px rgba(36,87,214,.2); }
.google-g { display:grid; place-items:center; width:25px; height:25px; color:#4285f4; background:white; border-radius:50%; font:800 15px/1 Arial,sans-serif; }
.login-panel small { display:block; margin-top:18px; color:#728096; font-size:12px; line-height:1.7; }
.auth-error { margin-top:20px; padding:12px 14px; color:#7b241c; background:#fff3ef; border-left:3px solid var(--coral); font-size:13px; line-height:1.6; }
.auth-diagnostics { margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.auth-diagnostics-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.auth-diagnostics-heading .panel-label { margin:0 0 4px; font-size:10px; }
.auth-diagnostics-heading h3 { margin:0; font:700 19px/1.35 Georgia,"Noto Serif TC",serif; }
.auth-diagnostics-heading button { flex:0 0 auto; padding:7px 10px; color:var(--blue); background:white; border:1px solid var(--line); cursor:pointer; font:700 12px/1 system-ui,sans-serif; }
.auth-diagnostics-summary { margin:16px 0 0!important; padding:11px 12px; color:#3d4c62!important; background:var(--pale); font-size:12px; line-height:1.55!important; }
.auth-diagnostics-grid { display:grid; gap:0; margin:14px 0 0; }
.auth-diagnostics-grid>div { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:14px; align-items:center; padding:8px 0; border-bottom:1px solid #e7ecf3; }
.auth-diagnostics-grid dt { color:#536177; font-size:12px; }
.auth-diagnostics-grid dd { max-width:240px; margin:0; overflow-wrap:anywhere; color:#243852; font:700 11px/1.45 ui-monospace,SFMono-Regular,Consolas,monospace; text-align:right; }
.diagnostic-state { display:inline-block; min-width:52px; padding:3px 7px; border-radius:999px; text-align:center; }
.diagnostic-state.is-ok { color:#17643b; background:#e7f6ee; }
.diagnostic-state.is-bad { color:#8a2f23; background:#fff0ec; }
.diagnostic-state.is-unknown { color:#5e6b7d; background:#eef1f5; }
.auth-diagnostics-note { margin:13px 0 0!important; color:#728096!important; font-size:10px!important; line-height:1.65!important; }
.denied-main { width:min(calc(100% - 48px),760px); min-height:calc(100vh - 72px); display:flex; flex-direction:column; align-items:flex-start; justify-content:center; margin:auto; padding-block:60px; }
.denied-main h1 { font-size:clamp(38px,5vw,58px); }
.denied-main>p:not(.auth-kicker) { color:var(--muted); font-size:17px; }
.denied-main .google-button { min-width:230px; }
.denied-main .text-link { margin-top:22px; }
@media(max-width:820px){.auth-main{grid-template-columns:1fr;gap:48px;padding-block:48px}.auth-context h1{font-size:clamp(40px,10vw,58px)}.login-panel{padding:36px}.auth-header{min-height:62px}.back-link{font-size:12px}}
@media(max-width:520px){.auth-main{width:min(calc(100% - 32px),1180px)}.auth-brand{font-size:12px}.auth-brand span{width:36px;height:36px}.login-panel{padding:28px 22px}}