:root{--font-mono:"Geist Mono", monospace;--font-sans:"Plus Jakarta Sans", sans-serif;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--border-width:1px;--ghs-navy:#004b85;--ghs-navy-deep:#00366a;--ghs-navy-light:#1a5e9a;--ghs-cyan:#00bff3;--ghs-cyan-dark:#009ed0;--ghs-cyan-light:#3cf}:root[data-theme=dark]{--bg-app:#0d1b2a;--bg-surface:#123;--bg-sidebar:#0d1b2a;--border:#1e3a5f;--text-primary:#eaf4fb;--text-secondary:#8db4cc;--text-muted:#3a5e7a;--accent:var(--ghs-cyan);--accent-hover:var(--ghs-cyan-light);--accent-soft:#33a9c01a;--accent-border:#33a9c04d;--navy:var(--ghs-navy);--navy-surface:var(--ghs-navy-light);--danger:#f55;--success:#2ecc71;--grid-color:#33a9c00a}:root[data-theme=light]{--bg-app:#f0f6fa;--bg-surface:#fff;--bg-sidebar:#ebf3f9;--border:#cae0ec;--text-primary:#1e3a5f;--text-secondary:#2d6080;--text-muted:#7ba8c4;--accent:var(--ghs-cyan);--accent-hover:var(--ghs-cyan-dark);--accent-soft:#33a9c01f;--accent-border:#33a9c059;--navy:var(--ghs-navy);--navy-surface:var(--ghs-navy-light);--danger:#dc2626;--success:#16a34a;--grid-color:#1e3a5f0a}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-app);color:var(--text-primary);-webkit-font-smoothing:antialiased;line-height:1.5;transition:background-color .3s,color .3s}h1,h2,h3,h4,h5,h6{font-family:var(--font-mono);letter-spacing:-.02em;font-weight:700}a{color:inherit;text-decoration:none}button{cursor:pointer;font-family:var(--font-sans);border:none;outline:none}.tech-panel{background-color:var(--bg-surface);border:var(--border-width) solid var(--border);border-radius:var(--radius-sm);position:relative}.tech-panel:before{content:"";border-top:2px solid var(--accent);border-left:2px solid var(--accent);width:14px;height:14px;position:absolute;top:-1px;left:-1px}.navy-bar{border-left:4px solid var(--navy);padding-left:16px}.btn-tech{font-family:var(--font-mono);border:1px solid var(--accent);background:var(--accent);color:#fff;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;align-items:center;gap:8px;padding:11px 22px;font-size:.85rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);display:inline-flex}.btn-tech:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:0 4px 16px var(--accent-soft);transform:translateY(-1px)}.btn-tech:disabled{opacity:.5;pointer-events:none}.btn-tech-outline{font-family:var(--font-mono);border:1px solid var(--border);color:var(--text-secondary);letter-spacing:.04em;cursor:pointer;background:0 0;align-items:center;gap:8px;padding:11px 22px;font-size:.85rem;transition:all .2s;display:inline-flex}.btn-tech-outline:hover{border-color:var(--accent);color:var(--accent)}.btn-navy{font-family:var(--font-mono);background:var(--navy);border:1px solid var(--navy);color:#fff;text-transform:uppercase;letter-spacing:.06em;cursor:pointer;align-items:center;gap:8px;padding:11px 22px;font-size:.85rem;font-weight:600;transition:all .2s;display:inline-flex}.btn-navy:hover{background:var(--navy-surface);border-color:var(--navy-surface)}.form-control{border:1px solid var(--border);width:100%;color:var(--text-primary);border-radius:var(--radius-sm);font-family:var(--font-sans);background:0 0;padding:12px 16px;font-size:.95rem;transition:border-color .2s,box-shadow .2s}.form-control:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}.form-control::placeholder{color:var(--text-muted)}.detail-label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--accent);opacity:.8;margin-bottom:3px;font-size:.65rem;display:block}.detail-block{border-left:2px solid var(--accent);background:var(--accent-soft);padding:10px 14px}.detail-value{font-family:var(--font-sans);font-weight:600}.mono{font-family:var(--font-mono)}.text-accent{color:var(--accent)}.text-navy{color:var(--navy)}.text-muted{color:var(--text-muted)}.text-success{color:var(--success)}.text-danger{color:var(--danger)}.container{max-width:1280px;margin:0 auto;padding:0 24px}.grid-lines{background-image:linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px);background-size:40px 40px}.sidebar-tech{border-right:1px solid var(--border);background:var(--bg-surface);flex-shrink:0;width:280px;height:100%;padding:24px;overflow:hidden}.sidebar-nav-item{font-family:var(--font-mono);letter-spacing:.04em;color:var(--text-secondary);border-radius:var(--radius-sm);text-align:left;background:0 0;align-items:center;gap:12px;width:100%;margin-bottom:4px;padding:12px 16px;font-size:.8rem;transition:all .2s;display:flex}.sidebar-nav-item:hover,.sidebar-nav-item.active{background:var(--accent-soft);color:var(--accent);border-left:3px solid var(--accent);padding-left:13px}.ghs-divider{background:var(--accent);width:48px;height:3px;margin-bottom:16px}.progress-track{background:var(--border);border-radius:2px;width:100%;height:4px;overflow:hidden}.progress-fill{background:linear-gradient(90deg, var(--ghs-navy-light), var(--ghs-cyan));border-radius:2px;height:100%;transition:width .5s}.progress-fill.complete{background:linear-gradient(90deg, var(--ghs-cyan), var(--success))}@keyframes fadeUp{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.page-transition{animation:.4s cubic-bezier(.16,1,.3,1) fadeUp}.tech-border{border:var(--border-width) solid var(--border)}.student-nav{background:var(--bg-surface);border-bottom:1px solid var(--border);z-index:50;position:sticky;top:0}.student-nav-container{justify-content:space-between;align-items:center;gap:24px;height:68px;display:flex}.nav-left{flex:1;align-items:center;gap:20px;min-width:0;display:flex}.nav-logo{object-fit:contain;flex-shrink:0;height:44px}.nav-divider{background:var(--border);flex-shrink:0;width:1px;height:32px}.session-info{border-left:2px solid var(--accent);align-items:center;gap:12px;min-width:0;padding-left:12px;display:flex}.session-text{flex-direction:column;justify-content:center;min-width:0;display:flex}.session-label{font-family:var(--font-mono);letter-spacing:.14em;color:var(--accent);text-transform:uppercase;font-size:.6rem}.session-name{font-family:var(--font-sans);color:var(--text-primary);white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;font-weight:600;line-height:1.2;overflow:hidden}.nav-right{flex-shrink:0;align-items:center;gap:8px;display:flex}.student-main-content{margin-top:40px;padding-bottom:80px}@media (width<=768px){.student-nav-container{gap:12px;height:60px;padding:0 16px}.nav-left{gap:12px}.nav-logo{height:32px}.nav-divider{display:none}.session-info{padding-left:8px}.session-label{display:none}.session-name{font-size:.8rem}.nav-right .btn-tech-outline span{display:none}.nav-right .btn-tech-outline{justify-content:center;width:36px;height:36px;padding:8px}}.course-player-container{background:var(--bg-app);height:calc(100vh - 120px);margin:0 -24px -80px;display:flex;position:relative;overflow:hidden}.course-player-sidebar{background:var(--bg-surface);border-right:1px solid var(--border);z-index:20;flex-direction:column;flex-shrink:0;width:360px;transition:transform .3s,width .3s;display:flex}.course-player-main{background:var(--bg-app);flex-direction:column;flex:1;display:flex;overflow-y:auto}.video-container{aspect-ratio:16/9;border-bottom:1px solid var(--border);background:#000;width:100%;max-height:70vh}.content-area{max-width:900px;padding:40px}.mobile-menu-toggle{z-index:100;background:var(--accent);color:#fff;cursor:pointer;border:none;border-radius:28px;justify-content:center;align-items:center;width:56px;height:56px;display:none;position:fixed;bottom:24px;right:24px;box-shadow:0 4px 20px #0000004d}@media (width<=1024px){.course-player-container{flex-direction:column;height:auto;min-height:calc(100vh - 120px);margin:0;overflow:visible}.course-player-sidebar{z-index:999;border-right:none;width:100%;height:100%;transition:transform .3s cubic-bezier(.4,0,.2,1);position:fixed;top:0;left:0;transform:translate(-100%)}.course-player-sidebar.mobile-open{transform:translate(0)}.course-player-main{height:auto;overflow:visible}.video-container{z-index:10;max-height:none;position:sticky;top:0;box-shadow:0 4px 12px #0000004d}.content-area{padding:24px 24px 100px}.content-area h2{font-size:1.5rem!important}.mobile-menu-toggle{display:flex}.lesson-title{flex-direction:column;align-items:flex-start!important;gap:8px!important}}@media (width<=640px){.content-area{padding:20px 20px 100px}.content-area h2{font-size:1.25rem!important}}