* { box-sizing: border-box; }
:root { --ink:#17212b; --muted:#74808b; --line:#e4e8eb; --paper:#f7f8f7; --white:#fff; --coral:#ed735c; --coral-dark:#d95c47; --navy:#203c50; --green:#50a887; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif; }
a { color:inherit; text-decoration:none; } button,input,textarea,select { font:inherit; }
.app-shell { min-height:100vh; display:flex; }.sidebar { width:252px; background:var(--navy); color:#eaf0f3; padding:30px 20px 22px; display:flex; flex-direction:column; flex-shrink:0; }.brand { display:flex; gap:12px; align-items:center; margin:0 10px 68px; }.brand-mark { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; color:#fff; background:var(--coral); font-weight:800; font-size:20px; }.brand strong,.brand small,.sidebar-foot strong,.sidebar-foot small { display:block; }.brand strong { font-size:16px; }.brand small { color:#9db0ba; font-size:11px; margin-top:3px; }.nav-link { color:#9db0ba; display:flex; align-items:center; gap:13px; padding:13px 14px; margin:4px 0; border-radius:7px; font-size:14px; }.nav-link span { font-size:18px; width:18px; text-align:center; }.nav-link.active,.nav-link:hover { background:#2d5368; color:#fff; }.sidebar-foot { border-top:1px solid #3b5a6b; padding:18px 7px 0; margin-top:auto; display:flex; align-items:center; gap:10px; }.avatar { width:34px; height:34px; border-radius:50%; background:#f1b39d; color:#7c4637; display:grid; place-items:center; font-size:14px; }.sidebar-foot strong { font-size:12px; }.sidebar-foot small { color:#91a5af; font-size:11px; margin-top:2px; }.logout { margin-left:auto; color:#9db0ba; font-size:20px; }.main-content { width:100%; max-width:1280px; margin:0 auto; padding:58px 7%; }.auth-main { padding:0; max-width:none; }.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:42px; }.eyebrow,.panel-kicker { color:var(--coral); font-size:11px; font-weight:800; letter-spacing:1.8px; }.page-head h1,.detail-head h1 { font-size:36px; line-height:1.2; margin:10px 0 8px; letter-spacing:0; }.muted { color:var(--muted); font-size:13px; line-height:1.7; }.button { border:0; cursor:pointer; border-radius:6px; padding:11px 17px; display:inline-flex; gap:12px; align-items:center; justify-content:center; font-weight:700; font-size:13px; }.button.primary { background:var(--coral); color:#fff; }.button.primary:hover { background:var(--coral-dark); }.button.ghost { border:1px solid var(--line); background:#fff; }.button.full { width:100%; margin-top:12px; padding:14px; }.stat-row { display:flex; gap:16px; margin-bottom:54px; }.stat { background:#fff; border:1px solid var(--line); min-width:200px; padding:18px 22px; display:flex; align-items:center; gap:16px; border-radius:7px; }.stat-icon { width:40px; height:40px; border-radius:8px; display:grid; place-items:center; font-size:18px; }.stat-icon.coral { background:#fff0ec; color:var(--coral); }.stat-icon.blue { background:#eaf3f8; color:#4b8ca9; }.stat-icon.green { background:#e9f6f1; color:var(--green); }.stat strong { font-size:22px; display:block; }.stat small { color:var(--muted); font-size:12px; }.section-heading { display:flex; align-items:center; justify-content:space-between; margin:28px 0 17px; }.section-heading h2,.form-panel h2 { font-size:17px; margin:0; }.course-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:18px; }.course-card,.form-panel,.admin-row { background:#fff; border:1px solid var(--line); border-radius:7px; }.course-card { overflow:hidden; transition:transform .2s,box-shadow .2s; }.course-card:hover { transform:translateY(-3px); box-shadow:0 9px 24px #17212b12; }.course-cover { height:130px; background:linear-gradient(135deg,#f6d3c8,#ed735c); padding:18px; display:flex; justify-content:space-between; }.file-badge,.mini-cover { background:#fff; color:var(--coral); font-size:12px; font-weight:800; padding:6px 8px; border-radius:4px; height:max-content; }.course-arrow { color:#fff; font-size:24px; }.course-body { padding:18px; }.course-body h3 { margin:0 0 8px; font-size:16px; }.course-body p { height:42px; overflow:hidden; color:var(--muted); font-size:12px; line-height:1.7; margin:0 0 17px; }.course-meta { color:#9aa4ab; display:flex; justify-content:space-between; font-size:11px; border-top:1px solid #f0f1f2; padding-top:13px; }.empty-state { padding:70px 20px; text-align:center; border:1px dashed #cfd6da; border-radius:7px; color:var(--muted); }.empty-state h2 { color:var(--ink); font-size:18px; }.empty-icon { color:var(--coral); font-weight:800; font-size:28px; }.form-panel { padding:24px; margin-bottom:28px; }.course-form { max-width:600px; display:grid; gap:16px; margin-top:20px; }.course-form label,.login-panel label { display:grid; gap:7px; color:#54616b; font-size:12px; font-weight:700; }.course-form input,.course-form textarea,.course-form select,.login-panel input { width:100%; border:1px solid #dbe0e3; background:#fcfdfd; border-radius:5px; padding:11px 12px; color:var(--ink); outline:none; }.course-form input:focus,.course-form textarea:focus,.course-form select:focus,.login-panel input:focus { border-color:var(--coral); }.file-input span { border:1px dashed #cbd5d9; padding:19px; border-radius:5px; color:var(--muted); font-weight:400; }.file-input input { display:none; }.admin-list { display:grid; gap:9px; }.admin-row { padding:12px 16px; display:flex; gap:14px; align-items:center; }.mini-cover { background:#fff0ec; }.row-main { flex:1; display:grid; gap:5px; }.row-main strong { font-size:14px; }.row-main span { color:var(--muted); font-size:12px; }.icon-button { color:var(--coral); font-size:21px; }.split-layout { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.coral-avatar { background:#ffe4dc; color:var(--coral-dark); }.flash { position:fixed; top:20px; right:25px; z-index:5; padding:13px 20px; border-radius:5px; font-size:13px; box-shadow:0 5px 20px #0001; }.flash.success { background:#e7f6ee; color:#237451; }.flash.error { background:#fff0ed; color:#a13d2e; }.login-layout { min-height:100vh; display:grid; grid-template-columns:1.25fr .75fr; }.login-intro { background:var(--navy); color:#fff; padding:16vh 10vw; }.login-intro h1 { font-size:clamp(38px,5vw,66px); line-height:1.2; margin:30px 0 24px; }.login-intro h1 em { color:#f5a38e; font-style:normal; }.login-intro p { color:#a9bbc4; }.login-panel { align-self:center; padding:10%; max-width:560px; }.login-panel h2 { font-size:28px; margin:13px 0 8px; }.login-panel form { display:grid; gap:17px; margin-top:30px; }.login-note { font-size:11px; color:#9da8ad; text-align:center; margin-top:25px; }.course-detail { max-width:1050px; margin:0 auto; }.back-link { font-size:13px; color:var(--muted); }.detail-head { display:flex; justify-content:space-between; align-items:end; margin:38px 0 27px; }.tag { color:var(--coral-dark); background:#fff0ec; padding:8px 12px; font-size:12px; border-radius:4px; }.viewer-wrap { background:#dfe4e6; min-height:620px; padding:15px; border-radius:7px; }.ppt-viewer { display:block; width:100%; height:680px; border:0; background:#fff; }.study-layout { display:grid; grid-template-columns:270px minmax(0,1fr); gap:18px; }.chapter-list { background:#fff; border:1px solid var(--line); border-radius:7px; padding:13px; align-self:start; }.chapter-list h2 { margin:8px 8px 12px; font-size:15px; }.chapter-item { display:flex; gap:11px; padding:12px 9px; border-radius:5px; margin:3px 0; }.chapter-item:hover,.chapter-item.active { background:#fff0ec; }.chapter-number { color:var(--coral); font-size:11px; font-weight:800; padding-top:2px; }.chapter-item strong,.chapter-item small { display:block; }.chapter-item strong { font-size:13px; line-height:1.4; }.chapter-item small { color:var(--muted); font-size:10px; margin-top:5px; }.chapter-view { min-width:0; }.chapter-title { background:#fff; border:1px solid var(--line); border-radius:7px; padding:18px 20px; margin-bottom:12px; display:flex; justify-content:space-between; align-items:end; gap:15px; }.chapter-title h2 { font-size:18px; margin:7px 0 0; }.file-tabs { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 12px; }.file-tab { display:flex; align-items:center; gap:7px; max-width:100%; background:#fff; border:1px solid var(--line); border-radius:5px; padding:8px 11px; color:#51606a; font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.file-tab span { color:var(--coral); font-weight:800; font-size:10px; }.file-tab.active,.file-tab:hover { border-color:#f0a18f; background:#fff0ec; color:var(--coral-dark); }.button-row { display:flex; align-items:center; gap:9px; }.button.compact { padding:7px 11px; font-size:12px; flex-shrink:0; }
@media (max-width:760px) { .sidebar { width:66px; padding:20px 8px; }.brand { margin:0 auto 45px; }.brand span:last-child,.nav-link:not(.active)::after,.nav-link { font-size:0; }.nav-link { justify-content:center; padding:13px 4px; }.nav-link span { font-size:18px; }.sidebar-foot { display:block; text-align:center; padding-left:0; padding-right:0; }.sidebar-foot div,.logout { display:none; }.main-content { padding:35px 20px; }.page-head { align-items:flex-start; flex-direction:column; margin-bottom:28px; }.page-head h1,.detail-head h1 { font-size:29px; }.stat-row { flex-wrap:wrap; margin-bottom:35px; }.stat { min-width:calc(50% - 8px); padding:14px; }.stat-icon { width:32px; height:32px; }.split-layout { grid-template-columns:1fr; }.study-layout { grid-template-columns:1fr; }.chapter-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }.chapter-list h2 { grid-column:1 / -1; }.chapter-title { align-items:flex-start; flex-direction:column; } .detail-head { align-items:flex-start; flex-direction:column; gap:15px; }.viewer-wrap { min-height:430px; padding:7px; }.ppt-viewer { height:500px; }.login-layout { grid-template-columns:1fr; }.login-intro { min-height:42vh; padding:55px 30px 35px; }.login-intro h1 { font-size:37px; margin:20px 0; }.login-panel { padding:42px 30px; }.login-intro p { margin-bottom:0; } }