/* Base visual do HDA: cores, tipo, botões, cartões e a tela de entrada.
   A plataforma interna não faz parte deste arquivo. */
:root {
  --bg:#09090c;
  --surface:#141419;
  --raised:#1c1c24;
  --line:#2c2c35;
  --muted:#aaaab8;
  --text:#f6f6fa;
  --pink:#f50965;
  --green:#62dbab;
  --blue:#78baff;
  --radius:16px;
  color-scheme:dark;
  font-family:Inter,Segoe UI,Arial,sans-serif
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-size:16px;
  line-height:1.5
}

button,input,select,textarea {
  font:inherit
}

button,a,input,select,textarea {
  outline-offset:5px
}

button {
  cursor:pointer
}

button:disabled {
  opacity:.5;
  cursor:not-allowed
}

button {
  color:inherit
}

a {
  color:var(--pink)
}

button:focus-visible,a:focus-visible {
  outline:2px solid var(--pink)
}

h1,h2,h3,p {
  margin:0
}

h1 {
  font-size:32px;
  line-height:1.2;
  letter-spacing:-1px
}

h2 {
  font-size:21px;
  line-height:1.3;
  letter-spacing:-.4px
}

h3 {
  font-size:17px;
  line-height:1.4
}

small,.small {
  font-size:13px
}

.muted {
  color:var(--muted)
}

.pink {
  color:#ff438c
}

.green {
  color:var(--green)
}

.blue {
  color:var(--blue)
}

.caps {
  font-size:12px;
  letter-spacing:1.7px;
  text-transform:uppercase;
  font-weight:700
}

.icon {
  width:21px;
  height:21px;
  flex-shrink:0;
  stroke:currentColor;
  stroke-width:1.7;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round
}

.btn {
  display:inline-flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  min-height:42px;
  border:1px solid var(--line);
  background:var(--raised);
  padding:10px 17px;
  border-radius:9px;
  font-size:14px;
  font-weight:600;
  text-decoration:none;
  transition:.18s
}

.btn:hover {
  background:#292933;
  border-color:#626272
}

.btn.primary {
  background:var(--pink);
  border-color:var(--pink);
  color:white
}

.btn.primary:hover {
  background:#d80958
}

.btn.outline {
  background:transparent;
  border-color:#6c2140;
  color:#ff438c
}

.btn.quiet {
  background:transparent;
  border:0;
  padding:6px 0;
  color:var(--muted)
}

.btn.small {
  min-height:34px;
  padding:6px 12px;
  font-size:13px
}

.icon-btn {
  width:40px;
  height:40px;
  padding:8px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:transparent;
  border:1px solid var(--line)
}

.actions,.row {
  display:flex;
  align-items:center;
  gap:12px
}

.row.between {
  justify-content:space-between
}

.wrap {
  flex-wrap:wrap
}

.stack {
  display:flex;
  flex-direction:column;
  gap:16px
}

.gap8 {
  gap:8px
}

.spacer {
  margin-top:24px
}

.mb {
  margin-bottom:20px
}

.avatar {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:50%;
  background:#30202e;
  color:#ff8ab8;
  font-size:14px;
  font-weight:700;
  flex-shrink:0;
  border:1px solid #70304c
}

.avatar.large {
  width:76px;
  height:76px;
  font-size:25px
}

.company-logo {
  border-radius:11px;
  background:#232c3a;
  color:#8fbfff;
  border-color:#394b61
}

.brand {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:24px;
  font-weight:800;
  letter-spacing:3px
}

.brandmark {
  display:grid;
  place-items:center;
  width:38px;
  height:42px;
  border-radius:11px;
  background:var(--pink);
  color:white;
  font-size:26px;
  font-weight:850;
  letter-spacing:-2px
}

.brand small {
  display:block;
  font-size:10px;
  letter-spacing:1.8px;
  color:var(--muted);
  font-weight:500
}

.badge {
  display:inline-flex;
  gap:5px;
  align-items:center;
  border-radius:6px;
  padding:4px 8px;
  font-size:12px;
  white-space:normal;
  background:#282830;
  color:#bfc0d0;
  border:1px solid #373742
}

.badge.pink {
  background:#341426;
  border-color:#5e1b39;
  color:#ff68a2
}

.badge.green {
  background:#142c24;
  border-color:#214c3b;
  color:var(--green)
}

.badge.blue {
  background:#182735;
  border-color:#2a4257;
  color:var(--blue)
}

