/* Talenta Pros — Final exam, certificate & badge (student portal). White + emerald, Manrope. */
.tx-wrap{display:grid;gap:18px;position:relative}
.tx-head{margin-bottom:2px}
.tx-h2{margin:8px 0 0;font:800 20px/1.25 var(--display);color:#0E1B3D}
.tx-w{width:100%}
.tx-note{padding:12px 16px;border-radius:12px;background:#FFF6E0;border:1px solid #F5DFA6;color:#7A4B00;font:600 14px/1.5 var(--body)}
.tx-pill{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;font:700 12px/1 var(--body)}
.tx-pill svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.2}
.tx-pill.ok{background:#DDF7EC;color:#0A7A57}.tx-pill.no{background:#FDECEC;color:#B42318}.tx-pill.test{background:#FFF1D6;color:#8A5300}
.tx-pill.flag{background:#FFF1D6;color:#8A5300}

/* rules strip */
.tx-rules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.tx-rules li{display:grid;gap:4px;padding:16px 18px;border:1px solid #E6E9F0;border-radius:16px;background:#fff}
.tx-rules b{font:800 24px/1.1 var(--display);color:#0E1B3D}
.tx-rules span{font:500 13.5px/1.4 var(--body);color:#4A5672}
.tx-two{display:grid;grid-template-columns:1.25fr 1fr;gap:18px;align-items:start}
.tx-list{margin:0 0 4px;padding-left:20px;display:grid;gap:9px;font:500 15px/1.55 var(--body);color:#26324F}
.tx-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tx-n{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#E3FAF1;color:#0A8F66;font:800 15px/1 var(--display);margin-bottom:10px}

/* locked / waiting */
.tx-lockcard{display:flex;gap:18px;align-items:flex-start}
.tx-lockcard .tp-h-btn{max-width:320px}
.tx-grow{flex:1;min-width:0}
.tx-lockicon{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#E3FAF1;color:#0A8F66}
.tx-lockicon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2}
.tx-prog{height:10px;border-radius:99px;background:#EDF0F5;overflow:hidden;margin:4px 0 12px}
.tx-prog i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#12B886,#10C98F)}
.tx-wait{text-align:center}
.tx-count{display:flex;justify-content:center;gap:12px;margin:8px 0 12px}
.tx-count span{display:grid;gap:4px;min-width:74px;padding:12px 8px;border-radius:14px;background:#0E1B3D;color:#fff}
.tx-count b{font:800 28px/1 var(--display)}.tx-count small{font:600 11.5px/1 var(--body);opacity:.75;text-transform:uppercase;letter-spacing:.08em}

/* start form */
.tx-start .tp-h-btn{margin-top:6px}
.tx-field{display:grid;gap:6px;margin:4px 0 12px}
.tx-field span{font:700 13.5px/1 var(--body);color:#0E1B3D}
.tx-field input{height:48px;padding:0 14px;border:1.5px solid #CBD2DE;border-radius:12px;font:600 16px var(--body);color:#0E1B3D;background:#fff}
.tx-field input:focus{outline:none;border-color:#12B886;box-shadow:0 0 0 4px rgba(18,184,134,.15)}
.tx-agree{display:flex;gap:10px;align-items:flex-start;font:500 14px/1.45 var(--body);color:#26324F;cursor:pointer}
.tx-agree input{margin-top:2px;width:18px;height:18px;accent-color:#12B886;flex:none}
.tx-err{min-height:20px;margin:8px 0 0!important;color:#B42318!important;font-weight:700!important}

/* module breakdown */
.tx-break{display:grid;gap:10px;margin:6px 0 16px}
.tx-brow{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(80px,1fr) 52px;gap:12px;align-items:center}
.tx-bname{font:600 14px/1.35 var(--body);color:#26324F;min-width:0}
.tx-bname em{font-style:normal;font-weight:800;color:#0A8F66;margin-right:8px}
.tx-bbar{height:9px;border-radius:99px;background:#EDF0F5;overflow:hidden}
.tx-bbar i{display:block;height:100%;border-radius:99px}
.tx-bbar i.ok{background:#12B886}.tx-bbar i.mid{background:#F2A93B}.tx-bbar i.low{background:#E5484D}
.tx-bnum{font:700 13.5px/1 var(--body);color:#0E1B3D;text-align:right}
.tx-hist table{width:100%;border-collapse:collapse;font:500 14px/1.4 var(--body);color:#26324F}
.tx-hist th{text-align:left;font-weight:700;color:#5A6480;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;padding:0 8px 8px 0}
.tx-hist td{padding:10px 8px 10px 0;border-top:1px solid #EEF1F5}

/* exam */
body.tx-in-exam .tp-appbar-nav{display:none!important}
body.tx-in-exam .tp-appbar-right .tp-appbar-up,body.tx-in-exam .tp-appbar-plan{visibility:hidden}
/* five learning tabs: keep them on one line at laptop widths */
@media (min-width:901px) and (max-width:1480px){body.tp-app .tp-appbar-nav button{padding:0 10px!important;gap:6px!important}body.tp-app .tp-appbar{gap:14px!important}}
.tx-exam{display:grid;gap:16px;scroll-margin-top:80px}
.tx-bar{position:sticky;top:72px;z-index:20;display:flex;align-items:center;gap:14px;justify-content:space-between;padding:12px 16px;border-radius:16px;background:#0E1B3D;color:#fff;box-shadow:0 14px 30px -20px rgba(14,27,61,.8)}
.tx-bar-l{display:grid;gap:3px}.tx-bar-l b{font:800 16px/1 var(--display)}.tx-bar-l span{font:500 13px/1 var(--body);opacity:.8}
.tx-timer{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.1);font:800 20px/1 var(--display);font-variant-numeric:tabular-nums}
.tx-timer svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
.tx-timer.warn{background:#F2A93B;color:#0E1B3D}.tx-timer.crit{background:#E5484D;color:#fff;animation:txPulse 1s ease-in-out infinite}
@keyframes txPulse{50%{opacity:.75}}
.tx-submit{height:42px;padding:0 18px;border:0;border-radius:11px;background:#12B886;color:#0E1B3D;font:800 14.5px/1 var(--body);cursor:pointer}
.tx-submit:hover{background:#13C38E}
.tx-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.tx-qcard{padding:26px 28px;border:1px solid #E6E9F0;border-radius:20px;background:#fff;min-height:360px}
.tx-qtop{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px}
.tx-qn{font:800 14px/1 var(--body);color:#0A8F66;text-transform:uppercase;letter-spacing:.08em}.tx-qn small{color:#7A849C;font-weight:600}
body.tp-app .tx-qtext{margin:0 0 20px!important;font:700 clamp(18px,2.1vw,22px)/1.45 var(--display)!important;color:#0E1B3D!important;letter-spacing:-.005em;max-width:none}
.tx-opts{display:grid;gap:10px}
.tx-opt{display:flex;align-items:center;gap:14px;width:100%;padding:14px 16px;border:1.5px solid #DCE1EA;border-radius:14px;background:#fff;text-align:left;font:500 16px/1.45 var(--body);color:#172033;cursor:pointer;transition:border-color .15s,background .15s}
.tx-opt:hover{border-color:#12B886;background:#F5FDFA}
.tx-opt.on{border-color:#12B886;background:#E9FBF4;box-shadow:inset 0 0 0 1px #12B886}
.tx-l{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:#EEF1F6;font:800 14px/1 var(--display);color:#0E1B3D}
.tx-opt.on .tx-l{background:#12B886;color:#fff}
.tx-o{flex:1}
.tx-tick svg{width:22px;height:22px;fill:none;stroke:#0A8F66;stroke-width:2.6}
.tx-nav{display:flex;gap:10px;justify-content:space-between;margin-top:14px}
.tx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border:0;border-radius:12px;background:#0E1B3D;color:#fff;font:700 14.5px/1 var(--body);cursor:pointer;text-decoration:none}
.tx-btn:hover{background:#1A2F66}
.tx-btn:disabled{opacity:.4;cursor:default}
.tx-btn.ghost{background:#fff;color:#0E1B3D;border:1.5px solid #DCE1EA}.tx-btn.ghost:hover{border-color:#0E1B3D}
.tx-btn.flag{background:#fff;color:#8A5300;border:1.5px solid #F2D9A6}.tx-btn.flag.on{background:#FFF1D6}
.tx-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.tx-btn.li{background:#0A66C2;color:#fff}.tx-btn.li:hover{background:#004182}
.tx-saved{min-height:18px;margin:10px 2px 0;font:500 13px/1.4 var(--body);color:#5A6480}
.tx-side{position:sticky;top:150px;padding:16px;border:1px solid #E6E9F0;border-radius:18px;background:#fff}
.tx-gridtoggle{display:block;width:100%;margin:0 0 12px;padding:0;border:0;background:none;text-align:left;font:800 15px/1.2 var(--display);color:#0E1B3D;cursor:default}
.tx-gridtoggle span{font:600 13px var(--body);color:#5A6480}
.tx-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;max-height:52vh;overflow:auto}
.tx-grid button{min-width:0;padding:0;height:30px;border:1px solid #DCE1EA;border-radius:7px;background:#fff;font:700 12px/1 var(--body);color:#4A5672;cursor:pointer;position:relative}
.tx-grid button.ans{background:#12B886;border-color:#12B886;color:#fff}
.tx-grid button.flg:after{content:"";position:absolute;top:-3px;right:-3px;width:9px;height:9px;border-radius:50%;background:#F2A93B;border:2px solid #fff}
.tx-grid button.cur{outline:2.5px solid #0E1B3D;outline-offset:1px}
.tx-legend{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px;font:500 12px/1 var(--body);color:#5A6480}
.tx-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;border:1px solid #DCE1EA;margin-right:5px;vertical-align:-1px}
.tx-legend i.ans{background:#12B886;border-color:#12B886}.tx-legend i.flg{background:#F2A93B;border-color:#F2A93B;border-radius:50%}

/* submit modal */
.tx-modal{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;background:rgba(8,19,48,.55)}
.tx-mbox{width:100%;max-width:440px;padding:26px;border-radius:20px;background:#fff;box-shadow:0 30px 70px -20px rgba(0,0,0,.45)}
.tx-mbox h3{margin:0 0 14px;font:800 21px/1.25 var(--display);color:#0E1B3D}
.tx-mbox p{margin:14px 0 18px;font:500 15px/1.5 var(--body);color:#36425E}
.tx-mstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tx-mstats span{display:grid;gap:4px;padding:12px 6px;border-radius:12px;background:#F3F6FA;text-align:center;font:600 12.5px/1.2 var(--body);color:#5A6480}
.tx-mstats b{font:800 22px/1 var(--display);color:#0E1B3D}
.tx-mstats .warn{background:#FFF1D6}.tx-mstats .warn b{color:#8A5300}
.tx-mrow{display:flex;gap:10px;justify-content:flex-end}

.tx-grading{text-align:center;padding:48px 22px!important}
.tx-spin{width:44px;height:44px;margin:0 auto 16px;border-radius:50%;border:4px solid #E3FAF1;border-top-color:#12B886;animation:txSpin .9s linear infinite}
@keyframes txSpin{to{transform:rotate(360deg)}}

/* result */
.tx-score{display:grid;place-items:center;min-height:220px}
.tx-ring{--p:0;display:grid;place-items:center;align-content:center;gap:6px;width:180px;height:180px;border-radius:50%;background:radial-gradient(closest-side,#fff 78%,transparent 79% 100%),conic-gradient(#E5484D calc(var(--p)*1%),#EDF0F5 0)}
.tx-score.ok .tx-ring{background:radial-gradient(closest-side,#fff 78%,transparent 79% 100%),conic-gradient(#12B886 calc(var(--p)*1%),#EDF0F5 0)}
.tx-ring b{font:800 38px/1 var(--display);color:#0E1B3D}.tx-ring small{font:600 12.5px/1 var(--body);color:#5A6480}

/* certificate */
.tx-cert{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:18px;align-items:start}
.tx-mini{position:relative;aspect-ratio:1056/746;background:#fff;border-radius:6px;box-shadow:0 22px 50px -24px rgba(14,27,61,.45);overflow:hidden;container-type:inline-size}
.tx-mini:before{content:"";position:absolute;inset:2.2%;border:2px solid #0E1B3D}
.tx-mini:after{content:"";position:absolute;inset:3%;border:1px solid #12B886}
.tx-mini-in{position:absolute;inset:7% 8%;display:flex;flex-direction:column}
.tx-mini-logo{height:5.2cqw;width:auto;align-self:flex-start}
.tx-mini-eye{margin:4.5cqw 0 0;font:800 1.35cqw/1 var(--body);letter-spacing:.42em;color:#12B886}
.tx-mini-title{margin:.8cqw 0 0;max-width:62%;font:800 3.6cqw/1.12 var(--display);color:#0B1F3A}
.tx-mini-lead{margin:2.6cqw 0 .4cqw;font:500 1.5cqw/1 var(--body);color:#596579}
.tx-mini-name{margin:0;max-width:62%;padding-bottom:1cqw;border-bottom:2px solid #E7F8F1;font:800 4.4cqw/1.15 var(--display);color:#172033;overflow-wrap:anywhere}
.tx-mini-meta{margin:auto 0 0;font:600 1.25cqw/1.4 var(--body);color:#596579}
.tx-mini-badge{position:absolute;right:7%;top:20%;width:24%;height:auto}
.tx-cert-side{display:grid;gap:10px;justify-items:center;text-align:center}
.tx-badge{width:168px;height:168px;filter:drop-shadow(0 14px 18px rgba(14,27,61,.25))}
.tx-cert-side h3{margin:4px 0 0!important}
.tx-cert-side h3 small{display:block;margin-top:4px;font:700 13px/1 var(--body);color:#0A8F66}
.tx-id{margin:0!important;font-size:13.5px!important}.tx-id b{color:#0E1B3D;letter-spacing:.04em}
.tx-row2{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
.tx-row2 .tx-btn{padding:0 10px;font-size:13.5px}
.tx-small{min-height:18px;margin:0!important;font-size:13px!important;color:#0A8F66!important;font-weight:600}
.tx-share textarea{width:100%;min-height:150px;box-sizing:border-box;padding:12px 14px;margin-bottom:10px;border:1px solid #DCE1EA;border-radius:12px;font:500 14px/1.55 var(--body);color:#26324F;resize:vertical;background:#FAFBFD}
.tx-confetti{position:absolute;inset:-20px 0 auto;height:0;pointer-events:none;z-index:5}
.tx-confetti i{position:absolute;left:calc(var(--x)*1%);top:0;width:9px;height:14px;border-radius:2px;background:var(--c);opacity:0;animation:txFall 2.8s var(--d) ease-in forwards}
@keyframes txFall{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:0;transform:translateY(520px) rotate(540deg)}}
@media (prefers-reduced-motion:reduce){.tx-confetti{display:none}.tx-timer.crit{animation:none}}

/* mobile */
@media (max-width:900px){
  .tx-two,.tx-cert,.tx-body{grid-template-columns:1fr}
  .tx-rules{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tx-steps{grid-template-columns:1fr}
  .tx-side{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:30;border-radius:18px 18px 0 0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));box-shadow:0 -12px 30px -14px rgba(14,27,61,.35)}
  .tx-gridtoggle{margin:0;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
  .tx-gridtoggle:after{content:"▲";font-size:11px;color:#5A6480}
  .tx-side.open .tx-gridtoggle:after{content:"▼"}
  .tx-side .tx-grid,.tx-side .tx-legend{display:none}
  .tx-side.open .tx-grid{display:grid;margin-top:12px;max-height:42vh;grid-template-columns:repeat(8,minmax(0,1fr))}
  .tx-side.open .tx-legend{display:flex}
  .tx-exam{padding-bottom:84px}
  .tx-bar{top:58px;padding:10px 12px;gap:8px;flex-wrap:nowrap}
  .tx-bar-l b{display:none}
  .tx-bar-l span{white-space:nowrap}
  .tx-timer{font-size:17px;padding:7px 11px}
  .tx-submit{height:38px;padding:0 13px;font-size:13.5px}
  .tx-qcard{padding:20px 16px;min-height:0}
  .tx-opt{padding:13px 12px;font-size:15.5px}
  .tx-nav .tx-btn{padding:0 14px;flex:1}
  .tx-nav .tx-btn.flag{flex:0 0 auto}
  .tx-lockcard{flex-direction:column}
  .tx-brow{grid-template-columns:minmax(0,1fr) 70px 46px;gap:8px}
  .tx-bname{font-size:13px}
  .tx-count span{min-width:64px}
}

/* Final Exam tab lock (until 100% course completion) */
.tp-appbar-nav .tp-nav-lock{display:inline-flex;align-items:center;gap:3px;margin-left:2px;padding:3px 7px;border-radius:99px;background:#EEF1F6;color:#4A5672;font:700 11px/1 var(--body);font-style:normal}
.tp-appbar-nav .tp-nav-lock[hidden]{display:none}
.tp-appbar-nav .tp-nav-lock svg{width:11px!important;height:11px!important;stroke-width:2.4!important}
/* Mock Interview joined the top menu: keep every item visible on laptop widths */
@media (min-width:901px) and (max-width:1600px){body.tp-app .tp-appbar-nav button{padding:0 8px!important;gap:5px!important;font-size:13.5px!important}body.tp-app .tp-appbar-nav .tp-nav-soon{display:none}}
@media (min-width:901px) and (max-width:1380px){body.tp-app .tp-appbar-nav button svg{display:none}}