:root { color-scheme: light; --ink:#102a2d; --muted:#657678; --line:#d8e2e1; --teal:#0d9488; --deep:#123f43; --cream:#f4f7f2; --coral:#f08a6a; }
* { box-sizing:border-box; }
body { margin:0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--cream); }
.shell { max-width:1120px; margin:0 auto; padding:32px 28px 64px; }
.topbar { display:flex; align-items:center; gap:14px; border-bottom:1px solid var(--line); padding-bottom:24px; }
.brand-mark { display:grid; place-items:center; width:44px; height:44px; border-radius:14px; background:var(--deep); color:white; font-weight:800; letter-spacing:-.08em; }
.eyebrow { margin:0 0 5px; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.16em; }
.accent { color:var(--teal); }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:0; font-size:17px; letter-spacing:-.02em; } h2 { margin-bottom:16px; max-width:600px; font-size:clamp(34px,5vw,62px); line-height:.98; letter-spacing:-.065em; } h3 { margin:10px 0 12px; font-size:28px; line-height:1.05; letter-spacing:-.045em; }
.connection { margin-left:auto; display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; } .connection span:first-child { width:8px; height:8px; border-radius:50%; background:#f59e0b; } .connection.online span:first-child { background:#22c55e; }
.admin-link { color:var(--deep); font-size:12px; font-weight:750; text-decoration:none; } .admin-link:hover { color:var(--teal); }
.intro { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding:74px 0 50px; } .lede { max-width:620px; margin-bottom:0; color:var(--muted); line-height:1.65; font-size:16px; } .offline-badge { padding:12px 15px; border:1px solid #b7d7d3; border-radius:999px; color:var(--teal); background:#e8f4f1; font-size:13px; white-space:nowrap; } .offline-badge span { margin-right:6px; }
.learner-panel { margin-bottom:22px; padding:18px 20px; border:1px solid var(--line); border-radius:18px; background:#fff; } label { display:block; margin-bottom:8px; color:var(--muted); font-size:12px; font-weight:700; } .learner-row { display:flex; gap:10px; } input { min-width:0; flex:1; border:1px solid var(--line); border-radius:11px; padding:12px 14px; color:var(--ink); font:inherit; outline:none; } input:focus { border-color:var(--teal); box-shadow:0 0 0 3px #0d94881a; } .helper { margin:8px 0 0; color:var(--muted); font-size:12px; }
.library-heading { display:flex; align-items:end; justify-content:space-between; gap:16px; margin:0 0 14px; } .library-heading h3 { margin:0; } .course-grid { display:grid; gap:18px; } .loading-card { padding:28px; border:1px dashed var(--line); border-radius:18px; color:var(--muted); background:#fff; } .course-card { display:grid; grid-template-columns:220px 1fr; min-height:280px; overflow:hidden; border-radius:24px; background:#fff; box-shadow:0 14px 38px #1b4c5012; } .course-cover { display:flex; flex-direction:column; justify-content:space-between; padding:24px; color:#fff; background:linear-gradient(145deg,#0b5557,#159e91 70%,#8dcfc0); } .course-cover span { font-size:86px; font-weight:800; letter-spacing:-.12em; line-height:.8; } .course-cover small { font-size:10px; font-weight:800; letter-spacing:.15em; } .course-body { padding:28px 32px; display:flex; flex-direction:column; } .course-meta { display:flex; align-items:center; justify-content:space-between; color:var(--muted); font-size:12px; } .pill { padding:6px 9px; border-radius:999px; color:#08766e; background:#e8f4f1; font-weight:700; } .course-description { max-width:660px; color:var(--muted); line-height:1.6; } .progress-track { height:6px; margin-top:auto; overflow:hidden; border-radius:8px; background:#e8eeee; } .progress-track span { display:block; height:100%; width:0; border-radius:8px; background:var(--teal); transition:width .25s; } .course-footer { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-top:15px; color:var(--muted); font-size:12px; } .actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.button { border:0; border-radius:10px; padding:11px 15px; font:inherit; font-size:13px; font-weight:750; cursor:pointer; } .button:disabled { cursor:wait; opacity:.55; } .primary { color:#fff; background:var(--deep); } .secondary { color:var(--deep); border:1px solid var(--line); background:#fff; } .button:hover { transform:translateY(-1px); }
.notice { display:grid; grid-template-columns:auto 1fr auto; gap:14px; margin-top:20px; padding:18px 20px; border:1px solid #dfd9c9; border-radius:16px; color:#716b5d; background:#faf7ed; font-size:12px; line-height:1.5; } .notice strong { color:#423e34; } .error { margin:18px 0 0; padding:14px; border-radius:12px; color:#9e3128; background:#fff0ed; font-size:13px; }
.discussion-section { margin-top:68px; } .discussion-layout { display:grid; grid-template-columns:300px minmax(0,1fr); align-items:start; gap:18px; } .discussion-form { display:grid; gap:9px; padding:22px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 14px 38px #1b4c5010; } .discussion-form h4 { margin:0 0 4px; font-size:23px; letter-spacing:-.04em; } .discussion-form textarea { width:100%; resize:vertical; min-height:120px; border:1px solid var(--line); border-radius:11px; padding:12px 14px; color:var(--ink); font:inherit; line-height:1.5; outline:none; } .discussion-form textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px #0d94881a; } .discussion-form .button { margin-top:5px; } .discussion-list { display:grid; gap:14px; min-width:0; } .discussion-topic { padding:22px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 10px 28px #1b4c500c; } .discussion-topic-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; } .discussion-topic h4 { margin:0 0 7px; font-size:20px; line-height:1.15; letter-spacing:-.03em; } .discussion-meta { margin:0; color:var(--muted); font-size:12px; } .discussion-body { margin:16px 0 18px; color:#3f5557; line-height:1.6; white-space:normal; overflow-wrap:anywhere; } .discussion-pending { padding:5px 8px; border-radius:999px; color:#9a6a13; background:#fff5d9; font-size:11px; font-weight:750; white-space:nowrap; } .reply-list { display:grid; gap:10px; margin:0 0 15px; padding-left:16px; border-left:2px solid #e5efed; } .discussion-reply { padding:9px 0; } .discussion-reply p { margin:4px 0 0; color:#4f6466; line-height:1.5; font-size:13px; overflow-wrap:anywhere; } .discussion-reply-meta { color:var(--muted); font-size:11px; } .reply-form { display:flex; gap:8px; align-items:flex-end; padding-top:14px; border-top:1px solid #edf2f1; } .reply-form textarea { min-width:0; flex:1; resize:vertical; min-height:44px; max-height:130px; border:1px solid var(--line); border-radius:10px; padding:10px 12px; color:var(--ink); font:inherit; line-height:1.4; outline:none; } .reply-form textarea:focus { border-color:var(--teal); box-shadow:0 0 0 3px #0d94881a; } .reply-form .button { flex:0 0 auto; }
.admin-shell { max-width:860px; } .admin-intro { padding:74px 0 36px; } .upload-panel { display:grid; gap:10px; padding:24px; border:1px solid var(--line); border-radius:20px; background:#fff; box-shadow:0 14px 38px #1b4c5012; } .upload-panel input[type=file] { padding:10px; background:#fbfdfc; } .upload-actions { display:flex; align-items:center; gap:14px; margin-top:10px; } 
@media (max-width:720px) { .shell { padding:22px 16px 48px; } .topbar { align-items:flex-start; } .connection { margin-top:7px; } .intro { display:block; padding:50px 0 30px; } .offline-badge { display:inline-block; margin-top:20px; } .course-card { grid-template-columns:1fr; } .course-cover { min-height:170px; } .course-cover span { font-size:64px; } .course-body { padding:22px; } .course-footer { align-items:flex-start; flex-direction:column; } .actions { justify-content:flex-start; } .notice { grid-template-columns:1fr; gap:5px; } .discussion-layout { grid-template-columns:1fr; } .discussion-form { order:0; } .discussion-list { order:1; } .reply-form { align-items:stretch; flex-direction:column; } }