/* dScan-D Engineer Training — sober medical-blue design system.
   Light blue-and-white, calm depth-blue accent (#1F4E79) + cyan (#3FA7D6),
   soft blue panels (no near-black blocks), restrained radii, minimal shadows.
   No emoji. Mobile-first. */
:root{
  --blue:#1F4E79; --blue-h:#2a6499; --blue-link:#1f5a96; --cyan:#3FA7D6;
  --ink:#1b2a3a; --ink2:#2a3b4d; --grey:#5a6b7d; --grey2:#8a98a8;
  --line:#d4e3f2; --line2:#e3edf7;
  --bg:#f6f9fc; --panel:#eaf2fb; --surface:#eef3f8; --surface2:#f3f7fb; --white:#fff;
  --ok:#048a4e; --ok-bg:#e8f5ee; --bad:#cf202f; --bad-bg:#fdecec;
  --gold:#b27b00;
  --r-pill:999px; --r-lg:20px; --r:14px; --r-sm:10px; --r-btn:10px;
  --f-sans:-apple-system,BlinkMacSystemFont,'SF Pro Display','Inter','Noto Sans CJK SC','PingFang SC','Microsoft YaHei','Segoe UI',Arial,sans-serif;
  --f-mono:ui-monospace,'SF Mono','Roboto Mono',Menlo,Consolas,monospace;
  --stick:120px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;overflow-x:hidden;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-sans);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
