:root { --navy:#203f62; --green:#176b52; --silver:#b7bdc5; --gold:#8a681e; --text:#292d32; --gutter:12px; --padding:14px; }
* { box-sizing:border-box; }
body { margin:0; background:#f5f4f1; color:var(--text); font:16px/1.6 "Microsoft JhengHei","Noto Sans TC",Arial,sans-serif; }
#form1 { position:relative; isolation:isolate; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; }
.site-header { position:relative; z-index:1; background:var(--navy); color:white; border-bottom:4px solid var(--gold); }
.brand-row { display:flex; flex-direction:column; gap:4px 24px; padding:16px var(--padding); }
.school-name,.service-name { margin:0; line-height:1.4; }
.school-name { font-size:18px; font-weight:700; }
.service-name { font-size:15px; font-weight:400; }
.service-name a { position:relative; color:inherit; text-decoration:none; }
.service-name a::before { content:""; position:absolute; min-height:44px; min-width:44px; inset:50% 0 auto; transform:translateY(-50%); }
.service-name a:hover { text-decoration:underline; text-underline-offset:4px; }
main { position:relative; z-index:1; margin:16px var(--gutter); }
.academic-term { margin:0 0 16px; color:var(--navy); font-size:16px; font-weight:700; overflow-wrap:anywhere; }
.login-card { display:grid; background:white; border:2px solid var(--silver); border-top:4px solid var(--gold); border-left:6px solid var(--silver); border-radius:8px; box-shadow:0 12px 30px rgba(31,41,51,.08); }
.identity-panel,.auth-panel { min-width:0; padding:24px var(--padding); }
.auth-panel { display:flex; flex-direction:column; }
.identity-panel { background:#f6f8fa; border-top:1px solid var(--silver); }
.eyebrow { margin:0 0 12px; color:var(--green); font-size:14px; font-weight:700; letter-spacing:.04em; }
.auth-heading { padding:16px; border:1px solid var(--silver); border-left:4px solid var(--green); border-radius:4px; background:#f6f8fa; overflow-wrap:anywhere; }
.auth-provider { margin:0 0 8px; color:var(--green); font-weight:700; }
.auth-summary { margin:0; color:#545d66; font-size:14px; }
h1 { margin:0 0 12px; color:var(--navy); font-size:22px; line-height:1.4; }
h2 { color:var(--navy); font-size:22px; margin:0 0 12px; }
h3 { font-size:18px; margin:0 0 8px; color:var(--navy); }
.domain-note { padding:14px 16px; background:white; border:1px solid var(--silver); border-left:4px solid var(--gold); border-radius:4px; }
.domain-note h2 { font-size:16px; }
.identity-panel { display:flex; flex-direction:column; gap:16px; }
.auth-panel .domain-note { margin-top:16px; }
.domain-label { color:var(--navy); }
.reserved-section { flex:1; min-height:120px; padding:16px; background:white; border:1px solid var(--silver); border-radius:4px; }
.reserved-section h2 { font-size:18px; margin-bottom:8px; }
.placeholder-note { margin:0; color:#545d66; font-size:14px; }
.site-footer { position:relative; z-index:1; margin-top:auto; padding:8px var(--gutter); background:#f5f4f1; color:#545d66; text-align:center; font-size:14px; overflow-wrap:anywhere; }
.site-footer p { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; column-gap:8px; margin:0; }
.site-footer .footer-admin { white-space:nowrap; }
.site-footer a { display:inline-flex; align-items:center; min-height:44px; color:#0b4f78; text-underline-offset:3px; }
.domain-note p { margin:0; font-weight:700; color:var(--green); overflow-wrap:anywhere; }
.fine-print,.privacy-note { font-size:14px; color:#545d66; }
.auth-options { display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:16px; }
.auth-option { display:flex; min-width:0; flex-direction:column; align-items:stretch; padding:16px; border:1px solid var(--silver); border-radius:4px; background:#f6f8fa; }
.auth-option .google-auth-button { width:100%; }
.auth-option p { margin:0 0 12px; }
.google-button,.confirm-button { width:100%; min-height:48px; padding:12px 18px; border:1px solid var(--silver); border-radius:4px; background:white; color:var(--navy); font:700 16px/1.4 "Microsoft JhengHei",Arial,sans-serif; cursor:pointer; white-space:normal; }
.google-button:hover { background:#f6f8fa; }
.confirm-button { background:var(--green); color:white; border-color:var(--green); }
.confirm-button:hover { background:#105541; }
input:disabled { color:#545d66; background:#edf0f2; cursor:not-allowed; }
.google-auth-button {
    width:320px; max-width:100%;
    min-height:48px; padding:12px 12px 12px 40px;
    border:1px solid #747775; background-color:#fff; color:#1f1f1f;
    background-image:url("https://developers.google.com/static/identity/images/g-logo.png");
    background-repeat:no-repeat; background-position:12px center; background-size:18px 18px;
    font-family:"Roboto","Microsoft JhengHei","Noto Sans TC",Arial,sans-serif;
    font-size:14px; font-weight:500; line-height:20px; text-align:left;
}
.google-auth-button:hover { background-color:#f6f8fa; }
.google-auth-button:disabled { color:#545d66; background-color:#fff; cursor:not-allowed; }
.status-message { padding:12px 16px; border-left:4px solid var(--gold); background:#f6f8fa; margin:12px 0; overflow-wrap:anywhere; }
.message-dialog { width:calc(100% - 24px); max-width:480px; max-height:calc(100svh - 32px); overflow:auto; padding:24px; color:var(--text); background:white; border:2px solid var(--silver); border-top:4px solid var(--gold); border-radius:8px; box-shadow:0 12px 30px rgba(31,41,51,.2); }
.message-dialog::backdrop { background:rgba(32,63,98,.5); }
.message-dialog p { overflow-wrap:anywhere; margin:12px 0 20px; }
.message-close { width:100%; min-height:44px; padding:10px 18px; border:1px solid var(--green); border-radius:4px; background:var(--green); color:white; font:inherit; cursor:pointer; }
.message-close:hover { background:#105541; }
.message-close:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
.registration-panel { padding:20px 0; overflow-wrap:anywhere; }
.registration-panel input[type=text] { width:100%; min-height:44px; border:1px solid #7a8793; border-radius:4px; padding:8px 10px; font:inherit; }
.consent { margin:16px 0; }
.consent label { display:inline; }
.consent input { width:20px; height:20px; margin:12px 8px 12px 0; vertical-align:middle; }
.logo-background { position:fixed; z-index:0; right:var(--gutter); bottom:76px; display:flex; justify-content:flex-end; align-items:flex-end; pointer-events:none; }
.logo-background img { display:block; max-width:100%; width:min(35vw,27.5vh,350px); height:auto; opacity:.12; mix-blend-mode:multiply; }
.skip-link { position:absolute; top:8px; left:8px; background:white; color:var(--navy); padding:10px 16px; transform:translateY(-180%); z-index:2; }
.skip-link:focus { transform:none; }
a:focus-visible,input:focus-visible,main:focus-visible { outline:3px solid var(--green); outline-offset:3px; }
@media(min-width:561px) { :root { --gutter:16px; --padding:20px; } .brand-row { flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; } }
@media(min-width:821px) {
    :root { --gutter:24px; --padding:30px; }
    .brand-row { padding-top:24px; padding-bottom:24px; }
    .login-card { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    .auth-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .identity-panel { border-top:0; border-left:1px solid var(--silver); }
}
@media(max-width:820px) { .logo-background { bottom:120px; } }
.quick-links-list { margin:10px 0 0; padding:0; list-style:none; }
.quick-links-list li + li { border-top:1px solid #dce1e5; }
.quick-link { display:grid; grid-template-columns:auto minmax(0,1fr) auto; min-height:44px; align-items:center; gap:10px; padding:10px 2px; color:#0b4f78; font-weight:700; text-decoration:none; }
.quick-link:hover,.quick-link:focus { text-decoration:underline; text-underline-offset:4px; }
.quick-link.is-highlighted { color:#8a2b25; }
.quick-link-title { overflow-wrap:anywhere; }
.list-icon { display:inline-flex; width:24px; height:24px; align-items:center; justify-content:center; font-size:16px; line-height:1; }
.list-action { color:#0b4f78; font-size:20px; line-height:1; }

.announcements-list { list-style:none; padding:0; margin:12px 0 0; }
.announcements-list li + li { border-top:1px solid #dce1e5; }
.announcement-trigger { display:grid; grid-template-columns:auto minmax(0,1fr) auto; width:100%; min-height:52px; align-items:center; gap:10px; padding:8px 2px; border:0; background:transparent; color:var(--navy); font:inherit; text-align:left; cursor:pointer; }
.announcement-trigger:hover .announcement-summary strong,.announcement-trigger:focus .announcement-summary strong { text-decoration:underline; text-underline-offset:4px; }
.announcement-trigger:focus-visible { outline:3px solid var(--green); outline-offset:2px; }
.announcement-summary { display:flex; min-width:0; flex-wrap:wrap; align-items:baseline; column-gap:12px; row-gap:4px; }
.announcement-summary strong { color:#0b4f78; overflow-wrap:anywhere; }
.announcement-summary span { color:#545d66; font-size:14px; white-space:nowrap; }
.announcement-detail { display:none; }
.announcement-dialog-meta { margin:0 0 4px !important; color:#545d66; font-size:14px; }
.announcement-dialog #announcement-dialog-content { white-space:pre-wrap; }
.notice-link { display:inline-flex; min-height:44px; align-items:center; color:#0b4f78; text-decoration:underline; }
.announcements-section { flex:1 0 auto; }
.announcement-pager { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; }
.announcement-pager input { min-height:44px; max-width:100%; border:1px solid var(--silver); border-radius:4px; background:white; color:var(--navy); padding:8px 12px; font:inherit; }

.notice-subject-link { display:inline-flex; min-height:44px; align-items:center; color:#0b4f78; text-decoration:underline; }