@import url('/static/css/tokens.css');
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;font-size:var(--fs-14,14px);line-height:1.55}
a{color:var(--teal);text-decoration:none}
button,input,select,textarea{font:inherit}
button,.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:46px;padding:9px 16px;border:1px solid transparent;border-radius:12px;background:var(--teal);color:white;font-weight:650;cursor:pointer;text-align:center}
button:hover,.button:hover{filter:brightness(.95)}
button:disabled{opacity:.45;cursor:not-allowed}
.secondary{background:white;color:var(--teal);border-color:var(--line)}
.white{background:#fff;color:var(--teal)}
.line-button{background:#06a84f;width:100%}
input,select,textarea{width:100%;border:1px solid #cbd6db;border-radius:10px;padding:11px 12px;background:white;color:var(--ink);min-height:46px}
textarea{resize:vertical}
input[type=checkbox]{width:20px;height:20px;min-height:20px;accent-color:var(--teal)}
label{display:block;font-weight:600;margin:10px 0 6px}
small,.small{font-size:var(--fs-12,12px)}
h1,h2,h3,p{margin:0 0 8px}
h1{font-size:clamp(23px,3vw,29px);line-height:1.25;letter-spacing:-.8px}
h2{font-size:var(--fs-20,20px);line-height:1.45}
h3{font-size:var(--fs-16,16px)}
p{overflow-wrap:anywhere}
form p{margin-bottom:18px}
.muted{color:var(--muted)}
.eyebrow{font-size:var(--fs-11,11px);letter-spacing:2px;font-weight:750;color:var(--muted);text-transform:uppercase}
.topbar{height:68px;background:rgba(255,255,255,.96);display:flex;align-items:center;justify-content:space-between;padding:0 26px;border-bottom:1px solid var(--line);gap:16px}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:var(--fs-17,17px);color:var(--ink);line-height:1.25}
.brand small{display:block;font-size:var(--fs-11,11px);font-weight:500;color:var(--muted);margin-top:4px}
.brand-icon{background:var(--teal);width:42px;height:42px;border-radius:13px;display:grid;place-content:center;color:white;font-size:var(--fs-28,28px);position:relative}
.brand-icon span{position:absolute;right:5px;top:1px;font-size:var(--fs-23,23px);color:#b4d36f}
.top-actions{display:flex;align-items:center;gap:18px}
.top-actions select{font-size:var(--fs-12,12px);width:115px;border:0;background:#f4f7f8;min-height:38px;padding:8px}
.icon-link{font-size:var(--fs-26,26px)}
.layout{display:flex;max-width:1600px;margin:auto}
.sidebar{width:200px;flex-shrink:0;padding:22px 16px}
.sidebar a{display:block;padding:12px 18px;border-radius:10px;color:var(--muted);font-weight:600;margin:4px 0}
.sidebar a.active{background:#e3eeeb;color:var(--teal)}
.sidebar .eyebrow{padding:0 18px}
main{padding:24px 26px;flex:1;min-width:0;max-width:1200px;margin:0 auto;width:100%}
.page-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.page-heading p:last-child{margin-bottom:0}
.accent-dot{color:var(--lime)}
.role-badge{font-size:var(--fs-12,12px);padding:7px 14px;border:1px solid var(--line);border-radius:20px;background:white}
.card{background:white;border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px;box-shadow:0 4px 18px rgba(24,52,64,.025)}
.hero-card{border-radius:18px;background:linear-gradient(115deg,#e1f2ed,#edf5fd);color:var(--ink);padding:22px 26px;display:flex;justify-content:space-between;align-items:center;overflow:hidden;margin-bottom:16px}
.hero-card h2{font-size:var(--fs-23,23px);margin-top:10px}
.hero-card p{color:#557a7d}
.hero-symbol{font-size:100px;line-height:1;color:#80b5b3;position:relative;padding:10px 35px}
.hero-symbol span{position:absolute;right:27px;bottom:15px;background:var(--lime);color:var(--teal);font-size:var(--fs-35,35px);border-radius:50%;width:55px;height:55px;display:grid;place-items:center;border:4px solid #e8f5f0}
.tag{display:inline-flex;align-items:center;background:#e8f2ee;color:#236956;border-radius:7px;padding:3px 9px;font-size:var(--fs-11,11px);font-weight:700}
.tag.light{background:#cce8df;color:#2b6e5e}
.tag.orange{background:#fff0e2;color:#9c5927}
.quick-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.quick{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:center;padding:20px;color:var(--ink)}
.quick small{color:var(--muted);grid-column:2}
.tile-icon{grid-row:span 2;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:var(--fs-23,23px)}
.blue{background:#e3eef6;color:#4a7ea3}
.peach{background:#fcebe0;color:#c57a43}
.lilac{background:#eee9f7;color:#8b71b1}
.two-columns{display:grid;grid-template-columns:1.1fr 1fr;gap:16px}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:16px}
.section-heading h2,.section-heading h3{margin-bottom:0}
.section-heading a{font-size:var(--fs-12,12px);font-weight:600}
.schedule-card{display:flex;gap:18px;color:var(--ink)}
.schedule-card h3{margin:9px 0 5px}
.schedule-card p{font-size:var(--fs-12,12px);color:var(--muted);margin-bottom:3px}
.schedule-card small{color:var(--muted)}
.date-block{min-width:55px;border-right:1px solid var(--line);padding-right:16px;display:flex;flex-direction:column;align-items:center}
.date-block strong{font-size:var(--fs-30,30px);line-height:1.3}
.date-block span{color:var(--muted);font-size:var(--fs-12,12px)}
.notice-card{display:flex;gap:14px;color:var(--ink)}
.notice-card small{color:var(--muted)}
.notice-card h3{margin:7px 0}
.notice-card p{color:var(--muted);font-size:var(--fs-13,13px);margin-bottom:0}
.notice-dot{width:9px;height:9px;flex-shrink:0;background:var(--lime);border-radius:50%;margin-top:6px}
.empty{padding:24px 16px;text-align:center;color:var(--muted);border-style:dashed}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{display:flex;flex-direction:column;gap:5px;color:var(--ink)}
.stat>span{color:var(--muted);font-size:var(--fs-13,13px)}
.stat strong{font-size:var(--fs-35,35px);line-height:1.3}
.stat small{color:var(--muted)}
.warn strong{color:#c67c39}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px}
.toolbar form{margin:0}
.table-wrap{overflow-x:auto;padding:0}
table{border-collapse:collapse;width:100%;font-size:var(--fs-13,13px);white-space:nowrap}
th{text-align:left;background:#f8fafb;color:var(--muted);font-weight:600;font-size:var(--fs-11,11px);padding:12px 16px}
td{padding:12px 16px;border-top:1px solid var(--line)}
td details{white-space:normal;min-width:180px;max-width:260px}
td details p{font-size:var(--fs-11,11px)}
.pill-link{background:#edf3f2;padding:6px 12px;border-radius:7px;display:inline-block}
.search{background:white;border-radius:12px;border:1px solid var(--line);padding:9px 15px}
.search form{display:flex;gap:8px;padding-top:10px}
.search input{min-width:220px}
summary{cursor:pointer;font-weight:600;color:var(--teal);padding:5px 0}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 22px}
.form-grid small{color:var(--muted);display:block}
.form-actions{display:flex;align-items:center;gap:18px;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.errorlist,.error{color:#a53333;background:#fff1f0;border-radius:10px;padding:12px 18px;font-size:var(--fs-13,13px)}
.errorlist{list-style:none}
.flash,.success{color:#226b55}
.flash{padding:14px;background:#e1f1e7;border-radius:12px;margin-bottom:20px}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.menu-item{display:flex;justify-content:space-between;align-items:center;color:var(--ink);font-weight:650}
.menu-item span{color:var(--muted)}
.menu-item h3{margin:0 0 4px}
.menu-item small{font-weight:400;color:var(--muted)}
.checkin-card{max-width:620px;margin-left:auto;margin-right:auto;text-align:center}
.checkin-card p{color:var(--muted);font-size:var(--fs-13,13px)}
.checkin-card form{max-width:380px;margin:20px auto}
.checkin-card button{width:100%;margin-top:14px}
.checkin-card details{text-align:left;margin-top:20px}
.location-symbol{font-size:80px;color:var(--teal);line-height:1.4}
#checkin-result{font-weight:650;padding:12px}
#checkin-result.error{color:#a53333}
.day-heading{font-size:var(--fs-14,14px);color:var(--muted);margin:28px 0 12px}
.timetable-row{display:flex;gap:24px}
.time-block{display:flex;flex-direction:column;min-width:60px;border-right:3px solid #b4d36f;padding-right:24px}
.time-block strong{font-size:var(--fs-19,19px)}
.time-block span{font-size:var(--fs-12,12px);color:var(--muted)}
.course-info h2{margin:8px 0}
.course-info .toolbar{margin-bottom:0}
.course-info p{font-size:var(--fs-13,13px)}
.cancelled{opacity:.65}
.cancelled h2{text-decoration:line-through}
.steps{display:flex;gap:24px;color:var(--teal);font-size:var(--fs-12,12px);font-weight:700;border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:20px}
.chat-history{display:flex;flex-direction:column;gap:18px}
.message-bubble{background:#f2f5f7;border-radius:15px 15px 15px 3px;padding:16px;max-width:85%;align-self:flex-start}
.message-bubble.own{align-self:flex-end;background:#e6f0eb;border-radius:15px 15px 3px 15px}
.message-bubble small{color:var(--muted)}
.message-bubble p{margin:8px 0 0}
.checkbox-label{display:flex;gap:10px;align-items:center;font-weight:400}
.post-preview{display:block;color:var(--ink)}
.post-preview small{color:var(--muted)}
.post-preview h2{margin-top:10px}
.resource-card h2{font-size:var(--fs-18,18px);margin-top:14px}
.resource-card p{font-size:var(--fs-13,13px);color:var(--muted)}
.login-shell{display:grid;grid-template-columns:1fr 1fr;gap:60px;max-width:950px;margin:30px auto}
.login-intro{padding:20px 0}
.login-intro h1{font-size:var(--fs-42,42px);margin:20px 0}
.login-intro p{color:var(--muted)}
.login-card{padding:34px}
.login-card h2{font-size:var(--fs-27,27px);margin-top:20px}
.login-card details{border-top:1px solid var(--line);margin-top:26px;padding-top:18px}
.orbit{height:210px;position:relative;display:grid;place-items:center}
.orbit>span{font-size:160px;color:#c9ded8}
.orbit i,.orbit b{position:absolute;font-style:normal;display:grid;place-content:center;border-radius:18px;width:66px;height:66px;transform:rotate(-12deg);background:var(--teal);color:white;font-size:var(--fs-25,25px);left:25%;top:28%}
.orbit b{left:60%;top:50%;background:var(--lime);color:var(--teal);transform:rotate(12deg)}
.demo-bar{text-align:center;background:#edf2d9;color:#56652e;font-size:var(--fs-11,11px);padding:7px 15px}
.demo-login{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.demo-login p{width:100%;font-size:var(--fs-12,12px);color:var(--muted);margin:0}
.demo-login button{font-size:var(--fs-12,12px);padding:8px 12px}
.bottom-nav{display:none}
footer{font-size:var(--fs-11,11px);color:#8b999f;text-align:center;margin:40px 0 0}
dl{display:grid;grid-template-columns:100px 1fr;gap:14px;font-size:var(--fs-13,13px)}
dt{color:var(--muted)}
dd{margin:0}
dialog{border:1px solid var(--line);border-radius:20px;max-width:480px;width:calc(100% - 40px);padding:30px}
dialog::backdrop{background:#08292d99}
dialog h2{margin-top:15px}
dialog button{width:100%;margin-top:10px}
.wrap{overflow-wrap:anywhere}
.skip{position:absolute;left:15px;top:-60px}
.skip:focus{top:10px;background:white;padding:10px;z-index:5}
:focus-visible{outline:3px solid #e3ad5e;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:1100px){.sidebar{width:185px;padding:30px 12px}
main{padding:30px 24px}
.two-columns{grid-template-columns:1fr}
.stat-grid{grid-template-columns:repeat(2,1fr)}
.quick{grid-template-columns:1fr}
.quick small{grid-column:1}
.tile-icon{margin-bottom:10px;grid-row:auto}
.hero-symbol{font-size:120px;padding:10px}
.hero-symbol span{right:0}
}

@media(max-width:700px){.topbar{height:62px;padding:0 14px}
.brand{font-size:var(--fs-15,15px);gap:9px}
.brand-icon{width:35px;height:35px;font-size:var(--fs-24,24px)}
.brand small{max-width:150px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--fs-10,10px)}
.top-actions{gap:8px}
.top-actions select{width:95px;font-size:var(--fs-11,11px)}
.icon-link{display:none}
.sidebar{display:none}
main{padding:18px 14px 104px}
.page-heading{margin-bottom:16px;gap:12px;align-items:flex-start}
.page-heading .button{font-size:var(--fs-12,12px);padding:8px 12px;min-height:40px}
.page-heading h1{font-size:var(--fs-24,24px)}
.page-heading p{font-size:var(--fs-12,12px)}
.role-badge{font-size:var(--fs-10,10px);white-space:nowrap;padding:5px 9px}
.hero-card{padding:18px;border-radius:16px;margin-bottom:14px}
.hero-card h2{font-size:var(--fs-20,20px);max-width:100%}
.hero-card p{font-size:var(--fs-12,12px);max-width:100%}
.hero-symbol{display:none}
.hero-card .button{font-size:var(--fs-13,13px);padding:10px 16px;margin-top:5px}
.card{padding:14px;border-radius:13px}
.quick-grid{gap:10px}
.quick{padding:15px 12px}
.quick strong{font-size:var(--fs-12,12px)}
.quick small{font-size:var(--fs-10,10px)}
.tile-icon{width:35px;height:35px;font-size:var(--fs-20,20px);border-radius:10px}
.two-columns{gap:6px}
.section-heading{margin:8px 0 10px}
.section-heading h2{font-size:var(--fs-18,18px)}
.schedule-card{gap:16px}
.stat-grid{gap:12px}
.stat strong{font-size:var(--fs-31,31px)}
.stat>span{font-size:var(--fs-12,12px)}
.stat small{font-size:var(--fs-10,10px)}
.toolbar{gap:8px}
.toolbar .button,.toolbar button{font-size:var(--fs-12,12px);padding:9px 13px}
.table-wrap{padding:0}
th,td{padding:14px}
.form-grid{grid-template-columns:1fr;gap:12px}
.form-actions{flex-direction:column;align-items:stretch}
.form-actions span{text-align:center}
.menu-grid{grid-template-columns:1fr;gap:0}
.menu-item{padding:14px}
.menu-item span{font-size:var(--fs-20,20px)}
.bottom-nav{position:fixed;display:flex;justify-content:space-around;bottom:0;left:0;right:0;padding:10px 10px calc(9px + env(safe-area-inset-bottom));background:#fffffff5;backdrop-filter:blur(10px);border-top:1px solid var(--line);z-index:10}
.bottom-nav a{display:flex;align-items:center;flex-direction:column;font-size:var(--fs-10,10px);color:#839298;min-width:52px;line-height:1.4;gap:4px}
.bottom-nav a span{font-size:var(--fs-23,23px);line-height:1.1}
.bottom-nav a.active{color:var(--teal);font-weight:800}
.login-shell{grid-template-columns:1fr;gap:16px;margin:0}
.login-intro{padding:0}
.login-intro h1{font-size:var(--fs-32,32px);margin:14px 0}
.login-intro p{font-size:var(--fs-13,13px)}
.orbit{display:none}
.login-card{padding:25px}
.login-intro .muted{display:none}
.timetable-row{gap:16px}
.time-block{padding-right:16px}
.time-block strong{font-size:var(--fs-16,16px)}
.course-info h2{font-size:var(--fs-18,18px)}
.steps{gap:18px;font-size:var(--fs-10,10px)}
.message-bubble{max-width:95%}
.checkin-card{padding:24px 18px}
.search{max-width:100%;width:100%}
.search input{min-width:0}
.demo-bar{font-size:var(--fs-10,10px)}
.checkbox-field{padding:8px 0}
footer{margin-top:30px}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}
}