.badge.yellow {
  background:#302819;
  border-color:#5b4828;
  color:#f1c17c
}

.taglist {
  display:flex;
  gap:6px;
  flex-wrap:wrap
}

.app {
  display:grid;
  grid-template-columns:224px minmax(0,1fr);
  min-height:100vh
}

.sidebar {
  position:fixed;
  width:224px;
  inset:0 auto 0 0;
  display:flex;
  flex-direction:column;
  background:#0d0d11;
  border-right:1px solid var(--line);
  padding:29px 18px 17px;
  z-index:20
}

.sidebar .brand {
  padding:0 10px;
  margin-bottom:30px
}

.nav-label {
  font-size:10px;
  color:#717180;
  font-weight:700;
  letter-spacing:1.6px;
  margin:12px 13px 9px
}

.nav-item {
  border:0;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  color:#a7a7b6;
  padding:11px 13px;
  border-radius:8px;
  background:transparent;
  font-size:14px;
  margin:2px 0
}

.nav-item:hover {
  background:#1a1a22;
  color:white
}

.nav-item.active {
  background:#341222;
  color:#ff438c
}

.nav-item .icon {
  width:18px;
  height:18px
}

.side-bottom {
  margin-top:auto;
  padding-top:20px
}

.side-progress {
  padding:14px;
  background:#19151e;
  border:1px solid #3b2536;
  border-radius:12px;
  margin-bottom:12px
}

.shell {
  grid-column:2;
  min-width:0
}

.topbar {
  height:82px;
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 32px;
  gap:20px;
  background:#0d0d12
}

.topbar-title {
  font-size:14px;
  font-weight:600
}

.breadcrumb {
  font-size:12px;
  color:#747485
}

.user-top {
  gap:10px
}

.top-search {
  display:flex;
  gap:9px;
  align-items:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 13px;
  width:260px;
  color:var(--muted);
  font-size:13px
}

.content {
  max-width:1560px;
  padding:30px 32px 50px;
  margin:auto
}

.page-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:24px
}

.page-heading p {
  color:var(--muted);
  font-size:14px;
  margin-top:8px
}

.eyebrow {
  font-size:11px;
  letter-spacing:1.8px;
  text-transform:uppercase;
  font-weight:700;
  color:#ff438c;
  margin-bottom:9px
}

.hero {
  position:relative;
  background:linear-gradient(110deg,#231020,#16101c 65%,#101016);
  border:1px solid #532035;
  border-radius:18px;
  min-height:184px;
  padding:26px 29px;
  overflow:hidden;
  margin-bottom:24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px
}

.hero h1 {
  max-width:570px;
  font-size:31px
}

.hero p {
  font-size:14px;
  color:#b5a9b6;
  max-width:540px;
  margin:10px 0 18px
}

.hero-mark {
  font-weight:900;
  font-size:110px;
  line-height:1;
  letter-spacing:-9px;
  color:#f50965;
  padding-right:35px;
  opacity:.9
}

.hero .badge {
  margin-bottom:10px
}

.stats {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:24px
}

.stat {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:13px;
  padding:19px
}

.stat-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--muted);
  font-size:13px
}

.stat-top .icon {
  color:#ff438c
}

.stat-value {
  font-size:30px;
  font-weight:750;
  letter-spacing:-1px;
  margin:8px 0 5px
}

.stat-foot {
  font-size:12px;
  color:var(--muted)
}

.grid2 {
  display:grid;
  grid-template-columns:1.55fr 1fr;
  gap:22px
}

.equal {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.grid3 {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px
}

.card {
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  padding:23px;
  min-width:0
}

.card-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:22px
}

.card-head .btn {
  font-size:13px
}

.progress {
  height:6px;
  border-radius:6px;
  background:#292930;
  overflow:hidden
}

.progress>span {
  display:block;
  height:100%;
  background:var(--pink);
  border-radius:6px
}

.course-row {
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px 0;
  border-bottom:1px solid #25252e
}

.course-row:last-child {
  border:0;
  padding-bottom:0
}

.course-mini {
  display:grid;
  place-items:center;
  width:51px;
  height:56px;
  border-radius:9px;
  background:#341b2b;
  color:#ff5596;
  flex-shrink:0
}

.course-mini .icon {
  width:27px;
  height:27px
}

.grow {
  flex:1;
  min-width:0
}

.course-row .progress {
  margin-top:9px
}

.activity {
  padding:13px 0;
  border-bottom:1px solid #25252e;
  display:flex;
  gap:11px;
  align-items:flex-start;
  font-size:14px
}

