/* eClassVirtual presentation. The firewall workspace keeps the Jade palette. */
:root {
  --brand-blue: #009ff4;
  --brand-ink: #082b40;
  --brand-orange: #ff5124;
  --brand-action: #0078b8;
  background: #f3f7fb;
  color: var(--brand-ink);
}
body {
  background: linear-gradient(155deg, #eef7fe 0, #f6f8fb 55%, #f3f6fa 100%);
  min-height: 100vh;
}
.course-header {
  border-top: 3px solid var(--brand-blue);
  border-bottom-color: #dbe6ef;
  padding: 12px 32px;
  box-shadow: 0 2px 12px #082b4006;
}
.brand { color: var(--brand-ink); }
.brand-identity { display: flex; flex-direction: column; gap: 2px; }
.logo-frame { display: block; position: relative; overflow: hidden; width: 256px; height: 46px; }
.brand-logo { position: absolute; width: 260px; height: auto; max-width: none; top: -20px; left: -3px; }
.brand-identity small { color: #607b8c; font-size: 10px; letter-spacing: 2.2px; margin: 0 0 0 5px; }
.course-right { color: #526a7a; }
.course-right .text-button { color: #466577; }
.xp { background: #fff1e9; color: #a7461f; border: 1px solid #ffdcc8; }
.avatar { background: #e4f4ff; color: #0073a9; }
.catalog h1, .scenario h1, .login h1 { color: var(--brand-ink); }
.catalog .eyebrow, .scenario .eyebrow, .login .eyebrow { color: #0078b5; }
.catalog-heading p, .challenge p, .lead, .login > p { color: #637c8e; }
.catalog .primary, .scenario .primary, .login .primary, .labbar .primary, .result .primary {
  background: var(--brand-action);
  border-color: var(--brand-action);
  color: white;
}
.catalog .primary:hover, .scenario .primary:hover, .login .primary:hover, .labbar .primary:hover, .result .primary:hover {
  background: #00669f;
  border-color: #00669f;
}
.catalog .text-button, .scenario .text-button, .labbar .text-button { color: #35627d; }
.catalog-banner {
  background: linear-gradient(110deg, #e4f4ff, #f6fbff);
  border-color: #cde7f7;
  border-left: 4px solid var(--brand-blue);
  border-radius: 9px;
}
.catalog-banner strong { color: #154768; }
.catalog-banner p { color: #52768d; }
.catalog-banner .shield { color: #009be8; }
.catalog .neutral, .login .neutral { background: #e7f3fd; color: #326e94; }
.catalog .locked .neutral { background: #edf1f5; color: #728393; }
.progress-box strong { color: #0b3a55; }
.progress-box strong span, .progress-box small { color: #6b8191; }
.progress-track { background: #dce9f2; }
.progress-track i { background: var(--brand-blue); }
.challenge { border-color: #dce7ee; box-shadow: 0 4px 14px #082b4005; }
.challenge:first-child { border-top: 3px solid var(--brand-blue); box-shadow: 0 6px 22px #009ff40b; }
.challenge.locked { background: #f9fbfd; }
.challenge-meta { color: #587992; }
.challenge-symbol { color: #008fd6; }
.challenge.locked .challenge-symbol { color: #9bacbb; }
.challenge h2 { color: #163d55; }
.challenge-footer { border-top-color: #e7eef4; }
.challenge-footer span, .pending { color: #748c9c; }
.challenge-footer b { color: #bc552b; }
.catalog .disclaimer, .lab-disclaimer { color: #7890a0; }
.scenario .card { border-color: #dae6ef; }
.scenario .objective { border-left-color: var(--brand-blue); background: #eaf5fd; color: #254e69; }
.labbar { background: #f0f6fb; border-bottom-color: #dbe6ee; }
.labbar strong { background: #dbf0ff; color: #0074ad; }
.labbar button:not(.primary):not(.text-button) { border-color: #ccdce8; color: #3f6078; }
.lab-status { background: #edf7fe; border-color: #cfe5f3; color: #35647f; }
.fortigate { box-shadow: 0 5px 20px #082b4009; }
.login-logo { width: 320px; height: 60px; margin-bottom: 25px; }
.login-logo .brand-logo { width: 332px; top: -26px; left: -6px; }
.login h1 span { color: #008dd5; }
.login-card { border-color: #d6e6f1; border-top: 3px solid var(--brand-blue); box-shadow: 0 10px 28px #082b4008; }
.login-card p, .login > small { color: #6a8192; }
.result-icon { color: #0078b8; background: #e8f5ff; }
.result h2 { color: var(--brand-ink); }
.result p { color: #607b8c; }
.result-xp { color: #ac4d22; background: #fff0e6; }
#notice { background: var(--brand-ink); }
.route-overview { background: white; border: 1px solid #dce7ee; border-radius: 8px; margin: 0 0 28px; padding: 22px; }
.route-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.route-heading h2 { font-size: 17px; margin-bottom: 7px; }
.route-heading p { color: #637c8e; font-size: 14px; margin: 0; }
.route-heading button, .scenario-instructions button { color: #0078b8; border-color: #b9dbef; background: #f4faff; white-space: nowrap; }
.route-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; counter-reset: route; }
.route-steps li { counter-increment: route; padding-left: 34px; position: relative; }
.route-steps li::before { content: counter(route); position: absolute; left: 0; top: 0; width: 25px; height: 25px; display: grid; place-items: center; color: #0074ad; background: #e6f4ff; border-radius: 50%; font-size: 13px; font-weight: 600; }
.route-steps strong { display: block; font-size: 14px; line-height: 1.6; margin-bottom: 5px; }
.route-steps span { display: block; color: #637c8e; font-size: 13px; line-height: 1.6; }
.scenario-instructions { margin: 0 0 25px; border: 1px solid #d5e6f2; background: #f7fbfe; padding: 18px 22px; border-radius: 5px; }
.scenario-instructions summary { font-weight: 600; color: #1d536f; cursor: pointer; }
.scenario-instructions ol { color: #536f81; padding-left: 22px; font-size: 14px; line-height: 1.7; }
.scenario-instructions li { margin-bottom: 6px; }
.labbar { flex-wrap: wrap; }
.labbar > div { flex-wrap: wrap; justify-content: flex-end; }
#guide { width: calc(100% - 32px); max-width: 860px; color: var(--brand-ink); border-color: #cbdfea; }
.guide-header { display: flex; justify-content: space-between; align-items: center; gap: 18px; background: #eef7fe; padding: 20px 26px; border-bottom: 1px solid #d9e9f3; }
.guide-header .eyebrow { font-size: 10px; color: #0078b8; margin-bottom: 7px; }
.guide-header h2 { font-size: 23px; margin: 0; }
.guide-header button { border: 0; background: transparent; font-size: 26px; color: #3f647b; }
.guide-body { max-height: 65vh; overflow: auto; padding: 24px 26px; }
.guide-intro { font-size: 15px; color: #60798b; }
.guide-body h3 { font-size: 17px; margin: 25px 0 15px; }
.guide-route { font-size: 14px; line-height: 1.7; padding-left: 24px; }
.guide-route li { margin-bottom: 14px; padding-left: 5px; color: #60798b; }
.guide-route strong { color: #234b63; }
.guide-callout { padding: 17px 20px; margin: 24px 0; border-left: 3px solid #009ff4; border-radius: 3px; background: #edf7ff; color: #2b5c7a; font-size: 14px; }
.guide-callout p { margin: 7px 0 0; }
.guide-details { border-top: 1px solid #e0eaf1; padding: 18px 0; }
.guide-details summary { cursor: pointer; color: #24546f; font-weight: 600; font-size: 16px; }
.guide-details > p { color: #60798b; font-size: 14px; margin: 15px 0 0; }
.guide-menu-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 20px; }
.guide-menu-list > div { border: 1px solid #e0eaf1; border-radius: 4px; padding: 15px; background: #fcfdff; }
.guide-menu-list strong { font-size: 13px; color: #1c506e; display: block; line-height: 1.5; }
.guide-menu-list p { font-size: 13px; color: #637c8e; margin: 8px 0 0; }
.guide-menu-list button { font-size: 12px; color: #0078b8; border-color: #c4e1f2; margin-top: 13px; }
.guide-controls { display: grid; grid-template-columns: 160px 1fr; gap: 15px 18px; font-size: 14px; line-height: 1.6; margin-top: 20px; }
.guide-controls dt { color: #285773; font-weight: 600; }
.guide-controls dd { margin: 0; color: #637c8e; }
.guide-footer { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 16px 26px; border-top: 1px solid #d9e9f3; background: #f9fcfe; }
.guide-footer span { font-size: 12px; color: #7890a0; }
.guide-footer .primary { background: var(--brand-action); border-color: var(--brand-action); }
@media (max-width:850px) { .route-steps { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width:650px) {
  .route-overview { padding: 18px; }
  .route-heading { flex-direction: column; align-items: flex-start; gap: 12px; }
  .route-steps { grid-template-columns: 1fr; gap: 18px; }
  .scenario-instructions { padding: 16px; }
  .guide-header { padding: 16px; }
  .guide-header h2 { font-size: 20px; }
  .guide-body { padding: 18px; max-height: 62vh; }
  .guide-menu-list { grid-template-columns: 1fr; gap: 12px; }
  .guide-controls { grid-template-columns: 1fr; gap: 7px; }
  .guide-controls dd { margin-bottom: 10px; }
  .guide-footer { padding: 14px 16px; flex-wrap: wrap; }
  .guide-footer .primary { margin-left: auto; }
}
@media (min-width:1500px) { .lab-status { max-width:1540px; margin-left:auto; margin-right:auto; } }
@media (max-width:650px) {
  .course-header { padding: 10px 14px; gap: 8px; }
  .logo-frame { width: 176px; height: 33px; }
  .brand-logo { width: 185px; top: -15px; left: -3px; }
  .brand-identity small { font-size: 8px; letter-spacing: 1.25px; margin-left: 3px; }
  .course-right { gap: 6px; font-size: 12px; }
  .course-right .xp { padding: 6px 8px; }
  .course-right .text-button { padding: 7px 2px; font-size: 12px; }
  .login-logo { width: 278px; height: 50px; }
  .login-logo .brand-logo { width: 286px; top: -22px; left: -4px; }
}
@media (max-width:350px) {
  .course-header .logo-frame { width: 152px; height: 30px; }
  .course-header .brand-logo { width: 162px; top: -12px; }
  .brand-identity small { font-size: 7px; letter-spacing: 1px; }
}
.progress-2{width:40%}.progress-3{width:60%}.progress-4{width:80%}.progress-5{width:100%}
.node small{display:block}
.diagnostics .probe-actions+h3{margin-top:24px}
.traffic-note{margin:0;padding:12px 18px;font-size:14px;color:var(--muted);background:white}
.guest-topology{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:16px;background:#eaf6ff;border:1px solid #c6e4f6;border-radius:6px;line-height:1.6}
.guest-topology small{flex-basis:100%;text-align:center}
.diagnostics{min-width:0}
.diagnostics>.widget{min-width:0}
.probe-actions button{max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:left}
.network-map{display:grid;grid-template-columns:minmax(145px,1.1fr) 100px minmax(120px,.9fr) minmax(300px,2.2fr);grid-template-rows:auto auto;gap:14px 8px;align-items:center;padding:24px 0}
.network-branch{padding:16px 12px;border:1px solid #dbe3d8;border-radius:6px;background:#f6f9f4;text-align:center;display:grid;gap:6px}
.network-branch strong{font-size:14px}.network-branch span{font-size:14px;margin-top:4px}.network-branch small{font-size:13px}
.lan-branch{grid-column:1;grid-row:1}.guest-branch{grid-column:1;grid-row:2;background:#eaf6ff;border-color:#c6e4f6}
.lan-link{grid-column:2;grid-row:1}.guest-link{grid-column:2;grid-row:2}
.network-link{text-align:center;display:grid;gap:5px;min-width:0}.network-link strong{font-size:13px}.network-link small{font-size:12px;overflow-wrap:anywhere}.network-link>span{font-size:25px;color:#70876a}
.network-firewall{grid-column:3;grid-row:1/3;text-align:center;background:#eef3e8;border:1px solid #d6e3cb;padding:18px 10px;border-radius:6px;display:grid;gap:10px}
.network-firewall>span{font-size:30px;color:#688158}.network-firewall>div{font-size:13px;line-height:1.8;border-top:1px solid #d6e3cb;padding-top:8px}.network-firewall small{font-size:12px}
.network-egress{grid-column:4;grid-row:1/3;display:grid;grid-template-columns:90px 1fr 35px 1fr;align-items:center;gap:7px}
.network-endpoint{display:grid;gap:8px;text-align:center;min-width:0}.network-endpoint>span{font-size:26px;color:#688158}.network-endpoint strong{font-size:13px}.network-endpoint small{font-size:12px;overflow-wrap:anywhere}
.network-caption{font-size:14px;line-height:1.6;color:#617260;margin:0 0 20px}
@media(max-width:1100px){.network-map{grid-template-columns:minmax(110px,1fr) 90px minmax(100px,1fr)}.network-egress{grid-column:1/-1;grid-row:3;grid-template-columns:90px 1fr 35px 1fr;border-top:1px solid #dbe3d8;padding-top:16px}.network-egress>.network-link:first-child>span{transform:rotate(90deg)}}
@media(max-width:480px){.network-map{grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);gap:10px 5px}.network-branch{padding:12px 5px}.network-branch strong,.network-branch span{font-size:13px}.network-branch small{font-size:11px;overflow-wrap:anywhere}.network-link strong{font-size:12px}.network-link small{font-size:11px}.network-firewall{padding:14px 5px}.network-firewall>div{font-size:12px}.network-egress{grid-template-columns:72px minmax(0,1fr) 22px minmax(0,1fr);gap:4px}}
.network-egress>.network-link:nth-child(3) small{white-space:nowrap;overflow-wrap:normal;font-size:11px}
.module-section{margin-top:36px}
.module-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:20px}
.module-heading .eyebrow{margin-bottom:8px}.module-heading h2{margin-bottom:8px;font-size:24px}.module-heading p{color:var(--muted);margin:0}
.challenge h3{font-size:20px;line-height:1.35;margin-bottom:12px}
.course-progress{display:block;width:100%;height:7px;margin:13px 0;border:0;border-radius:5px;background:#e2e8dd;appearance:none}
.course-progress::-webkit-progress-bar{background:#e2e8dd;border-radius:5px}
.course-progress::-webkit-progress-value{background:#009ff4;border-radius:5px}
.course-progress::-moz-progress-bar{background:#009ff4;border-radius:5px}
@media(max-width:600px){.module-heading{align-items:flex-start;flex-direction:column}.module-heading h2{font-size:22px}}
.clients-node{padding:16px;background:#edf6ff;border:1px solid #c6e4f6;border-radius:6px;display:grid;gap:16px}
.clients-node>strong{font-size:13px;color:#3f6580}.clients-node>div>span{display:block;font-size:24px;color:#688158;margin-bottom:8px}
.dual-wan{display:grid;grid-template-columns:1fr 90px 1fr 1.6fr 1fr;gap:16px;align-items:center;padding:30px 0}
.dual-uplinks{display:grid;gap:16px}.uplink-card{display:grid;gap:8px;border:1px solid #c6e4f6;background:#edf6ff;border-radius:6px;text-align:center;padding:14px 10px}
.uplink-card strong{font-size:14px}.uplink-card span{font-size:13px;color:#4f7045}.uplink-card small{font-size:12px}
@media(max-width:800px){.dual-wan{grid-template-columns:1fr 75px 1fr;gap:12px}.dual-uplinks{grid-column:1/-1;grid-template-columns:1fr 1fr}.dual-wan>.node:last-child{grid-column:1/-1}.uplink-card{padding:12px 7px}.uplink-card span{overflow-wrap:anywhere}}