:root{--color-main:#f8c11c;--color-main-dim:rgba(248,193,28,.45);--color-font:#414141;--color-black:#03263b;--color-white:#fff;--color-green:#62a451;--color-red:#cc4a4a;--color-muted:#6b7280;--color-border:#e8e8e8;--color-surface:#fff;--color-page:#f4f5f7;--radius:12px;--radius-lg:16px;--shadow:0 4px 24px rgba(3,38,59,.08);--header-h:56px;--container-max:1120px;--font-sans:"PingFang TC","Noto Sans TC","Helvetica Neue",Arial,sans-serif}*,:after,:before{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;min-height:100dvh;font-family:var(--font-sans);color:var(--color-font);background:var(--color-page);line-height:1.5}img{max-width:100%;height:auto}a{color:inherit;text-decoration:none}.auth-page{position:relative;min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px}.auth-page__bg{position:fixed;inset:0;z-index:0;background:#111 url(../images/bg.png) 50%/cover no-repeat}.auth-page__bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#00000059,#0000008c)}.auth-panel{position:relative;z-index:1;width:100%;max-width:420px}.auth-panel__logo{width:80px;height:auto;margin-bottom:24px}.auth-panel__title{margin:0 0 8px;font-size:clamp(1.5rem,4vw,1.75rem);font-weight:700;color:var(--color-white)}.auth-panel__subtitle{margin:0 0 32px;font-size:1rem;color:#fffc}.app-shell{min-height:100dvh;display:flex;flex-direction:column}.app-header{position:sticky;top:0;z-index:40;background:#111 url(../images/bg.png) top/cover no-repeat;border-bottom:3px solid var(--color-main)}.app-header__inner{max-width:var(--container-max);margin:0 auto;padding:12px 16px;display:flex;align-items:center;gap:12px;min-height:var(--header-h)}.app-header__logo{width:40px;height:40px;-o-object-fit:contain;object-fit:contain;flex-shrink:0}.app-header__title{flex:1;min-width:0;margin:0;font-size:1.05rem;font-weight:700;color:var(--color-white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.app-main{flex:1;width:100%;max-width:var(--container-max);margin:0 auto;padding:16px}@media(min-width:768px){.app-main{padding:24px}}.field{margin-bottom:20px}.field__label{display:block;margin-bottom:6px;font-size:.875rem;font-weight:500;color:#ffffffe6}.field__label--dark{color:var(--color-font)}.input{width:100%;padding:12px 0;font-size:1.0625rem;font-family:inherit;color:var(--color-white);background:transparent;border:none;border-bottom:1px solid hsla(0,0%,100%,.45);outline:none;transition:border-color .2s}.input::-moz-placeholder{color:#ffffff73}.input::placeholder{color:#ffffff73}.input:focus{border-bottom-color:var(--color-white)}.input--light{padding:12px 14px;color:var(--color-black);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius)}.input--light::-moz-placeholder{color:#9ca3af}.input--light::placeholder{color:#9ca3af}.input--light:focus{border-color:var(--color-main);box-shadow:0 0 0 3px var(--color-main-dim)}.input-row{display:flex;gap:8px;align-items:flex-end}.input-row__prefix{flex-shrink:0;padding:12px 4px;font-size:1rem;color:var(--color-white);background:none;border:none;border-bottom:1px solid hsla(0,0%,100%,.45);cursor:default}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:0 20px;min-height:48px;font-family:inherit;font-size:1rem;font-weight:600;line-height:1.2;border:none;border-radius:var(--radius);cursor:pointer;transition:opacity .2s,transform .15s}.btn:disabled{opacity:.55;cursor:not-allowed}.btn:not(:disabled):active{transform:scale(.98)}.btn--primary{width:100%;background:var(--color-main);color:var(--color-black)}.btn--ghost{background:transparent;color:#ffffffd9;min-height:40px;padding:0 12px}.btn--ghost-dark{color:var(--color-font);border:1px solid var(--color-border);background:var(--color-surface)}.btn--sm{min-height:36px;padding:0 14px;font-size:.875rem}.btn--tab{flex:1;min-height:44px;background:var(--color-surface);color:var(--color-font);border:1px solid var(--color-border)}.btn--tab.is-active{background:var(--color-main);color:var(--color-black);border-color:var(--color-main);font-weight:700}.card{background:var(--color-surface);border-radius:var(--radius-lg);box-shadow:var(--shadow);padding:16px 18px}.card--clickable{cursor:pointer;transition:box-shadow .2s,transform .15s}.card--clickable:hover{box-shadow:0 8px 32px #03263b1f;transform:translateY(-1px)}.card__title{margin:0 0 4px;font-size:1.125rem;font-weight:700;color:var(--color-black)}.card__meta{margin:0;font-size:.875rem;color:var(--color-muted)}.card__meta--hint{margin-top:10px;font-size:.8125rem;line-height:1.45}.card__routes{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--color-border);font-size:.8125rem;color:var(--color-muted)}.card__routes p{margin:4px 0 0}.card__chevron{flex-shrink:0;width:20px;height:20px;color:var(--color-muted)}.badge{display:inline-block;padding:4px 10px;font-size:.75rem;font-weight:600;border-radius:999px;white-space:nowrap}.badge--present{background:#62a45126;color:var(--color-green)}.badge--late{background:#f8c11c40;color:#8a6d00}.badge--absent{background:#cc4a4a1f;color:var(--color-red)}.list-hint{margin:0 0 16px;padding:12px 14px;font-size:.9375rem;color:var(--color-font);background:#f8c11c26;border-left:3px solid var(--color-main);border-radius:var(--radius)}.student-grid{display:grid;gap:12px}@media(min-width:640px){.student-grid{grid-template-columns:repeat(2,1fr);gap:16px}}@media(min-width:1024px){.student-grid{grid-template-columns:repeat(3,1fr)}}.roll-list{display:flex;flex-direction:column;gap:10px}.roll-item{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}.tabs{display:flex;gap:8px;margin-bottom:20px}@media(min-width:768px){.tabs{max-width:480px}}.detail-layout{display:flex;flex-direction:column;gap:16px}@media(min-width:900px){.detail-layout--location{display:grid;grid-template-columns:1fr 1.1fr;gap:24px;align-items:start}}.location-info{display:flex;flex-direction:column;gap:12px}.location-address{line-height:1.5}.static-map-wrap{position:relative}.static-map{display:block;width:100%;min-height:280px;-o-object-fit:cover;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow);transition:opacity .2s ease}.static-map--loading{opacity:.92}.route-timeline{list-style:none;margin:0;padding:0}.route-timeline__item{display:flex;gap:12px;min-height:44px}.route-timeline__marker{display:flex;flex-direction:column;align-items:center;width:16px;flex-shrink:0}.route-timeline__dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--color-border,#d1d5db);background:var(--color-surface,#fff);flex-shrink:0}.route-timeline__line{flex:1;width:2px;min-height:20px;margin:4px 0;background:var(--color-border,#e5e7eb)}.route-timeline__body{display:flex;align-items:flex-start;gap:8px;padding-bottom:14px;font-size:.9375rem;line-height:1.4}.route-timeline__seq{flex-shrink:0;width:1.25rem;font-weight:600;color:var(--color-muted);font-size:.8125rem}.route-timeline__name{color:var(--color-text,#111)}.route-timeline__item--passed .route-timeline__dot{border-color:var(--color-green,#16a34a);background:var(--color-green,#16a34a)}.route-timeline__item--passed .route-timeline__line{background:var(--color-green,#16a34a)}.route-timeline__item--passed .route-timeline__name{color:var(--color-muted)}.route-timeline__item--active .route-timeline__dot{border-color:var(--color-primary,#dc2626);background:var(--color-primary,#dc2626);box-shadow:0 0 0 3px #dc262633}.route-timeline__item--active .route-timeline__name,.route-timeline__school-tag{font-weight:600;color:var(--color-primary,#dc2626)}.route-timeline__school-tag{flex-shrink:0;padding:2px 6px;font-size:.6875rem;line-height:1.2;background:#dc262614;border-radius:4px}.route-timeline__item--school .route-timeline__name{font-weight:600}.route-timeline__item--school.route-timeline__item--active .route-timeline__dot{border-color:var(--color-primary,#dc2626);background:var(--color-primary,#dc2626)}@media(min-width:900px){.static-map{min-height:400px}}.empty,.loading{text-align:center;padding:48px 16px;color:var(--color-muted)}.empty--illustrated{padding-top:24px}.live-location-waiting{display:flex;flex-direction:column;align-items:center;margin:0 auto}.live-location-waiting__img{display:block;width:min(100%,280px);height:auto;margin:0 auto 20px}.live-location-waiting__text{max-width:22rem;margin:0;font-size:.9375rem;line-height:1.55;color:var(--color-muted)}.error-msg{text-align:center;padding:32px 16px;color:var(--color-red)}.warning-text{margin:8px 0 0;font-size:.875rem;color:#8a6d00}.back-link{display:inline-flex;align-items:center;gap:6px;margin-bottom:16px;padding:0;font-size:.9375rem;font-weight:500;color:var(--color-white);background:none;border:none;cursor:pointer}.back-link--dark{color:var(--color-black)}.back-link:hover{opacity:.85}.page-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:20px}.page-toolbar__heading{margin:0;font-size:1.25rem;font-weight:700;color:var(--color-black)}.toast-stack{position:fixed;bottom:24px;left:50%;transform:translate(-50%);z-index:100;display:flex;flex-direction:column;gap:8px;width:min(360px,calc(100% - 32px));pointer-events:none}.toast{padding:12px 16px;font-size:.9375rem;font-weight:500;color:var(--color-white);background:var(--color-black);border-radius:var(--radius);box-shadow:0 8px 32px #0003;pointer-events:auto;animation:toast-in .25s ease}.toast--success{background:var(--color-green)}.toast--error{background:var(--color-red)}@keyframes toast-in{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.spinner{width:32px;height:32px;margin:0 auto;border:3px solid var(--color-border);border-top-color:var(--color-main);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(1turn)}}