.activity .icon {
  color:#ff438c;
  width:17px;
  height:17px;
  margin-top:3px
}

.activity:last-child {
  border:0
}

.chart {
  width:100%;
  height:150px;
  display:block
}

.legend {
  display:flex;
  justify-content:space-between;
  color:#727281;
  font-size:11px;
  margin-top:7px
}

.ring {
  --value:70;
  --ring:#f50965;
  width:117px;
  height:117px;
  background:conic-gradient(var(--ring) calc(var(--value)*1%),#292930 0);
  border-radius:50%;
  display:grid;
  place-items:center;
  flex-shrink:0
}

.ring-inner {
  width:99px;
  height:99px;
  border-radius:50%;
  background:var(--surface);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center
}

.ring strong {
  font-size:28px;
  letter-spacing:-1px
}

.ring small {
  font-size:11px;
  color:var(--muted)
}

.score-break {
  display:flex;
  justify-content:space-between;
  font-size:13px;
  margin-top:12px;
  gap:12px
}

.list-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid #2b2b34
}

.list-row:last-child {
  border-bottom:0
}

.filters {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  background:var(--surface);
  padding:15px;
  border:1px solid var(--line);
  border-radius:12px;
  margin-bottom:22px
}

.input,input,select,textarea {
  background:#101016;
  border:1px solid #383843;
  border-radius:8px;
  color:var(--text);
  padding:10px 12px;
  min-height:43px;
  width:100%
}

input::placeholder,textarea::placeholder {
  color:#777786
}

textarea {
  min-height:100px;
  resize:vertical
}

select {
  cursor:pointer
}

label {
  display:block;
  color:#c6c6d1;
  font-size:14px;
  margin-bottom:7px
}

.field {
  margin-bottom:16px
}

.field small {
  color:var(--muted);
  display:block;
  margin-top:5px
}

.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 18px
}

.form-grid .full {
  grid-column:1/-1
}

.filters input {
  flex:1;
  min-width:200px;
  width:auto
}

.filters select {
  width:auto;
  min-width:140px
}

.course-cover {
  height:118px;
  margin:-23px -23px 20px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 18%,#141419),#15151c);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:25px;
  border-radius:16px 16px 0 0;
  color:var(--accent)
}

.course-cover .icon {
  height:48px;
  width:48px
}

.course-cover strong {
  font-size:46px;
  letter-spacing:-3px;
  opacity:.24
}

.course-card h3 {
  min-height:48px
}

.course-card p {
  color:var(--muted);
  font-size:14px;
  margin:10px 0 15px;
  min-height:44px
}

.course-card .progress {
  margin:13px 0 8px
}

.job-card {
  margin-bottom:15px
}

.job-card .job-title {
  font-size:18px;
  margin:13px 0 5px
}

.job-card .job-meta {
  font-size:13px;
  color:var(--muted);
  margin-bottom:16px
}

.match-num {
  color:#ff5f9d;
  font-size:19px;
  font-weight:750
}

.match-num small {
  font-size:11px;
  display:block;
  color:var(--muted);
  font-weight:400
}

.job-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}

.empty {
  text-align:center;
  padding:45px 20px;
  color:var(--muted)
}

.empty .icon {
  width:40px;
  height:40px;
  margin-bottom:12px;
  color:#ff438c
}

.empty h3 {
  color:white;
  margin-bottom:8px
}

.table-wrap {
  overflow:auto
}

table {
  width:100%;
  border-collapse:collapse;
  text-align:left;
  font-size:14px
}

th {
  font-size:11px;
  font-weight:600;
  color:#9292a5;
  text-transform:uppercase;
  letter-spacing:1px;
  padding:12px 13px;
  background:#101016;
  white-space:nowrap
}

td {
  padding:16px 13px;
  border-bottom:1px solid #292932;
  vertical-align:middle
}

.me-row {
  background:#28121f
}

.ranking-number {
  font-weight:800;
  color:#a7a7b5;
  font-size:17px
}

.ranking-number.top {
  color:#ffba63
}

.note {
  border-left:3px solid var(--pink);
  background:#251321;
  padding:13px 16px;
  border-radius:0 8px 8px 0;
  font-size:14px;
  color:#d3baca
}

.section-title {
  margin:24px 0 15px
}

.skills-check {
  display:flex;
  gap:9px;
  flex-wrap:wrap
}

.skills-check label {
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:8px;
  display:flex;
  gap:8px;
  align-items:center;
  margin:0;
  font-size:13px
}

