:root{--paper:#fbfaf7;--paper-raised:#fff;--ink:#20261f;--ink-soft:#4c5548;--line:#e1ddcf;--moss:#2f6f4e;--moss-dark:#234f39;--ochre:#c98a3e;--ochre-soft:#f3e2c6;--clay:#b4483a;--clay-soft:#f6dfd9;--font-display:"Fraunces", serif;--font-body:"Inter", system-ui, sans-serif;--font-mono:"JetBrains Mono", monospace}*{box-sizing:border-box}@keyframes spin{to{transform:rotate(360deg)}}.spin{animation:.8s linear infinite spin}html,body,#root{height:100%}body{background:var(--paper);color:var(--ink);font-family:var(--font-body);margin:0;font-size:15px;line-height:1.5}a{color:inherit}code{font-family:var(--font-mono);color:var(--moss-dark);background:#eef1e9;border-radius:4px;padding:1px 5px;font-size:.92em}button{font-family:var(--font-body);cursor:pointer}input,textarea,select{font-family:var(--font-body)}h1,h2,h3{font-family:var(--font-display);color:var(--ink);margin:0;font-weight:600}.app-shell{min-height:100vh;display:flex}.sidebar{background:var(--moss-dark);color:#eef2ec;flex-direction:column;flex-shrink:0;gap:28px;width:232px;padding:28px 20px;display:flex}.brand{font-family:var(--font-display);letter-spacing:.3px;align-items:baseline;gap:6px;font-size:22px;font-weight:700;display:flex}.brand-mark{background:var(--ochre);border-radius:50%;width:10px;height:10px;display:inline-block}.nav-links{flex-direction:column;gap:2px;display:flex}.nav-link{color:#cfd9c9;border-radius:6px;padding:9px 12px;font-size:14px;font-weight:500;text-decoration:none;transition:background .15s,color .15s}.nav-link:hover{color:#fff;background:#ffffff14}.nav-link.active{color:#fff;background:#ffffff24}.sidebar-footer{color:#a9b8a1;flex-direction:column;gap:10px;margin-top:auto;font-size:13px;display:flex}.role-tag{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;background:#ffffff1a;border-radius:4px;width:fit-content;padding:3px 7px;font-size:11px}.logout-btn{color:#eef2ec;text-align:left;background:0 0;border:1px solid #ffffff40;border-radius:6px;padding:7px 10px;font-size:13px}.logout-btn:hover{background:#ffffff1a}.main{flex:1;max-width:1400px;padding:36px 44px}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:26px;display:flex}.page-header h1{font-size:30px}.page-subtitle{color:var(--ink-soft);margin-top:6px;font-size:14.5px}.btn{background:var(--moss);color:#fff;border:1px solid #0000;border-radius:7px;align-items:center;gap:6px;padding:9px 16px;font-size:14px;font-weight:600;transition:background .15s,transform .1s;display:inline-flex}.btn:hover{background:var(--moss-dark)}.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{color:var(--moss-dark);border-color:var(--line);background:0 0}.btn-secondary:hover{background:#f0efe8}.btn-danger{background:var(--clay)}.btn-danger:hover{background:#93382d}.btn-sm{padding:6px 11px;font-size:13px}.card{background:var(--paper-raised);border:1px solid var(--line);border-radius:12px;padding:20px 22px}.card+.card{margin-top:14px}.course-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;display:grid}.course-card{background:var(--paper-raised);border:1px solid var(--line);color:var(--ink);border-radius:12px;flex-direction:column;gap:10px;padding:20px;text-decoration:none;transition:box-shadow .15s,transform .15s;display:flex}.course-card:hover{transform:translateY(-2px);box-shadow:0 6px 20px #20261f14}.course-card h3{font-size:18px;line-height:1.3}.course-card-thumb{object-fit:cover;border-radius:12px 12px 0 0;width:calc(100% + 40px);height:140px;margin:-20px -20px 4px;display:block}.course-desc{color:var(--ink-soft);flex:1;font-size:13.5px}.tag-row{flex-wrap:wrap;gap:6px;display:flex}.tag{font-family:var(--font-mono);color:var(--moss-dark);background:#eef1e9;border-radius:100px;padding:2px 8px;font-size:11px}.stamp{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.09em;border:1.5px solid;border-radius:4px;width:fit-content;padding:4px 9px;font-size:10.5px;font-weight:700;display:inline-block;transform:rotate(-1.5deg)}.stamp-draft{color:var(--ink-soft)}.stamp-in_review{color:var(--ochre)}.stamp-published{color:var(--moss)}.ring-wrap{flex-shrink:0;width:56px;height:56px;position:relative}.ring-label{font-family:var(--font-mono);color:var(--moss-dark);justify-content:center;align-items:center;font-size:12px;font-weight:700;display:flex;position:absolute;inset:0}.field{flex-direction:column;gap:5px;margin-bottom:14px;display:flex}.field label{color:var(--ink-soft);font-size:13px;font-weight:600}.field input,.field textarea,.field select{border:1px solid var(--line);background:var(--paper-raised);color:var(--ink);border-radius:7px;padding:9px 11px;font-size:14px}.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--moss);outline-offset:1px}.field textarea{resize:vertical;min-height:70px}.auth-shell{background:var(--moss-dark);justify-content:center;align-items:center;min-height:100vh;display:flex}.auth-card{background:var(--paper);border-radius:14px;width:380px;padding:40px;box-shadow:0 20px 60px #00000040}.auth-toggle{color:var(--ink-soft);gap:4px;margin-top:18px;font-size:13.5px;display:flex}.auth-toggle button{color:var(--moss);background:0 0;border:none;padding:0;font-weight:600}.error-banner{background:var(--clay-soft);color:#7a2b20;border:1px solid #e3b3a9;border-radius:7px;margin-bottom:14px;padding:9px 12px;font-size:13.5px}.empty-state{text-align:center;color:var(--ink-soft);padding:60px 20px}.lesson-row{border:1px solid var(--line);background:var(--paper-raised);border-radius:9px;align-items:center;gap:12px;margin-bottom:8px;padding:12px 14px;display:flex}.lesson-row.done{background:#f2f7f0;border-color:#cfe3c6}.checkbox-circle{border:2px solid var(--line);color:#0000;background:0 0;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:22px;height:22px;font-size:13px;display:flex}.checkbox-circle.done{background:var(--moss);border-color:var(--moss);color:#fff}.comment{border-bottom:1px solid var(--line);padding:12px 0}.comment:last-child{border-bottom:none}.comment-meta{color:var(--ink-soft);align-items:center;gap:8px;margin-bottom:4px;font-size:12.5px;display:flex}.like-btn{border:1px solid var(--line);color:var(--ink-soft);background:0 0;border-radius:100px;align-items:center;gap:4px;padding:3px 10px;font-size:12.5px;display:inline-flex}.like-btn.liked{color:var(--moss);border-color:var(--moss)}.tabs{border-bottom:1px solid var(--line);gap:4px;margin-bottom:20px;display:flex}.tab{color:var(--ink-soft);background:0 0;border-bottom:2px solid #0000;border-radius:0;padding:9px 16px;font-size:14px;font-weight:600}.tab.active{color:var(--moss-dark);border-bottom-color:var(--moss)}.section-title{font-family:var(--font-display);margin-bottom:12px;font-size:17px}.divider{background:var(--line);height:1px;margin:24px 0}.quiz-option{border:1px solid var(--line);cursor:pointer;border-radius:8px;align-items:center;gap:10px;margin-bottom:8px;padding:10px 12px;display:flex}.quiz-option.selected{border-color:var(--moss);background:#f2f7f0}.quiz-option.correct{border-color:var(--moss);background:#e6f2e0}.quiz-option.incorrect{border-color:var(--clay);background:var(--clay-soft)}.cert-card{border:2px solid var(--ochre);background:var(--ochre-soft);text-align:center;border-radius:12px;padding:24px;position:relative}.cert-code{font-family:var(--font-mono);letter-spacing:.1em;color:var(--ink-soft);margin-top:6px;font-size:13px}.lesson-player{align-items:flex-start;gap:20px;margin-right:300px;display:flex}.lesson-sidebar{background:var(--paper-raised);border:1px solid var(--line);border-radius:12px;flex-shrink:0;width:220px;max-height:calc(100vh - 100px);padding:16px;transition:width .15s,padding .15s;position:sticky;top:20px;overflow-y:auto}.lesson-sidebar.collapsed{width:52px;padding:16px 8px;overflow:hidden}.lesson-sidebar-toggle{border:1px solid var(--line);width:28px;height:28px;color:var(--ink-soft);background:0 0;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;margin-bottom:12px;display:flex}.lesson-sidebar-toggle:hover{background:#f0efe8}.lesson-sidebar-title{font-family:var(--font-display);color:var(--ink);white-space:nowrap;text-overflow:ellipsis;margin-bottom:12px;font-size:14px;font-weight:600;line-height:1.3;overflow:hidden}.lesson-sidebar-item{cursor:pointer;white-space:nowrap;border-radius:8px;align-items:center;gap:10px;margin-bottom:2px;padding:8px;display:flex;overflow:hidden}.lesson-sidebar-item:hover{background:#f0efe8}.lesson-sidebar-item.active{background:#eef1e9}.lesson-sidebar-item.active .lesson-sidebar-item-title{color:var(--moss-dark);font-weight:700}.lesson-sidebar-number{border:1.5px solid var(--line);width:24px;height:24px;font-family:var(--font-mono);color:var(--ink-soft);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:11px;font-weight:700;display:flex}.lesson-sidebar-item.active .lesson-sidebar-number{border-color:var(--moss);color:var(--moss-dark)}.lesson-sidebar-item.done .lesson-sidebar-number{background:var(--moss);border-color:var(--moss);color:#fff}.lesson-sidebar-item-title{color:var(--ink);text-overflow:ellipsis;font-size:13.5px;overflow:hidden}.lesson-main{flex:1;min-width:480px}.lesson-card{background:var(--paper-raised);border:1px solid var(--line);border-radius:12px;overflow:hidden}.lesson-hero{background:linear-gradient(135deg, var(--moss-dark), var(--moss));background-position:50%;background-size:cover;align-items:flex-end;height:200px;padding:20px 24px;display:flex;position:relative}.lesson-hero:after{content:"";background:linear-gradient(#0000,#0000008c);position:absolute;inset:0}.lesson-hero-content{z-index:1;color:#fff;position:relative}.lesson-hero-title{font-family:var(--font-display);margin:0 0 8px;font-size:24px;font-weight:600;line-height:1.25}.lesson-hero-byline{color:#ffffffe6;align-items:center;gap:8px;font-size:13px;display:flex}.lesson-byline-avatar{background:var(--ochre);color:#3a2a12;width:24px;height:24px;font-family:var(--font-mono);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:11px;font-weight:700;display:flex}.lesson-body{padding:24px 28px}.lesson-content-text{color:var(--ink);white-space:pre-wrap;font-size:15px;line-height:1.7}.lesson-complete-row{border-top:1px solid var(--line);align-items:center;gap:12px;margin-top:22px;padding-top:20px;display:flex}.lesson-nav-row{justify-content:space-between;gap:10px;margin-top:16px;display:flex}.comments-rail{background:var(--paper-raised);border:1px solid var(--line);z-index:5;border-radius:12px;width:260px;padding:18px;position:fixed;top:20px;bottom:20px;right:20px;overflow-y:auto}.comments-rail-header{font-family:var(--font-display);align-items:center;gap:8px;margin-bottom:4px;font-size:15px;font-weight:600;display:flex}.comments-rail-empty{text-align:center;color:var(--ink-soft);padding:28px 8px;font-size:13px}@media (width<=980px){.lesson-player{flex-direction:column;margin-right:0}.lesson-sidebar{width:100%;max-height:none;position:static}.lesson-main{min-width:0}.comments-rail{width:100%;position:static;bottom:auto}}
