/* ==========================================================================
   Talenta Pros — student dashboard v3 (Oct 31, 2026)
   Calm white portal: white top bar, white cards, emerald (#12B886) accents only.
   Primary buttons use deep emerald (#0A7D5B) so white text stays readable.
   Loaded last so it wins over live.css / portal-polish / portal-bright.
   ========================================================================== */
body.tp-app{--d-em:#12B886;--d-em-2:#0A7D5B;--d-em-3:#086648;--d-em-ink:#0A6B4E;--d-em-soft:#ECF8F3;--d-em-line:#C9EBDD;--d-ink:#172033;--d-mut:#596579;--d-line:#E4EAE7;--d-bg:#F6F8F7;background:var(--d-bg)!important}
body.tp-app #portal,body.tp-app .portal,body.tp-app #portal > .wrap{background:transparent!important}

/* ---------- Top bar: white, emerald underline ---------- */
body.tp-app .tp-appbar{background:#fff!important;color:var(--d-ink)!important;border-bottom:1px solid var(--d-line)!important;box-shadow:0 1px 0 rgba(23,32,51,.02),0 8px 24px -22px rgba(23,32,51,.5)!important;gap:18px!important;padding:0 20px!important}
body.tp-app .tp-appbar-logo{display:flex;align-items:center;background:none!important;padding:0!important;border-radius:0}
body.tp-app .tp-appbar-logo img{width:128px!important}
body.tp-app .tp-appbar-nav{gap:0!important}
body.tp-app .tp-appbar-nav button{color:var(--d-mut)!important;font:700 14px/1 var(--body)!important;padding:0 12px!important;gap:7px!important;background:none!important}
body.tp-app .tp-appbar-nav button:hover{color:var(--d-ink)!important}
body.tp-app .tp-appbar-nav button.on{color:var(--d-em-ink)!important;background:none!important;box-shadow:none!important}
body.tp-app .tp-appbar-nav button.on::after{background:var(--d-em)!important;left:10px!important;right:10px!important}
body.tp-app .tp-appbar-nav .tp-nav-soon,body.tp-app .tp-appbar-nav .tp-nav-new{font:800 10.5px/1 var(--body);font-style:normal;letter-spacing:.04em;text-transform:uppercase;padding:4px 7px;border-radius:999px;background:var(--d-em)!important;color:#fff!important}
body.tp-app .tp-appbar-nav .tp-nav-lock{background:#EEF1F0!important;color:var(--d-mut)!important}
body.tp-app .tp-appbar-nav .tp-nav-lockic{display:inline-grid;place-items:center;width:20px;height:20px;padding:0!important;border-radius:50%}
body.tp-app .tp-appbar-nav .tp-nav-lockic[hidden]{display:none!important}
body.tp-app .tp-appbar-nav .tp-nav-lockic svg{width:11px!important;height:11px!important}
body.tp-app .tp-appbar-right{gap:8px!important}
body.tp-app .tp-appbar-plan{border:1px solid var(--d-line)!important;background:#fff!important;color:var(--d-ink)!important;font-weight:700!important}
body.tp-app .tp-appbar-plan:hover{border-color:var(--d-em)!important;background:var(--d-em-soft)!important}
body.tp-app .tp-appbar-up{background:var(--d-em-2)!important;border-color:var(--d-em-2)!important;color:#fff!important}
body.tp-app .tp-appbar-up:hover{background:var(--d-em-3)!important}
body.tp-app .tp-appbar-icon{background:var(--d-bg)!important;color:var(--d-ink)!important}
body.tp-app .tp-appbar-icon:hover,body.tp-app .tp-appbar-icon.on{background:var(--d-em-soft)!important;box-shadow:inset 0 0 0 1.5px var(--d-em)!important}
body.tp-app .tp-appbar-me{background:var(--d-em-soft)!important;color:var(--d-em-ink)!important;border:1.5px solid var(--d-em-line)!important}
body.tp-app .tp-appbar-me[aria-expanded="true"]{border-color:var(--d-em)!important}
body.tp-app .fn-bar-btn{background:#fff!important;color:var(--d-ink)!important;border:1px solid var(--d-line)!important;box-shadow:none!important}
body.tp-app .fn-bar-btn:hover{border-color:var(--d-em)!important;background:var(--d-em-soft)!important}
@media (max-width:1560px){body.tp-app .fn-bar-btn span{display:none!important}body.tp-app .fn-bar-btn{padding:0 10px!important}}
@media (max-width:1500px){body.tp-app .tp-appbar-nav button{padding:0 9px!important}body.tp-app .tp-appbar-nav button > svg{display:none!important}}
@media (max-width:1320px){body.tp-app .tp-appbar-plan{display:none!important}}

/* ---------- Page ---------- */
body.tp-app .tp-d{display:flex;flex-direction:column;gap:22px;color:var(--d-ink);padding-top:6px}
body.tp-app .tp-d h1,body.tp-app .tp-d h2,body.tp-app .tp-d h3{color:var(--d-ink)!important;margin:0;letter-spacing:-.01em}
body.tp-app .tp-d-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

body.tp-app .tp-d-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
body.tp-app .tp-d-date{display:block;font-size:13px;font-weight:700;color:var(--d-mut);margin-bottom:4px}
body.tp-app .tp-d-head h1{font-size:clamp(26px,2.6vw,32px)!important;font-weight:800;line-height:1.15}
body.tp-app .tp-d-head p{margin:6px 0 0;font-size:15.5px;color:var(--d-mut);font-weight:500}
body.tp-app .tp-d-plan{font-size:13px;font-weight:800;color:var(--d-em-ink);background:var(--d-em-soft);border:1px solid var(--d-em-line);border-radius:999px;padding:7px 14px}
body.tp-app .tp-d-trialpill{display:flex;align-items:center;gap:14px;padding:10px 10px 10px 16px;background:#fff;border:1px solid var(--d-line);border-radius:14px}
body.tp-app .tp-d-trialpill span{display:flex;flex-direction:column;gap:2px}
body.tp-app .tp-d-trialpill b{font-size:14px;font-weight:800;color:var(--d-em-ink)}
body.tp-app .tp-d-trialpill small{font-size:12.5px;color:var(--d-mut)}
body.tp-app .tp-d-trialpill.ended{border-color:#F3C9C4;background:#FFF7F6}
body.tp-app .tp-d-trialpill.ended b{color:#B42318}

/* Cards and buttons */
body.tp-app .tp-d-card{background:#fff!important;border:1px solid var(--d-line)!important;border-radius:16px!important;padding:20px!important;box-shadow:0 1px 2px rgba(23,32,51,.03)!important;display:flex;flex-direction:column;gap:12px;margin:0!important}
body.tp-app .tp-d-card[hidden]{display:none!important}
body.tp-app .tp-d-card h3{font-size:16.5px!important;font-weight:800}
body.tp-app .tp-d-ch{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
body.tp-app .tp-d-ch p{margin:4px 0 0;font-size:14.5px;color:var(--d-mut)}
body.tp-app .tp-d-p{margin:0!important;font-size:14.5px!important;line-height:1.55!important;color:var(--d-mut)!important}
body.tp-app .tp-d-sec{font-size:17px!important;font-weight:800;margin:0 0 12px!important}
body.tp-app .tp-d-link{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;font:800 14px/1.3 var(--body);color:var(--d-em-ink);cursor:pointer;align-self:flex-start;text-decoration:none}
body.tp-app .tp-d-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
body.tp-app .tp-d-link:hover svg{transform:translateX(3px)}
body.tp-app .tp-d-btn{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:10px;border:1.5px solid var(--d-line);background:#fff;color:var(--d-ink);font:800 14px/1 var(--body);cursor:pointer;text-decoration:none;align-self:flex-start;transition:background .15s,border-color .15s}
body.tp-app .tp-d-btn:hover{border-color:var(--d-em);background:var(--d-em-soft)}
body.tp-app .tp-d-btn.solid{background:var(--d-em-2);border-color:var(--d-em-2);color:#fff}
body.tp-app .tp-d-btn.solid:hover{background:var(--d-em-3);border-color:var(--d-em-3)}
body.tp-app .tp-d-btn.sm{min-height:38px;padding:0 14px;font-size:13.5px}
body.tp-app .tp-d-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body.tp-app .tp-d-btn svg path[d^="M7 4"]{fill:currentColor;stroke:none}
body.tp-app .tp-d-zf .tp-d-btn{align-self:stretch}
body.tp-app .tp-d-count{font-size:12.5px;font-weight:800;color:var(--d-em-ink);background:var(--d-em-soft);border-radius:999px;padding:5px 11px;white-space:nowrap}
body.tp-app .tp-d-bar{height:8px;border-radius:999px;background:#EAF0ED;overflow:hidden}
body.tp-app .tp-d-bar i{display:block;height:100%;border-radius:999px;background:var(--d-em)}

/* ---------- Continue learning (hero) ---------- */
body.tp-app .tp-d-hero{display:flex;align-items:center;gap:22px;flex-wrap:wrap;padding:22px 24px;background:#fff;border:1px solid var(--d-line);border-left:5px solid var(--d-em);border-radius:18px;box-shadow:0 18px 40px -34px rgba(23,32,51,.55)}
body.tp-app .tp-d-hero-ring{position:relative;width:76px;height:76px;flex:none}
body.tp-app .tp-d-ring{width:100%;height:100%;transform:rotate(-90deg)}
body.tp-app .tp-d-ring circle{fill:none;stroke:#EAF0ED;stroke-width:7}
body.tp-app .tp-d-ring .fg{stroke:var(--d-em);stroke-linecap:round}
body.tp-app .tp-d-hero-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:17px;font-weight:800;color:var(--d-ink)}
body.tp-app .tp-d-hero-t{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:5px}
body.tp-app .tp-d-k{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--d-em-ink)}
body.tp-app .tp-home .tp-d-hero h2{font-size:clamp(21px,2.1vw,26px)!important;font-weight:800!important;line-height:1.25!important;margin:0!important}
body.tp-app .tp-d-m{font-size:14.5px;font-weight:600;color:var(--d-mut)}
body.tp-app .tp-d-go{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 26px;border:0;border-radius:12px;background:var(--d-em-2);color:#fff;font:800 16px/1 var(--body);cursor:pointer;transition:transform .15s,background .15s;box-shadow:0 10px 22px -14px rgba(10,125,88,.9)}
body.tp-app .tp-d-go:hover{background:var(--d-em-3);transform:translateY(-1px)}
body.tp-app .tp-d-go svg{width:18px;height:18px;fill:currentColor;stroke:none}
body.tp-app .tp-d-go svg rect,body.tp-app .tp-d-go svg path[d^="M8 11"]{fill:none;stroke:currentColor;stroke-width:1.8}

/* ---------- New in your portal ---------- */
body.tp-app .tp-d-new-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:18px}
body.tp-app .tp-d-feat{position:relative;background:#fff;border:1px solid var(--d-line);border-radius:18px;padding:20px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 2px rgba(23,32,51,.03)}
body.tp-app .tp-d-feat h3{font-size:19px!important;font-weight:800}
body.tp-app .tp-d-feat p{margin:0;font-size:14.5px;line-height:1.55;color:var(--d-mut)}
body.tp-app .tp-d-new-tag{align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:var(--d-em);border-radius:999px;padding:4px 9px}
body.tp-app .tp-d-mi{flex-direction:row;gap:22px;padding:16px;border-color:var(--d-em-line);background:linear-gradient(135deg,#fff 55%,var(--d-em-soft))}
body.tp-app .tp-d-mi-pic{position:relative;flex:0 0 38%;max-width:300px;border-radius:14px;overflow:hidden;background:var(--d-em-soft)}
body.tp-app .tp-d-mi-pic img{display:block;width:100%;height:100%;min-height:220px;object-fit:cover;object-position:50% 20%}
body.tp-app .tp-d-live{position:absolute;left:10px;bottom:10px;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.92);font-size:12px;font-weight:800;color:var(--d-ink)}
body.tp-app .tp-d-live i{width:8px;height:8px;border-radius:50%;background:var(--d-em);box-shadow:0 0 0 0 rgba(18,184,134,.6);animation:tpdPulse 1.8s infinite}
@keyframes tpdPulse{70%{box-shadow:0 0 0 8px rgba(18,184,134,0)}100%{box-shadow:0 0 0 0 rgba(18,184,134,0)}}
body.tp-app .tp-d-feat-b{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px;padding:6px 6px 6px 0}
body.tp-app .tp-d-mi-pts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
body.tp-app .tp-d-mi-pts li{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:#fff;border:1px solid var(--d-line);font-size:13px;font-weight:700;color:var(--d-ink)}
body.tp-app .tp-d-mi-pts svg{width:15px;height:15px;fill:none;stroke:var(--d-em-ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
body.tp-app .tp-d-feat-act{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:4px}
body.tp-app .tp-d-feat-act small{font-size:13px;font-weight:700;color:var(--d-mut)}
body.tp-app .tp-d-feat-ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--d-em-soft);color:var(--d-em-ink)}
body.tp-app .tp-d-feat-ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body.tp-app .tp-d-iv .tp-d-new-tag{position:absolute;top:28px;right:28px;z-index:1}
body.tp-app .tp-d-iv-pic{position:relative;display:block;border:0;padding:0;margin:0 0 4px;border-radius:12px;overflow:hidden;cursor:pointer;background:var(--d-em-soft);aspect-ratio:16/9}
body.tp-app .tp-d-iv-pic img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%}
body.tp-app .tp-d-iv-pic span{position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.95);color:var(--d-em-2);box-shadow:0 8px 20px -8px rgba(23,32,51,.5)}
body.tp-app .tp-d-iv-pic span svg{width:20px;height:20px;fill:currentColor;margin-left:3px}
body.tp-app .tp-d-iv .tp-d-link{margin-top:auto}
body.tp-app .tp-d-cd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
body.tp-app .tp-d-cd span{display:flex;flex-direction:column;align-items:center;padding:10px 6px;border-radius:10px;background:var(--d-em-soft)}
body.tp-app .tp-d-cd b{font-size:20px;font-weight:800;color:var(--d-ink)}
body.tp-app .tp-d-cd small{font-size:12px;color:var(--d-mut)}

/* ---------- Layout ---------- */
body.tp-app .tp-d-grid{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
body.tp-app .tp-d-main{flex:999 1 600px;min-width:0;display:flex;flex-direction:column;gap:18px}
body.tp-app .tp-d-side{flex:1 1 300px;min-width:0;display:flex;flex-direction:column;gap:14px}

/* ---------- How to learn ---------- */
body.tp-app .tp-d-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
body.tp-app .tp-d-step{width:100%;height:100%;text-align:left;display:flex;align-items:flex-start;gap:12px;padding:14px;border:1.5px solid var(--d-line);border-radius:14px;background:#fff;color:var(--d-ink);font-family:var(--body);cursor:pointer;transition:border-color .15s,background .15s}
body.tp-app .tp-d-step:hover{border-color:#A9DEC8}
body.tp-app .tp-d-step.on{border-color:var(--d-em);background:#F4FBF8}
body.tp-app .tp-d-si{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--d-em-soft);color:var(--d-em-ink)}
body.tp-app .tp-d-si svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
body.tp-app .tp-d-step.on .tp-d-si{background:var(--d-em);color:#fff}
body.tp-app .tp-d-st{display:flex;flex-direction:column;gap:3px;min-width:0}
body.tp-app .tp-d-st b{font-size:15px;font-weight:800;display:flex;flex-direction:column;gap:2px}
body.tp-app .tp-d-st b small{font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--d-mut)}
body.tp-app .tp-d-st > span{font-size:13.5px;line-height:1.45;color:var(--d-mut)}
body.tp-app .tp-d-tip{margin:0;padding:10px 12px;border-radius:10px;background:var(--d-bg);font-size:14px;color:var(--d-ink)}

/* ---------- Course path ---------- */
body.tp-app .tp-d-path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
body.tp-app .tp-d-mod{width:100%;height:100%;display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--d-line);background:#fff;text-align:left;font-family:var(--body);color:var(--d-ink);cursor:pointer;border-radius:12px;transition:border-color .15s,background .15s}
body.tp-app .tp-d-mod:hover{border-color:#A9DEC8;background:#FAFDFB}
body.tp-app .tp-d-pin{width:34px;height:34px;flex:0 0 34px;border-radius:10px;display:grid;place-items:center;font-size:13px;font-weight:800;background:#EEF2F0;color:var(--d-mut)}
body.tp-app .tp-d-pin svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
body.tp-app .tp-d-mod[data-st="done"] .tp-d-pin{background:var(--d-em);color:#fff}
body.tp-app .tp-d-mod[data-st="now"] .tp-d-pin{background:var(--d-em-2);color:#fff}
body.tp-app .tp-d-mod[data-st="progress"] .tp-d-pin{background:var(--d-em-soft);color:var(--d-em-ink)}
body.tp-app .tp-d-mt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
body.tp-app .tp-d-mt b{font-size:14px;font-weight:700;line-height:1.3}
body.tp-app .tp-d-mt small{font-size:12.5px;color:var(--d-mut)}
body.tp-app .tp-d-mt em{display:none}
body.tp-app .tp-d-mod[data-st="locked"] .tp-d-mt b{color:var(--d-mut)}
body.tp-app .tp-d-mod[data-st="now"]{border-color:var(--d-em);background:#F4FBF8}
body.tp-app .tp-d-tag{display:none}

/* ---------- Side ---------- */
body.tp-app .tp-d-zena{border-color:var(--d-em-line)!important}
body.tp-app .tp-d-zh{display:flex;align-items:center;gap:12px}
body.tp-app .tp-d-zh img{width:40px;height:40px;border-radius:12px}
body.tp-app .tp-d-zh small{display:block;font-size:13px;color:var(--d-mut);margin-top:2px}
body.tp-app .tp-d-zf{display:flex;flex-direction:column;gap:8px;margin:0}
body.tp-app .tp-d-zf input{height:46px;border:1.5px solid var(--d-line);border-radius:10px;padding:0 12px;font:500 15px var(--body);color:var(--d-ink);background:#fff}
body.tp-app .tp-d-zf input:focus{outline:none;border-color:var(--d-em);box-shadow:0 0 0 3px rgba(18,184,134,.18)}
body.tp-app .tp-d-week{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
body.tp-app .tp-d-week li{display:flex;flex-direction:column;align-items:center;gap:5px}
body.tp-app .tp-d-week span{width:100%;max-width:36px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#EEF2F0;color:#fff;font-weight:800;font-size:13px}
body.tp-app .tp-d-week li.today span{background:#fff;box-shadow:inset 0 0 0 2px var(--d-em)}
body.tp-app .tp-d-week li.on span{background:var(--d-em)}
body.tp-app .tp-d-week small{font-size:12px;font-weight:700;color:var(--d-mut)}
body.tp-app .tp-d-week li.today small{color:var(--d-em-ink)}
body.tp-app .tp-d-lk{display:inline-flex;vertical-align:-2px;margin-right:6px;color:var(--d-mut)}
body.tp-app .tp-d-lk svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
body.tp-app .tp-d-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
body.tp-app .tp-d-line{font-size:14px;font-weight:800;color:var(--d-em-ink);text-decoration:none}
body.tp-app .tp-d-line:hover{text-decoration:underline}

/* ---------- Tablet / phone ---------- */
@media (max-width:900px){
  body.tp-app .tp-d-new-grid{grid-template-columns:1fr}
}
@media (max-width:640px){
  body.tp-app .tp-appbar{padding:8px 12px 0!important}
  body.tp-app .tp-d-hero{padding:18px;gap:14px}
  body.tp-app .tp-d-hero-ring{width:60px;height:60px}
  body.tp-app .tp-d-hero-ring b{font-size:14px}
  body.tp-app .tp-d-go{width:100%;justify-content:center}
  body.tp-app .tp-d-card{padding:16px!important}
  body.tp-app .tp-d-mi{flex-direction:column;gap:14px}
  body.tp-app .tp-d-mi-pic{flex:none;max-width:none}
  body.tp-app .tp-d-mi-pic img{min-height:0;aspect-ratio:16/10}
  body.tp-app .tp-d-feat-b{padding:0 4px 4px}
  body.tp-app .tp-d-steps,body.tp-app .tp-d-path{grid-template-columns:1fr}
  body.tp-app .tp-d-trialpill{width:100%;justify-content:space-between}
  body.tp-app .tp-appbar-logo img{width:108px!important}
}
@media (prefers-reduced-motion:reduce){body.tp-app .tp-d-go,body.tp-app .tp-d-link svg{transition:none}body.tp-app .tp-d-live i{animation:none}}