/* ==========================================================================
   INFOTICS Academy — learning area (exam runner, LMS player, labs, projects, portfolio)
   Prefixes: .ex-* exam runner · .rs-* exam result · .lm-* LMS · .lb-* labs · .pj-* projects · .pf-* portfolio
   ========================================================================== */

/* ---------- exam runner ---------- */
.ex-shell{background:#eaf0f7}
.ex-shell .exam-top{gap:18px;padding:11px 24px;box-shadow:0 2px 12px rgba(7,17,31,.25)}
.ex-id{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.ex-id .brand-mark{width:36px;height:36px;font-size:13px;flex-shrink:0}
.ex-id .title{display:flex;flex-direction:column;line-height:1.25;font-size:1rem}
.ex-id .title small{font:500 .74rem var(--font);color:#9fb3cf;overflow:hidden;text-overflow:ellipsis}
.ex-qpos{font-size:.9rem;color:#c7d5ea;white-space:nowrap}
.ex-qpos b{color:#fff;font-size:1.05rem}
.ex-save{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;font-weight:600;color:#7fe0b5;white-space:nowrap;min-width:140px}
.ex-save[data-state="saving"]{color:#c7d5ea}
.ex-save[data-state="offline"]{color:#ffc46b}
.ex-shell .timer{min-width:118px;justify-content:center}
.ex-shell .timer.warn{background:#b45309;animation:none}
.ex-shell .timer.crit{background:#be123c;animation:pulse 1.2s infinite}
.ex-bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.12)}
.ex-bar i{display:block;height:100%;background:var(--cyan);transition:width .4s ease}

.ex-banners{max-width:1320px;margin:0 auto;width:100%;padding:16px 24px 0;display:grid;gap:10px}
.ex-banners:not(:has(*:not([hidden]))){padding:0}
.ex-notice{display:flex;gap:10px;align-items:flex-start;padding:11px 16px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:.86rem;color:var(--text)}
.ex-notice svg{color:var(--brand-ink);margin-top:2px}
.ex-alert{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border-radius:12px;font-size:.92rem;font-weight:500;flex-wrap:wrap}
.ex-alert[hidden]{display:none}
.ex-alert.danger{background:#fff1f4;border:1px solid #fbc8d4;color:#8f1235}
.ex-alert.warn{background:#fff8e6;border:1px solid #f6dda0;color:#6e4b00}
.ex-alert svg{margin-top:2px}
.ex-alert-x{background:none;border:0;cursor:pointer;color:inherit;padding:2px;border-radius:6px}

.ex-shell .exam-body{padding-top:20px;align-items:start}
.ex-q{outline:0}
.ex-q[hidden]{display:none}
.ex-q .q-meta{margin-bottom:20px}
.ex-domain{font-size:.8rem;font-weight:600;color:var(--muted);padding:3px 10px;border-radius:99px;background:#f0f4fa}
.ex-flagtag[hidden]{display:none}
.ex-fieldset{border:0;margin:0;padding:0;min-width:0}
.ex-fieldset legend.q-text{float:left;width:100%;padding:0;margin-bottom:10px}
.ex-fieldset legend.q-text+*{clear:both}
.ex-hint{font-size:.86rem;font-weight:600;color:var(--brand-600);margin:0 0 14px;clear:both}
.ex-q .q-text{font-size:1.2rem;line-height:1.55}
.ex-q .q-text code,.ex-opt-text code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:500}
.q-code{margin:14px 0 4px;padding:14px 16px;background:#0b1b33;color:#e6edf6;border-radius:12px;overflow:auto;font:500 .88rem/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre}
.q-code code{background:none;padding:0;color:inherit;font:inherit}
.ex-q .q-opt{margin-bottom:10px;font-size:1.02rem;line-height:1.5;color:var(--ink);align-items:center}
.ex-q .q-opt:focus-within{box-shadow:0 0 0 4px rgba(10,102,255,.18)}
.ex-q .q-opt input{margin:0;flex-shrink:0}
.ex-q .q-opt.selected{background:var(--brand-50);border-color:var(--brand)}
.ex-nav{align-items:center;border-top:1px solid var(--line-2);padding-top:22px}
.ex-tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.ex-nav .btn[disabled]{opacity:.4}
.ex-keys{margin:16px 4px 0}
.ex-keys kbd{font:600 .74rem ui-monospace,Menlo,Consolas,monospace;background:#fff;border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:1px 6px;color:var(--ink)}

.ex-palette{align-self:start}
.ex-palette .ex-pal-title{font-size:1rem;margin:0 0 4px}
.ex-counts{margin:0;font-size:.88rem;color:var(--muted)}
.ex-counts b{color:var(--ink)}
.ex-palette .palette-grid{max-height:340px;overflow:auto;padding:6px 6px 2px;margin:10px -6px 14px}
.ex-palette .pal:hover{border-color:var(--brand);color:var(--brand-ink)}
.ex-palette .pal.answered:hover{color:#fff;filter:brightness(1.1)}
.legend i.c{border-color:var(--brand);box-shadow:0 0 0 3px rgba(10,102,255,.25)}

.ex-modal-h{font-size:1.4rem;margin-bottom:.35em}
.ex-review-box{max-width:600px;max-height:calc(100vh - 40px);overflow:auto}
.ex-review-sum{font-weight:600;color:var(--ink)}
.ex-group-h{font-size:.95rem;margin:16px 0 8px}
.ex-group-h span{color:var(--muted);font-weight:600}
.ex-chips{display:flex;flex-wrap:wrap;gap:8px}
.ex-chip{padding:6px 12px;min-width:48px;border-radius:10px;border:1.5px solid var(--line);background:#fff;font:700 .84rem var(--font);color:var(--ink);cursor:pointer}
.ex-chip:hover{border-color:var(--brand);color:var(--brand-ink)}
[data-review-group="flagged"] .ex-chip{border-color:#f6dda0;background:#fff8e6}
.ex-modal-actions{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:22px}
.ex-rules{padding-left:1.2rem}
.ex-rules li{margin-bottom:.6em}

.ex-overlay{position:fixed;inset:0;background:rgba(7,17,31,.94);display:none;align-items:center;justify-content:center;z-index:150;padding:20px}
.ex-overlay.open{display:flex}
.ex-overlay-box{background:#fff;border-radius:22px;padding:36px;max-width:520px;width:100%;text-align:center;box-shadow:var(--shadow-lg)}
.ex-overlay-ico{display:grid;place-items:center;width:64px;height:64px;border-radius:18px;background:var(--brand-50);color:var(--brand-ink);margin:0 auto 16px}
.ex-overlay-ico.bad{background:#ffe1e7;color:var(--red)}

@media (max-width:1080px){
  .ex-shell .exam-top{flex-wrap:wrap;gap:8px 14px}
  .ex-id{flex:1 1 60%}
  .ex-save{min-width:0}
}
@media (max-width:680px){
  .ex-shell .exam-top{padding:10px 14px;gap:8px 10px}
  .ex-id{order:1;flex:1 1 auto}
  .ex-shell .timer{order:2;min-width:0;padding:6px 12px;font-size:1rem}
  .ex-qpos{order:3}
  .ex-save{order:4;flex:1;min-width:0;justify-content:flex-start}
  .ex-submit{order:5}
  .ex-banners{padding:12px 14px 0}
  .ex-shell .exam-body{padding:14px}
  .ex-q .q-text{font-size:1.08rem}
  .ex-nav{position:sticky;bottom:0;background:#fff;margin:22px -20px -20px;padding:12px 14px;border-radius:0 0 18px 18px;box-shadow:0 -8px 20px -12px rgba(7,17,31,.25);display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .ex-nav .ex-tools{grid-column:1/-1;order:-1}
  .ex-nav>.btn{width:100%}
  .ex-keys{display:none}
  .ex-overlay-box{padding:26px 20px}
}

/* ---------- exam result ---------- */
.result-hero.void{background:linear-gradient(135deg,#334155,#475569 60%,#64748b)}
.rs-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center}
.rs-eyebrow{display:inline-block;font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.9;margin-bottom:10px}
.rs-verdict{color:#fff;font-size:clamp(1.5rem,3vw,2.2rem);margin:0 0 .4em}
.rs-lead{color:rgba(255,255,255,.94);font-size:1.05rem;max-width:56ch;margin-bottom:18px}
.rs-chips{display:flex;flex-wrap:wrap;gap:8px}
.rs-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:99px;background:rgba(255,255,255,.18);font-size:.84rem;font-weight:600;color:#fff}
.rs-ring{--p:0;width:200px;height:200px;border-radius:50%;display:grid;place-items:center;text-align:center;position:relative}
.rs-ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(#fff calc(var(--p)*1%),rgba(255,255,255,.26) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 14px),#000 calc(100% - 13px));mask:radial-gradient(farthest-side,transparent calc(100% - 14px),#000 calc(100% - 13px))}
.rs-ring>div{position:relative}
.rs-ring .score-big{font-size:3.6rem}
.rs-ring .score-big small{font-size:1.5rem;letter-spacing:0;margin-left:2px}
.rs-ring span{font-size:.78rem;font-weight:700;opacity:.9}
.rs-cred-grid{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;align-items:center}
.rs-badge{width:140px;height:154px;filter:drop-shadow(0 14px 24px rgba(7,17,31,.25))}
.rs-retake-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px;align-items:start}
.rs-dp{text-align:right;color:var(--ink)}
.domain-bar .progress{height:10px}
.rs-flags{margin:0 0 12px;padding-left:1.2rem}
.rs-filter button{padding:8px 12px;font-size:.86rem}
.q-review[hidden]{display:none}
.rs-q{font-size:1.02rem;margin-bottom:12px}
.rs-answers{display:grid;grid-template-columns:130px minmax(0,1fr);gap:6px 14px;margin:0 0 8px;font-size:.94rem}
.rs-answers dt{color:var(--muted);font-weight:600}
.rs-answers dd{margin:0;color:var(--ink)}
.rs-answers dd.good{color:#0b7a4b;font-weight:700}
.rs-answers dd.bad{color:#b3123f;font-weight:700}
.rs-answers dd.none{color:var(--muted)}
.rs-expl{margin:0;padding:10px 14px;border-radius:10px;background:#f4f8fd;font-size:.92rem;color:var(--text)}
.rs-next{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
@media (max-width:860px){
  .rs-hero{grid-template-columns:1fr;text-align:left;padding:28px 22px}
  .rs-score{order:-1}
  .rs-ring{width:150px;height:150px}
  .rs-ring .score-big{font-size:2.7rem}
  .rs-cred-grid,.rs-retake-grid{grid-template-columns:1fr}
  .rs-badge{margin:0 auto}
}
@media (max-width:680px){
  .rs-answers{grid-template-columns:1fr;gap:0}
  .rs-answers dd{margin-bottom:8px}
  .domain-bar .rs-dp{text-align:left}
}

/* the design system's display rules must not defeat the hidden attribute inside dialogs and the exam shell */
.ex-shell [hidden],.modal-box [hidden]{display:none!important}

/* ---------- LMS: course home ---------- */
.lm-course{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.lm-side{display:grid;gap:18px}
.lm-side .panel,.lm-side .card{margin-bottom:0}
.lm-main>*+*{margin-top:22px}
.lm-main .panel{margin-bottom:0}
.lm-continue{display:flex;flex-wrap:wrap;gap:16px 18px;align-items:center;padding:22px 24px;border:0;background:var(--grad-dark);color:#c9d6e6;box-shadow:var(--shadow)}
.lm-continue .grow{flex:1 1 300px;min-width:0}
.lm-continue .lm-cont-h{color:#fff;font-size:1.15rem;margin:2px 0 4px}
.lm-continue .muted{color:#9fb3cf}
.lm-continue .progress{background:rgba(255,255,255,.16);max-width:320px}
.lm-cont-ico{width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.1);display:grid;place-items:center;color:var(--cyan);flex-shrink:0}
.lm-eyebrow{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.lm-sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
.lm-sec-head h2{font-size:1.25rem;margin:0}
.lm-mod summary{gap:14px}
.lm-mod-t{display:flex;align-items:center;gap:12px;min-width:0}
.lm-mod-n{width:28px;height:28px;border-radius:9px;background:var(--brand-50);color:var(--brand-ink);display:grid;place-items:center;font-size:.82rem;font-weight:800;flex-shrink:0}
.lm-mod-meta{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:600;color:var(--muted);white-space:nowrap}
.lm-mod-meta svg:first-child:not(:last-child){color:var(--green-ink)}
.lm-mod[open] .lm-mod-meta>svg:last-child{transform:rotate(180deg)}
.acc-module .lessons li.lm-lesson{padding:0}
.lm-lesson-a{display:flex;gap:12px;align-items:center;padding:11px 20px;color:var(--text);width:100%}
.lm-lesson-a:hover{background:#fafcff;text-decoration:none;color:var(--brand-ink)}
.lm-tick{color:#8ea0b8;display:grid}
.lm-lesson.is-done .lm-tick{color:var(--green-ink)}
.lm-lesson.is-done .lm-lesson-a{color:var(--muted)}
.lm-type{font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);background:#f0f4fa;padding:2px 8px;border-radius:99px}
.lm-progress{display:flex;gap:18px;align-items:center}
.lm-progress .ring{width:84px;height:84px;flex-shrink:0}
.lm-prog-h{color:var(--ink)}
.lm-session{display:flex;gap:12px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--line-2)}
.lm-session:last-child{border-bottom:0}
.lm-date{width:46px;text-align:center;border-radius:12px;background:var(--brand-50);color:var(--brand-ink);padding:5px 0;line-height:1.1;flex-shrink:0}
.lm-date b{display:block;font:800 1.1rem var(--font-display)}
.lm-date span{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.lm-mats{padding:14px;display:grid;gap:10px}
.lm-mats .res-card{padding:10px 12px;gap:10px}
.lm-mats .res-ico{width:38px;height:38px}
.lm-res-t{min-width:0;overflow-wrap:anywhere}
.lm-exams{display:grid;gap:16px}
.lm-cred{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.lm-cred img{border-radius:12px;flex-shrink:0}
.lm-modal-box{max-width:920px;padding:20px}
.lm-modal-h{font-size:1.1rem;margin:0}

/* ---------- LMS: lesson ---------- */
.lm-stage{min-width:0}
.lm-vtools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}
.lm-speed{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;color:var(--muted)}
.lm-speed .select{width:auto;padding:6px 30px 6px 10px;font-size:.86rem}
.lm-save{margin-left:auto}
.lm-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:22px 0}
.lm-done{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lm-done form{margin:0}
.lm-done-pill{padding:7px 14px;font-size:.82rem}
.lm-nomedia{padding:44px 28px;text-align:center;background:linear-gradient(180deg,#fff,#f6f9fe)}
.lm-nomedia h2{font-size:1.3rem}
.lm-nomedia p{max-width:52ch;margin:0 auto 18px;color:var(--muted)}
.lm-nomedia-ico{display:grid;place-items:center;width:72px;height:72px;border-radius:20px;background:var(--brand-50);color:var(--brand-ink);margin:0 auto 16px}
.lm-prose{line-height:1.75}
.lm-prose>:first-child{margin-top:0}
.lm-prose pre{background:#0b1b33;color:#e6edf6;padding:14px 16px;border-radius:12px;overflow:auto;font-size:.88rem}
.lm-prose code{background:#eef3fa;padding:1px 6px;border-radius:6px;font-size:.92em}
.lm-prose pre code{background:none;padding:0}
.lm-prose img{border-radius:12px}
.lm-reslist{display:grid;gap:10px}
.lm-tabs .tabs{margin-bottom:18px}
.lm-syllabus{padding:0;overflow:auto}
.lm-syl-head{padding:16px 18px;border-bottom:1px solid var(--line-2);position:sticky;top:0;background:#fff;z-index:1}
.lm-syl-title{font:700 1rem var(--font-display);color:var(--ink);display:block}
.lm-syllabus .syl-item .done{color:var(--green-ink)}
.lm-syllabus .syl-item>span:first-child{color:#8ea0b8;display:grid}
.lm-syllabus .syl-item.active>span:first-child{color:var(--brand-ink)}

/* ---------- LMS: quiz ---------- */
.lm-quiz{max-width:860px}
.lm-quiz>*+*{margin-top:22px}
.lm-quiz .panel{margin-bottom:0}
.lm-qscore{display:flex;gap:20px;align-items:center;padding:22px 24px;border-left:5px solid var(--red)}
.lm-qscore.is-pass{border-left-color:var(--green-ink)}
.lm-qscore-h{font-size:1.3rem;margin:0 0 2px}
.lm-qscore .ring{width:84px;height:84px;flex-shrink:0}
.lm-qscore.is-pass .ring{background:conic-gradient(var(--green) calc(var(--p)*1%),#e6edf6 0)}
.lm-qscore.is-fail .ring{background:conic-gradient(var(--red) calc(var(--p)*1%),#e6edf6 0)}
.lm-qfield{border:0;padding:0;margin:0 0 30px;min-width:0}
.lm-qfield legend{display:flex;gap:12px;align-items:flex-start;font-weight:600;color:var(--ink);font-size:1.06rem;line-height:1.5;margin-bottom:14px;padding:0;width:100%}
.lm-qn{width:30px;height:30px;border-radius:9px;background:var(--brand-50);color:var(--brand-ink);display:grid;place-items:center;font-size:.86rem;font-weight:800;flex-shrink:0}
.lm-qt{padding-top:3px}
.lm-qfield .q-opt{margin-bottom:10px;align-items:center}
.lm-qfield .q-opt:focus-within{box-shadow:0 0 0 4px rgba(10,102,255,.18)}
.lm-qfield .q-opt input{margin:0}
.lm-qfoot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:18px 22px;border-top:1px solid var(--line-2);background:var(--surface-2)}
.lm-q-text{font-size:1.02rem;margin-bottom:12px}

@media (max-width:1080px){
  .lm-course{grid-template-columns:1fr}
  .lm-side{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:start}
}
@media (max-width:680px){
  .lm-continue{flex-direction:column;align-items:flex-start}
  .lm-continue .btn{width:100%}
  .lm-lesson-a{padding:11px 14px;flex-wrap:wrap}
  .lm-side{grid-template-columns:1fr}
  .lm-hide-sm{display:none}
  .lm-actions{gap:8px}
  .lm-save{margin-left:0;flex-basis:100%}
  .lm-qscore{flex-wrap:wrap}
}
.lm-prose h1,.lm-prose h2{font-size:1.5rem;margin:1.2em 0 .5em}
.lm-prose h3{font-size:1.2rem;margin:1.1em 0 .4em}
.lm-prose blockquote{margin:1em 0;padding:.5em 1em;border-left:4px solid var(--brand);background:#f4f8fd;border-radius:0 10px 10px 0}
.lm-prose blockquote p{margin:0}
.lm-prose table{border-collapse:collapse;margin:1em 0}
.lm-prose th,.lm-prose td{border:1px solid var(--line);padding:6px 12px;text-align:left}
.lm-syllabus .syl-item>span.done:first-child{color:var(--green-ink)}
/* .q-review.skip must not inherit the accessibility skip-link rules (.skip is positioned off-screen) */
.q-review.skip,.q-review.skip:focus{position:static;left:auto;top:auto;z-index:auto;background:transparent}

/* ---------- labs ---------- */
.lb-hero{padding-bottom:32px}
.lb-wrap>*+*{margin-top:24px}
.lb-wrap .kpis{margin-bottom:0}
.lb-filters{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.lb-f .select{min-width:240px}
.lb-chips{display:flex;gap:8px;flex-wrap:wrap}
.lb-chips .chip{font-family:inherit}
.lb-only{margin-left:auto}
.lb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.lb-grid-sm{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.lb-card{display:flex;flex-direction:column;overflow:hidden}
.lb-card[hidden]{display:none}
.lb-top{height:88px;padding:16px 20px;display:flex;justify-content:space-between;align-items:flex-start;color:#fff;background-color:#0b3d91}
.lb-top-ico{width:46px;height:46px;border-radius:14px;background:rgba(255,255,255,.18);display:grid;place-items:center}
.lb-level{font:800 .78rem var(--font-display);letter-spacing:.06em;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.2)}
.lb-body{padding:18px 20px 8px;flex:1}
.lb-vendor{font-size:.76rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lb-title{font-size:1.08rem;line-height:1.3;margin:4px 0 8px}
.lb-scn{font-size:.9rem;color:var(--muted);margin-bottom:12px}
.lb-meta{display:flex;gap:14px;flex-wrap:wrap;list-style:none;padding:0;margin:0 0 10px;font-size:.84rem;color:var(--text)}
.lb-meta li{display:inline-flex;gap:6px;align-items:center}
.lb-skills{margin-top:4px}
.lb-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 20px;border-top:1px solid var(--line-2);flex-wrap:wrap}
.lb-proj .lb-body{padding-top:20px}
.lb-section{margin-top:36px}
.lb-section>h2{font-size:1.3rem}
.lb-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.lb-main>*+*{margin-top:24px}
.lb-side{display:grid;gap:18px;position:sticky;top:84px}
.lb-side .panel,.lb-side .card{margin-bottom:0}
.lb-h{font-size:1.15rem;margin-bottom:.5em}
.lb-scenario{font-size:1.05rem;color:var(--ink)}
.lb-instr{font-size:.95rem}
.lb-tasks{list-style:none;padding:0;margin:0;display:grid;gap:16px}
.lb-task{padding:22px 24px}
.lb-task.is-ok{border-color:#b9ecd7}
.lb-task-head{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.lb-step{width:38px;height:38px;border-radius:12px;background:var(--brand-50);color:var(--brand-ink);display:grid;place-items:center;font:800 1rem var(--font-display);flex-shrink:0}
.lb-task.is-ok .lb-step{background:#dcf7ea;color:#0b7a4b}
.lb-task-t{font-size:1.05rem;margin:0}
.lb-task-body{font-size:.95rem}
.lb-hint{margin-top:12px;border:1px dashed #cbd7e6;border-radius:12px;padding:10px 14px;background:#fbfdff}
.lb-hint summary{cursor:pointer;font-weight:700;color:var(--brand-ink);font-size:.9rem}
.lb-hint p{margin:8px 0 0;font-size:.92rem}
.lb-evidence{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:8px}
.lb-evidence li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:12px;background:#f6f9fd;font-size:.88rem}
.lb-payload{margin:0;white-space:pre-wrap;word-break:break-word;font:500 .82rem/1.5 ui-monospace,Menlo,Consolas,monospace;color:var(--ink)}
.lb-add{margin-top:14px;border-top:1px solid var(--line-2);padding-top:12px}
.lb-add summary{cursor:pointer;font-weight:700;font-size:.9rem;color:var(--brand-ink);display:inline-flex;align-items:center;gap:6px}
.lb-form{margin-top:14px}
.lb-form .field{margin-bottom:12px}
.lb-status .pill{margin-bottom:10px}
.lb-timer-row{display:flex;align-items:center;gap:10px;margin:2px 0 14px;color:var(--ink)}
.lb-timer{font:800 1.8rem ui-monospace,Menlo,Consolas,monospace;letter-spacing:.04em}
.lb-timer.is-low{color:var(--red)}
.lb-score{font:800 2.6rem var(--font-display);color:var(--ink);line-height:1.1;margin:4px 0}
.lb-related{display:grid;gap:10px;padding:14px}
.lb-related .res-card{padding:10px 12px}

/* ---------- projects ---------- */
.pj-sub{font-size:.95rem;margin:18px 0 8px}
.pj-req ul{padding-left:1.2rem}
.pj-req li{margin-bottom:.4em}
.pj-flow{list-style:none;counter-reset:pj;padding:0;margin:0;display:grid;gap:12px}
.pj-flow li{counter-increment:pj;display:grid;grid-template-columns:34px 1fr;column-gap:14px;align-items:start}
.pj-flow li::before{content:counter(pj);grid-row:1/3;width:34px;height:34px;border-radius:10px;background:var(--brand-50);color:var(--brand-ink);display:grid;place-items:center;font:800 .95rem var(--font-display)}
.pj-flow li span{color:var(--muted);font-size:.92rem}
.pj-score{font:800 2.6rem var(--font-display);color:var(--ink);margin:10px 0 6px;line-height:1}
.pj-score span{font-size:1rem;color:var(--muted);font-weight:600;margin-left:6px}
.pj-kv{grid-template-columns:100px 1fr;font-size:.88rem}
.pj-notes{color:var(--text);padding:10px 12px;background:#f6f9fd;border-radius:10px;white-space:pre-wrap;word-break:break-word}
.pj-form{margin-top:18px;border-top:1px solid var(--line-2);padding-top:6px}

/* ---------- portfolio ---------- */
.pf-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.pf-main>*+*{margin-top:24px}
.pf-main .panel{margin-bottom:0}
.pf-side{display:grid;gap:18px}
.pf-side .panel{margin-bottom:0}
.pf-switch{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);cursor:pointer;margin-top:4px}
.pf-switch .switch{margin-top:2px;flex:0 0 44px}
.pf-item .btn{flex-shrink:0}
.pf-add{border-top:1px solid var(--line-2);background:var(--surface-2)}
.pf-cred{display:flex;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line-2)}
.pf-cred:first-of-type{border-top:0}
.pf-cred img{border-radius:10px}
.pf-kv{grid-template-columns:80px 1fr;word-break:break-all}
.pf-hero{padding:56px 0 48px}
.pf-preview{margin-bottom:24px}
.pf-head{display:flex;gap:28px;align-items:center}
.pf-avatar{width:112px;height:112px;font-size:2rem;border:3px solid rgba(255,255,255,.35)}
.pf-name{color:#fff;font-size:clamp(2rem,4vw,3rem);margin:0 0 4px}
.pf-headline{color:#c9d6e6;font-size:1.15rem;margin:0 0 14px}
.pf-chips,.pf-links{display:flex;gap:10px;flex-wrap:wrap}
.pf-links{margin-top:14px}
.pf-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:99px;background:rgba(255,255,255,.12);color:#e6edf6;font-size:.86rem;font-weight:600}
.pf-open{background:rgba(18,185,129,.25);color:#b9f3da}
.pf-page{padding:36px 16px 70px;max-width:980px}
.pf-summary{font-size:1.1rem;color:var(--ink);margin-bottom:8px}
.pf-sec{margin-top:36px}
.pf-sec h2{font-size:1.4rem}
.pf-bio{white-space:pre-line}
.pf-cred-card{display:flex;gap:20px;align-items:center;padding:18px 22px;margin-bottom:14px}
.pf-cred-card h3{font-size:1.1rem;margin:0 0 2px}
.pf-cred-card img{flex-shrink:0}
.pf-cred-act{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.pf-badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.pf-badge{display:flex;flex-direction:column;gap:4px;align-items:center;color:var(--ink);padding:20px 14px}
.pf-badge:hover{text-decoration:none;border-color:#b9d1f3}
.pf-badge .badge-art{width:120px;height:132px;margin-bottom:8px}
.pf-verify{color:var(--brand-ink);font-weight:700}
.pf-work{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.pf-cta{margin-top:44px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;padding:32px 36px}
.pf-cta h2{color:#fff;font-size:1.5rem;margin-bottom:.3em}
.pf-cta p{margin:0;max-width:52ch}
.pf-updated{margin-top:18px}

@media (max-width:1080px){
  .lb-layout,.pf-layout{grid-template-columns:1fr}
  .lb-side{position:static}
}
@media (max-width:680px){
  .lb-only{margin-left:0}
  .lb-f,.lb-f .select{width:100%}
  .lb-task{padding:18px}
  .pf-head{flex-direction:column;align-items:flex-start;gap:18px}
  .pf-avatar{width:88px;height:88px;font-size:1.6rem}
  .pf-cred-card{flex-wrap:wrap}
  .pf-cred-act{flex-direction:row;align-items:center;width:100%}
  .pf-cta{padding:26px 22px}
}
.lb-main .kv dd{font-weight:500}
.pf-cta{text-align:left}

/* ---------- narrow phones (320px) ---------- */
.lb-main,.lb-side,.pf-main,.pf-side,.lm-main,.lm-side{min-width:0}
.lb-h,.lb-title,.lb-task-t,.pf-name,.pf-headline,.pf-cred-card h3{overflow-wrap:anywhere}
.lm-continue .grow{flex-basis:min(300px,100%)}
.pf-work{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.pf-badges{grid-template-columns:repeat(auto-fill,minmax(min(160px,100%),1fr))}
@media (max-width:400px){
  .pf-page{padding:28px 12px 60px}
  .lb-task{padding:14px}
  .lm-continue{padding:18px 16px}
  .pf-cta{padding:22px 16px}
  .pf-cred-card{padding:16px}
}
.lb-tasks{grid-template-columns:minmax(0,1fr)}
.lb-task{min-width:0}
.lb-task-head{flex-wrap:wrap}
.lb-payload{white-space:pre-wrap;overflow-wrap:anywhere}
.pf-main .callout a,.pf-main .callout div{overflow-wrap:anywhere;min-width:0}
@media (max-width:1080px){.lb-layout,.pf-layout{grid-template-columns:minmax(0,1fr)}}
.lb-evidence li{flex-wrap:wrap}
.lb-evidence li .grow{flex:1 1 180px;min-width:0}
.callout>div{min-width:0;overflow-wrap:anywhere}
.lb-side,.pf-side{grid-template-columns:minmax(0,1fr)}
@media (max-width:680px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .kpis .kpi{padding:14px}
  .kpis .kpi b{font-size:1.45rem}
  .kpis .kpi .ico{width:32px;height:32px;top:12px;right:12px}
}

/* exam runner: compact phone header and sticky nav */
.ex-id .title{min-width:0;overflow:hidden}
.ex-id .title small{white-space:nowrap}
@media (max-width:680px){
  .ex-shell .exam-top{overflow:hidden}
  .ex-id{flex:1 1 100%;order:1}
  .ex-shell .timer{order:2}
  .ex-qpos{display:none}
  .ex-save{order:3;flex:1 1 0;min-width:0;font-size:.74rem;overflow:hidden;text-overflow:ellipsis}
  .ex-save[data-state="saved"] [data-save-text]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ex-submit{order:4;margin-left:auto}
  .ex-nav .ex-tools{flex-wrap:nowrap}
  .ex-nav .ex-tools .btn{flex:1 1 0;padding-inline:8px;white-space:nowrap;font-size:.8rem;gap:5px}
  .ex-nav{padding:10px 14px;gap:8px}
}
/* live online proctoring: check-in + in-exam dock */
.pc-shell{min-height:100vh;background:var(--bg-soft,#f5f8fd)}
.pc-steps{display:flex;gap:6px;flex-wrap:wrap;font-size:.78rem}
.pc-steps span{padding:4px 10px;border-radius:20px;background:#eef2f7;color:var(--muted);font-weight:600}
.pc-steps span.now{background:var(--brand,#0a66ff);color:#fff}.pc-steps span.done{background:#dcf7ea;color:#0f7b45}
.pc-body{max-width:1100px;margin:0 auto;padding:22px 16px}
.pc-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;align-items:start}
.pc-h{font-size:1.4rem;margin:0 0 8px}
.pc-rules{margin:10px 0 16px;padding-left:20px;display:grid;gap:7px;font-size:.92rem}
.pc-checks{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:8px}
.pc-checks li{display:flex;align-items:center;gap:10px;font-weight:600}
.pc-checks li span{width:20px;height:20px;border-radius:50%;background:#e6edf6;flex:none}
.pc-checks li.ok span{background:#16a34a}.pc-checks li.ok span::after{content:"✓";color:#fff;font-size:.75rem;display:block;text-align:center;line-height:20px}
.pc-checks li.bad{color:#b91c1c}.pc-checks li.bad span{background:#dc2626}
.pc-mic{display:flex;align-items:center;gap:10px;font-size:.85rem}.pc-mic i{flex:1;height:8px;background:#e6edf6;border-radius:8px;overflow:hidden}.pc-mic b{display:block;height:100%;width:0;background:var(--grad);transition:width .2s}
.pc-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.pc-cam{position:relative;padding:12px;overflow:hidden}
.pc-cam video{width:100%;border-radius:12px;background:#0b1220;aspect-ratio:4/3;object-fit:cover;display:block}
.pc-cam-empty{position:absolute;inset:12px 12px auto;aspect-ratio:4/3;display:grid;place-items:center;align-content:center;gap:6px;color:#9fb0c4;font-size:.85rem}
.pc-shots{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.pc-shots figure{margin:0;border:1px dashed var(--line);border-radius:10px;min-height:70px;display:grid;place-items:center;overflow:hidden}
.pc-shots img,.pc-thumbs img{width:100%;display:block}.pc-shots figcaption{font-size:.72rem;color:var(--muted);padding:4px}
.pc-thumbs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}.pc-thumbs img{border-radius:8px}
.pc-dock{position:fixed;right:14px;bottom:14px;z-index:60;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.pc-self{position:relative;width:170px;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px -10px rgba(0,0,0,.45);background:#0b1220}
.pc-self video{width:100%;display:block;aspect-ratio:4/3;object-fit:cover}
.pc-rec{position:absolute;left:6px;top:6px;font-size:.68rem;font-weight:800;color:#fff;background:rgba(0,0,0,.45);padding:2px 7px;border-radius:10px;display:flex;align-items:center;gap:4px}
.pc-rec i{width:7px;height:7px;border-radius:50%;background:#ef4444;animation:pcblink 1.4s infinite}
@keyframes pcblink{50%{opacity:.25}}
.pc-badge{background:#ef4444;color:#fff;border-radius:10px;padding:0 6px;font-size:.7rem;margin-left:4px}
.pc-chat{position:fixed;right:14px;bottom:200px;width:320px;max-width:calc(100vw - 28px);z-index:61;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 50px -20px rgba(0,0,0,.4);display:flex;flex-direction:column}
.pc-chat header{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-bottom:1px solid var(--line-2,#eef2f7)}
.pc-msgs{height:230px;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:6px;font-size:.86rem}
.pc-m{padding:6px 9px;border-radius:10px;background:#f1f5f9;max-width:90%}.pc-m small{display:block;color:var(--muted);font-size:.68rem}
.pc-m.candidate{align-self:flex-end;background:#e7f0ff}.pc-m.system{align-self:center;background:transparent;color:var(--muted);text-align:center}
.pc-m.warn{background:#fff1f2;border:1px solid #fecdd3}
.pc-chat form{display:flex;gap:6px;padding:8px;border-top:1px solid var(--line-2,#eef2f7)}
@media (max-width:860px){.pc-grid{grid-template-columns:1fr}.pc-self{width:120px}.pc-chat{bottom:150px}}
.ex-next-hint{margin-left:auto;margin-right:10px;align-self:center}
@media (max-width:680px){.ex-next-hint{grid-column:1/-1;text-align:center;margin:0}}

/* ===== interactive labs (KodeKloud-style workspace) ===== */
.kl-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;background:#0b1f3a;color:#fff;border-radius:14px;padding:10px 14px;margin-bottom:14px;position:sticky;top:8px;z-index:20;box-shadow:0 10px 24px rgba(10,30,60,.18)}
.kl-bar-l,.kl-bar-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kl-bar .muted{color:#b9c7da}
.kl-chip{display:inline-flex;gap:6px;align-items:center;background:rgba(255,255,255,.1);border-radius:999px;padding:5px 11px;font-weight:600;font-variant-numeric:tabular-nums}
.kl-pts b{color:#FFD166}
.kl-prog{width:140px;height:8px;border-radius:8px;background:rgba(255,255,255,.15);overflow:hidden}
.kl-prog i{display:block;height:100%;background:linear-gradient(90deg,#1FB981,#46d3ff);border-radius:inherit;transition:width .5s ease}
.kl-agent{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:#ffb4b4}
.kl-agent i{width:9px;height:9px;border-radius:50%;background:#f87171;box-shadow:0 0 0 3px rgba(248,113,113,.25)}
.kl-agent.on{color:#a7f3d0}.kl-agent.on i{background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.25);animation:klPulse 2s infinite}
@keyframes klPulse{50%{box-shadow:0 0 0 6px rgba(52,211,153,.05)}}
.kl-ws{display:grid;grid-template-columns:minmax(340px,5fr) 7fr;gap:16px;align-items:start}
.kl-tasks{display:flex;flex-direction:column;gap:12px}
.kl-steps{display:flex;gap:6px;flex-wrap:wrap}
.kl-step{width:34px;height:34px;border-radius:10px;border:1.5px solid #d6deea;background:#fff;font-weight:700;color:#334155;cursor:pointer;display:grid;place-items:center;transition:all .15s}
.kl-step:hover{border-color:#0A66FF}
.kl-step.is-current{border-color:#0A66FF;background:#0A66FF;color:#fff;box-shadow:0 4px 12px rgba(10,102,255,.3)}
.kl-step.is-ok{border-color:#1FB981;background:#e9f9f2;color:#0B7A4B}
.kl-step.is-ok.is-current{background:#1FB981;color:#fff}
.kl-task{padding:18px 20px}
.kl-task-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.kl-kind{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:#0A66FF;background:rgba(10,102,255,.08);padding:3px 8px;border-radius:6px}
.kl-kind.q{color:#7C5CFF;background:rgba(124,92,255,.1)}
.kl-worth{font-size:.8rem;font-weight:700;color:#b7791f}
.kl-task-t{font-size:1.15rem;margin:4px 0 8px}
.kl-body code,.kl-body pre{font-size:.85rem}
.kl-form{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.kl-opts{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.kl-opt{display:flex;gap:10px;align-items:flex-start;border:1.5px solid #e2e8f0;border-radius:10px;padding:10px 12px;cursor:pointer;transition:border-color .15s,background .15s}
.kl-opt:hover{border-color:#94b8ff}
.kl-opt:has(input:checked){border-color:#0A66FF;background:#f2f7ff}
.kl-ans{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.kl-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
[data-check-btn].is-busy{opacity:.7;pointer-events:none}
[data-check-btn].is-busy::after{content:'';width:14px;height:14px;margin-left:6px;border:2px solid rgba(255,255,255,.5);border-top-color:#fff;border-radius:50%;display:inline-block;animation:klSpin .7s linear infinite}
@keyframes klSpin{to{transform:rotate(360deg)}}
.kl-feedback{min-height:1.4em;margin-top:8px;font-weight:600;font-size:.92rem}
.kl-feedback.ok{color:#0B7A4B}.kl-feedback.bad{color:#B42318}.kl-feedback.wait{color:#5b6b82}
.kl-shake{animation:klShake .35s}
@keyframes klShake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.kl-hint,.kl-solution{margin-top:10px;border-radius:10px;padding:10px 12px;font-size:.9rem}
.kl-hint{background:#fff8e6;border:1px solid #f6d58a}.kl-solution{background:#eef6ff;border:1px solid #bcd6ff}
.kl-hint p{margin:.3rem 0 0}
.kl-out pre{background:#0b1220;color:#d1fae5;padding:10px;border-radius:8px;font-size:.78rem;max-height:200px;overflow:auto;white-space:pre-wrap}
.kl-nav{display:flex;justify-content:space-between;margin-top:14px;border-top:1px solid #edf1f7;padding-top:12px}
.kl-agent-note{margin:0}
.kl-term{position:sticky;top:76px}
.kl-frame{width:100%;height:calc(100vh - 170px);min-height:480px;border:0;border-radius:14px;background:#0b1220}
.kl-term-box{background:#0b1220;color:#d6e2f3;border-radius:14px;overflow:hidden;min-height:420px;box-shadow:0 14px 34px rgba(5,15,35,.25)}
.kl-term-head{display:flex;gap:6px;align-items:center;padding:10px 14px;background:#111a2e}
.kl-term-head span{width:10px;height:10px;border-radius:50%;background:#f87171}.kl-term-head span:nth-child(2){background:#fbbf24}.kl-term-head span:nth-child(3){background:#34d399}
.kl-term-head b{margin-left:8px;font-size:.85rem;color:#9fb0c7}
.kl-term-body{padding:18px 20px;font-size:.92rem;line-height:1.6}
.kl-term-p{color:#c6d3e6}
.kl-term-body code{color:#a7f3d0}
.kl-cmd{display:flex;gap:8px;align-items:center;background:#060b16;border:1px solid #1f2a44;border-radius:10px;padding:10px 12px;margin:6px 0 10px}
.kl-cmd code{flex:1;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.8rem;word-break:break-all;color:#a7f3d0}
.kl-checker{margin-top:10px;border:1px solid var(--line,#d8dee9);border-radius:10px;padding:8px 12px}
.kl-checker summary{cursor:pointer}
.kl-done{text-align:center;padding:26px;background:radial-gradient(120% 120% at 50% 0,rgba(31,185,129,.12),transparent 70%)}
.kl-trophy{display:inline-grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#FFD166;color:#7a4b00;margin-bottom:8px;animation:klPop .5s ease}
@keyframes klPop{0%{transform:scale(.4)}70%{transform:scale(1.1)}100%{transform:scale(1)}}
.kl-confetti{position:fixed;inset:0;pointer-events:none;z-index:200;overflow:hidden}
.kl-confetti i{position:absolute;top:-12px;width:8px;height:14px;border-radius:2px;animation:klFall 2.8s ease-in forwards}
@keyframes klFall{to{top:105%;transform:rotate(540deg)}}
.kl-hero-card .kl-hero-top{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.kl-cat{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;background:rgba(10,102,255,.1);color:#0A66FF;flex:none}
.kl-facts{display:flex;flex-wrap:wrap;gap:8px 16px;list-style:none;padding:0;margin:12px 0 0;font-size:.88rem;color:#475569}
.kl-facts li{display:inline-flex;gap:6px;align-items:center}
.kl-outline{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.kl-outline li{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid #e6ecf5;border-radius:12px;padding:10px 14px}
.kl-outline span{width:28px;height:28px;border-radius:8px;background:#f1f5fb;display:grid;place-items:center;font-weight:700;font-size:.85rem;flex:none}
.kl-outline li.is-ok span{background:#1FB981;color:#fff}
.kl-outline b{flex:1;font-size:.95rem}
.kl-outline em{font-style:normal;font-size:.78rem;color:#64748b}
/* lab terminal panel */
.kl-console{background:#0b1220;border:1px solid #1d2a44;border-radius:14px;overflow:hidden;box-shadow:0 12px 28px rgba(5,15,35,.18);transition:border-color .15s,box-shadow .15s}
.kl-console.is-typing{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.35),0 12px 28px rgba(5,15,35,.18)}
.kl-console-h{display:flex;align-items:center;gap:10px;padding:7px 8px 7px 14px;background:#101a2e;border-bottom:1px solid #1d2a44;color:#c9d5e6;min-height:44px}
.kl-dots{display:inline-flex;gap:6px}.kl-dots i{width:10px;height:10px;border-radius:50%;background:#f87171}.kl-dots i:nth-child(2){background:#fbbf24}.kl-dots i:nth-child(3){background:#34d399}
.kl-console-name{display:inline-flex;align-items:center;gap:6px;font:600 .82rem/1 ui-monospace,SFMono-Regular,Menlo,monospace;color:#e6edf7;margin-left:6px}
.kl-conn{font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:999px;background:rgba(251,191,36,.12);color:#fcd34d}
.kl-conn.on{background:rgba(52,211,153,.12);color:#6ee7b7}
.kl-conn.bad{background:rgba(248,113,113,.14);color:#fca5a5}
.kl-console-act{margin-left:auto;display:inline-flex;gap:2px}
.kl-ic{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;border:0;background:transparent;color:#a9b8cc;cursor:pointer;text-decoration:none}
.kl-ic:hover,.kl-ic:focus-visible{background:rgba(255,255,255,.08);color:#fff}
.kl-console-b{position:relative}
.kl-console .kl-frame{display:block;border-radius:0;height:calc(100vh - 230px);min-height:460px}
.kl-console:fullscreen{border-radius:0;border:0}
.kl-console:fullscreen .kl-frame{height:calc(100vh - 45px)}
.kl-typehint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:inline-flex;gap:8px;align-items:center;background:#0A66FF;color:#fff;border:0;border-radius:999px;padding:9px 18px;font-weight:600;font-size:.85rem;cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.kl-typehint:hover{background:#0a58da}
/* workspace polish */
.kl-tasks .kl-task{border-top:3px solid #0A66FF}
.kl-tasks .kl-task:has(.kl-feedback.ok){border-top-color:#1FB981}
.kl-steps{background:#fff;border:1px solid #e6ecf5;border-radius:12px;padding:8px}
.kl-bar{box-shadow:0 6px 18px rgba(10,30,60,.14)}
.kl-focus-btn span{white-space:nowrap}
.kl-bar-title{display:none;font-size:.95rem;max-width:360px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.lab-focus .kl-bar-title{display:block}
/* focus mode: the lab gets the whole screen */
body.lab-focus .app{grid-template-columns:minmax(0,1fr)}
body.lab-focus .sidebar,body.lab-focus .app-top,body.lab-focus .page-head{display:none}
body.lab-focus .app-content{max-width:none;padding:12px 16px 16px}
body.lab-focus .kl-bar{top:0;border-radius:12px}
body.lab-focus .kl-ws{grid-template-columns:minmax(340px,4fr) 8fr;gap:12px}
body.lab-focus .kl-console .kl-frame{height:calc(100vh - 140px)}
body.lab-focus .kl-term{top:64px}
@media (max-width:980px){.kl-ws{grid-template-columns:1fr}.kl-term{position:static}.kl-frame{height:70vh}}
/* focus mode = dark lab player (INFOTICS) */
body.lab-focus{background:#081120}
body.lab-focus .app,body.lab-focus .app-main,body.lab-focus .app-content{background:#081120}
body.lab-focus .kl-tasks{max-height:calc(100vh - 96px);overflow:auto;padding-right:4px;scrollbar-color:#26344f transparent}
body.lab-focus .kl-steps{background:#0f1a2e;border-color:#1c2a44}
body.lab-focus .kl-step{background:#0b1322;border-color:#26344f;color:#9fb0c7}
body.lab-focus .kl-step:hover{border-color:#3b82f6;color:#fff}
body.lab-focus .kl-step.is-current{background:#0A66FF;border-color:#0A66FF;color:#fff;box-shadow:none}
body.lab-focus .kl-step.is-ok{background:rgba(31,185,129,.15);border-color:#1FB981;color:#6ee7b7}
body.lab-focus .kl-step.is-ok.is-current{background:#1FB981;color:#fff}
body.lab-focus .kl-task,body.lab-focus .kl-autoval,body.lab-focus .kl-done,body.lab-focus .kl-checker{background:#0f1a2e;border-color:#1c2a44;color:#c8d4e6;box-shadow:none}
body.lab-focus .kl-task-t,body.lab-focus .kl-done h2,body.lab-focus .kl-autoval b{color:#fff}
body.lab-focus .kl-body,body.lab-focus .kl-body p,body.lab-focus .kl-body li,body.lab-focus .label,body.lab-focus .muted{color:#b9c6d9}
body.lab-focus .kl-body code{background:#0b1322;color:#7dd3fc;border:1px solid #1c2a44}
body.lab-focus .kl-body pre{background:#060c18;color:#d1e2f6;border:1px solid #1c2a44}
body.lab-focus .kl-body a{color:#7cb3ff}
body.lab-focus .kl-kind{background:rgba(59,130,246,.15);color:#93c5fd}
body.lab-focus .kl-kind.q{background:rgba(167,139,250,.15);color:#c4b5fd}
body.lab-focus .kl-worth{color:#fcd34d}
body.lab-focus .kl-ans,body.lab-focus .kl-task .input,body.lab-focus .kl-task .textarea{background:#0b1322;border-color:#26344f;color:#fff}
body.lab-focus .kl-ans::placeholder{color:#64748b}
body.lab-focus .kl-opt{border-color:#26344f;color:#dbe5f3}
body.lab-focus .kl-opt:hover{border-color:#3b82f6}
body.lab-focus .kl-opt:has(input:checked){background:rgba(10,102,255,.15);border-color:#3b82f6}
body.lab-focus .kl-task .btn-secondary,body.lab-focus .kl-task .btn-ghost,body.lab-focus .kl-autoval .btn-secondary{background:transparent;border-color:#2b3a57;color:#dbe5f3}
body.lab-focus .kl-task .btn-secondary:hover,body.lab-focus .kl-task .btn-ghost:hover{background:#16233b;color:#fff}
body.lab-focus .kl-task .btn[disabled]{opacity:.45}
body.lab-focus .kl-nav{border-top-color:#1c2a44}
body.lab-focus .kl-feedback.ok{color:#4ade80}body.lab-focus .kl-feedback.bad{color:#f87171}body.lab-focus .kl-feedback.wait{color:#9fb0c7}
body.lab-focus .kl-hint{background:rgba(251,191,36,.08);border-color:rgba(251,191,36,.35);color:#fde68a}
body.lab-focus .kl-solution{background:rgba(59,130,246,.08);border-color:rgba(59,130,246,.35);color:#cfe0ff}
body.lab-focus .kl-autoval .table,body.lab-focus .kl-autoval td,body.lab-focus .kl-autoval th{color:#c8d4e6;border-color:#1c2a44;background:transparent}
body.lab-focus .kl-bar{background:#0f1a2e;border:1px solid #1c2a44;box-shadow:none}
body.lab-focus .kl-console{border-color:#1c2a44;box-shadow:none}
body.lab-focus .kl-console.is-typing{border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.35)}
@media (max-width:980px){body.lab-focus .kl-ws{grid-template-columns:1fr}.kl-console .kl-frame{height:70vh}}
.kl-me{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:linear-gradient(110deg,#0b1f3a,#14407a);color:#fff;border-radius:16px;padding:16px 20px;margin-bottom:16px;box-shadow:0 14px 30px rgba(10,40,90,.2)}
.kl-me>div{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.08);border-radius:12px;padding:8px 12px}
.kl-me>div b{font-size:1.15rem}.kl-me>div span{font-size:.78rem;color:#c9d6e6}
.kl-me .kl-me-xp{flex-direction:column;align-items:flex-start;gap:0;background:none;padding:0 10px 0 0}
.kl-me-xp b{font-size:2rem !important;line-height:1.1;color:#FFD166}
.kl-me-xp small{color:#c9d6e6}
.kl-me .btn{margin-left:auto}
.kl-free{position:absolute;top:10px;left:10px;background:#0B7A4B;color:#fff;font-size:.68rem;font-weight:800;letter-spacing:.08em;padding:3px 7px;border-radius:6px}
.lb-top{position:relative}
.kl-lb{list-style:none;margin:0;padding:6px 16px 14px;display:flex;flex-direction:column;gap:6px}
.kl-lb li{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:10px}
.kl-lb li:nth-child(odd){background:#f7f9fc}
.kl-lb li.is-me{background:#eaf2ff;outline:1.5px solid #0A66FF}
.kl-rank{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem;background:#e2e8f0;color:#334155}
.kl-rank.r1{background:#FFD166;color:#7a4b00}.kl-rank.r2{background:#d9dee7}.kl-rank.r3{background:#f3c7a1;color:#7a3d0c}
/* AI tutor */
.tu-top{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.tu-top .lb-chips{margin:0}
.tu-chat{display:flex;flex-direction:column;max-width:880px}
.tu-log{display:flex;flex-direction:column;gap:12px;padding:18px;min-height:360px;max-height:calc(100vh - 330px);overflow-y:auto}
.tu-msg{display:flex}.tu-msg.me{justify-content:flex-end}
.tu-bubble{max-width:80%;padding:10px 14px;border-radius:14px;line-height:1.55;font-size:.95rem}
.tu-msg.ai .tu-bubble{background:#f2f6fc;border:1px solid #e3eaf5;border-bottom-left-radius:4px}
.tu-msg.me .tu-bubble{background:#0A66FF;color:#fff;border-bottom-right-radius:4px}
.tu-bubble p{margin:0 0 .5rem}.tu-bubble p:last-child{margin:0}
.tu-bubble pre{background:#0b1220;color:#d1fae5;padding:10px;border-radius:8px;overflow:auto;font-size:.8rem;margin:.4rem 0}
.tu-bubble code{font-size:.85em}
.tu-msg.typing .tu-bubble{display:flex;gap:4px;padding:14px}
.tu-msg.typing span{width:7px;height:7px;border-radius:50%;background:#94a3b8;animation:tuDot 1s infinite}
.tu-msg.typing span:nth-child(2){animation-delay:.15s}.tu-msg.typing span:nth-child(3){animation-delay:.3s}
@keyframes tuDot{50%{opacity:.3;transform:translateY(-3px)}}
.tu-form{display:flex;gap:10px;align-items:flex-end;border-top:1px solid #edf1f7;padding:12px 16px}
.tu-form textarea{flex:1;resize:vertical}
.tu-note{padding:0 16px 12px;margin:0}
/* study plan */
.sp-dom{display:grid;grid-template-columns:minmax(160px,1.2fr) 2fr 56px;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid #edf1f7}
.sp-dom:last-child{border-bottom:0}
.sp-bar{height:8px;border-radius:8px;background:#e6ecf5;overflow:hidden}
.sp-bar i{display:block;height:100%;border-radius:inherit}
.sp-recs{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:-2px}
.sr-wrap{margin:0;text-align:center;color:#334155}
.sr-wrap svg{width:100%;max-width:360px;height:auto}
.bv-issuer{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--muted);margin:-4px 0 12px}
.bv-post{margin:0 0 14px;border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--bg,#f7f9fc)}
.bv-post textarea{font-size:.88rem;line-height:1.55;white-space:pre-wrap}

/* labs: vendor tabs (AWS, Microsoft, VMware, Red Hat, Containers, Docker, Kubernetes …) */
.lb-vendors{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;margin:0 0 18px}
.lb-vendor-tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px;border:1px solid var(--line,#e2e8f0);border-radius:12px;background:var(--surface,#fff);color:inherit;text-align:left;cursor:pointer;font:inherit;transition:border-color .15s,box-shadow .15s}
.lb-vendor-tile b{font-size:.95rem;line-height:1.2}
.lb-vendor-tile small{color:var(--muted,#64748b);font-size:.78rem}
.lb-vendor-tile:hover:not(:disabled){border-color:var(--brand,#0A66FF)}
.lb-vendor-tile.active{border-color:var(--brand,#0A66FF);box-shadow:0 0 0 2px rgba(10,102,255,.18)}
.lb-vendor-tile:disabled{opacity:.55;cursor:default}
.lb-vendor-tile:focus-visible{outline:2px solid var(--brand,#0A66FF);outline-offset:2px}
.lb-vmark{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 6px;border-radius:9px;background:var(--v);color:#fff;font-weight:800;font-size:.8rem;letter-spacing:.02em;margin-bottom:4px}
@media (max-width:560px){.lb-vendors{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;-webkit-overflow-scrolling:touch}.lb-vendor-tile{flex:0 0 112px;scroll-snap-align:start;padding:10px}}

/* Lab Store (Lab Pass pricing) */
.lp-hero h1{max-width:760px}.lp-stats{display:flex;flex-wrap:wrap;gap:18px;margin-top:14px;color:#cbd5e1}.lp-stats b{color:#fff;font-size:1.25rem;margin-right:4px}
.lp-cur{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:4px;margin:0 0 18px;background:#fff}.lp-cur a{padding:8px 16px;border-radius:999px;font-weight:700;font-size:.9rem;color:var(--muted);text-decoration:none}.lp-cur a.on{background:var(--brand);color:#fff}
.lp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.lp-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:22px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 10px 30px -22px rgba(7,17,31,.4)}
.lp-card.hot{border:2px solid var(--brand);box-shadow:0 18px 40px -24px rgba(10,102,255,.6)}.lp-card.covers{border:2px solid #16a34a}
.lp-card h2{font-size:1.1rem;margin:0}.lp-card form,.lp-card>.btn{margin-top:auto}
.lp-flag{position:absolute;top:-11px;left:18px;background:var(--brand);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.04em;padding:4px 10px;border-radius:999px}.lp-card.covers .lp-flag{background:#16a34a}
.lp-price b{font-size:1.9rem;font-family:var(--font-display,inherit);color:var(--ink)}.lp-price span{color:var(--muted);margin-left:4px}
.lp-feat{list-style:none;margin:4px 0 10px;padding:0;display:grid;gap:6px;font-size:.9rem}.lp-feat li{padding-left:22px;position:relative}.lp-feat li:before{content:"✓";position:absolute;left:0;color:#16a34a;font-weight:800}
.lp-free{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.lp-free a{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--ink)}
.lp-faq details{border-bottom:1px solid var(--line);padding:12px 0}.lp-faq summary{cursor:pointer;font-weight:700}.lp-faq p{margin:8px 0 0;color:var(--muted)}
@media (max-width:640px){.lp-cur{display:flex}.lp-cur a{flex:1;text-align:center}}

/* lesson taught over several classes */
.lm-parts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}.lm-parts a{padding:6px 12px;border:1px solid var(--line);border-radius:999px;font-weight:700;font-size:.85rem;text-decoration:none;color:var(--ink);background:#fff}.lm-parts a.on{background:var(--brand);border-color:var(--brand);color:#fff}
.lm-topics{margin:0 0 10px}
.lm-recs{display:grid;gap:10px}.lm-rec{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff}.lm-rec .when{min-width:64px;text-align:center;font-weight:800;color:var(--brand-ink);line-height:1.1}.lm-rec .when small{display:block;font-weight:600;color:var(--muted)}.lm-rec ul{margin:4px 0 0;padding-left:18px;font-size:.86rem}.lm-rec .tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.lm-rec .tags a{font-size:.75rem;padding:2px 8px;border-radius:999px;background:var(--brand-50);color:var(--brand-ink);text-decoration:none}
.lp-seats{margin:0;font-size:.9rem;display:flex;gap:6px;align-items:center;color:var(--ink-2)}
.la-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}.la-grid h2{font-size:1.2rem;margin:22px 0 8px}
.la-facts{list-style:none;padding:0;margin:0 0 8px;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px}.la-facts li{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff}.la-facts li svg{color:var(--brand);flex:none;margin-top:2px}.la-facts b{display:block;color:var(--ink)}.la-facts span{font-size:.82rem;color:var(--muted)}
.la-tasks{display:grid;gap:8px;padding-left:22px}.la-tasks li b{margin-right:6px}.la-side{position:sticky;top:90px}.la-rel{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:8px}.la-rel li{display:flex;justify-content:space-between;gap:8px}
.lc-wrap{max-width:820px}.lc-cert{position:relative;padding:40px 44px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 24px 60px -36px rgba(7,17,31,.5);text-align:center;overflow:hidden}.lc-cert::before{content:"";position:absolute;inset:0 0 auto;height:6px;background:var(--brand)}
.lc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}.lc-logo{max-height:44px;max-width:180px;object-fit:contain}.lc-ok{display:inline-flex;gap:6px;align-items:center;padding:6px 12px;border-radius:99px;background:#dcf7ea;color:var(--green-ink);font-weight:800;font-size:.85rem}
.lc-kicker{text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--muted);font-weight:700;margin:0}.lc-name{font-size:2.2rem;margin:8px 0 4px}.lc-line{color:var(--muted);margin:0}.lc-lab{font-size:1.4rem;color:var(--brand-ink);margin:6px 0 18px}
.lc-kv{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px;margin:0 0 16px}.lc-kv dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}.lc-kv dd{margin:2px 0 0;font-weight:700;color:var(--ink)}.lc-share{justify-content:center;flex-wrap:wrap;gap:8px}
.lcalc{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;align-items:start}.lcalc-in h2{font-size:1.05rem;margin:16px 0 8px}.lcalc-out{display:grid;gap:12px;position:sticky;top:90px}.lcalc-out .card{display:grid;gap:4px}.lcalc-out b{font:800 1.5rem var(--font-display);color:var(--ink)}.lcalc-out small{color:var(--muted)}.lcalc-best{border:2px solid var(--brand)}
@media (max-width:900px){.la-grid,.lcalc{grid-template-columns:1fr}.la-side,.lcalc-out{position:static}.lc-cert{padding:28px 20px}.lc-name{font-size:1.7rem}}
.lv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;align-items:start}.lv-code{display:flex;gap:8px}.lv-code .input{font:700 1.1rem ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase}.lv-req .form-grid{margin-bottom:0}
.hp-field{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.lv-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:22px}
@media (max-width:900px){.lv-grid{grid-template-columns:1fr}.lv-code{flex-direction:column}}
body.lab-focus .kl-bar .btn-secondary{background:#16233b;border-color:#2b3a57;color:#dbe5f3}
body.lab-focus .kl-bar .btn-secondary:hover{background:#1d2d4b;color:#fff}
body.lab-focus .kl-bar .btn-danger{background:#b42318;border-color:#b42318;color:#fff}