:root{--md-sys-color-primary: #A8C7FA;--md-sys-color-on-primary: #062E6F;--md-sys-color-primary-container: #0842A0;--md-sys-color-on-primary-container: #D3E3FD;--md-sys-color-secondary: #C2C7CF;--md-sys-color-secondary-container: #3E4756;--md-sys-color-on-secondary-container: #DDE2EB;--md-sys-color-tertiary: #C2C3EB;--md-sys-color-tertiary-container: #42436A;--md-sys-color-on-tertiary-container: #E0E0FF;--md-sys-color-error: #FFB4AB;--md-sys-color-error-container: #93000A;--md-sys-color-on-error-container: #FFDAD6;--md-sys-color-background: #111318;--md-sys-color-on-background: #E1E2E8;--md-sys-color-surface: #111318;--md-sys-color-on-surface: #E1E2E8;--md-sys-color-on-surface-variant: #C4C6D0;--md-sys-color-surface-container-lowest: #0C0E13;--md-sys-color-surface-container-low: #191C22;--md-sys-color-surface-container: #1D2026;--md-sys-color-surface-container-high: #282A30;--md-sys-color-surface-container-highest: #33353A;--md-sys-color-outline: #8E9199;--md-sys-color-outline-variant: #44474E;--md-sys-elevation-1: 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 1px 3px 1px rgba(0, 0, 0, .15);--md-sys-elevation-2: 0px 1px 2px 0px rgba(0, 0, 0, .3), 0px 2px 6px 2px rgba(0, 0, 0, .15);--md-sys-state-hover: rgba(225, 226, 232, .08);--md-sys-state-pressed: rgba(225, 226, 232, .12);--md-sys-shape-corner-extra-large: 28px;--md-sys-shape-corner-large: 16px;--md-sys-shape-corner-medium: 12px;--md-sys-shape-corner-small: 8px;--md-sys-shape-corner-full: 9999px;--md-sys-typescale-font: "Roboto", "Noto Sans TC", sans-serif;--duration-standard: .2s;--ease-standard: cubic-bezier(.2, 0, 0, 1)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}body{font-family:var(--md-sys-typescale-font);background:var(--md-sys-color-background);color:var(--md-sys-color-on-background);min-height:100vh;line-height:1.5;overflow-x:hidden}.bg-orbs{display:none}.container{max-width:1000px;margin:0 auto;padding:0 16px 48px;display:flex;flex-direction:column;min-height:100vh}.header{background:var(--md-sys-color-surface);color:var(--md-sys-color-on-surface);padding:16px;margin:0 -16px 32px;position:sticky;top:0;z-index:100}.header-content{display:flex;justify-content:space-between;align-items:center;max-width:1000px;margin:0 auto}.logo{display:flex;align-items:center;gap:16px}.logo-icon{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);border-radius:var(--md-sys-shape-corner-medium)}.logo-icon svg{width:28px;height:28px}.logo-text{display:flex;flex-direction:column}.logo-text h1{font-size:22px;font-weight:500;color:var(--md-sys-color-on-surface);line-height:28px}.subtitle{color:var(--md-sys-color-on-surface-variant);font-size:14px;font-weight:500;line-height:20px}.main-content{display:flex;flex-direction:column;gap:32px;flex:1}.services-section{display:flex;flex-direction:column;gap:16px}.section-title{font-size:16px;font-weight:500;color:var(--md-sys-color-on-surface-variant);display:flex;align-items:center;gap:12px;padding-left:16px}.service-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}.service-card{background:var(--md-sys-color-surface-container-low);border-radius:var(--md-sys-shape-corner-medium);padding:16px;display:flex;align-items:center;gap:16px;text-decoration:none;position:relative;overflow:hidden;transition:background var(--duration-standard) var(--ease-standard),transform var(--duration-standard) var(--ease-standard),box-shadow var(--duration-standard) var(--ease-standard);color:var(--md-sys-color-on-surface)}.service-card,.announcement-item,.widget-more,.icon-button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.service-card:before{content:"";position:absolute;inset:0;background:var(--md-sys-color-on-surface);opacity:0;transition:opacity var(--duration-standard) var(--ease-standard);z-index:0}.service-card:hover{box-shadow:var(--md-sys-elevation-1);transform:translateY(-2px)}.service-card:hover:before{opacity:.08}.service-card:active:before{opacity:.12}.service-card:active{background:var(--md-sys-color-surface-container);transform:scale(.985)}.service-icon-box{width:56px;height:56px;border-radius:var(--md-sys-shape-corner-full);display:flex;align-items:center;justify-content:center;background:var(--md-sys-color-surface-container-highest);color:var(--md-sys-color-primary);z-index:1}.card-grades .service-icon-box{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.card-elearning .service-icon-box{background:var(--md-sys-color-tertiary-container);color:var(--md-sys-color-on-tertiary-container)}.card-course .service-icon-box{background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container)}.card-webmail .service-icon-box{background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container)}.card-announcement .service-icon-box{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.service-info{display:flex;flex-direction:column;gap:4px;z-index:1;flex:1}.service-title{font-size:16px;font-weight:500;line-height:24px;color:var(--md-sys-color-on-surface)}.service-desc{font-size:14px;font-weight:400;line-height:20px;color:var(--md-sys-color-on-surface-variant)}.widget-section{display:flex;flex-direction:column;gap:16px}.announcement-widget{background:var(--md-sys-color-surface-container-low);border-radius:var(--md-sys-shape-corner-extra-large);padding:24px}.widget-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.widget-actions{display:flex;align-items:center;gap:8px}.icon-button{background:transparent;border:none;color:var(--md-sys-color-on-surface-variant);width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden;transition:background var(--duration-standard) var(--ease-standard),color var(--duration-standard) var(--ease-standard)}.icon-button:hover:not(:disabled){background:var(--md-sys-state-hover);color:var(--md-sys-color-on-surface)}.icon-button:active:not(:disabled){background:var(--md-sys-state-pressed)}.icon-button:disabled{opacity:.38;cursor:not-allowed}.widget-title{font-size:22px;font-weight:400;line-height:28px;color:var(--md-sys-color-on-surface);display:flex;align-items:center;gap:12px}.widget-more{font-size:14px;font-weight:500;color:var(--md-sys-color-primary);text-decoration:none;padding:10px 24px;border-radius:var(--md-sys-shape-corner-full);position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;transition:background var(--duration-standard) var(--ease-standard)}.widget-more:before{content:"";position:absolute;inset:0;background:var(--md-sys-color-primary);opacity:0;transition:opacity var(--duration-standard) var(--ease-standard)}.widget-more:hover:before{opacity:.08}.widget-more:active:before{opacity:.12}.announcement-list{display:flex;flex-direction:column}.announcement-item{display:flex;gap:16px;padding:12px 16px;border-radius:var(--md-sys-shape-corner-medium);text-decoration:none;position:relative;overflow:hidden;transition:background var(--duration-standard) var(--ease-standard);align-items:center}.announcement-item:before{content:"";position:absolute;inset:0;background:var(--md-sys-color-on-surface);opacity:0;transition:opacity var(--duration-standard) var(--ease-standard);z-index:0}.announcement-item:hover:before{opacity:.08}.announcement-item:active:before{opacity:.12}.announcement-item:active{background:var(--md-sys-color-surface-container);transform:scale(.99)}.interactive-ripple{position:absolute;border-radius:50%;transform:scale(0);background:#e1e2e847;pointer-events:none;animation:ripple-expand .52s cubic-bezier(.2,0,0,1);z-index:2}@keyframes ripple-expand{to{transform:scale(1);opacity:0}}.announcement-date{display:flex;flex-direction:column;align-items:center;justify-content:center;width:64px;height:64px;background:var(--md-sys-color-surface-container-highest);border-radius:var(--md-sys-shape-corner-medium);flex-shrink:0;z-index:1}.announcement-date .day{font-size:22px;font-weight:500;color:var(--md-sys-color-on-surface);line-height:1.2}.announcement-date .month{font-size:12px;color:var(--md-sys-color-on-surface-variant);font-weight:500;text-transform:uppercase}.announcement-content{display:flex;flex-direction:column;justify-content:center;gap:4px;z-index:1;flex:1}.announcement-tag{font-size:11px;font-weight:500;padding:2px 8px;border-radius:var(--md-sys-shape-corner-small);background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);width:fit-content;text-transform:uppercase;letter-spacing:.5px;line-height:16px}.tag-urgent{background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container)}.announcement-text{font-size:16px;line-height:24px;color:var(--md-sys-color-on-surface);font-weight:400;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.footer{padding:32px 24px;text-align:center;color:var(--md-sys-color-on-surface-variant)}.footer p{font-size:14px;line-height:20px}@media(max-width:600px){.service-grid{grid-template-columns:1fr}}