:root { --navy:#203f62; --green:#147558; --gold:#9a7015; --silver:#b7c0c9; --text:#293744; --muted:#65717c; }
* { box-sizing:border-box; }
body { margin:0; color:var(--text); background:#f5f4f1; font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif; }
.site-header { border-bottom:4px solid var(--gold); background:var(--navy); color:#fff; }
.brand-row { display:flex; justify-content:space-between; gap:20px; max-width:1600px; margin:auto; padding:22px 30px; }
.brand-row p { margin:0; font-weight:700; }.brand-row a { color:#fff; }
.public-content { max-width:1600px; min-height:calc(100vh - 180px); margin:auto; padding:30px; }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:24px; }
.eyebrow { color:var(--green); font-size:13px; font-weight:800; letter-spacing:.12em; }
h1 { margin:4px 0 8px; color:var(--navy); font-size:clamp(28px,4vw,42px); }.page-heading p { margin:0; }
.login-link,.preview-button,.download-button,.dialog-actions button { display:inline-flex; min-height:44px; align-items:center; justify-content:center; padding:9px 16px; border:1px solid var(--green); border-radius:5px; background:#fff; color:var(--green); font:inherit; font-weight:700; text-decoration:none; cursor:pointer; }
.download-button { background:var(--green); color:#fff; }
.class-card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr)); align-items:start; gap:22px; }
.class-card { min-width:0; overflow:hidden; border:1px solid var(--silver); border-top:4px solid var(--gold); border-radius:10px; background:#fff; box-shadow:0 4px 14px rgba(20,48,74,.09); }
.class-card > header { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:18px 22px; background:#f2f5f6; }
.class-card h2 { margin:0; color:var(--navy); font-size:25px; }.document-count { color:var(--muted); }
.plan-list { display:flex; flex-wrap:wrap; align-items:flex-start; gap:12px; padding:18px 22px; background:#fff; }
.plan-item { min-width:0; padding:0; background:#fff; }
.plan-item h3 { margin:0; font-size:20px; }
.subject-link { display:inline-flex; min-height:44px; align-items:center; justify-content:center; padding:8px 18px; border:2px solid var(--gold); border-radius:999px; color:var(--navy); font-weight:800; text-decoration:none; }
.subject-link:hover,.subject-link:focus { background:#fff8e8; color:var(--green); text-decoration:underline; text-underline-offset:4px; }
.public-message,.empty-state { padding:24px; border-left:5px solid var(--gold); background:#fff; }
.site-footer { padding:22px 30px; text-align:center; }.skip-link { position:absolute; left:-9999px; }.skip-link:focus { left:10px; top:10px; z-index:10; padding:10px; background:#fff; }
.preview-dialog { width:min(1500px,calc(100vw - 36px)); height:min(920px,calc(100vh - 36px)); height:min(920px,calc(100dvh - 36px)); padding:18px; border:2px solid var(--silver); border-top:4px solid var(--gold); border-radius:10px; color:var(--text); }
.preview-dialog::backdrop { background:rgba(32,63,98,.68); }.preview-dialog h2 { margin:0 0 6px; color:var(--navy); }.preview-dialog > p { margin:6px 0 10px; }
.preview-pdf { height:calc(100% - 118px); min-height:300px; border:1px solid var(--silver); }.preview-pdf iframe { width:100%; height:100%; border:0; background:#fff; }.preview-unavailable { padding:24px; background:#f2f5f6; }
.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:12px; }.dialog-actions button { color:var(--navy); border-color:var(--silver); }
@media(max-width:700px) { .brand-row,.page-heading { align-items:flex-start; flex-direction:column; }.public-content { padding:18px 12px; }.plan-list { padding:14px 16px; }.preview-dialog { width:calc(100vw - 16px); height:calc(100dvh - 16px); padding:12px; } }