:root{--color-primary:#0077b6;--color-primary-light:#e8f4fa;--color-primary-hover:#005f8a;--color-secondary:#48cae4;--color-success:#2a9d8f;--color-warning:#e9c46a;--color-danger:#e76f51;--color-danger-light:#fdf0ed;--color-text:#2d3436;--color-text-secondary:#636e72;--color-text-light:#b2bec3;--color-bg:#fff;--color-bg-alt:#f8f9fa;--color-bg-card:#fff;--color-border:#ced4da;--font-family:"Noto Sans TC", "Microsoft JhengHei", "Inter", -apple-system, sans-serif;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:2rem;--space-xs:.25rem;--space-sm:.5rem;--space-md:1rem;--space-lg:1.5rem;--space-xl:2rem;--space-2xl:3rem;--space-3xl:4rem;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-full:9999px;--shadow-sm:0 1px 3px #0000000f;--shadow-md:0 4px 12px #00000014;--shadow-lg:0 8px 24px #0000001a;--transition-fast:.15s ease;--transition-base:.25s ease}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;font-size:16px}body{font-family:var(--font-family);color:var(--color-text);background-color:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.6}a{color:var(--color-primary);transition:color var(--transition-fast);text-decoration:none}a:hover{color:var(--color-primary-hover)}.container{max-width:1200px;padding:0 var(--space-lg);margin:0 auto}.page{flex-direction:column;min-height:100vh;display:flex}.content{padding:var(--space-2xl) 0;flex:1}.scroll-region-y{max-height:min(72vh,100vh - 10.5rem);padding-right:var(--space-xs);-webkit-overflow-scrolling:touch;overscroll-behavior:contain;overflow-y:auto}.table-container.scroll-region-y{overflow-x:auto}.header{background:var(--color-bg);border-bottom:1px solid var(--color-border);padding:var(--space-md) 0;z-index:100;position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;display:flex}.header-logo{align-items:center;gap:var(--space-sm);font-size:var(--font-size-lg);color:var(--color-text);font-weight:700;display:flex}.header-logo .logo-icon{background:var(--color-primary);border-radius:var(--radius-sm);color:#fff;width:36px;height:36px;font-weight:800;font-size:var(--font-size-sm);justify-content:center;align-items:center;display:flex}.header-nav{align-items:center;gap:var(--space-md) var(--space-xl);flex-wrap:wrap;list-style:none;display:flex}.header-nav a{color:var(--color-text-secondary);font-size:var(--font-size-sm);padding:var(--space-xs) 0;transition:all var(--transition-fast);border-bottom:2px solid #0000;font-weight:500}.header-nav a:hover,.header-nav a.active{color:var(--color-primary);border-bottom-color:var(--color-primary)}.card{background:var(--color-bg-card);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-lg);transition:box-shadow var(--transition-base)}.card:hover{box-shadow:var(--shadow-md)}.card-title{font-size:var(--font-size-lg);margin-bottom:var(--space-sm);font-weight:600}.card-meta{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.btn{justify-content:center;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border-radius:var(--radius-full);font-family:var(--font-family);font-size:var(--font-size-sm);cursor:pointer;transition:all var(--transition-fast);border:none;font-weight:500;text-decoration:none;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover);box-shadow:var(--shadow-sm)}.btn-secondary{color:var(--color-primary);border:1px solid var(--color-primary);background:0 0}.btn-secondary:hover:not(:disabled){background:var(--color-primary-light)}.btn-danger{background:var(--color-danger);color:#fff}.btn-danger:hover:not(:disabled){background:#d35640}.btn-lg{padding:var(--space-md) var(--space-xl);font-size:var(--font-size-base)}.btn-sm{padding:var(--space-xs) var(--space-md);font-size:var(--font-size-xs)}.btn-xs{gap:4px;padding:2px 8px;font-size:.75rem}.btn-square{border-radius:var(--radius-sm)}.btn-ghost{background:0 0;border:1px solid #0000}.btn-ghost-secondary{color:var(--color-primary)}.btn-ghost-secondary:hover:not(:disabled){background:var(--color-primary-light)}.btn-ghost-danger{color:var(--color-danger)}.btn-ghost-danger:hover:not(:disabled){background:var(--color-danger-light)}.form-group{margin-bottom:var(--space-lg)}.form-label{font-size:var(--font-size-sm);margin-bottom:var(--space-xs);color:var(--color-text-secondary);font-weight:500;display:block}.form-input{width:100%;padding:var(--space-sm) var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-md);font-family:var(--font-family);font-size:var(--font-size-base);transition:border-color var(--transition-fast);background:var(--color-bg);color:var(--color-text)}.form-input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #0077b61a}.form-input::placeholder{color:var(--color-text-light)}textarea.form-input{resize:vertical;min-height:100px}.form-error{color:var(--color-danger);font-size:var(--font-size-sm);margin-top:var(--space-xs)}.table-container{overflow-x:auto}.table{border-collapse:collapse;width:100%;font-size:var(--font-size-sm)}.table th,.table td{padding:var(--space-sm) var(--space-md);text-align:left;border-bottom:1px solid var(--color-border)}.table th{color:var(--color-text-secondary);background:var(--color-bg-alt);white-space:nowrap;font-weight:600}.table tr:hover td{background:var(--color-bg-alt)}.badge{border-radius:var(--radius-full);font-size:var(--font-size-xs);align-items:center;padding:2px 10px;font-weight:500;display:inline-flex}.badge-primary{background:var(--color-primary-light);color:var(--color-primary)}.badge-success{color:var(--color-success);background:#e6f5f0}.badge-warning{color:#b8860b;background:#fef9e7}.badge-danger{background:var(--color-danger-light);color:var(--color-danger)}.alert{padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);font-size:var(--font-size-sm);margin-bottom:var(--space-md)}.alert-info{background:var(--color-primary-light);color:var(--color-primary);border:1px solid #0077b633}.alert-warning{color:#b8860b;background:#fef9e7;border:1px solid #e9c46a4d}.alert-danger{background:var(--color-danger-light);color:var(--color-danger);border:1px solid #e76f5133}.text-center{text-align:center}.text-right{text-align:right}.text-secondary{color:var(--color-text-secondary)}.text-sm{font-size:var(--font-size-sm)}.flex{display:flex}.flex-col{flex-direction:column}.flex-col-reverse{flex-direction:column-reverse}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.flex-1{flex:1}.min-w-0{min-width:0}.shrink-0{flex-shrink:0}.self-end{align-self:flex-end}.self-center{align-self:center}.self-auto{align-self:auto}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}.items-center{align-items:center}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.btn svg,a.btn svg{flex-shrink:0;display:block}.gap-xs{gap:var(--space-xs)}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}.gap-xl{gap:var(--space-xl)}.gap-x-lg{column-gap:var(--space-lg)}.gap-y-xs{row-gap:var(--space-xs)}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}.mt-3xl{margin-top:var(--space-3xl)}.mb-xs{margin-bottom:var(--space-xs)}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}.mb-2xl{margin-bottom:var(--space-2xl)}.mb-3xl{margin-bottom:var(--space-3xl)}.ml-auto{margin-left:auto}.mr-xs{margin-right:var(--space-xs)}.w-full{width:100%}.max-w-md{max-width:28rem}.mx-auto{margin-left:auto;margin-right:auto}.text-xs{font-size:var(--font-size-xs)}.text-lg{font-size:var(--font-size-lg)}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.leading-snug{line-height:1.35}.h-screen{min-height:100dvh}.bg-alt{background-color:var(--color-bg-alt)}.text-danger{color:var(--color-danger)}.text-primary{color:var(--color-primary)}.text-warning{color:#b8860b}.p-xs{padding:var(--space-xs)}.p-sm{padding:var(--space-sm)}.p-md{padding:var(--space-md)}.py-sm{padding-top:var(--space-sm);padding-bottom:var(--space-sm)}.py-3xl{padding-top:var(--space-3xl);padding-bottom:var(--space-3xl)}.py-xl{padding-top:var(--space-xl);padding-bottom:var(--space-xl)}.px-sm{padding-left:var(--space-sm);padding-right:var(--space-sm)}.pointer{cursor:pointer}.opacity-90{opacity:.9}.border-2{border-style:solid;border-width:2px}.border-primary{border-color:var(--color-primary)}.border-dashed{border-style:dashed}.transition-all{transition:color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast)}.uppercase{text-transform:uppercase}.tracking-wide{letter-spacing:.04em}.tabular-nums{font-variant-numeric:tabular-nums}.print\:max-w-none{max-width:none}@media (width>=640px){.sm\:flex-row{flex-direction:row}.sm\:flex-wrap{flex-wrap:wrap}.sm\:items-end{align-items:flex-end}.sm\:shrink-0{flex-shrink:0}.sm\:self-end{align-self:flex-end}.sm\:w-\[8rem\]{width:8rem}.sm\:min-w-\[12rem\]{min-width:12rem}.sm\:w-auto{width:auto}}@media (width>=1024px){.lg\:flex-row{flex-direction:row}.lg\:justify-between{justify-content:space-between}.lg\:items-start{align-items:flex-start}.lg\:items-end{align-items:flex-end}}.teacher-layout{gap:var(--space-lg);flex-direction:column;min-height:min(600px,85dvh);display:flex}.teacher-layout__nav{width:100%}.teacher-layout__main{flex:1;min-width:0}@media (width>=900px){.teacher-layout{flex-direction:row;align-items:flex-start}.teacher-layout__nav{flex-shrink:0;width:220px}}.home-role-cards{align-items:stretch;gap:var(--space-lg);flex-direction:column;width:100%;max-width:720px;margin:0 auto;display:flex}.home-role-card{width:100%;max-width:360px;padding:var(--space-2xl) var(--space-xl);margin-left:auto;margin-right:auto}@media (width>=700px){.home-role-cards{flex-flow:wrap;justify-content:center;align-items:stretch;max-width:900px}.home-role-card{flex:260px;max-width:340px;margin-left:0;margin-right:0}}.home-hero-title{font-size:clamp(1.5rem,5vw,2.5rem);font-weight:800;line-height:1.25}.exam-room-bar{gap:var(--space-md);flex-wrap:wrap;align-items:flex-start}.exam-room-bar>.flex{flex-wrap:wrap;min-width:0}@media (width>=640px){.exam-room-bar{flex-wrap:nowrap;align-items:center}}.spinner{border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;width:24px;height:24px;animation:.6s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.header-inner--responsive{gap:var(--space-md);flex-wrap:wrap;justify-content:space-between;align-items:center}@media (width<=768px){.container{padding-left:max(var(--space-md), env(safe-area-inset-left,0px));padding-right:max(var(--space-md), env(safe-area-inset-right,0px))}.content{padding-top:var(--space-xl);padding-bottom:var(--space-xl)}.header{padding-top:max(var(--space-sm), env(safe-area-inset-top,0px))}.header-logo{font-size:var(--font-size-base);min-width:0}.header-logo span{line-height:1.3}.header-nav{justify-content:flex-end;gap:var(--space-sm) var(--space-md);flex-wrap:wrap;width:100%;max-width:100%}.header-nav .btn{justify-content:center;width:100%}.header-nav li:has(.btn){width:100%}.card{padding:var(--space-md)}.table th,.table td{padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-xs)}.table th{white-space:normal;vertical-align:top}.scroll-region-y{max-height:min(65vh,100dvh - 12rem)}}@media (width<=480px){html{font-size:15px}.btn{min-height:44px;padding-left:var(--space-md);padding-right:var(--space-md)}.btn-xs{min-height:36px}.btn-lg:not(.sm\:w-auto){width:100%;max-width:100%}}