.skills-check input {
  width:16px;
  height:16px;
  min-height:0;
  accent-color:var(--pink)
}

.checkline {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px
}

.checkline input {
  width:17px;
  min-height:17px;
  accent-color:var(--pink)
}

.checkline label {
  margin:0
}

.modal-backdrop {
  position:fixed;
  inset:0;
  z-index:60;
  background:#000b;
  backdrop-filter:blur(5px);
  padding:35px 20px;
  display:flex;
  justify-content:center;
  align-items:center
}

.modal {
  width:min(850px,100%);
  max-height:90vh;
  overflow:auto;
  background:#16161e;
  border:1px solid #3c3c49;
  border-radius:18px;
  padding:27px;
  box-shadow:0 20px 100px #000a
}

.modal.small-modal {
  max-width:550px
}

.modal-header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
  gap:20px
}

.modal h2 {
  font-size:24px
}

.modal .card {
  background:#101016
}

.modal-footer {
  display:flex;
  gap:12px;
  justify-content:flex-end;
  border-top:1px solid var(--line);
  margin-top:24px;
  padding-top:20px
}

.detail-list {
  margin:8px 0;
  padding:0;
  list-style:none;
  font-size:14px
}

.detail-list li {
  display:flex;
  gap:9px;
  margin:9px 0
}

.detail-list .icon {
  width:16px;
  height:16px;
  margin-top:3px;
  color:var(--green)
}

.detail-list.warning .icon {
  color:#f1c17c
}

.toast {
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:100;
  background:#22212b;
  border:1px solid #634155;
  box-shadow:0 8px 40px #0007;
  padding:14px 20px;
  border-radius:12px;
  max-width:440px;
  font-size:14px;
  animation:enter .2s
}

.toast.error {
  border-color:#df365d
}

.login {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  min-height:100vh
}

