in class="lcg" -- markup, ids, Bootstrap collapse wiring are untouched, this is a pure restyle. */ .course-sidebar.lcg{background:var(--lcg-panel) !important; border:0 !important; border-right:1px solid var(--lcg-hair) !important; border-radius:0; padding:6px 0; color:var(--lcg-soft) !important} /* Mockup 09 shows the lab list as a ~250px rail sitting flush under the nav, not a 380px rounded card floating in the gutter. theme.min.css drives this layout with a fixed-position sidebar plus a matching margin-left on .content, so both numbers have to move together or the content column detaches from the rail. Rail geometry only applies from 992px up; the companion block below unpins it. */ @media (min-width:992px){ .course-sidebar.lcg{width:250px; top:60px; height:calc(100vh - 60px); margin-top:0 !important} .course-container .content{margin-left:250px} /* The rail is position:fixed, so it stays pinned over whatever scrolls beneath it — including the footer, which sits outside .course-container and never inherited this offset. Give it the same 250px the content column gets. */ .lcg-footer--with-sidebar .lcg-container{margin-left:250px; max-width:calc(1180px - 250px)} } /* theme.min.css only unpins the rail at <=576px and 768-991.98px, so 577-767px kept a 380px fixed sidebar with a 404px content margin and scrolled sideways. Collapse it across the whole sub-992px range instead of patching the gap. */ @media (max-width:991.98px){ .course-sidebar.lcg{position:relative; top:0; width:100%; height:auto; margin:0 0 18px !important; border-right:0 !important; border-bottom:1px solid var(--lcg-hair) !important} .course-container .content{margin-left:0} } .course-sidebar.lcg .list-group, .course-sidebar.lcg .list-group-item, .course-sidebar.lcg [data-simplebar], .course-sidebar.lcg .simplebar-content, .course-sidebar.lcg .simplebar-content-wrapper, .course-sidebar.lcg .collapse, .course-sidebar.lcg .accordion-collapse, .course-sidebar.lcg .accordion-body{background-color:transparent !important} .course-sidebar.lcg .list-group-item{border:0 !important; border-bottom:1px solid var(--lcg-hair) !important; padding:0} .course-sidebar.lcg .list-group-item:last-child{border-bottom:0 !important} .course-sidebar.lcg .list-group-item:first-child{padding:16px 16px 12px 16px} .course-sidebar.lcg h2{font-size:16px !important; font-weight:750; letter-spacing:-.01em; color:var(--lcg-ink) !important} .course-sidebar.lcg h2 a{color:var(--lcg-ink) !important} .course-sidebar.lcg .list-group-item > a.h4{color:var(--lcg-soft) !important; font-size:13.5px !important; font-weight:650; padding:13px 16px; margin:0 !important} .course-sidebar.lcg .list-group-item > a.h4:hover{color:var(--lcg-ink) !important; background:var(--lcg-panel-2) !important} .course-sidebar.lcg .list-group-item > a.h4.text-muted{color:var(--lcg-dim) !important} .course-sidebar.lcg .chevron-arrow i{color:var(--lcg-mut) !important; font-size:12px !important; transition:transform .15s} .course-sidebar.lcg a[aria-expanded="true"] .chevron-arrow i{transform:rotate(180deg)} .course-sidebar.lcg .icon-shape{background:transparent !important; width:20px; height:20px} .course-sidebar.lcg .icon-shape i{font-size:11px !important} .course-sidebar.lcg .icon-shape.bg-primary i{color:var(--lcg-ok) !important} .course-sidebar.lcg .icon-shape.bg-light .fa-flask{color:var(--lcg-red) !important} .course-sidebar.lcg .icon-shape.bg-light .fa-lock{color:var(--lcg-dim) !important} .course-sidebar.lcg .icon-shape img{filter:grayscale(1) brightness(1.6)} .course-sidebar.lcg .nav .lab-link .icon-shape{width:14px !important; height:14px !important; margin-right:7px !important} /* One line per lab: name only, no duration. The markup keeps Bootstrap's mb-2 on the anchor, so the margin is zeroed here -- rows are separated by the hover background alone. flex-direction:column with a single child is what lets the name span the full rail width instead of being squeezed by the anchor's own justify-content:space-between. */ .course-sidebar.lcg .nav .lab-link{color:var(--lcg-mut) !important; font-size:12.5px; border-radius:0; display:flex !important; flex-direction:column !important; align-items:stretch !important; justify-content:flex-start !important; margin-bottom:0 !important; padding:10px 16px !important} .course-sidebar.lcg .nav .lab-link:hover{color:var(--lcg-ink) !important; background:var(--lcg-panel-2) !important} .course-sidebar.lcg .nav .lab-link > .text-truncate:first-child{display:-webkit-box !important; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden !important; white-space:normal !important; text-overflow:clip !important; color:var(--lcg-soft)} .course-sidebar.lcg .nav .lab-link .badge{font-family:var(--lcg-mono); font-size:9px; background:var(--lcg-amber) !important; color:#1a1406 !important} .course-sidebar.lcg .text-truncate, .course-sidebar.lcg span{color:inherit} /* ============ Certificate claim + coming-soon (rhceCourse.html-family) ============ */ .cert-wrap{max-width:820px; margin:0 auto; padding:26px 24px 40px} .cert-progress{margin-bottom:22px} .cert-progress .track{height:10px; border-radius:6px; background:var(--lcg-panel-2); border:1px solid var(--lcg-hair); overflow:hidden} .cert-progress .track .bar{height:100%; background:linear-gradient(90deg,var(--lcg-red),#ff8a63); border-radius:6px} .cert-progress .pct{font-family:var(--lcg-mono); font-size:12px; color:var(--lcg-mut); margin-top:8px} .cert-card{background:var(--lcg-panel); border:1px solid var(--lcg-hair); border-radius:14px; padding:26px} .cert-card .name-row{display:flex; align-items:center; gap:12px; justify-content:center; margin-bottom:18px; flex-wrap:wrap} .cert-card .name-row b{font-size:15px} .cert-card .name-row a{font-family:var(--lcg-mono); font-size:11.5px; color:var(--lcg-red)} .cert-card img{max-width:100%; border-radius:10px; border:1px solid var(--lcg-hair)} .cert-card input.cert-link{background:var(--lcg-panel-2); border:1px solid var(--lcg-hair-2); color:var(--lcg-soft); font-family:var(--lcg-mono); font-size:12px; border-radius:8px 0 0 8px; padding:9px 12px} .cert-card .cert-download{color:var(--lcg-red); font-size:20px; cursor:pointer} .cert-share{display:flex; align-items:center; gap:10px; justify-content:center; margin-top:16px; font-family:var(--lcg-mono); font-size:11.5px; color:var(--lcg-mut)} .cert-share a{width:32px; height:32px; border-radius:8px; display:grid; place-items:center; color:#fff; background:var(--lcg-panel-2); border:1px solid var(--lcg-hair-2)} .cert-note{margin-top:26px; color:var(--lcg-soft); font-size:14px; line-height:1.7} .cert-note h2{font-size:16px; color:var(--lcg-ink); font-weight:750; margin:20px 0 8px} .cert-note ul{margin:0 0 8px; padding-left:20px} .coming-soon{max-width:640px; margin:40px auto; text-align:center; padding:0 24px} .coming-soon img{max-width:180px; opacity:.85; margin-bottom:18px} .coming-soon h2.big{font-size:26px; font-weight:800; letter-spacing:-.02em} .coming-soon .lead{color:var(--lcg-soft); font-size:15px; margin:10px 0 26px} .coming-soon .lg-body{text-align:left; max-width:none} /* ============ Mock/proctored exam pre-flight + purchase (rhcsaHome.html "rhcsa-mock-exam") ============ */ .exam-wrap{max-width:900px; margin:0 auto; padding:6px 4px 40px} .exam-hero{text-align:center; margin-bottom:26px} .exam-hero h1{font-size:26px; font-weight:800; letter-spacing:-.02em} .exam-hero .lead{color:var(--lcg-soft); font-size:14.5px; max-width:60ch; margin:10px auto 0} .exam-alert{background:rgba(227,179,65,.1); border:1px solid rgba(227,179,65,.3); color:var(--lcg-amber); border-radius:10px; padding:12px 16px; font-size:13.5px; margin-bottom:22px} .exam-info{background:var(--lcg-panel); border:1px solid var(--lcg-hair); border-radius:14px; padding:22px 24px; margin-bottom:16px} .exam-info .ih{display:flex; align-items:center; gap:10px; font-size:15px; font-weight:750; color:var(--lcg-ink); margin-bottom:12px} .exam-info .ih i{color:var(--lcg-red); font-size:14px} .exam-info .lg-body{max-width:none} .exam-gallery{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:14px 0} .exam-gallery a{display:block; border-radius:10px; overflow:hidden; border:1px solid var(--lcg-hair-2); max-width:260px} .exam-gallery img{display:block; width:100%; height:auto} .exam-cta{background:var(--lcg-panel); border:1px solid var(--lcg-hair); border-radius:14px; padding:24px; text-align:center; margin-top:22px} .exam-cta .lab-region{justify-content:center; margin:0 auto 16px; max-width:fit-content} .exam-pitch{background:var(--lcg-panel); border:1px solid var(--lcg-hair); border-radius:16px; padding:30px 28px; display:grid; grid-template-columns:1.3fr .7fr; gap:26px; align-items:center; margin-bottom:22px} .exam-pitch img{width:100%; max-width:180px; margin:0 auto; display:block} .exam-pitch h3{font-size:15px; font-weight:750; color:var(--lcg-ink); margin:0 0 12px} .exam-pitch ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px} .exam-pitch li{display:flex; gap:10px; font-size:13.5px; color:var(--lcg-soft); align-items:flex-start} .exam-pitch li i{color:var(--lcg-ok); margin-top:2px} .exam-pitch li b{color:var(--lcg-ink)} .exam-price-cta{text-align:center; margin-bottom:8px} .exam-price-cta .lead{color:var(--lcg-soft); font-size:14px; margin-bottom:14px} .exam-price-cta form{display:inline} @media (max-width:720px){.exam-pitch{grid-template-columns:1fr; text-align:center} .exam-pitch ul{align-items:center}} /* ============ Quiz-taking UI (JS-generated, shared: lpicCourse.html + linuxPlusCourse.html #quizContentArea) ============ The question/result/attempts markup below is built by JS template-literal strings (generateQuizCardMarkup / generateResultCard / etc.), not Django template tags -- these classes must match exactly what those JS functions are updated to emit. Ids (#quizContentArea, #questionCard, #timer, #prevBtn, #nextBtn, #checkBtn, #submitBtn, #explanationBox, #attemptsTable, etc.) are unchanged/preserved; only class names and inline styles change. */ .quiz-shell{max-width:760px; margin:0 auto; padding:6px 4px 40px} .quiz-topbar{display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; gap:12px; flex-wrap:wrap} .quiz-topbar .qt-label{font-family:var(--lcg-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--lcg-mut)} .lcg #timer{font-family:var(--lcg-mono); font-size:13px; font-weight:700; color:var(--lcg-amber); background:var(--lcg-panel-2); border:1px solid var(--lcg-hair-2); border-radius:8px; padding:6px 12px; margin:0} .quiz-tracker{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:18px} .quiz-tracker .question-circle{width:30px; height:30px; border-radius:8px; background:var(--lcg-panel-2); border:1px solid var(--lcg-hair-2); color:var(--lcg-soft); font-family:var(--lcg-mono); font-size:12px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s,border-color .15s} .quiz-tracker .question-circle:hover{border-color:var(--lcg-red)} .quiz-tracker .question-circle.answered{background:rgba(63,185,80,.14); border-color:var(--lcg-ok); color:var(--lcg-ok)} .quiz-card{background:var(--lcg-panel); border:1px solid var(--lcg-hair); border-radius:16px; padding:26px 26px 22px} .quiz-card h3{font-size:15.5px; font-weight:700; color:var(--lcg-ink); line-height:1.5; margin:0 0 18px} .quiz-options{list-style:none; margin:0 0 20px; padding:0; display:flex; flex-direction:column; gap:9px} .quiz-option{background:var(--lcg-panel-2); border:1px solid var(--lcg-hair-2); border-radius:10px; padding:12px 14px; display:flex; align-items:center; gap:11px; cursor:pointer; font-size:13.5px; color:var(--lcg-soft); transition:border-color .15s,background .15s} .quiz-option:hover{border-color:var(--lcg-red); color:var(--lcg-ink)} .quiz-option input[type="radio"]{accent-color:var(--lcg-red); width:15px; height:15px; flex:none} .quiz-option.selected{border-color:var(--lcg-red); background:rgba(242,80,75,.08); color:var(--lcg-ink)} .quiz-option.success-color{border-color:var(--lcg-ok); background:rgba(63,185,80,.1); color:var(--lcg-ink)} .quiz-option.wrong-color{border-color:var(--lcg-red); background:rgba(242,80,75,.1); color:var(--lcg-ink)} .quiz-explain{background:var(--lcg-panel-2); border:1px solid var(--lcg-hair-2); border-left:3px solid var(--lcg-cyan); border-radius:0 10px 10px 0; padding:12px 16px; margin:18px 0; font-size:13px; color:var(--lcg-soft); line-height:1.6} .quiz-explain b{color:var(--lcg-ink)} .quiz-nav{display:flex; gap:10px; flex-wrap:wrap; margin-top:24px} .quiz-nav button,.quiz-nav .lcg-btn-red,.quiz-nav .lcg-btn-ghost{font-size:13px} .quiz-locked{background:var(--lcg-panel); border:1px solid var(--lcg-hair); border-radius:16px; padding:34px 28px; text-align:center; max-width:520px; margin:0 auto} .quiz-locked i{font-size:32px; color:var(--lcg-violet); margin-bottom:14px; display:block} .quiz-locked h3{font-size:16px; color:var(--lcg-ink); margin:0 0 8px} .quiz-locked p{color:var(--lcg-soft); font-size:13.5px; margin:0 0 18px} .quiz-intro{background:var(--lcg-panel); border:1px solid var(--lcg-hair); border-radius:16px; padding:34px 28px; text-align:center} .quiz-intro i.qi-icon{font-size:32px; color:var(--lcg-cyan); margin-bottom:14px; display:block} .quiz-intro h3{font-size:17px; color:var(--lcg-ink); margin:0 0 10px} .quiz-intro p{color:var(--lcg-soft); font-size:13.5px; max-width:52ch; margin:0 auto 18px; line-height:1.6} .quiz-intro .qi-meta{display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin:0 0 24px; font-family:var(--lcg-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--lcg-mut)} .quiz-result{background:var(--lcg-panel); border:1px solid var(--lcg-hair); border-radius:16px; padding:30px 28px; text-align:center} .quiz-result .score{font-family:var(--lcg-mono); font-size:34px; font-weight:800; color:var(--lcg-red); margin:6px 0 4px} .quiz-result .score-label{color:var(--lcg-mut); font-size:12px; font-family:var(--lcg-mono); text-transform:uppercase; letter-spacing:.06em; margin-bottom:18px} .quiz-result h3{font-size:16px; color:var(--lcg-ink); margin:0 0 6px} .quiz-attempts{margin-top:24px; text-align:left; background:var(--lcg-panel); border:1px solid var(--lcg-hair); border-radius:14px; padding:20px 22px} .quiz-attempts .lh{font-family:var(--lcg-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--lcg-mut); margin-bottom:12px} .quiz-attempts table{width:100%; border-collapse:collapse; font-size:13px} .quiz-attempts thead th{font-family:var(--lcg-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--lcg-mut); text-align:center; padding:9px 10px; border-bottom:1px solid var(--lcg-hair-2)} .quiz-attempts tbody td{text-align:center; padding:10px; color:var(--lcg-soft); border-bottom:1px solid var(--lcg-hair)} .quiz-attempts .dataTables_wrapper .dataTables_length, .quiz-attempts .dataTables_wrapper .dataTables_filter, .quiz-attempts .dataTables_wrapper .dataTables_info, .quiz-attempts .dataTables_wrapper .dataTables_paginate{color:var(--lcg-mut); font-family:var(--lcg-mono); font-size:11.5px} .quiz-attempts .dataTables_wrapper .paginate_button{color:var(--lcg-soft) !important; padding:3px 9px; border-radius:6px} .quiz-attempts .dataTables_wrapper .paginate_button.current{background:var(--lcg-red) !important; color:#fff !important; border:0 !important} .quiz-attempts .dataTables_wrapper .paginate_button:hover{background:var(--lcg-panel-2) !important; color:var(--lcg-ink) !important; border:0 !important} @media (max-width:600px){.quiz-card{padding:20px 18px}} /* ============ What's New (whatsNew.html) ============ */ .wn-sec{margin:34px 0} .wn-sh{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px} .wn-sh h2{font-size:1.15rem; font-weight:750; letter-spacing:-.02em; margin:0} .wn-sh .c{font-family:var(--lcg-mono); font-size:11.5px; color:var(--lcg-mut)} /* Release feed: one row per recently launched lab, newest first. */ .wn-feed{background:var(--lcg-panel); border:1px solid var(--lcg-hair); border-radius:14px; overflow:hidden} .wn-row{display:grid; grid-template-columns:98px minmax(0,1fr) auto auto; align-items:center; gap:14px; padding:13px 18px; border-bottom:1px solid var(--lcg-hair)} .wn-row:last-child{border-bottom:0} .wn-row:hover{background:var(--lcg-panel-2)} .wn-row .d{font-family:var(--lcg-mono); font-size:11.5px; color:var(--lcg-mut); white-space:nowrap} .wn-row .n{font-size:14px; font-weight:650; color:var(--lcg-ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .wn-row:hover .n{color:var(--lcg-red)} .wn-row .go{font-family:var(--lcg-mono); font-size:13px; color:var(--lcg-mut)} .wn-row:hover .go{color:var(--lcg-red)} .wn-empty{padding:38px 20px; text-align:center; color:var(--lcg-mut); font-size:13.5px} /* Highlight cards. Every source screenshot is ~16:10, so a fixed ratio box with object-fit:cover keeps the grid's rows aligned without visibly cropping any. */ .wn-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px} .wn-card{background:var(--lcg-panel); border:1px solid var(--lcg-hair); border-radius:13px; overflow:hidden; display:flex; flex-direction:column} .wn-card:hover{border-color:var(--lcg-hair-2)} .wn-card .th{aspect-ratio:16/10; background:var(--lcg-panel-2); border-bottom:1px solid var(--lcg-hair)} .wn-card .th img{width:100%; height:100%; object-fit:cover; display:block} .wn-card .bd{padding:16px 17px 18px; display:flex; flex-direction:column; gap:9px; flex:1} .wn-card .k{font-family:var(--lcg-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--lcg-red); font-weight:600} .wn-card h3{font-size:15px; font-weight:700; letter-spacing:-.01em; line-height:1.35; margin:0} .wn-card p{margin:0; font-size:12.5px; color:var(--lcg-mut); line-height:1.55} .wn-card p a{color:var(--lcg-red)} .wn-card p b{color:var(--lcg-ink); font-weight:650} /* Matches .plan ul li rather than .wn-card p: this is the same "feature checklist" pattern the pricing cards use, and soft clears 4.5:1 where mut does not. */ .wn-card ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px} .wn-card ul li{display:flex; gap:8px; font-size:12.5px; color:var(--lcg-soft); line-height:1.5} .wn-card ul li .c{color:var(--lcg-ok); flex:none} .wn-card ul li b{color:var(--lcg-ink); font-weight:650} .wn-card .act{margin-top:auto; padding-top:5px; display:flex; flex-wrap:wrap; gap:8px} .wn-card .act .lcg-btn-red,.wn-card .act .lcg-btn-ghost{font-size:12px; padding:8px 13px} @media (max-width:900px){.wn-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:620px){ .wn-grid{grid-template-columns:1fr} /* Two lines instead of four columns: name + course tag, then the date under it. */ .wn-row{grid-template-columns:minmax(0,1fr) auto; gap:5px 10px} .wn-row .n{grid-column:1; grid-row:1} .wn-row .lcg-tag{grid-column:2; grid-row:1} .wn-row .d{grid-column:1/-1; grid-row:2} .wn-row .go{display:none} } /* ---------- user dashboard ---------- */ .dash-hero{display:grid; grid-template-columns:auto 1fr; gap:32px; align-items:center; background:linear-gradient(155deg,var(--lcg-panel) 0%,var(--lcg-panel-2) 100%); border:1px solid var(--lcg-hair); border-radius:16px; padding:28px 30px; margin:28px 0 20px} .dash-ring{position:relative; width:132px; height:132px; flex:none} .dash-ring svg{width:100%; height:100%; transform:rotate(-90deg)} .dash-ring .track{fill:none; stroke:var(--lcg-hair-2); stroke-width:10} .dash-ring .value{fill:none; stroke:var(--lcg-red); stroke-width:10; stroke-linecap:round; stroke-dasharray:345.6; transition:stroke-dashoffset .6s ease} .dash-ring .lbl{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center} .dash-ring .lbl b{font-size:26px; font-variant-numeric:tabular-nums; color:var(--lcg-ink)} .dash-ring .lbl span{font-size:11px; color:var(--lcg-mut); text-transform:uppercase; letter-spacing:.08em} .dash-hero-main .lcg-eyebrow{display:block; margin-bottom:8px} .dash-hero-main h1{font-size:22px; margin:0 0 6px} .dash-hero-main p{margin:0 0 16px; color:var(--lcg-soft); font-size:14.5px; max-width:56ch} .dash-chips{display:flex; gap:10px; flex-wrap:wrap} .dash-chip{display:inline-flex; align-items:center; gap:6px; font-family:var(--lcg-mono); font-size:12px; color:var(--lcg-soft); background:var(--lcg-panel-2); border:1px solid var(--lcg-hair-2); padding:6px 12px; border-radius:999px} .dash-chip svg{width:14px; height:14px} .dash-chip.cert{color:var(--lcg-violet)} .dash-chip.flame{color:var(--lcg-amber)} .dash-resume{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; background:var(--lcg-panel); border:1px solid var(--lcg-hair); border-radius:14px; padding:18px 22px; margin-bottom:28px} .dash-resume-info{display:flex; align-items:center; gap:16px; min-width:0} .dash-resume-icon{width:44px; height:44px; border-radius:10px; background:rgba(242,80,75,.12); color:var(--lcg-red); display:flex; align-items:center; justify-content:center; flex:none} .dash-resume-icon svg{width:20px; height:20px} .dash-resume-text p{margin:0} .dash-resume-text .k{font-family:var(--lcg-mono); font-size:11px; color:var(--lcg-mut); text-transform:uppercase; letter-spacing:.08em; margin-bottom:3px} .dash-resume-text h3{font-size:15.5px; margin:0 0 3px; color:var(--lcg-ink)} .dash-resume-text .m{font-size:13px; color:var(--lcg-mut)} .dash-resume.is-upsell .dash-resume-icon{background:rgba(180,137,240,.14); color:var(--lcg-violet)} .dash-section-title{display:flex; align-items:baseline; justify-content:space-between; margin:0 0 14px; gap:12px; flex-wrap:wrap} .dash-section-title a{font-family:var(--lcg-mono); font-size:12.5px; color:var(--lcg-mut)} .dash-section-title a:hover{color:var(--lcg-soft)} .dash-course-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px; margin-bottom:28px} .dash-course-card{background:var(--lcg-panel); border:1px solid var(--lcg-hair); border-radius:14px; padding:18px; display:flex; flex-direction:column; gap:10px} .dash-course-card .hd{display:flex; align-items:center; justify-content:space-between; gap:8px} .dash-course-card .tag{font-family:var(--lcg-mono); font-size:11px; font-weight:700; letter-spacing:.05em; color:var(--tag)} .dash-course-card .st{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:3px 8px; border-radius:999px; white-space:nowrap} .dash-course-card .st.active{background:rgba(63,185,80,.14); color:var(--lcg-ok)} .dash-course-card .st.done{background:rgba(63,185,80,.14); color:var(--lcg-ok)} .dash-course-card .st.idle{background:rgba(174,182,198,.1); color:var(--lcg-mut)} .dash-course-card h4{font-size:15px; margin:0} .dash-course-card .meta{margin:0; font-size:12.5px; color:var(--lcg-mut)} .dash-progress{height:6px; border-radius:99px; background:var(--lcg-hair-2); overflow:hidden} .dash-progress span{display:block; height:100%; background:var(--tag); border-radius:99px} .dash-progress-label{display:flex; justify-content:space-between; font-size:11.5px; color:var(--lcg-mut); font-variant-numeric:tabular-nums} .dash-cta{margin-top:auto; font-family:var(--lcg-mono); font-size:12.5px; font-weight:700; color:var(--lcg-ink); padding-top:4px} .dash-cta:hover{color:var(--lcg-red)} .dash-course-card.is-locked{opacity:.92} .dash-course-card.is-locked .dash-cta{color:var(--lcg-violet)} .dash-course-card.is-locked .dash-cta:hover{filter:brightness(1.15)} .dash-lower-grid{display:grid; grid-template-columns:1.5fr 1fr; gap:16px; margin-bottom:16px} .dash-panel{background:var(--lcg-panel); border:1px solid var(--lcg-hair); border-radius:14px; padding:20px 22px} .dash-panel > .lcg-eyebrow{display:block; margin-bottom:14px} .dash-activity{list-style:none; margin:0; padding:0} .dash-activity li{display:flex; gap:14px; padding:10px 0; border-bottom:1px solid var(--lcg-hair); font-size:13.5px; color:var(--lcg-soft)} .dash-activity li:last-child{border-bottom:0; padding-bottom:0} .dash-activity time{font-family:var(--lcg-mono); color:var(--lcg-mut); font-size:11.5px; white-space:nowrap; padding-top:1px; flex:none} .dash-activity .ok{color:var(--lcg-ok); font-weight:600} .dash-activity .src{color:var(--lcg-mut)} .dash-empty{color:var(--lcg-mut); font-size:13.5px; margin:0} .dash-plan-row{display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:13.5px; padding:9px 0; border-bottom:1px solid var(--lcg-hair); color:var(--lcg-soft)} .dash-plan-row:last-of-type{border-bottom:0} .dash-plan-row .k{color:var(--lcg-mut)} .dash-plan-actions{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap} .dash-plan-actions form{margin:0} .dash-field label{font-family:var(--lcg-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--lcg-mut); display:block; margin-bottom:6px} .dash-field input{width:100%; background:#0d1219; border:1px solid var(--lcg-hair-2); border-radius:8px; color:var(--lcg-ink); font-size:14px; padding:10px 12px} .dash-field input:focus{outline:2px solid var(--lcg-cyan); outline-offset:1px; border-color:var(--lcg-hair-2)} .dash-form-row{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px} .dash-alert{border-radius:10px; padding:11px 16px; font-size:13px; margin-bottom:14px} .dash-alert.err{background:rgba(242,80,75,.1); border:1px solid rgba(242,80,75,.35); color:var(--lcg-red)} .dash-alert.ok{background:rgba(63,185,80,.1); border:1px solid rgba(63,185,80,.35); color:var(--lcg-ok)} @media (max-width:820px){ .dash-hero{grid-template-columns:1fr; text-align:left} .dash-lower-grid{grid-template-columns:1fr} .dash-form-row{grid-template-columns:1fr} }