:root { --ink:#163235; --muted:#5c7476; --line:#cbd9d8; --soft:#f3f8f7; --panel:#fff; --brand:#19665d; --brand-dark:#104a44; --warn:#b7612d; --page:#eaf0ef; }
* { box-sizing:border-box; }
body { margin:0; background:var(--page); color:var(--ink); font-family:-apple-system, BlinkMacSystemFont, "Noto Sans TC", "Segoe UI", sans-serif; line-height:1.5; }
button, input { font:inherit; } button { cursor:pointer; }
.topbar { position:sticky; top:0; z-index:10; height:58px; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 22px; background:#143f3c; color:#fff; box-shadow:0 1px 0 rgba(0,0,0,.1); }
.brand { color:#fff; text-decoration:none; font-size:18px; font-weight:750; }.brand span { color:#bed9d3; font-weight:500; }
.top-actions { display:flex; align-items:center; gap:12px; }.top-actions span { color:#c6dfda; font-size:13px; }
.primary, .secondary, .editor-tools button, .new-document { border:1px solid transparent; border-radius:5px; min-height:34px; padding:7px 12px; font-weight:700; }.primary { background:var(--brand); color:#fff; }.primary:hover { background:var(--brand-dark); }.secondary { background:#fff; color:var(--ink); border-color:var(--line); }
.shell { min-height:calc(100vh - 58px); display:grid; grid-template-columns:250px minmax(0, 1fr); }.sidebar { padding:20px 16px; background:#f7fbfa; border-right:1px solid var(--line); }
.search { display:grid; gap:6px; color:var(--muted); font-size:13px; font-weight:700; }.search input, .metadata input, dialog input { width:100%; border:1px solid var(--line); border-radius:5px; padding:8px 9px; background:#fff; color:var(--ink); }
.filters { margin:16px 0; display:grid; gap:5px; }.filters button { text-align:left; padding:7px 8px; border:0; border-radius:4px; background:transparent; color:var(--ink); }.filters button.active, .filters button:hover { background:#dcece9; color:#124e48; font-weight:700; }
.new-document { width:100%; border-color:#a9cbc5; background:#e6f2ef; color:#135a52; }.sidebar-note { margin:18px 2px; color:var(--muted); font-size:13px; }
.workspace { min-width:0; padding:28px clamp(18px, 4vw, 52px); }.page-heading { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:20px; }.eyebrow { margin:0 0 3px; color:#49706d; font-size:13px; font-weight:750; }.page-heading h1 { margin:0; font-size:28px; }.count { color:var(--muted); }
.reading-progress { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin:0 0 20px; }.reading-progress div { padding:11px 13px; border:1px solid #cfe0dd; border-radius:6px; background:#f6fbfa; }.reading-progress strong { display:block; color:#1a5f57; }.reading-progress span { color:var(--muted); font-size:13px; }
.course-list { display:grid; grid-template-columns:repeat(auto-fill, minmax(245px, 1fr)); gap:12px; }.course-card { display:grid; gap:10px; min-height:148px; padding:16px; border:1px solid var(--line); border-radius:7px; background:var(--panel); text-align:left; box-shadow:0 1px 2px rgba(20,50,53,.04); }.course-card:hover { border-color:#83aca6; box-shadow:0 4px 12px rgba(20,50,53,.08); }.course-card.is-seen { border-left:4px solid #4b9c73; }.course-card h2 { margin:0; font-size:17px; line-height:1.35; }.course-card p { margin:0; color:var(--muted); font-size:13px; }.card-foot { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:auto; }.card-flags { display:flex; flex-wrap:wrap; gap:5px; }.tag { border-radius:99px; padding:3px 7px; background:#edf4f3; color:#315d5a; font-size:12px; font-weight:700; }.tag.major { background:#fff0e6; color:#965024; }.tag.na { background:#edf0f2; color:#59676d; }.tag.minor { background:#e8f4f7; color:#236c7f; }.tag.seen { background:#e9f6ed; color:#347151; }.tag.confirmed { background:#e5f1fb; color:#28617c; }
.submission-list { display:grid; gap:8px; margin:0 0 18px; }.submission { display:flex; justify-content:space-between; gap:12px; padding:10px 12px; border-left:4px solid var(--warn); background:#fff5ed; font-size:14px; }.submission a { color:#8a431e; }.read-notice { margin:12px 0; padding:10px 12px; border:1px solid #c9dce8; background:#f2f8fc; color:#3d5e71; font-size:14px; }
.hidden { display:none; }.editor { max-width:1040px; margin:0 auto; }.editor-header { display:flex; align-items:center; gap:12px; padding-bottom:15px; border-bottom:1px solid var(--line); }.icon-button { width:34px; height:34px; border:1px solid var(--line); background:#fff; border-radius:5px; color:var(--ink); font-size:21px; }.editor-title { min-width:0; flex:1; }.editor-title input { width:100%; border:0; padding:0; background:transparent; color:var(--ink); font-size:22px; font-weight:750; outline:0; }.metadata { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin:16px 0; }.metadata label, dialog label { display:grid; gap:5px; color:var(--muted); font-size:13px; font-weight:700; }.editor-tools { display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }.editor-tools button, .upload-button { border:1px solid #a9cbc5; border-radius:5px; background:#e6f2ef; color:#135a52; padding:7px 10px; font-weight:700; cursor:pointer; }.source-notice { margin:12px 0; padding:11px 13px; border-left:4px solid #698b87; background:#f4f7f7; color:#415f5e; font-size:14px; }.document-body { min-height:55vh; padding:clamp(18px,3vw,38px); border:1px solid var(--line); border-radius:7px; background:#fff; outline:2px solid transparent; outline-offset:3px; }.document-body:focus { outline-color:#78aaa3; }.document-body .sop-card { margin:0 0 18px; padding:18px; border:1px solid #d7e4e2; border-radius:5px; }.document-body h2 { margin:0 0 12px; font-size:20px; }.document-body h3 { margin:15px 0 6px; font-size:15px; color:#1b5e58; }.document-body img { max-width:100%; height:auto; border-radius:4px; }.document-body p { line-height:1.75; }
dialog { width:min(440px, calc(100vw - 32px)); border:1px solid var(--line); border-radius:7px; padding:0; box-shadow:0 16px 50px rgba(0,0,0,.2); } dialog::backdrop { background:rgba(20,50,53,.35); } dialog form { display:grid; gap:13px; padding:20px; }.dialog-header { display:flex; justify-content:space-between; align-items:center; }.dialog-header h2 { margin:0; font-size:20px; }.dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }
@media (max-width:760px) { .topbar { padding:0 12px; }.brand span { display:none; }.shell { display:block; }.sidebar { border-right:0; border-bottom:1px solid var(--line); }.filters { grid-template-columns:repeat(2, minmax(0, 1fr)); }.metadata { grid-template-columns:1fr; }.workspace { padding:20px 14px; }.course-list { grid-template-columns:1fr; }.reading-progress { grid-template-columns:1fr; }.top-actions span { display:none; }.editor-header { align-items:flex-start; flex-wrap:wrap; }.editor-header .primary { flex:0 0 auto; }.document-body { padding:18px; } }