.login-visual {
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:55px 65px;
  background:radial-gradient(ellipse at 55% 45%,#54102c 0,#170c19 42%,#09090c 70%);
  border-right:1px solid var(--line)
}

.login-visual .brand {
  font-size:29px
}

.login-visual h1 {
  font-size:54px;
  letter-spacing:-2.3px;
  max-width:590px;
  line-height:1.08
}

.login-visual p {
  color:#bfb0be;
  max-width:420px;
  margin-top:22px;
  font-size:16px
}

.login-foot {
  display:flex;
  gap:28px;
  margin-top:24px
}

.login-foot strong {
  font-size:24px;
  display:block
}

.login-foot span {
  font-size:12px;
  color:#a38a9c
}

.login-form {
  display:flex;
  align-items:center;
  justify-content:center;
  padding:45px
}

.login-inner {
  width:100%;
  max-width:430px
}

.login-inner h2 {
  font-size:29px;
  margin:12px 0
}

.role-picker {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin:24px 0
}

.role-picker button {
  padding:12px 6px;
  background:#15151c;
  border:1px solid var(--line);
  border-radius:9px;
  font-size:13px
}

.role-picker button.active {
  border-color:var(--pink);
  background:#321020;
  color:#ff6ba3
}

.role-picker .icon {
  display:block;
  margin:0 auto 7px
}

.login-inner .btn {
  width:100%;
  margin-top:3px
}

.divider {
  display:flex;
  align-items:center;
  gap:15px;
  color:#777786;
  font-size:12px;
  margin:20px 0
}

.divider:before,.divider:after {
  content:'';
  height:1px;
  background:var(--line);
  flex:1
}

.error-text {
  color:#ff7c96;
  font-size:14px;
  margin-bottom:14px
}

.video {
  width:100%;
  border-radius:12px;
  display:block;
  background:#050507;
  max-height:400px
}

.lesson-list {
  display:flex;
  flex-direction:column;
  gap:8px
}

.lesson-item {
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  background:#17171f;
  border:1px solid #2e2e39;
  border-radius:10px;
  padding:12px;
  font-size:14px
}

.lesson-item.active {
  border-color:var(--pink);
  background:#301321
}

.lesson-item.done .icon {
  color:var(--green)
}

.lesson-number {
  width:25px;
  color:#9494a6;
  font-size:12px
}

.player-grid {
  display:grid;
  grid-template-columns:1.7fr 1fr;
  gap:23px
}

.lesson-content p {
  font-size:15px;
  color:#c1c1cf;
  margin:12px 0
}

.agent-layout {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:22px
}

.agent-item {
  border:1px solid var(--line);
  border-radius:11px;
  padding:15px;
  display:flex;
  align-items:center;
  gap:12px;
  background:#131319
}

.agent-item .agent-state {
  margin-left:auto;
  font-size:12px;
  color:var(--muted)
}

.agent-item.running {
  border-color:var(--pink);
  background:#2b1020
}

.agent-item.done {
  border-color:#24483a
}

.agent-item.done .agent-state {
  color:var(--green)
}

.agent-bubble {
  width:34px;
  height:34px;
  border-radius:8px;
  background:#292030;
  color:#ff6ca4;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:750
}

.audit-entry {
  padding:14px 0;
  border-bottom:1px solid var(--line);
  font-size:14px
}

.audit-entry summary {
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}

.audit-entry pre {
  overflow:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:12px;
  color:#bcbcca;
  background:#0c0c11;
  padding:12px;
  border-radius:9px;
  max-height:250px
}

.chat-layout {
  display:grid;
  grid-template-columns:270px 1fr;
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
  min-height:550px;
  background:var(--surface)
}

.chat-sidebar {
  border-right:1px solid var(--line);
  padding:17px
}

.chat-thread {
  display:flex;
  align-items:center;
  gap:10px;
  background:transparent;
  border:1px solid transparent;
  border-radius:10px;
  padding:14px 10px;
  width:100%;
  text-align:left;
  margin-bottom:7px
}

.chat-thread.active {
  background:#29121f;
  border-color:#61213e
}

.chat-main {
  display:flex;
  flex-direction:column;
  min-width:0
}

.chat-header {
  padding:17px 23px;
  border-bottom:1px solid var(--line)
}

.messages {
  padding:25px;
  flex:1;
  max-height:440px;
  overflow:auto;
  display:flex;
  flex-direction:column;
  gap:17px
}

.message {
  max-width:80%;
  padding:12px 16px;
  background:#25252f;
  border-radius:13px 13px 13px 2px;
  font-size:14px;
  overflow-wrap:anywhere
}

.message.mine {
  align-self:flex-end;
  background:#4c1330;
  border-radius:13px 13px 2px 13px
}

.message small {
  display:block;
  color:#bcb2c0;
  font-size:10px;
  margin-top:6px
}

.chat-compose {
  border-top:1px solid var(--line);
  padding:18px;
  display:flex;
  gap:12px
}

.quiz-question {
  padding:23px;
  border:1px solid var(--line);
  border-radius:12px;
  margin-bottom:15px;
  background:var(--surface)
}

.quiz-question h3 {
  margin-bottom:17px
}

.quiz-option {
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px;
  border:1px solid #2f2f3a;
  border-radius:8px;
  margin:7px 0;
  font-size:14px;
  cursor:pointer
}

.quiz-option:has(input:checked) {
  background:#301221;
  border-color:#b52359
}

.quiz-option input {
  width:17px;
  height:17px;
  min-height:0;
  accent-color:var(--pink)
}

.plan {
  position:relative
}

.plan.featured {
  border-color:var(--pink)
}

.plan-price {
  font-size:38px;
  letter-spacing:-1.5px;
  font-weight:800;
  margin:23px 0
}

.plan-price small {
  font-size:14px;
  font-weight:400;
  letter-spacing:0;
  color:var(--muted)
}

.certificate {
  background:linear-gradient(140deg,#23111d,#15141c);
  border:1px solid #69304a;
  padding:36px;
  text-align:center;
  border-radius:13px
}

.certificate h2 {
  font-size:27px;
  margin:20px 0 8px
}

.certificate-name {
  font-size:29px;
  font-weight:700;
  color:#ff62a0;
  margin:20px 0
}

.certificate p {
  font-size:14px;
  color:#cac1cc
}

.certificate .icon {
  width:50px;
  height:50px;
  color:#ff6b9f
}

.filter-panel {
  max-width:280px
}

.mobile-menu {
  display:none
}

.mobile-close {
  display:none
}

.notice-bar {
  font-size:12px;
  background:#19121b;
  color:#c095ae;
  padding:8px 16px;
  text-align:center;
  border-bottom:1px solid #332231
}

.decision-box {
  margin-top:15px;
  border-radius:10px;
  background:#141c24;
  border:1px solid #304251;
  padding:14px;
  font-size:14px
}

.loading-dot {
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--pink);
  animation:pulse 1s infinite
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}

@keyframes pulse {
  50% {
    opacity:.3
  }

}

@keyframes enter {
  from {
    transform:translateY(10px);
    opacity:0
  }

  to {
    transform:none;
    opacity:1
  }

}

@media(prefers-reduced-motion:reduce) {
  * {
    animation:none!important;
    transition:none!important
  }

}

@media(min-width:1550px) {
  .content {
    padding:38px 45px
  }

  .hero {
    min-height:207px
  }

  .hero h1 {
    font-size:36px
  }

}

@media(max-width:1100px) {
  .app {
    grid-template-columns:192px minmax(0,1fr)
  }

  .sidebar {
    width:192px;
    padding:24px 11px
  }

  .content {
    padding:24px 22px
  }

  .topbar {
    padding:0 22px
  }

  .top-search {
    display:none
  }

  .grid3 {
    grid-template-columns:1fr 1fr
  }

  .grid2 {
    grid-template-columns:1fr 1fr
  }

  .hero-mark {
    font-size:85px;
    padding-right:10px
  }

  .stats {
    gap:10px
  }

  .stat {
    padding:14px
  }

  .stat-top {
    font-size:12px
  }

  .stat-value {
    font-size:27px
  }

  .login-visual {
    padding:45px
  }

  .login-visual h1 {
    font-size:44px
  }

}

@media(max-width:800px) {
  .app {
    display:block
  }

  .sidebar {
    transform:translateX(-100%);
    width:235px;
    transition:.2s
  }

  .sidebar.open {
    transform:none;
    box-shadow:20px 0 100px #000a
  }

  .mobile-menu,.mobile-close {
    display:grid
  }

  .shell {
    width:100%
  }

  .topbar {
    height:72px;
    padding:0 18px
  }

  .content {
    padding:23px 18px
  }

  .user-top>div.grow {
    display:none
  }

  .grid2,.player-grid,.agent-layout {
    grid-template-columns:1fr
  }

  .stats {
    grid-template-columns:1fr 1fr
  }

  .hero-mark {
    display:none
  }

  .hero h1 {
    font-size:28px
  }

  .hero {
    padding:23px
  }

  .page-heading {
    align-items:flex-start
  }

  .page-heading h1 {
    font-size:27px
  }

  .job-grid {
    grid-template-columns:1fr
  }

  .login {
    grid-template-columns:1fr
  }

  .login-visual {
    padding:30px;
    min-height:290px;
    border-right:0;
    border-bottom:1px solid var(--line)
  }

  .login-visual h1 {
    font-size:36px;
    margin-top:35px
  }

  .login-visual p,.login-foot {
    display:none
  }

  .login-form {
    padding:30px
  }

  .chat-layout {
    grid-template-columns:1fr
  }

  .chat-sidebar {
    border-right:0;
    border-bottom:1px solid var(--line);
    display:flex;
    overflow:auto;
    padding:8px
  }

  .chat-thread {
    min-width:165px
  }

  .chat-thread small {
    display:none
  }

  .chat-compose .btn {
    padding:10px
  }

  .chat-compose .btn span {
    display:none
  }

  .filters select {
    flex:1
  }

  .topbar-title {
    font-size:13px
  }

  .modal-backdrop {
    padding:12px
  }

  .modal {
    padding:20px;
    max-height:94vh
  }

  .modal .grid2 {
    grid-template-columns:1fr
  }

  .form-grid {
    grid-template-columns:1fr
  }

  .form-grid .full {
    grid-column:auto
  }

  .toast {
    left:15px;
    right:15px;
    bottom:15px;
    max-width:none
  }

  .filter-panel {
    max-width:none
  }

  .hero .actions {
    flex-wrap:wrap
  }

}

@media(max-width:480px) {
  .grid3 {
    grid-template-columns:1fr
  }

  .page-heading {
    flex-wrap:wrap
  }

  .stat-top .icon {
    display:none
  }

  .role-picker button {
    font-size:12px
  }

  .card {
    padding:18px
  }

  .course-cover {
    margin:-18px -18px 17px
  }

  .topbar .badge {
    display:none
  }

  .message {
    max-width:95%
  }

  .actions {
    flex-wrap:wrap
  }

}

@media print {
  body {
    background:white;
    color:black
  }

  .sidebar,.topbar,.notice-bar,.modal-footer,.modal-header .icon-btn,.toast {
    display:none!important
  }

  .app {
    display:block
  }

  .modal-backdrop {
    position:static;
    background:white;
    padding:0
  }

  .modal {
    background:white;
    color:black;
    border:0;
    max-height:none;
    box-shadow:none
  }

  .content {
    display:none
  }

  .certificate {
    background:white;
    border:2px solid #e40965;
    color:black
  }

  .certificate p {
    color:#333
  }

}

.sidebar {
  overflow-y:auto
}

.talents-layout {
  grid-template-columns:270px minmax(0,1fr)
}

@media(max-width:800px) {
  .talents-layout {
    grid-template-columns:1fr
  }

}

.company-search {
  position:relative;
  margin-bottom:12px
}

.company-search>.icon {
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  color:var(--muted);
  pointer-events:none
}

.company-search input {
  padding-left:40px
}

.skills-check label[hidden] {
  display:none
}

/* Additions preserve the original dark theme and component geometry. */
.role-picker {
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.theme-control {
  white-space:nowrap
}

.login>.theme-control {
  position:fixed;
  right:18px;
  top:18px;
  z-index:25
}

.review-stars {
  color:#ffba63;
  font-size:22px;
  letter-spacing:2px
}

.stars-field {
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px;
  margin-bottom:18px
}

.stars-field label {
  display:flex;
  gap:10px;
  align-items:center;
  margin:8px 0;
  color:var(--text)
}

.stars-field input {
  width:18px;
  min-height:18px;
  accent-color:var(--pink)
}

.stars-field span {
  color:#ffba63
}

.stars-field small {
  color:var(--muted)
}

.modal .form-grid>.checkline {
  grid-column:1/-1
}

.modal-footer {
  flex-wrap:wrap
}

.theme-control:focus-visible {
  outline:2px solid var(--pink)
}

:root[data-theme="light"] {
  --bg:#f6f5f8;
  --surface:#fff;
  --raised:#f0edf3;
  --line:#d9d5df;
  --muted:#5c5868;
  --text:#211d2a;
  --pink:#ce0755;
  --green:#147a50;
  --blue:#225f9e;
  color-scheme:light
}

[data-theme="light"] .sidebar,[data-theme="light"] .topbar {
  background:#fff
}

[data-theme="light"] input,[data-theme="light"] textarea,[data-theme="light"] select,[data-theme="light"] th,[data-theme="light"] .modal .card {
  background:#faf9fc;
  border-color:#c7c1d0
}

[data-theme="light"] label,[data-theme="light"] .nav-item,[data-theme="light"] .lesson-content p {
  color:#454050
}

[data-theme="light"] .pink,[data-theme="light"] .eyebrow,[data-theme="light"] .match-num {
  color:#c00751
}

[data-theme="light"] .nav-item:hover,[data-theme="light"] .btn:hover {
  background:#e8e4ed;
  color:#211d2a
}

[data-theme="light"] .nav-item.active,[data-theme="light"] .role-picker button.active {
  background:#fbe6ef;
  color:#a50544
}

[data-theme="light"] .badge {
  background:#efedf3;
  color:#51485e;
  border-color:#d9d3df
}

[data-theme="light"] .badge.pink {
  background:#ffedf4;
  color:#aa0649;
  border-color:#efbed0
}

[data-theme="light"] .badge.green {
  background:#e8f7ef;
  color:#146d47;
  border-color:#acd6c1
}

[data-theme="light"] .badge.blue {
  background:#eaf2fc;
  color:#205d95;
  border-color:#b9d2ee
}

[data-theme="light"] .badge.yellow {
  background:#fff5df;
  color:#84581c;
  border-color:#e6c793
}

[data-theme="light"] .hero {
  background:linear-gradient(110deg,#fce6ef,#faf5fb);
  border-color:#e3b3c8
}

[data-theme="light"] .hero p,[data-theme="light"] .login-visual p,[data-theme="light"] .certificate p {
  color:#625366
}

[data-theme="light"] .login-visual {
  background:radial-gradient(ellipse at 55% 45%,#f6c7da,#faf1f7 60%,#fff)
}

[data-theme="light"] .login-foot span,[data-theme="light"] .nav-label,[data-theme="light"] .breadcrumb,[data-theme="light"] .legend {
  color:#685e72
}

[data-theme="light"] .role-picker button,[data-theme="light"] .lesson-item,[data-theme="light"] .agent-item {
  background:#f7f5fa;
  border-color:#d7d0df
}

[data-theme="light"] .side-progress,[data-theme="light"] .note,[data-theme="light"] .notice-bar {
  background:#f7eaf2;
  color:#675363;
  border-color:#dfc0d1
}

[data-theme="light"] .modal {
  background:#fff;
  border-color:#d2c9dc
}

[data-theme="light"] .progress {
  background:#e2dce8
}

[data-theme="light"] .ring {
  background:conic-gradient(var(--ring) calc(var(--value)*1%),#e2dce8 0)
}

[data-theme="light"] .course-cover {
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 12%,#fff),#faf8fc)
}

[data-theme="light"] .course-mini,[data-theme="light"] .agent-bubble {
  background:#f6e2ec;
  color:#a80b4b
}

[data-theme="light"] .course-row,[data-theme="light"] .activity,[data-theme="light"] .list-row,[data-theme="light"] td {
  border-color:#e4dfe9
}

[data-theme="light"] .empty h3 {
  color:var(--text)
}

[data-theme="light"] .me-row,[data-theme="light"] .chat-thread.active,[data-theme="light"] .lesson-item.active,[data-theme="light"] .quiz-option:has(input:checked) {
  background:#fce8f0
}

[data-theme="light"] .decision-box {
  background:#edf4fb;
  border-color:#c1d5e9
}

[data-theme="light"] .message {
  background:#eeebf4
}

[data-theme="light"] .message.mine {
  background:#f7d9e8
}

[data-theme="light"] .message small {
  color:#68566d
}

[data-theme="light"] .toast {
  background:#fff;
  border-color:#b994ad;
  color:#211d2a
}

[data-theme="light"] .audit-entry pre {
  background:#f4f1f7;
  color:#4e455a
}

[data-theme="light"] .certificate {
  background:linear-gradient(140deg,#fbe9f1,#faf7fc);
  border-color:#d6a9bd
}

[data-theme="light"] .certificate-name {
  color:#b80b50
}

[data-theme="light"] .ranking-number {
  color:#62596f
}

[data-theme="light"] .ranking-number.top,[data-theme="light"] .review-stars,[data-theme="light"] .stars-field span {
  color:#93621b
}

[data-theme="light"] .quiz-option {
  border-color:#d5cddb
}

[data-theme="light"] .btn.primary {
  color:#fff;
  background:var(--pink);
  border-color:var(--pink)
}

@media(max-width:800px) {
  .topbar .theme-control {
    font-size:12px;
    padding:8px;
    min-width:43px
  }

  .stars-field span {
    font-size:15px
  }

}

[data-theme="light"] .agent-item.running {
  background:#fce7f0;
  border-color:#da87a8
}

[data-theme="light"] .agent-item.done {
  background:#f2faf5;
  border-color:#a2cfb6
}

[data-theme="light"] .icon-btn:hover {
  background:#ece6f1;
  color:#211d2a
}

[data-theme="light"] .login-inner .error-text {
  color:#b3173a
}

[data-theme="light"] .lesson-number,[data-theme="light"] th {
  color:#64556e
}

.brand-fallback {
  font-size:15px;
  letter-spacing:-1px
}

.official-logo {
  display:block;
  width:65px;
  height:45px;
  object-fit:contain;
  flex-shrink:0
}

.modal .brand {
  margin-bottom:16px;
  font-size:18px
}

.course-lesson-editor {
  border-top:1px solid var(--line);
  padding-top:18px
}

details>summary {
  cursor:pointer;
  color:var(--muted)
}

[data-theme="light"] .modal .card,[data-theme="light"] .filter-panel,[data-theme="light"] th {
  background:#f8f6fa
}

[data-theme="light"] .lesson-content p {
  color:var(--muted)
}

[data-theme="light"] .role-picker button.active {
  background:#fce6ef;
  color:#a80748
}

/* Brand application only. The sidebar brand keeps its original total 96px allocation (66px + 30px). */
.brand {
  height:51px;
  min-height:51px;
  flex-shrink:0;
  color:var(--text)
}

.brand .hda-logo,.brand .official-logo {
  display:block;
  width:auto;
  height:100%;
  max-width:100%;
  object-fit:contain;
  flex-shrink:0;
  border:0;
  border-radius:0;
  background:transparent
}

.brand .hda-wordmark {
  fill:var(--text)
}

.sidebar .brand {
  height:96px;
  min-height:96px;
  margin-bottom:0;
  justify-content:center
}

.sidebar .brand .hda-logo,.sidebar .brand .official-logo {
  width:72%;
  max-width:120px;
  height:90px;
  object-fit:contain
}

.login-visual .brand {
  height:58.5px;
  min-height:58.5px
}

.modal .brand {
  height:42px;
  min-height:42px
}