a{color:var(--blue-link);}
::selection{background:#d6e6fb;}

/* ---------- buttons / pills ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;
  border-radius:var(--r-btn);min-height:52px;padding:0 24px;font-size:16px;font-weight:600;
  letter-spacing:.01em;transition:background .15s,color .15s,border-color .15s;white-space:nowrap;}
.btn svg{width:18px;height:18px;}
.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{background:var(--blue-h);}
.btn-dark{background:#27384a;color:#fff;}
.btn-dark:hover{background:#33485e;}
.btn-light{background:var(--surface);color:var(--ink);}
.btn-light:hover{background:#e1eaf4;}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue);}
.btn-sm{min-height:44px;padding:0 18px;font-size:14px;}
.btn[disabled]{opacity:.45;cursor:not-allowed;}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:var(--white);border-bottom:1px solid var(--line);
  padding:10px calc(env(safe-area-inset-right) + 16px) 0 calc(env(safe-area-inset-left) + 16px);}
.hwrap{display:flex;align-items:center;gap:12px;max-width:1040px;margin:0 auto;padding-bottom:10px;}
.logo{width:34px;height:34px;border-radius:9px;background:var(--blue);flex:none;display:flex;align-items:center;justify-content:center;}
.logo svg{width:20px;height:20px;}
.htitle{font-weight:800;font-size:16px;line-height:1.15;flex:1;min-width:0;letter-spacing:-.01em;}
.htitle small{display:block;font-weight:500;font-size:11px;color:var(--grey);margin-top:2px;letter-spacing:0;}
.langsel{flex:none;background-color:var(--surface);border:1px solid var(--line);color:var(--ink);border-radius:var(--r-btn);
  min-height:44px;padding:0 36px 0 16px;font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;
  appearance:none;-webkit-appearance:none;max-width:46vw;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231b2a3a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat:no-repeat;background-position:right 13px center;}
.langsel:hover{background-color:#e1eaf4;border-color:var(--blue);}
[dir=rtl] .langsel{padding:0 16px 0 36px;background-position:left 13px center;}
.prog{height:3px;background:var(--surface);max-width:1040px;margin:0 auto;border-radius:3px;overflow:hidden;}
.prog>i{display:block;height:100%;width:0;background:var(--blue);transition:width .5s;}

/* ---------- nav (two rows, no horizontal scroll) ---------- */
nav.tabs{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;gap:8px;max-width:1040px;margin:0 auto;
  padding:10px calc(env(safe-area-inset-right) + 16px) 12px calc(env(safe-area-inset-left) + 16px);background:var(--bg);}
.tab{flex:0 0 calc(20% - 7px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  min-height:48px;border:1px solid var(--line);background:var(--white);border-radius:var(--r-sm);
  padding:7px 4px;font-size:12.5px;color:var(--ink);font-weight:600;line-height:1.2;text-align:center;transition:.15s;}
.tab .lab{white-space:normal;word-break:break-word;}
.tab .bdg{font-family:var(--f-mono);font-weight:700;font-size:12px;width:22px;height:22px;border-radius:6px;
  background:var(--surface);color:var(--blue);display:inline-flex;align-items:center;justify-content:center;}
.tab .bdg svg{width:13px;height:13px;}
.tab:hover{border-color:var(--blue);}
.tab.active{background:var(--blue);color:#fff;border-color:var(--blue);}
.tab.active .bdg{background:rgba(255,255,255,.2);color:#fff;}
@media(min-width:600px){
  .tab{flex-direction:row;gap:8px;font-size:14px;padding:9px 14px;}
}

/* ---------- layout / search ---------- */
main{max-width:1040px;margin:0 auto;padding:16px calc(env(safe-area-inset-right) + 16px) 80px calc(env(safe-area-inset-left) + 16px);}
.search{position:relative;margin:4px 0 18px;}
.search>svg{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--grey);pointer-events:none;}
.search input{width:100%;border:1px solid var(--line);background:var(--surface2);border-radius:12px;
  min-height:54px;padding:0 48px 0 50px;font-size:16px;font-family:inherit;color:var(--ink);outline:none;}
.search input:focus{border-color:var(--blue);background:#fff;box-shadow:0 0 0 3px rgba(31,78,121,.14);}
.search .clr{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:none;
  background:transparent;color:var(--grey);border-radius:50%;display:none;align-items:center;justify-content:center;font-size:22px;}
.search .clr svg{width:18px;height:18px;}
.search.has .clr{display:flex;}
.results{display:none;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:22px;}
.results.show{display:block;}
.results .rhead{padding:11px 16px;font-size:13px;font-weight:700;color:var(--grey);background:var(--surface2);border-bottom:1px solid var(--line2);}
.ritem{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border-bottom:1px solid var(--line2);width:100%;text-align:start;background:#fff;border:none;}
.ritem:last-child{border-bottom:none;}
.ritem:hover{background:var(--surface2);}
.ritem .rb{flex:none;font-family:var(--f-mono);font-weight:700;font-size:12px;width:24px;height:24px;border-radius:6px;
  background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;}
.ritem .rb svg{width:13px;height:13px;}
.ritem .rt{min-width:0;}
.ritem .rt b{display:block;font-size:13px;color:var(--grey);font-weight:700;margin-bottom:2px;}
.ritem .rt span{font-size:14.5px;color:var(--ink);line-height:1.45;}
.ritem mark{background:#fff2a8;color:inherit;padding:0 1px;border-radius:2px;}
.rempty{padding:22px 16px;color:var(--grey);font-size:14.5px;text-align:center;}

/* ---------- hero (soft blue feature panel) ---------- */
.hero{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:38px 26px 32px;margin:0 0 26px;position:relative;overflow:hidden;}
.hero-art{position:absolute;right:-14px;bottom:-22px;width:200px;height:200px;opacity:.06;color:var(--blue);pointer-events:none;}
.hero .eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--blue);
  background:var(--white);border:1px solid var(--line);border-radius:999px;padding:5px 12px;margin:0 0 16px;}
.hero h1{font-size:clamp(1.9rem,6vw,3rem);line-height:1.08;letter-spacing:-.01em;font-weight:700;margin:0;position:relative;}
.hero .tl{font-size:clamp(1rem,2.6vw,1.16rem);color:var(--grey);margin:16px 0 0;max-width:34ch;line-height:1.55;position:relative;}
.hero .btns{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px;position:relative;}
.hero .btns .btn-light{background:var(--white);}
.hero .btns .btn-light:hover{background:#e1eaf4;}
.kpis{display:flex;gap:26px;margin-top:28px;flex-wrap:wrap;position:relative;}
.kpi b{font-family:var(--f-mono);font-size:26px;font-weight:700;display:block;letter-spacing:-.02em;color:var(--blue);}
.kpi span{font-size:12.5px;color:var(--grey);}

/* ---------- explore / external links ---------- */
.explore{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;justify-content:space-between;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:15px 18px;margin:0 0 22px;}
.explore .ex-tx{min-width:0;}
.explore .ex-tx b{display:block;font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-.01em;}
.explore .ex-tx span{display:block;font-size:13px;color:var(--grey);margin-top:2px;}
.explore .ex-links{display:flex;gap:10px;flex-wrap:wrap;}
.explore .ex-links .btn{text-decoration:none;}
.explore .ex-links .btn svg{width:15px;height:15px;}

/* ---------- sections / accordion ---------- */
.sec{border-top:1px solid var(--line);scroll-margin-top:var(--stick);}
.sec:first-of-type{border-top:none;}
.sec>h2{display:flex;align-items:center;gap:16px;cursor:pointer;margin:0;padding:24px 4px;user-select:none;}
.sec .num{flex:none;font-family:var(--f-mono);font-size:clamp(1.4rem,5vw,2rem);font-weight:700;color:var(--grey2);
  letter-spacing:-.02em;width:1.6em;}
.sec.open .num{color:var(--blue);}
.sec .tt{flex:1;min-width:0;}
.sec .tt b{display:block;font-size:clamp(1.15rem,3.6vw,1.55rem);font-weight:700;letter-spacing:-.02em;line-height:1.2;}
.sec .tt small{display:block;font-weight:500;font-size:13.5px;color:var(--grey);margin-top:5px;line-height:1.4;}
.sec .chev{flex:none;color:var(--grey);transition:transform .25s;display:flex;}
.sec .chev svg{width:22px;height:22px;}
.sec.open .chev{transform:rotate(180deg);color:var(--ink);}
.cards{display:none;padding:0 0 26px;}
.sec.open .cards{display:block;animation:fade .3s ease;}
@keyframes fade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}

.card{border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:14px;background:#fff;transition:background .4s;}
.card.flash{background:#fff8d6;}
.card h3{font-size:17px;font-weight:700;margin:0 0 12px;letter-spacing:-.01em;}
.card ul{margin:10px 0;padding-inline-start:20px;}
.card li{font-size:15px;line-height:1.62;margin:7px 0;color:var(--ink2);}
.card li::marker{color:var(--blue);}

.callout{display:flex;gap:11px;align-items:flex-start;background:var(--panel);border-inline-start:3px solid var(--cyan);
  border-radius:var(--r-sm);padding:13px 15px;margin:13px 0;font-size:15px;line-height:1.55;color:var(--ink);}
.callout svg{flex:none;width:19px;height:19px;margin-top:1px;color:var(--blue);}
.callout b{font-weight:700;}

.imgs{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.imgs img{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;cursor:zoom-in;}
.imgs.two img{width:calc(50% - 5px);}
.imgs img:hover{border-color:var(--blue);}
.hint{font-size:12.5px;color:var(--grey);margin-top:8px;}

.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:14px;border:1px solid var(--line);border-radius:var(--r-sm);}
table.dt{border-collapse:collapse;width:100%;font-size:14px;min-width:340px;}
table.dt th{background:var(--surface);color:var(--blue);padding:11px 14px;text-align:start;font-weight:700;white-space:nowrap;font-size:13px;border-bottom:2px solid var(--blue);}
table.dt td{padding:10px 14px;border-bottom:1px solid var(--line2);vertical-align:top;line-height:1.5;}
table.dt tr:last-child td{border-bottom:none;}
table.dt tbody tr:hover td{background:var(--surface2);}
table.dt td:first-child{font-family:var(--f-mono);font-weight:600;white-space:nowrap;}

/* ---------- videos ---------- */
.vid{border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:14px;}
.vid h3{font-size:16px;font-weight:700;margin:0 0 5px;}
.vid p{font-size:14px;color:var(--grey);margin:0 0 12px;}
.ratio{position:relative;width:100%;padding-top:56.25%;border-radius:var(--r-sm);overflow:hidden;background:#000;}
.ratio iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ---------- quiz / self-test ---------- */
.quizblock{margin-top:8px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
.quizblock>.qbhead{display:flex;align-items:center;gap:12px;padding:18px 20px;background:var(--surface2);border-bottom:1px solid var(--line2);}
.qbhead .qbi{flex:none;width:30px;height:30px;border-radius:8px;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;}
.qbhead .qbi svg{width:17px;height:17px;}
.qbhead b{font-size:15px;font-weight:700;}
.qbhead small{display:block;color:var(--grey);font-weight:500;font-size:12.5px;margin-top:1px;}
.qbhead .qbsc{margin-left:auto;font-family:var(--f-mono);font-weight:700;font-size:14px;color:var(--grey);white-space:nowrap;}
.qbhead .qbsc.pass{color:var(--ok);} .qbhead .qbsc.fail{color:var(--bad);}
.qbody{padding:8px 20px 20px;}
.q{padding:16px 0;border-bottom:1px solid var(--line2);}
.q:last-child{border-bottom:none;}
.qt{font-weight:700;font-size:15.5px;margin:0 0 12px;line-height:1.5;}
.qt .qn{font-family:var(--f-mono);color:var(--blue);margin-inline-end:8px;}
.opt{display:flex;align-items:center;gap:11px;width:100%;text-align:start;border:1px solid var(--line);background:#fff;
  border-radius:var(--r-sm);padding:13px 15px;margin:8px 0;font-size:15px;color:var(--ink);line-height:1.45;min-height:50px;transition:.12s;}
.opt:hover:not(:disabled){border-color:var(--blue);}
.opt:disabled{cursor:default;}
.opt .mk{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line);display:inline-flex;align-items:center;justify-content:center;}
.opt .mk svg{width:13px;height:13px;display:none;}
.opt.correct{border-color:var(--ok);background:var(--ok-bg);font-weight:600;}
.opt.correct .mk{border-color:var(--ok);background:var(--ok);color:#fff;}
.opt.correct .mk svg{display:block;}
.opt.wrong{border-color:var(--bad);background:var(--bad-bg);}
.opt.wrong .mk{border-color:var(--bad);background:var(--bad);color:#fff;}
.opt.wrong .mk svg{display:block;}
.ex{font-size:14px;color:var(--ink2);margin-top:10px;padding:13px 15px;background:var(--surface);border-radius:var(--r-sm);display:none;line-height:1.55;}
.ex.show{display:block;}
.ex b{color:var(--ok);font-weight:700;margin-inline-end:6px;}
.qbfoot{display:flex;flex-wrap:wrap;gap:10px;padding:14px 20px;border-top:1px solid var(--line2);background:var(--surface2);}
.examresult .exretry{margin-inline-start:auto;}

/* ---------- RTL (Arabic) ---------- */
[dir=rtl] .search>svg{left:auto;right:18px;}
[dir=rtl] .search input{padding:0 50px 0 48px;}
[dir=rtl] .search .clr{right:auto;left:8px;}
[dir=rtl] .hero .tl,[dir=rtl] .certintro p{max-width:none;}

/* ---------- certification block ---------- */
.certintro{background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 26px;margin-bottom:20px;}
.certintro h3{font-size:clamp(1.4rem,5vw,2rem);font-weight:700;letter-spacing:-.02em;margin:0 0 10px;}
.certintro p{color:var(--grey);font-size:15px;margin:0;max-width:46ch;line-height:1.55;}
.checklist{margin:22px 0;display:flex;flex-direction:column;gap:12px;}
.ck{display:flex;align-items:center;gap:13px;font-size:15px;}
.ck .ico{flex:none;width:28px;height:28px;border-radius:50%;border:2px solid var(--line);background:var(--white);display:flex;align-items:center;justify-content:center;color:var(--grey2);}
.ck .ico svg{width:16px;height:16px;}
.ck.done .ico{border-color:var(--blue);background:var(--blue);color:#fff;}
.ck .txt{color:var(--grey);} .ck.done .txt{color:var(--ink);}
.ck .txt b{font-family:var(--f-mono);}

.examresult{border:1px solid var(--line);border-radius:var(--r);padding:20px;margin:16px 0;display:flex;align-items:center;gap:18px;}
.examresult .big{font-family:var(--f-mono);font-size:34px;font-weight:700;letter-spacing:-.02em;}
.examresult.pass{border-color:var(--ok);background:var(--ok-bg);} .examresult.pass .big{color:var(--ok);}
.examresult.fail{border-color:var(--bad);background:var(--bad-bg);} .examresult.fail .big{color:var(--bad);}
.examresult .msg b{display:block;font-size:16px;margin-bottom:3px;}
.examresult .msg span{font-size:14px;color:var(--grey);}

.certform{border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-top:6px;}
.certform.locked{opacity:.5;pointer-events:none;}
.certform label{display:block;font-size:13px;font-weight:700;color:var(--grey);margin-bottom:8px;}
.certform .row{display:flex;gap:10px;flex-wrap:wrap;}
.certform input[type=text]{flex:1;min-width:200px;border:1px solid var(--line);border-radius:var(--r-btn);min-height:52px;
  padding:0 18px;font-size:16px;font-family:inherit;color:var(--ink);outline:none;}
.certform input[type=text]:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,78,121,.14);}
.certwrap{margin-top:20px;display:none;}
.certwrap.show{display:block;}
.certcanvas{width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r);}
.certactions{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}

footer{border-top:1px solid var(--line);margin-top:30px;padding:26px 4px 50px;color:var(--grey);font-size:13px;line-height:1.6;}
footer .by{margin-top:6px;font-size:12px;color:var(--grey2);}

/* ---------- lightbox ---------- */
.lb{position:fixed;inset:0;background:rgba(10,11,13,.95);display:none;z-index:99;align-items:center;justify-content:center;padding:18px;}
.lb.show{display:flex;}
.lb img{max-width:100%;max-height:100%;border-radius:8px;}
.lb .x{position:absolute;top:calc(env(safe-area-inset-top) + 14px);right:16px;color:#fff;width:46px;height:46px;
  display:flex;align-items:center;justify-content:center;border:none;background:rgba(255,255,255,.1);border-radius:50%;}
.lb .x svg{width:22px;height:22px;}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 22px);transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:13px 22px;border-radius:var(--r-pill);font-size:14.5px;font-weight:600;
  z-index:120;opacity:0;transition:.3s;pointer-events:none;max-width:90vw;text-align:center;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- image precache chip ---------- */
.precache{position:fixed;left:calc(env(safe-area-inset-left) + 14px);bottom:calc(env(safe-area-inset-bottom) + 16px);
  z-index:110;display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:9px 14px 9px 12px;box-shadow:0 4px 16px rgba(31,78,121,.12);
  font-size:12.5px;font-weight:700;color:var(--ink);max-width:74vw;transition:opacity .4s,transform .4s;}
.precache.hide{opacity:0;transform:translateY(10px);}
.precache .pcbar{position:relative;width:46px;height:6px;border-radius:3px;background:var(--surface);overflow:hidden;flex:none;}
.precache .pcbar>i{position:absolute;inset:0 auto 0 0;width:0;background:var(--blue);border-radius:3px;transition:width .25s;}
.precache .pctxt{white-space:nowrap;color:var(--grey);font-weight:600;}
[dir=rtl] .precache{left:auto;right:calc(env(safe-area-inset-right) + 14px);}
[dir=rtl] .precache .pcbar>i{inset:0 0 0 auto;}

@media(min-width:768px){
  body{font-size:16px;}
  .hero{padding:56px 44px 46px;}
  .card{padding:24px;}
}

/* ---------- print: isolate certificate ---------- */
@media print{
  header,nav.tabs,.search,.results,.hero,#content,footer,.lb,.toast,.certintro,.checklist,.examresult,.certform,.certactions{display:none !important;}
  body,main{background:#fff;padding:0;margin:0;max-width:none;}
  .certwrap{display:block !important;}
  .certcanvas{border:none;width:100%;}
}