html body .topbar-user-avatar,
html body .sidebar-account-avatar,
html body .account-preview-avatar,
html body[data-active-panel="interview"] .interview-training-avatar,
html body[data-active-panel="interview"] .interview-training-avatar-img {
border-radius: 999px !important;
}
/* Final interview avatar alignment: keep portrait centered inside circular frames. */
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-avatar,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interviewer-question-avatar,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-question-avatar,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interviewer-avatar,
html:not(.react-student-embedded) body[data-active-panel="interview"] .audio-thread-block.interviewer > img {
display: grid !important;
place-items: center !important;
overflow: hidden !important;
border-radius: 999px !important;
background-color: #e9e4ff !important;
background-size: 108% 108% !important;
background-position: center center !important;
background-repeat: no-repeat !important;
flex: 0 0 auto !important;
transform: none !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-avatar {
width: 72px !important;
height: 72px !important;
min-width: 72px !important;
min-height: 72px !important;
max-width: 72px !important;
max-height: 72px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-avatar-img,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interviewer-question-avatar img,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-question-avatar img,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interviewer-avatar img {
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
border-radius: 999px !important;
transform: none !important;
margin: 0 !important;
}
/* Sidebar delivery lock v306: stable nav, clean logo, no hover morphing. */
@media (min-width: 900px) {
html:not(.react-student-embedded) body .shell.sidebar-expanded,
html:not(.react-student-embedded) body .shell.sidebar-expanded:hover,
html:not(.react-student-embedded) body .shell.sidebar-expanded:focus-within,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover),
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within),
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:focus-within,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover),
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) {
grid-template-columns: 236px minmax(0, 1fr) !important;
transition: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-collapsed,
html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover,
html:not(.react-student-embedded) body .shell.sidebar-collapsed:focus-within,
html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover),
html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within),
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:focus-within,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover),
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:focus-within) {
grid-template-columns: 76px minmax(0, 1fr) !important;
transition: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded > .sidebar,
html:not(.react-student-embedded) body .shell.sidebar-expanded:hover > .sidebar,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) > .sidebar,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded > .sidebar,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover > .sidebar,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) > .sidebar {
width: 236px !important;
min-width: 236px !important;
max-width: 236px !important;
padding: 18px 18px 16px !important;
overflow: hidden !important;
transition: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar > .brand,
html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar > .brand,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar > .brand,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar > .brand,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand {
position: relative !important;
width: 200px !important;
min-width: 200px !important;
max-width: 200px !important;
height: 146px !important;
min-height: 146px !important;
max-height: 146px !important;
margin: 0 0 14px !important;
padding: 8px 0 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
transition: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-head.brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .brand-head.brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand-head.brand-head--main,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand-head.brand-head--main,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .brand-head.brand-head--main,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand-head.brand-head--main {
width: 200px !important;
min-width: 200px !important;
max-width: 200px !important;
height: 128px !important;
min-height: 128px !important;
max-height: 128px !important;
display: grid !important;
grid-template-rows: 72px auto !important;
align-items: center !important;
justify-items: center !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
transform: none !important;
transition: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-icon-logo,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand-icon-logo {
display: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar img.brand-logo.brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar img.brand-logo.brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar img.brand-logo.brand-main-logo,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar img.brand-logo.brand-main-logo,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar img.brand-logo.brand-main-logo,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar img.brand-logo.brand-main-logo {
width: 150px !important;
min-width: 150px !important;
max-width: 150px !important;
height: 62px !important;
min-height: 62px !important;
max-height: 62px !important;
object-fit: contain !important;
display: block !important;
opacity: 1 !important;
filter: none !important;
transform: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand-subtitle-text,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand-subtitle-text,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .brand-subtitle-text,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand-subtitle-text {
width: 184px !important;
min-width: 184px !important;
max-width: 184px !important;
margin: -2px auto 0 !important;
color: rgba(226, 232, 240, 0.88) !important;
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1.6 !important;
letter-spacing: 0 !important;
text-align: center !important;
white-space: normal !important;
overflow: visible !important;
text-wrap: balance !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-toggle,
html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-toggle,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-toggle,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-toggle,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-toggle,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-toggle {
top: 6px !important;
right: 0 !important;
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
color: rgba(226, 232, 240, 0.92) !important;
background: rgba(15, 23, 42, 0.28) !important;
border: 1px solid rgba(226, 232, 240, 0.14) !important;
border-radius: 12px !important;
box-shadow: none !important;
transform: none !important;
transition: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu,
html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .menu,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .menu,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu {
width: 200px !important;
gap: 6px !important;
overflow: visible !important;
transition: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-section,
html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-section,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-section,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-section,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-section,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-section {
width: 200px !important;
height: 28px !important;
margin: 10px 0 2px !important;
padding: 8px 0 4px !important;
color: rgba(148, 163, 184, 0.86) !important;
font-size: 12px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-align: left !important;
opacity: 1 !important;
transform: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link,
html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .menu-item,
html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-link,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .menu-item,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-link,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link {
position: relative !important;
width: 200px !important;
min-width: 200px !important;
max-width: 200px !important;
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
display: grid !important;
grid-template-columns: 22px minmax(0, 1fr) !important;
align-items: center !important;
gap: 12px !important;
padding: 0 14px !important;
color: rgba(226, 232, 240, 0.82) !important;
background: transparent !important;
border: 0 !important;
border-radius: 12px !important;
box-shadow: none !important;
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
text-align: left !important;
white-space: nowrap !important;
overflow: hidden !important;
transform: none !important;
transition: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .menu-item::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-link::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link::before,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item::before,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link::before,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .menu-item::before,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-link::before,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item::before,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link::before {
content: "" !important;
position: static !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
display: block !important;
background: currentColor !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
opacity: 0.82 !important;
transform: none !important;
-webkit-mask: var(--hw-sidebar-icon) center / 18px 18px no-repeat !important;
mask: var(--hw-sidebar-icon) center / 18px 18px no-repeat !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item:hover,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link:hover,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item:hover,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link:hover {
color: #fff !important;
background: rgba(255, 255, 255, 0.08) !important;
transform: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item.active,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item.is-active,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link.active,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link.is-active,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item.active,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item.is-active,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link.active,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link.is-active {
color: #fff !important;
background: linear-gradient(90deg, #3f8cff 0%, #7c4dff 58%, #a93cff 100%) !important;
border-radius: 12px !important;
box-shadow: 0 12px 28px rgba(124, 77, 255, 0.28) !important;
transform: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item.active::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item.is-active::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link.active::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link.is-active::before {
opacity: 1 !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-zone,
html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-zone,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-zone,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-zone,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-zone,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-zone {
width: 200px !important;
gap: 8px !important;
overflow: visible !important;
transform: none !important;
transition: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-button,
html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-account-button,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-button,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-button,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-account-button,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-button {
width: 200px !important;
min-width: 200px !important;
max-width: 200px !important;
height: 74px !important;
min-height: 74px !important;
max-height: 74px !important;
display: grid !important;
grid-template-columns: 52px minmax(0, 1fr) 14px !important;
align-items: center !important;
gap: 12px !important;
padding: 10px 12px !important;
background: rgba(255, 255, 255, 0.045) !important;
border: 1px solid rgba(148, 163, 184, 0.18) !important;
border-radius: 16px !important;
box-shadow: none !important;
overflow: hidden !important;
transform: none !important;
transition: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-avatar {
width: 52px !important;
height: 52px !important;
min-width: 52px !important;
min-height: 52px !important;
max-width: 52px !important;
max-height: 52px !important;
inline-size: 52px !important;
block-size: 52px !important;
aspect-ratio: 1 / 1 !important;
flex: 0 0 52px !important;
border: 0 !important;
outline: 0 !important;
border-radius: 999px !important;
background-color: #ddd8ff !important;
background-size: cover !important;
background-position: center center !important;
background-repeat: no-repeat !important;
box-shadow: none !important;
overflow: hidden !important;
transform: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-copy,
html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-account-copy,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-copy,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-copy,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-account-copy,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-copy {
display: block !important;
min-width: 0 !important;
overflow: hidden !important;
color: #fff !important;
font-size: 14px !important;
font-weight: 900 !important;
line-height: 1.2 !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
}
/* Sidebar terminal override v307: this must stay at EOF. */
@media (min-width: 900px) {
html:not(.react-student-embedded) body .shell.sidebar-expanded,
html:not(.react-student-embedded) body .shell.sidebar-expanded:hover,
html:not(.react-student-embedded) body .shell.sidebar-expanded:focus-within,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover),
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within),
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:focus-within,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover),
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) {
grid-template-columns: 236px minmax(0, 1fr) !important;
transition: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded > .sidebar,
html:not(.react-student-embedded) body .shell.sidebar-expanded:hover > .sidebar,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) > .sidebar,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded > .sidebar,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover > .sidebar,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) > .sidebar {
width: 236px !important;
min-width: 236px !important;
max-width: 236px !important;
transition: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item.active,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item.is-active,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link.active,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link.is-active,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item.active,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item.is-active,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link.active,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link.is-active {
color: #fff !important;
background: linear-gradient(90deg, #3f8cff 0%, #7c4dff 58%, #a93cff 100%) !important;
border-radius: 12px !important;
box-shadow: 0 12px 28px rgba(124, 77, 255, 0.28) !important;
transform: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link::before,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item::before,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link::before {
content: "" !important;
position: static !important;
display: block !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
background: currentColor !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
opacity: 0.86 !important;
transform: none !important;
-webkit-mask: var(--hw-sidebar-icon) center / 18px 18px no-repeat !important;
mask: var(--hw-sidebar-icon) center / 18px 18px no-repeat !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body .shell.sidebar-expanded:hover .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-avatar {
width: 52px !important;
height: 52px !important;
min-width: 52px !important;
min-height: 52px !important;
max-width: 52px !important;
max-height: 52px !important;
inline-size: 52px !important;
block-size: 52px !important;
aspect-ratio: 1 / 1 !important;
background-size: cover !important;
background-position: center center !important;
border: 0 !important;
box-shadow: none !important;
transform: none !important;
}
}
/* Delivery polish v305: contextual training entries sync route state; Live2D runtime gets Pixi compatibility. */
@media (min-width: 900px) {
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-statusbar,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-statusbar {
left: 0 !important;
right: 0 !important;
width: 100% !important;
min-width: 0 !important;
grid-template-columns: minmax(304px, 0.98fr) minmax(402px, 1.32fr) minmax(268px, 0.82fr) !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-metrics small,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-metrics small {
min-height: 14px !important;
font-size: 11px !important;
line-height: 1.25 !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-action-bar,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-action-bar {
height: auto !important;
min-height: 120px !important;
max-height: none !important;
overflow: visible !important;
}
}
html body .topbar-user-avatar::after,
html body .sidebar-account-avatar::after,
html body .account-preview-avatar::after,
html body[data-active-panel="interview"] .interview-training-avatar::after {
content: "" !important;
display: none !important;
}
html body .sidebar-account-avatar {
width: 42px !important;
height: 42px !important;
border: 2px solid rgba(255, 255, 255, 0.72) !important;
box-shadow: 0 10px 22px rgba(91, 140, 255, 0.2) !important;
}
html body .topbar-user-avatar,
html body[data-active-panel="interview"] .interview-training-avatar {
width: 46px !important;
height: 46px !important;
border: 2px solid rgba(91, 140, 255, 0.2) !important;
box-shadow: 0 10px 24px rgba(91, 140, 255, 0.16) !important;
}
html body .account-modal-preview {
grid-template-columns: 76px minmax(0, 1fr) !important;
gap: 16px !important;
}
html body .account-preview-avatar {
width: 76px !important;
height: 76px !important;
border: 3px solid rgba(255, 255, 255, 0.82) !important;
box-shadow:
0 14px 32px rgba(91, 140, 255, 0.18),
0 0 0 1px rgba(124, 77, 255, 0.14) !important;
}
html body .account-avatar-upload-field {
display: grid !important;
gap: 8px !important;
min-width: 0 !important;
}
html body .account-avatar-upload-field > span {
color: #0f172a !important;
font-size: 13px !important;
font-weight: 900 !important;
}
html body .account-avatar-upload-actions {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
}
html body .account-avatar-upload-actions .ghost-btn {
min-height: 42px !important;
padding: 0 12px !important;
border-radius: 12px !important;
white-space: nowrap !important;
}
html body .account-avatar-upload-actions .ghost-btn[hidden] {
display: none !important;
}
/* Avatar readability v220: larger generated portraits without changing navigation structure. */
html body .sidebar-account-button {
grid-template-columns: 66px minmax(0, 1fr) auto !important;
min-height: 88px !important;
gap: 14px !important;
padding: 14px 16px !important;
}
html body .sidebar-account-avatar {
width: 58px !important;
height: 58px !important;
border-radius: 999px !important;
border: 3px solid rgba(255, 255, 255, 0.78) !important;
box-shadow:
0 14px 30px rgba(15, 23, 42, 0.28),
0 0 0 2px rgba(91, 140, 255, 0.26) !important;
}
html body .topbar-user-avatar {
width: 44px !important;
height: 44px !important;
border-radius: 999px !important;
border: 2px solid rgba(255, 255, 255, 0.78) !important;
box-shadow: 0 12px 28px rgba(91, 140, 255, 0.2) !important;
}
html body[data-active-panel="interview"] .interview-training-statusbar {
min-height: 92px !important;
height: 92px !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
html body[data-active-panel="interview"] .interview-training-title {
grid-template-columns: 76px minmax(0, 1fr) auto !important;
gap: 16px !important;
}
html body[data-active-panel="interview"] .interview-training-avatar {
width: 72px !important;
height: 72px !important;
border-radius: 999px !important;
border: 4px solid rgba(255, 255, 255, 0.84) !important;
box-shadow:
0 16px 34px rgba(91, 140, 255, 0.24),
0 0 0 3px rgba(91, 140, 255, 0.24) !important;
}
html body[data-active-panel="interview"] .interview-training-avatar-img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
}
html body[data-active-panel="interview"] .interview-question-card-head {
min-height: 68px !important;
}
html body[data-active-panel="interview"] .interview-question-card-head span {
gap: 14px !important;
}
html body[data-active-panel="interview"] .interview-question-card-head span::before {
width: 64px !important;
height: 64px !important;
margin-right: 0 !important;
flex: 0 0 64px !important;
border: 3px solid rgba(255, 255, 255, 0.86) !important;
box-shadow:
0 14px 30px rgba(91, 140, 255, 0.2),
0 0 0 2px rgba(124, 77, 255, 0.16) !important;
}
/* Direct avatar upload v222: Feishu-style, click the avatar itself to replace the photo. */
html body .account-avatar-upload-field {
display: none !important;
}
html body .account-avatar-direct-trigger,
html body[data-active-panel="interview"] .interview-training-avatar.account-avatar-direct-trigger {
position: relative !important;
overflow: hidden !important;
cursor: pointer !important;
user-select: none !important;
}
html body .account-avatar-direct-trigger::before,
html body[data-active-panel="interview"] .interview-training-avatar.account-avatar-direct-trigger::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
z-index: 6 !important;
display: block !important;
background: rgba(15, 23, 42, 0.34) !important;
opacity: 0 !important;
transition: opacity 0.16s ease !important;
pointer-events: none !important;
}
html body .account-avatar-direct-trigger::after,
html body[data-active-panel="interview"] .interview-training-avatar.account-avatar-direct-trigger::after {
content: "" !important;
position: absolute !important;
left: 50% !important;
top: 50% !important;
z-index: 7 !important;
display: block !important;
width: 24px !important;
height: 24px !important;
border-radius: 9px !important;
background:
rgba(255, 255, 255, 0.94)
url("data:image/svg+xml,%3Csvg%20width%3D%2720%27%20height%3D%2720%27%20viewBox%3D%270%200%2020%2020%27%20fill%3D%27none%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M4.2%206.6H7l1.2-1.7h3.6L13%206.6h2.8c.8%200%201.4.6%201.4%201.4v5.8c0%20.8-.6%201.4-1.4%201.4H4.2c-.8%200-1.4-.6-1.4-1.4V8c0-.8.6-1.4%201.4-1.4Z%27%20stroke%3D%27%230F172A%27%20stroke-width%3D%271.5%27%20stroke-linejoin%3D%27round%27/%3E%3Ccircle%20cx%3D%2710%27%20cy%3D%2710.8%27%20r%3D%272.4%27%20stroke%3D%27%230F172A%27%20stroke-width%3D%271.5%27/%3E%3C/svg%3E")
center / 16px 16px no-repeat !important;
box-shadow:
0 8px 18px rgba(15, 23, 42, 0.18),
0 0 0 1px rgba(255, 255, 255, 0.72) !important;
opacity: 0 !important;
transform: translate(-50%, -50%) scale(0.9) !important;
transition: opacity 0.16s ease, transform 0.16s ease !important;
pointer-events: none !important;
}
html body .account-avatar-direct-trigger:hover::before,
html body .account-avatar-direct-trigger:focus-visible::before,
html body[data-active-panel="interview"] .interview-training-avatar.account-avatar-direct-trigger:hover::before {
opacity: 1 !important;
}
html body .account-avatar-direct-trigger:hover::after,
html body .account-avatar-direct-trigger:focus-visible::after,
html body[data-active-panel="interview"] .interview-training-avatar.account-avatar-direct-trigger:hover::after {
opacity: 1 !important;
transform: translate(-50%, -50%) scale(1) !important;
}
html body .account-preview-avatar.account-avatar-direct-trigger::after {
width: 30px !important;
height: 30px !important;
border-radius: 11px !important;
background-size: 18px 18px !important;
}
html body .account-preview-avatar.account-avatar-direct-trigger:focus-visible {
outline: 3px solid rgba(124, 77, 255, 0.28) !important;
outline-offset: 4px !important;
}
/* Xiaowen single-entry lock: keep only the bottom-right dock, never render the old proactive avatar layer. */
html body #companionAmbientStage,
html body #companionAmbientStage.companion-ambient-stage,
html body #companionAmbientStage.companion-ambient-stage.companion-ambient-moment {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Avatar circle fill v232: crop generated portraits into the whole circle, no white outer ring. */
html body .topbar-user-avatar,
html body .sidebar-account-avatar,
html body .account-preview-avatar,
html body[data-active-panel="interview"] .interview-training-avatar {
border-radius: 999px !important;
overflow: hidden !important;
background-color: #ebe7ff !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: 124% 124% !important;
border-color: rgba(124, 77, 255, 0.34) !important;
box-shadow:
0 10px 24px rgba(91, 140, 255, 0.18),
0 0 0 1px rgba(124, 77, 255, 0.16) !important;
}
html body .sidebar-account-avatar {
border-radius: 999px !important;
border-width: 1px !important;
background-size: 128% 128% !important;
}
html body[data-active-panel="interview"] .interview-training-avatar {
border-width: 1px !important;
background-size: 126% 126% !important;
}
html body[data-active-panel="interview"] .interview-training-avatar-img {
position: absolute !important;
inset: -8% !important;
z-index: 1 !important;
width: 116% !important;
height: 116% !important;
max-width: none !important;
max-height: none !important;
display: block !important;
border-radius: 999px !important;
object-fit: cover !important;
object-position: center center !important;
}
html body[data-active-panel="interview"] .interview-question-card-head span::before {
border: 1px solid rgba(124, 77, 255, 0.24) !important;
background:
url("./assets/interviewer-avatar.png?v=20260617-copy-polish-v314") center 30% / 116% 116% no-repeat,
linear-gradient(135deg, rgba(124, 77, 255, 0.14), rgba(91, 140, 255, 0.08)) !important;
box-shadow:
0 10px 22px rgba(91, 140, 255, 0.14),
0 0 0 1px rgba(124, 77, 255, 0.12) !important;
}
/* Sidebar account avatar readability v233: make the bottom profile entry a real user anchor. */
html body .sidebar-account-card {
padding-top: 12px !important;
}
html body .sidebar-account-button {
grid-template-columns: 66px minmax(0, 1fr) !important;
min-height: 82px !important;
height: 82px !important;
gap: 10px !important;
padding: 10px 12px !important;
align-items: center !important;
border-radius: 16px !important;
}
html body[data-active-panel="landing"] .shell .sidebar .sidebar-account-button,
html body[data-active-panel="interview"] .shell .sidebar .sidebar-account-button,
html body[data-active-panel="audio"] .shell .sidebar .sidebar-account-button,
html body[data-active-panel="debug-lab"] .shell .sidebar .sidebar-account-button {
grid-template-columns: 66px minmax(0, 1fr) !important;
min-height: 82px !important;
height: 82px !important;
gap: 10px !important;
padding: 10px 12px !important;
}
html body .sidebar-account-avatar {
width: 62px !important;
height: 62px !important;
border-radius: 999px !important;
border: 0 !important;
background-size: 134% 134% !important;
background-position: center center !important;
box-shadow:
0 14px 30px rgba(15, 23, 42, 0.3),
0 0 0 3px rgba(91, 140, 255, 0.72),
0 0 0 5px rgba(255, 255, 255, 0.16) !important;
}
html body .sidebar-account-copy strong {
font-size: 15px !important;
line-height: 1.12 !important;
max-width: 64px !important;
}
html body .sidebar-account-button i {
display: none !important;
}
/* Voice-reactive waveform v234: driven by microphone analyser while the user is speaking. */
html body[data-active-panel="interview"] .interview-waveform[data-audio-reactive] i,
html body[data-active-panel="interview"] .interview-waveform[data-audio-reactive] i:nth-child(n),
html body[data-active-panel="interview"] .interview-bottom-waveform[data-audio-reactive] i,
html body[data-active-panel="interview"] .interview-bottom-waveform[data-audio-reactive] i:nth-child(n) {
height: var(--voice-wave-height, 16px) !important;
min-height: 0 !important;
max-height: none !important;
transform-origin: center center !important;
transition:
height 80ms linear,
opacity 80ms linear,
transform 80ms linear !important;
}
html body[data-active-panel="interview"] .interview-waveform[data-audio-reactive="live"] i,
html body[data-active-panel="interview"] .interview-bottom-waveform[data-audio-reactive="live"] i {
animation: none !important;
will-change: height, opacity, transform !important;
}
html body[data-active-panel="interview"] .interview-waveform[data-audio-reactive="idle"] i,
html body[data-active-panel="interview"] .interview-waveform[data-audio-reactive="recorded"] i,
html body[data-active-panel="interview"] .interview-waveform[data-audio-reactive="processing"] i,
html body[data-active-panel="interview"] .interview-bottom-waveform[data-audio-reactive="idle"] i,
html body[data-active-panel="interview"] .interview-bottom-waveform[data-audio-reactive="recorded"] i,
html body[data-active-panel="interview"] .interview-bottom-waveform[data-audio-reactive="processing"] i {
animation: none !important;
}
html body[data-active-panel="interview"] .interview-waveform[data-audio-reactive="processing"] i,
html body[data-active-panel="interview"] .interview-bottom-waveform[data-audio-reactive="processing"] i {
opacity: 0.5 !important;
}
/* Audio review cabin v235: the AI review coach owns this page, so Xiaowen must not cover the panel or action bar. */
html body[data-active-panel="audio"] #companionDock,
html body[data-active-panel="audio"] #companionDock.companion-dock,
html body[data-active-panel="audio"] #companionDock.companion-dock.companion-collapsed,
html body[data-active-panel="audio"] #companionDock.companion-dock.companion-expanded,
html body[data-active-panel="audio"] #companionMini,
html body[data-active-panel="audio"] #companionMiniAvatar,
html body[data-active-panel="audio"] #companionMiniAvatarStage,
html body[data-active-panel="audio"] #companionMiniCharacter,
html body[data-active-panel="audio"] #companionMiniBubble,
html body[data-active-panel="audio"] #companionAmbientStage,
html body[data-active-panel="audio"] #companionAmbientModel,
html body[data-active-panel="audio"] #companionAmbientCharacter,
html body[data-active-panel="audio"] #companionAmbientStage.companion-ambient-stage,
html body[data-active-panel="audio"] #companionAmbientStage.companion-ambient-stage.companion-ambient-moment,
html body[data-active-panel="audio"] .companion-dock,
html body[data-active-panel="audio"] .companion-mini,
html body[data-active-panel="audio"] .companion-avatar-stage,
html body[data-active-panel="audio"] .companion-mini-bubble,
html body[data-active-panel="audio"] .companion-ambient-stage,
html body[data-active-panel="audio"] .character-xiaowen,
html body[data-active-panel="audio"] .character-empty-state.character-xiaowen,
html body[data-active-panel="audio"] .companion-message.character-xiaowen,
html body[data-active-panel="audio"] img[src*="xiaowen"],
html body[data-active-panel="interview"] #companionDock,
html body[data-active-panel="interview"] #companionDock.companion-dock,
html body[data-active-panel="interview"] #companionMini,
html body[data-active-panel="interview"] #companionMiniAvatarStage,
html body[data-active-panel="interview"] #companionMiniCharacter,
html body[data-active-panel="interview"] #companionAmbientStage {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Audio review cabin v245: if the cabin is visible, the page belongs to AI review coach only. */
html body:has(.panel[data-panel="audio"].active) #companionDock,
html body:has(.panel[data-panel="audio"].active) #companionMini,
html body:has(.panel[data-panel="audio"].active) #companionMiniAvatar,
html body:has(.panel[data-panel="audio"].active) #companionMiniAvatarStage,
html body:has(.panel[data-panel="audio"].active) #companionMiniCharacter,
html body:has(.panel[data-panel="audio"].active) #companionMiniBubble,
html body:has(.panel[data-panel="audio"].active) #companionAmbientStage,
html body:has(.panel[data-panel="audio"].active) #companionAmbientModel,
html body:has(.panel[data-panel="audio"].active) #companionAmbientCharacter,
html body:has(.panel[data-panel="audio"].active) .companion-dock,
html body:has(.panel[data-panel="audio"].active) .companion-mini,
html body:has(.panel[data-panel="audio"].active) .companion-avatar-stage,
html body:has(.panel[data-panel="audio"].active) .companion-mini-bubble,
html body:has(.panel[data-panel="audio"].active) .companion-ambient-stage,
html body:has(.panel[data-panel="audio"].active) .character-xiaowen,
html body:has(.panel[data-panel="audio"].active) .character-empty-state.character-xiaowen,
html body:has(.panel[data-panel="audio"].active) .companion-message.character-xiaowen,
html body:has(.panel[data-panel="audio"].active) img[src*="xiaowen"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
html body[data-active-panel="audio"] .audio-coach-panel {
grid-template-rows: auto auto auto auto !important;
align-content: start !important;
gap: 10px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding-bottom: 18px !important;
scrollbar-gutter: stable !important;
}
html body[data-active-panel="audio"] .audio-report-digest,
html body[data-active-panel="audio"] .audio-dimension-list,
html body[data-active-panel="audio"] .audio-coach-card,
html body[data-active-panel="audio"] .audio-coach-card ul {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
html body[data-active-panel="audio"] .audio-coach-score {
min-height: 104px !important;
padding: 10px 12px !important;
}
html body[data-active-panel="audio"] .audio-dimension-list {
gap: 7px !important;
padding: 0 4px 4px !important;
}
html body[data-active-panel="audio"] .audio-coach-card {
min-height: auto !important;
padding: 11px 12px !important;
}
html body[data-active-panel="audio"] .audio-coach-card li {
white-space: normal !important;
text-overflow: clip !important;
overflow: visible !important;
}
/* Account avatar no-white-ring v236: remove every white rim and crop default portraits to the circle. */
html body .sidebar-account-avatar,
html body .topbar-user-avatar,
html body .account-preview-avatar,
html body[data-active-panel="interview"] .interview-training-avatar {
border: 0 !important;
outline: 0 !important;
border-radius: 999px !important;
overflow: hidden !important;
background-color: #dcd7ff !important;
background-position: center center !important;
background-repeat: no-repeat !important;
background-size: 158% 158% !important;
box-shadow: 0 12px 26px rgba(15, 23, 42, 0.22) !important;
}
html body .sidebar-account-avatar {
width: 62px !important;
height: 62px !important;
min-width: 62px !important;
min-height: 62px !important;
box-shadow: 0 14px 30px rgba(15, 23, 42, 0.28) !important;
}
html body .sidebar-account-avatar::before,
html body .sidebar-account-avatar::after,
html body .topbar-user-avatar::before,
html body .topbar-user-avatar::after,
html body .account-preview-avatar::before,
html body .account-preview-avatar::after,
html body[data-active-panel="interview"] .interview-training-avatar::before,
html body[data-active-panel="interview"] .interview-training-avatar::after {
content: none !important;
display: none !important;
box-shadow: none !important;
background: transparent !important;
border: 0 !important;
}
html body[data-active-panel="interview"] .interview-training-avatar-img {
inset: -16% !important;
width: 132% !important;
height: 132% !important;
border: 0 !important;
outline: 0 !important;
box-shadow: none !important;
object-fit: cover !important;
object-position: center center !important;
}
/* Interviewer avatar headroom v237: keep the portrait round, but stop the hair from touching the circle. */
html body[data-active-panel="interview"] .interview-question-card-head span::before {
background:
url("./assets/interviewer-avatar.png?v=20260617-copy-polish-v314") center 30% / 116% 116% no-repeat,
linear-gradient(135deg, rgba(124, 77, 255, 0.14), rgba(91, 140, 255, 0.08)) !important;
}
/* Interview coach unclipped v238: the right rail is fixed, but its content must scroll instead of clipping. */
html body[data-active-panel="interview"] #companionDock,
html body[data-active-panel="interview"] #companionAmbientStage,
html body[data-active-panel="interview"] #companionMiniBubble {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
html body[data-active-panel="interview"] .interview-copilot-card {
height: calc(100vh - 184px) !important;
max-height: calc(100vh - 184px) !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
padding: 16px !important;
}
html body[data-active-panel="interview"] .interview-copilot-card .section-head {
flex: 0 0 auto !important;
margin-bottom: 10px !important;
}
html body[data-active-panel="interview"] .interview-ai-coach-panel {
flex: 1 1 auto !important;
min-height: 0 !important;
height: auto !important;
max-height: none !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding: 0 4px 2px 0 !important;
overscroll-behavior: contain !important;
}
html body[data-active-panel="interview"] .coach-live-score-card,
html body[data-active-panel="interview"] .coach-structure-card,
html body[data-active-panel="interview"] .coach-followup-card {
flex: 0 0 auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
padding: 12px !important;
gap: 9px !important;
}
html body[data-active-panel="interview"] .coach-live-score-card > p,
html body[data-active-panel="interview"] .coach-followup-card > p {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
display: block !important;
overflow: visible !important;
white-space: normal !important;
word-break: keep-all !important;
overflow-wrap: anywhere !important;
font-size: 11px !important;
line-height: 1.5 !important;
}
html body[data-active-panel="interview"] .coach-completeness-main {
display: grid !important;
grid-template-columns: minmax(76px, auto) minmax(92px, 1fr) !important;
align-items: center !important;
gap: 10px !important;
}
html body[data-active-panel="interview"] .coach-completeness-main strong {
font-size: 34px !important;
line-height: 1 !important;
}
html body[data-active-panel="interview"] .coach-completeness-track {
width: 100% !important;
min-width: 0 !important;
}
html body[data-active-panel="interview"] .coach-structure-list,
html body[data-active-panel="interview"] .coach-followup-list {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
display: grid !important;
gap: 6px !important;
overflow: visible !important;
}
html body[data-active-panel="interview"] .coach-structure-item {
min-height: 32px !important;
height: auto !important;
padding: 5px 10px !important;
}
html body[data-active-panel="interview"] .coach-structure-item b {
min-width: 24px !important;
min-height: 24px !important;
}
html body[data-active-panel="interview"] .coach-followup-list button {
height: auto !important;
min-height: 36px !important;
max-height: none !important;
display: block !important;
overflow: visible !important;
padding: 8px 10px !important;
white-space: normal !important;
word-break: keep-all !important;
overflow-wrap: anywhere !important;
line-height: 1.38 !important;
}
html body[data-active-panel="interview"] .coach-followup-list button.is-collapsed {
display: none !important;
}
html body[data-active-panel="interview"] .coach-followup-card.is-expanded .coach-followup-list button {
display: block !important;
}
html body[data-active-panel="interview"] .coach-followup-toggle {
flex: 0 0 auto !important;
min-height: 36px !important;
margin-top: 2px !important;
}
/* Interview coach rail final v239: override the older high-specificity compact grid rules. */
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card.section-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card {
height: calc(100vh - 184px) !important;
max-height: calc(100vh - 184px) !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
grid-template-rows: none !important;
gap: 6px !important;
overflow: hidden !important;
padding: 8px !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .interview-ai-coach-panel,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-ai-coach-panel {
flex: 1 1 auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
display: flex !important;
flex-direction: column !important;
grid-template-columns: none !important;
grid-template-rows: none !important;
gap: 10px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding: 0 4px 4px 0 !important;
overscroll-behavior: contain !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-live-score-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-structure-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
flex: 0 0 auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
display: grid !important;
contain: none !important;
overflow: visible !important;
padding: 12px !important;
gap: 9px !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-live-score-card > p,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-card > p,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card > p,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card > p {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
display: block !important;
overflow: visible !important;
text-overflow: clip !important;
white-space: normal !important;
-webkit-line-clamp: unset !important;
-webkit-box-orient: initial !important;
word-break: keep-all !important;
overflow-wrap: anywhere !important;
font-size: 11px !important;
line-height: 1.5 !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-card:not(.is-expanded) .coach-followup-list,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card:not(.is-expanded) .coach-followup-list,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-list,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list {
height: auto !important;
min-height: 0 !important;
max-height: none !important;
display: grid !important;
grid-auto-rows: auto !important;
align-content: start !important;
gap: 6px !important;
overflow: visible !important;
padding-right: 0 !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-list button,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list button {
height: auto !important;
min-height: 36px !important;
max-height: none !important;
display: block !important;
overflow: visible !important;
text-overflow: clip !important;
white-space: normal !important;
padding: 8px 10px !important;
font-size: 12px !important;
line-height: 1.35 !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-list button.is-collapsed,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card:not(.is-expanded) .coach-followup-list button:nth-child(n+4) {
display: none !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card.is-expanded .coach-followup-list button.is-collapsed,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card.is-expanded .coach-followup-list button:nth-child(n+4) {
display: block !important;
}
/* Interview coach fit v240: keep the default coach state fully readable in one fixed rail. */
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .section-head {
min-height: 32px !important;
height: 32px !important;
margin: 0 !important;
padding: 0 !important;
gap: 6px !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .section-head .eyebrow {
margin: 0 !important;
font-size: 11px !important;
line-height: 1 !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .section-head h3 {
margin: 0 !important;
font-size: 17px !important;
line-height: 1.05 !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .section-head .ghost-btn {
min-height: 28px !important;
height: 28px !important;
padding: 0 10px !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-live-score-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-structure-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-card {
width: 100% !important;
box-sizing: border-box !important;
padding: 10px !important;
gap: 7px !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-live-score-head,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-panel-title {
min-height: 22px !important;
gap: 8px !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-completeness-main {
grid-template-columns: minmax(70px, auto) minmax(82px, 1fr) !important;
gap: 8px !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-completeness-main strong {
font-size: 32px !important;
line-height: 0.95 !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-live-score-card > p {
font-size: 11px !important;
line-height: 1.35 !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-structure-list {
gap: 5px !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-structure-item {
min-height: 30px !important;
padding: 4px 9px !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-structure-item span {
font-size: 12px !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-structure-item b {
min-width: 22px !important;
min-height: 22px !important;
font-size: 12px !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-list {
gap: 6px !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-list button {
min-height: 34px !important;
display: flex !important;
align-items: center !important;
gap: 7px !important;
padding: 0 10px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-size: 12px !important;
line-height: 1.2 !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-list button::before {
flex: 0 0 auto !important;
margin-right: 0 !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-card > p {
height: auto !important;
min-height: 14px !important;
max-height: none !important;
font-size: 10.5px !important;
line-height: 1.25 !important;
white-space: normal !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-toggle {
min-height: 32px !important;
height: 32px !important;
margin-top: 0 !important;
}
/* Interview coach one-screen default v241: score, coverage and three follow-ups fit without clipping. */
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-live-score-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-structure-card,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-card {
padding: 8px !important;
gap: 6px !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-live-score-head span,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-panel-title strong {
font-size: 13px !important;
line-height: 1.1 !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-live-score-head em,
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-panel-title span {
min-height: 22px !important;
padding: 0 8px !important;
font-size: 10.5px !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-completeness-main strong {
font-size: 30px !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-completeness-track {
height: 8px !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-live-score-card > p {
display: none !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-structure-list {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
grid-template-rows: none !important;
grid-auto-rows: minmax(28px, auto) !important;
height: auto !important;
gap: 5px !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-structure-item {
min-height: 28px !important;
padding: 3px 7px !important;
gap: 5px !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-structure-item span {
min-width: 0 !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
font-size: 11.5px !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-structure-item b {
min-width: 20px !important;
min-height: 20px !important;
font-size: 11px !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-card > p {
display: none !important;
}
html body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .coach-followup-toggle {
min-height: 30px !important;
height: 30px !important;
}
/* Final avatar geometry lock v285: account portraits must never stretch with sidebar cards. */
html body .sidebar-account-button {
grid-template-columns: 58px minmax(0, 1fr) 14px !important;
align-items: center !important;
}
html body .sidebar-account-avatar,
html body .topbar-user-avatar,
html body .account-preview-avatar,
html body[data-active-panel="interview"] .interview-training-avatar,
html body[data-active-panel="interview"] .interview-question-card-head span::before,
html body[data-active-panel="audio"] .audio-review-speaker-avatar {
display: block !important;
inline-size: var(--hw-avatar-size, 58px) !important;
block-size: var(--hw-avatar-size, 58px) !important;
width: var(--hw-avatar-size, 58px) !important;
height: var(--hw-avatar-size, 58px) !important;
min-width: var(--hw-avatar-size, 58px) !important;
min-height: var(--hw-avatar-size, 58px) !important;
max-width: var(--hw-avatar-size, 58px) !important;
max-height: var(--hw-avatar-size, 58px) !important;
aspect-ratio: 1 / 1 !important;
flex: 0 0 var(--hw-avatar-size, 58px) !important;
align-self: center !important;
justify-self: center !important;
border-radius: 999px !important;
overflow: hidden !important;
object-fit: cover !important;
object-position: center center !important;
transform: none !important;
}
html body .sidebar-account-avatar {
--hw-avatar-size: 58px;
background-size: 142% 142% !important;
background-position: center center !important;
}
html body .topbar-user-avatar {
--hw-avatar-size: 34px;
}
html body .account-preview-avatar,
html body[data-active-panel="interview"] .interview-training-avatar {
--hw-avatar-size: 72px;
}
html body[data-active-panel="interview"] .interview-question-card-head span::before,
html body[data-active-panel="audio"] .audio-review-speaker-avatar {
--hw-avatar-size: 64px;
}
html body .sidebar-account-avatar img,
html body .topbar-user-avatar img,
html body .account-preview-avatar img,
html body[data-active-panel="interview"] .interview-training-avatar-img,
html body[data-active-panel="audio"] .audio-review-speaker-avatar img {
width: 100% !important;
height: 100% !important;
min-width: 100% !important;
min-height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
display: block !important;
border-radius: 999px !important;
object-fit: cover !important;
object-position: center center !important;
transform: none !important;
}
html body .shell.sidebar-collapsed .sidebar-account-avatar {
--hw-avatar-size: 42px;
}
/* Absolute account avatar shape lock v286: beat older sidebar-specific width rules. */
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-button,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-button,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-button,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-account-button {
height: 84px !important;
min-height: 84px !important;
grid-template-columns: 58px minmax(0, 1fr) !important;
gap: 12px !important;
padding: 12px 14px !important;
align-items: center !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-account-avatar {
width: 58px !important;
height: 58px !important;
min-width: 58px !important;
min-height: 58px !important;
max-width: 58px !important;
max-height: 58px !important;
inline-size: 58px !important;
block-size: 58px !important;
flex: 0 0 58px !important;
aspect-ratio: 1 / 1 !important;
border-radius: 999px !important;
overflow: hidden !important;
background-size: 142% 142% !important;
background-position: center center !important;
transform: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-account-button,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .sidebar-account-button,
html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-account-button,
html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .sidebar-account-button {
height: 56px !important;
min-height: 56px !important;
grid-template-columns: 42px !important;
justify-content: center !important;
padding: 7px !important;
}
html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .sidebar-account-avatar {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
max-width: 42px !important;
max-height: 42px !important;
inline-size: 42px !important;
block-size: 42px !important;
flex: 0 0 42px !important;
aspect-ratio: 1 / 1 !important;
}
/* Sidebar icon polish v287: replace glyph placeholders with stable line icons. */
html:not(.react-student-embedded) body .sidebar .menu-item {
display: grid !important;
grid-template-columns: 34px minmax(0, 1fr) !important;
align-items: center !important;
justify-content: start !important;
column-gap: 11px !important;
min-height: 44px !important;
padding: 0 15px !important;
letter-spacing: 0 !important;
}
html:not(.react-student-embedded) body .sidebar .menu-item::before,
html:not(.react-student-embedded) body[data-active-panel] .sidebar .menu-item::before,
html:not(.react-student-embedded) body .shell:has(> .sidebar:hover) .sidebar .menu-item::before,
html:not(.react-student-embedded) body .shell:has(> .sidebar:focus-within) .sidebar .menu-item::before {
content: "" !important;
position: static !important;
left: auto !important;
top: auto !important;
transform: none !important;
display: block !important;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
margin: 0 auto !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
opacity: 0.78 !important;
color: currentColor !important;
background: currentColor !important;
background-image: none !important;
-webkit-mask: var(--hw-sidebar-icon) center / 20px 20px no-repeat !important;
mask: var(--hw-sidebar-icon) center / 20px 20px no-repeat !important;
}
html:not(.react-student-embedded) body .sidebar .menu-item.active::before {
opacity: 1 !important;
}
html:not(.react-student-embedded) body .sidebar .menu-item[data-view="landing"] {
--hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.5%2011.2%2012%204l8.5%207.2'/%3E%3Cpath%20d='M5.5%2010.5V20h5v-5h3v5h5v-9.5'/%3E%3C/svg%3E");
}
html:not(.react-student-embedded) body .sidebar .menu-item[data-view="interview"] {
--hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='9'%20y='3'%20width='6'%20height='11'%20rx='3'/%3E%3Cpath%20d='M5%2011a7%207%200%200%200%2014%200'/%3E%3Cpath%20d='M12%2018v3'/%3E%3Cpath%20d='M8.5%2021h7'/%3E%3C/svg%3E");
}
html:not(.react-student-embedded) body .sidebar .menu-item[data-view="audio"] {
--hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2015h3l5%204V5L7%209H4z'/%3E%3Cpath%20d='M16%209.5a4%204%200%200%201%200%205'/%3E%3Cpath%20d='M18.5%207a8%208%200%200%201%200%2010'/%3E%3C/svg%3E");
}
html:not(.react-student-embedded) body .sidebar .menu-item[data-view="debug-lab"] {
--hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8%207.5h8v9a4%204%200%200%201-8%200z'/%3E%3Cpath%20d='M9%204.5%2011%207'/%3E%3Cpath%20d='M15%204.5%2013%207'/%3E%3Cpath%20d='M4%2010h4'/%3E%3Cpath%20d='M16%2010h4'/%3E%3Cpath%20d='M4.5%2016H8'/%3E%3Cpath%20d='M16%2016h3.5'/%3E%3C/svg%3E");
}
html:not(.react-student-embedded) body .sidebar .menu-item[data-view="waveform"] {
--hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2016h3l2-8%203%2012%203-16%202%2012h5'/%3E%3C/svg%3E");
}
html:not(.react-student-embedded) body .sidebar .menu-item[data-view="question-bank"] {
--hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%204h10a2%202%200%200%201%202%202v14H8a2%202%200%200%201-2-2z'/%3E%3Cpath%20d='M6%2018a2%202%200%200%201%202-2h10'/%3E%3Cpath%20d='M9%208h5'/%3E%3Cpath%20d='M9%2011h6'/%3E%3C/svg%3E");
}
html:not(.react-student-embedded) body .sidebar .menu-item[data-view="reports"] {
--hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%203.5h8l4%204V20a1%201%200%200%201-1%201H6a1%201%200%200%201-1-1V4.5a1%201%200%200%201%201-1z'/%3E%3Cpath%20d='M14%203.5V8h4'/%3E%3Cpath%20d='M8%2016l2-2%202%201%203-4'/%3E%3C/svg%3E");
}
html:not(.react-student-embedded) body .sidebar .menu-item[data-view="resume"] {
--hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='8'%20r='3.5'/%3E%3Cpath%20d='M5%2020a7%207%200%200%201%2014%200'/%3E%3C/svg%3E");
}
html:not(.react-student-embedded) body .sidebar .menu-item[data-view="message-center"] {
--hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209a6%206%200%200%201%2012%200v4l2%203H4l2-3z'/%3E%3Cpath%20d='M10%2019a2%202%200%200%200%204%200'/%3E%3C/svg%3E");
}
html:not(.react-student-embedded) body .sidebar .menu-item[data-view="settings"] {
--hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3Cpath%20d='M19.4%2015a1.7%201.7%200%200%200%20.3%201.9l.1.2-2%203.4-.3-.1a1.7%201.7%200%200%200-1.9.1%201.7%201.7%200%200%200-.8%201.6V22H9.2v-.3a1.7%201.7%200%200%200-.8-1.6%201.7%201.7%200%200%200-1.9-.1l-.3.1-2-3.4.2-.2a1.7%201.7%200%200%200%20.2-1.8%201.7%201.7%200%200%200-1.4-1.1H3v-4h.3a1.7%201.7%200%200%200%201.4-1.1%201.7%201.7%200%200%200-.2-1.8l-.2-.2%202-3.4.3.1a1.7%201.7%200%200%200%201.9-.1%201.7%201.7%200%200%200%20.8-1.6V2h5.6v.3a1.7%201.7%200%200%200%20.8%201.6%201.7%201.7%200%200%200%201.9.1l.3-.1%202%203.4-.1.2a1.7%201.7%200%200%200-.3%201.9%201.7%201.7%200%200%200%201.5%201.1h.3v4H21a1.7%201.7%200%200%200-1.6%201.1z'/%3E%3C/svg%3E");
}
html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu-item,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .menu-item,
html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .menu-item,
html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .menu-item {
width: 48px !important;
min-width: 48px !important;
height: 48px !important;
min-height: 48px !important;
grid-template-columns: 48px !important;
padding: 0 !important;
column-gap: 0 !important;
place-items: center !important;
font-size: 0 !important;
}
html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar .menu-item::before,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed .sidebar .menu-item::before,
html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .menu-item::before,
html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .menu-item::before {
width: 21px !important;
height: 21px !important;
min-width: 21px !important;
min-height: 21px !important;
-webkit-mask-size: 21px 21px !important;
mask-size: 21px 21px !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu-item,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link {
display: grid !important;
grid-template-columns: 32px minmax(0, 1fr) !important;
align-items: center !important;
justify-content: start !important;
gap: 11px !important;
width: 100% !important;
min-height: 42px !important;
height: 42px !important;
max-height: 42px !important;
padding: 0 14px !important;
font-size: 14px !important;
line-height: 1.2 !important;
white-space: nowrap !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item::before,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu-item::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link::before,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link::before {
content: "" !important;
position: static !important;
left: auto !important;
top: auto !important;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
min-height: 20px !important;
margin: 0 auto !important;
transform: none !important;
display: block !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
color: currentColor !important;
background-color: currentColor !important;
background-image: none !important;
-webkit-mask: var(--hw-sidebar-icon) center / 20px 20px no-repeat !important;
mask: var(--hw-sidebar-icon) center / 20px 20px no-repeat !important;
}
/* Brand rail polish v289: remove the logo card look and stabilize title spacing. */
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand {
position: relative !important;
height: 150px !important;
min-height: 150px !important;
padding: 22px 16px 12px !important;
margin: 0 !important;
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand::after,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-head::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-head::after,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-head--main::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-head--main::after {
display: none !important;
content: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-head,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-head--main,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand-head,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand-head,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand-head,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand-head--main {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
overflow: visible !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-icon-logo,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand-icon-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand-icon-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand-icon-logo {
display: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-main-logo,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand-main-logo {
display: block !important;
width: 176px !important;
max-width: 176px !important;
height: auto !important;
max-height: none !important;
margin: 2px auto 0 !important;
object-fit: contain !important;
opacity: 1 !important;
filter: brightness(1.16) contrast(1.08) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.18)) !important;
mix-blend-mode: normal !important;
transform: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-subtitle-text,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand-subtitle-text {
display: block !important;
width: 190px !important;
margin: 2px auto 0 !important;
color: rgba(226, 232, 240, 0.86) !important;
font-size: 13px !important;
font-weight: 620 !important;
line-height: 1.62 !important;
letter-spacing: 0 !important;
text-align: center !important;
white-space: normal !important;
text-wrap: balance !important;
opacity: 1 !important;
transform: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-subtitle-text br,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand-subtitle-text br {
display: block !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-toggle,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-toggle,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-toggle,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-toggle {
top: 18px !important;
right: 18px !important;
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
border: 0 !important;
border-radius: 12px !important;
background: rgba(255, 255, 255, 0.07) !important;
box-shadow: none !important;
color: rgba(226, 232, 240, 0.9) !important;
font-size: 18px !important;
font-weight: 760 !important;
line-height: 1 !important;
outline: 0 !important;
transform: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-toggle:hover,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-toggle:focus-visible {
background: rgba(255, 255, 255, 0.11) !important;
border: 0 !important;
box-shadow: none !important;
transform: none !important;
}
/* Brand inner specificity lock v290: beat older .brand .brand-head and img.brand-logo rules. */
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-head.brand-head--main {
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: 0 !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo {
display: block !important;
width: 176px !important;
min-width: 176px !important;
max-width: 176px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 1px auto 0 !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center center !important;
opacity: 1 !important;
filter: brightness(1.18) contrast(1.1) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.2)) !important;
transform: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main .brand-subtitle-text,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-head.brand-head--main .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-head.brand-head--main .brand-subtitle-text {
display: block !important;
width: 194px !important;
max-width: 194px !important;
margin: 0 auto !important;
padding: 0 !important;
color: rgba(226, 232, 240, 0.9) !important;
font-size: 13px !important;
font-weight: 620 !important;
line-height: 1.6 !important;
letter-spacing: 0 !important;
text-align: center !important;
white-space: normal !important;
opacity: 1 !important;
transform: none !important;
}
/* Brand final clean v291: no visible logo box, no framed toggle, even two-line subtitle. */
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand {
height: 148px !important;
min-height: 148px !important;
padding: 20px 16px 10px !important;
background: none !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: 0 !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand *,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand *,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand *,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand * {
box-sizing: border-box !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-head.brand-head--main {
width: 216px !important;
max-width: 216px !important;
padding: 0 !important;
background: none !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: 0 !important;
gap: 8px !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo {
width: 184px !important;
min-width: 184px !important;
max-width: 184px !important;
margin: 0 auto !important;
filter: brightness(1.24) contrast(1.16) saturate(1.08) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.22)) !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main .brand-subtitle-text,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-head.brand-head--main .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-head.brand-head--main .brand-subtitle-text {
width: 210px !important;
max-width: 210px !important;
color: rgba(226, 232, 240, 0.92) !important;
font-size: 13px !important;
font-weight: 640 !important;
line-height: 1.58 !important;
text-align: center !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-toggle,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-toggle,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-toggle,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-toggle {
top: 20px !important;
right: 18px !important;
width: 32px !important;
height: 32px !important;
min-width: 32px !important;
min-height: 32px !important;
padding: 0 !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 10px !important;
box-shadow: none !important;
color: rgba(226, 232, 240, 0.86) !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-toggle:hover,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-toggle:focus-visible {
background: rgba(255, 255, 255, 0.08) !important;
border: 0 !important;
box-shadow: none !important;
}
/* Brand spacing v292: keep the menu toggle from covering the logo strokes. */
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand {
height: 166px !important;
min-height: 166px !important;
padding-top: 14px !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-head.brand-head--main {
padding-top: 24px !important;
gap: 7px !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-toggle,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-toggle,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-toggle,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-toggle {
top: 14px !important;
right: 16px !important;
}
/* Brand spacing v293: fully separate toggle hit area from logo artwork. */
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand {
height: 180px !important;
min-height: 180px !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-head.brand-head--main {
padding-top: 36px !important;
}
/* Workspace polish v294: stop duplicate Xiaowen surfaces and let fixed AI rails breathe. */
html:not(.react-student-embedded) body #companionAmbientStage,
html:not(.react-student-embedded) body #companionAmbientModel,
html:not(.react-student-embedded) body #companionAmbientCharacter,
html:not(.react-student-embedded) body #companionMiniBubble,
html:not(.react-student-embedded) body .companion-ambient-stage,
html:not(.react-student-embedded) body .companion-mini-bubble {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] #companionDock,
html:not(.react-student-embedded) body[data-active-panel="interview"] #companionMini,
html:not(.react-student-embedded) body[data-active-panel="interview"] #companionPanel,
html:not(.react-student-embedded) body[data-active-panel="interview"] .companion-dock,
html:not(.react-student-embedded) body[data-active-panel="audio"] #companionDock,
html:not(.react-student-embedded) body[data-active-panel="audio"] #companionMini,
html:not(.react-student-embedded) body[data-active-panel="audio"] #companionPanel,
html:not(.react-student-embedded) body[data-active-panel="audio"] .companion-dock,
html:not(.react-student-embedded) body[data-active-panel="debug-lab"] #companionDock,
html:not(.react-student-embedded) body[data-active-panel="debug-lab"] #companionMini,
html:not(.react-student-embedded) body[data-active-panel="debug-lab"] #companionPanel,
html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .companion-dock,
html:not(.react-student-embedded) body[data-active-panel="waveform"] #companionDock,
html:not(.react-student-embedded) body[data-active-panel="waveform"] #companionMini,
html:not(.react-student-embedded) body[data-active-panel="waveform"] #companionPanel,
html:not(.react-student-embedded) body[data-active-panel="waveform"] .companion-dock,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) #companionDock,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) #companionDock,
html:not(.react-student-embedded) body:has(.panel[data-panel="debug-lab"].active) #companionDock,
html:not(.react-student-embedded) body:has(.panel[data-panel="waveform"].active) #companionDock {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] img[src*="xiaowen"],
html:not(.react-student-embedded) body[data-active-panel="audio"] img[src*="xiaowen"],
html:not(.react-student-embedded) body[data-active-panel="debug-lab"] img[src*="xiaowen"],
html:not(.react-student-embedded) body[data-active-panel="waveform"] img[src*="xiaowen"],
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) img[src*="xiaowen"],
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) img[src*="xiaowen"],
html:not(.react-student-embedded) body:has(.panel[data-panel="debug-lab"].active) img[src*="xiaowen"],
html:not(.react-student-embedded) body:has(.panel[data-panel="waveform"].active) img[src*="xiaowen"] {
display: none !important;
visibility: hidden !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card.section-card {
height: calc(100vh - 188px) !important;
max-height: calc(100vh - 188px) !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
padding: 14px !important;
overflow: hidden !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card > .section-head {
flex: 0 0 auto !important;
min-height: 40px !important;
height: auto !important;
padding-bottom: 10px !important;
border-bottom: 1px solid rgba(148, 163, 184, 0.16) !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .interview-ai-coach-panel {
flex: 1 1 auto !important;
min-height: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding: 0 6px 8px 0 !important;
scrollbar-gutter: stable !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
flex: 0 0 auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
display: grid !important;
gap: 10px !important;
padding: 14px !important;
overflow: visible !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card > p,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card > p {
display: block !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
white-space: normal !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
font-size: 12px !important;
line-height: 1.55 !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main {
grid-template-columns: minmax(88px, auto) minmax(120px, 1fr) !important;
gap: 12px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main strong {
font-size: 42px !important;
line-height: 1 !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-list {
display: grid !important;
grid-template-columns: 1fr !important;
grid-auto-rows: auto !important;
gap: 7px !important;
overflow: visible !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item {
min-height: 34px !important;
padding: 6px 10px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item span {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
font-size: 12px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list {
display: grid !important;
gap: 8px !important;
overflow: visible !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list button {
min-height: 42px !important;
height: auto !important;
display: flex !important;
align-items: center !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.35 !important;
padding: 9px 12px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card:not(.is-expanded) .coach-followup-list button:nth-child(n + 4),
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list button.is-collapsed {
display: none !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card.is-expanded .coach-followup-list button,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card.is-expanded .coach-followup-list button.is-collapsed {
display: flex !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-toggle {
min-height: 38px !important;
height: auto !important;
margin-top: 0 !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-toggle[hidden] {
display: none !important;
}
/* Audio review cabin final v294: timeline remains horizontal text, coach rail scrolls internally. */
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-workspace,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-workspace {
grid-template-columns: minmax(236px, 260px) minmax(0, 1fr) minmax(320px, 360px) !important;
gap: 16px !important;
min-height: calc(100vh - 310px) !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-timeline-panel,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-timeline-panel {
overflow: hidden !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-dialogue-timeline,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-dialogue-timeline {
display: grid !important;
gap: 8px !important;
max-height: calc(100vh - 460px) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding-right: 6px !important;
writing-mode: horizontal-tb !important;
text-orientation: mixed !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item {
width: 100% !important;
min-height: 72px !important;
display: grid !important;
grid-template-columns: 56px minmax(0, 1fr) 52px !important;
align-items: center !important;
gap: 10px !important;
padding: 10px 10px 10px 14px !important;
writing-mode: horizontal-tb !important;
text-orientation: mixed !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item *,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item * {
writing-mode: horizontal-tb !important;
text-orientation: mixed !important;
word-break: normal !important;
overflow-wrap: normal !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-time,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item > .audio-timeline-time {
min-width: 52px !important;
white-space: nowrap !important;
text-align: left !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-copy,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item > .audio-timeline-copy {
min-width: 0 !important;
display: grid !important;
gap: 4px !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-copy strong,
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-copy em,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item > .audio-timeline-copy strong,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item > .audio-timeline-copy em {
display: block !important;
min-width: 0 !important;
max-width: 100% !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.25 !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > small,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item > small {
justify-self: end !important;
min-width: 46px !important;
white-space: nowrap !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-coach-panel,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-coach-panel {
max-height: calc(100vh - 310px) !important;
min-height: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
padding-bottom: 18px !important;
scrollbar-gutter: stable !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-coach-card,
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-coach-card ul,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-coach-card,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-coach-card ul {
height: auto !important;
max-height: none !important;
overflow: visible !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-action-bar,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-action-bar {
z-index: 20 !important;
}
/* Interview coach compact fit v295: default three follow-ups and expand control stay in view. */
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card.section-card {
height: calc(100vh - 176px) !important;
max-height: calc(100vh - 176px) !important;
gap: 8px !important;
padding: 12px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card > .section-head {
min-height: 36px !important;
padding-bottom: 8px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .interview-ai-coach-panel {
gap: 8px !important;
padding-right: 4px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
padding: 10px !important;
gap: 7px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-head,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-panel-title {
min-height: 22px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-head span,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-panel-title strong {
font-size: 13px !important;
line-height: 1.1 !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-head em,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-panel-title span {
min-height: 22px !important;
padding: 0 8px !important;
font-size: 10.5px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main {
grid-template-columns: 76px minmax(0, 1fr) !important;
gap: 10px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main strong {
font-size: 34px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-track {
height: 8px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card > p {
font-size: 11px !important;
line-height: 1.35 !important;
margin: 0 !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-list {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 6px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item {
min-height: 30px !important;
padding: 4px 8px !important;
gap: 6px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item span {
font-size: 11.5px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item b {
min-width: 20px !important;
min-height: 20px !important;
font-size: 11px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list {
gap: 7px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list button {
min-height: 38px !important;
padding: 7px 10px !important;
font-size: 11.5px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card > p {
display: none !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-toggle {
min-height: 34px !important;
height: 34px !important;
}
/* Interview coach visible toggle v296: fit score, lamp board, three prompts and expand button at 720px height. */
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .interview-ai-coach-panel {
gap: 6px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
padding: 8px !important;
gap: 5px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main {
grid-template-columns: 70px minmax(0, 1fr) !important;
gap: 8px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main strong {
font-size: 30px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card > p {
display: none !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-list {
gap: 4px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item {
min-height: 26px !important;
padding: 3px 7px !important;
gap: 4px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item span {
font-size: 11px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-item b {
min-width: 18px !important;
min-height: 18px !important;
font-size: 10.5px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list {
gap: 5px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-list button {
min-height: 32px !important;
padding: 5px 9px !important;
font-size: 11px !important;
line-height: 1.25 !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-toggle {
min-height: 30px !important;
height: 30px !important;
}
/* Delivery stability v297: one final owner for sidebar geometry, avatars and fixed coach rails. */
@media (min-width: 900px) {
html:not(.react-student-embedded) body .shell.sidebar-expanded,
html:not(.react-student-embedded) body .shell.sidebar-expanded:hover,
html:not(.react-student-embedded) body .shell.sidebar-expanded:focus-within,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover),
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) {
grid-template-columns: 236px minmax(0, 1fr) !important;
transition: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-collapsed,
html:not(.react-student-embedded) body .shell.sidebar-collapsed:hover,
html:not(.react-student-embedded) body .shell.sidebar-collapsed:focus-within,
html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover),
html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within) {
grid-template-columns: 76px minmax(0, 1fr) !important;
transition: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar {
width: 236px !important;
min-width: 236px !important;
max-width: 236px !important;
padding: 18px 14px 16px !important;
overflow: hidden !important;
transition: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-collapsed .sidebar,
html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar,
html:not(.react-student-embedded) body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar {
width: 76px !important;
min-width: 76px !important;
max-width: 76px !important;
padding: 16px 10px 14px !important;
overflow: hidden !important;
transition: none !important;
}
html:not(.react-student-embedded) body .sidebar,
html:not(.react-student-embedded) body .sidebar *,
html:not(.react-student-embedded) body .sidebar *::before,
html:not(.react-student-embedded) body .sidebar *::after {
transition: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand {
position: relative !important;
width: 100% !important;
height: 146px !important;
min-height: 146px !important;
max-height: 146px !important;
margin: 0 0 12px !important;
padding: 18px 38px 0 8px !important;
display: grid !important;
place-items: start center !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: 0 !important;
overflow: visible !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand::after,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-head::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-head::after {
content: none !important;
display: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-head.brand-head--main {
width: 184px !important;
min-width: 184px !important;
max-width: 184px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 auto !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: 1fr !important;
justify-items: center !important;
align-content: start !important;
gap: 8px !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: 0 !important;
overflow: visible !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand-icon-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand-icon-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand-icon-logo {
display: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand img.brand-logo.brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand img.brand-logo.brand-main-logo,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand img.brand-logo.brand-main-logo {
display: block !important;
width: 156px !important;
min-width: 156px !important;
max-width: 156px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 auto !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center center !important;
opacity: 1 !important;
filter: brightness(1.22) contrast(1.14) saturate(1.08) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.18)) !important;
transform: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .brand .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-subtitle-text,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .brand .brand-subtitle-text {
display: block !important;
width: 184px !important;
min-width: 184px !important;
max-width: 184px !important;
margin: 0 auto !important;
padding: 0 !important;
color: rgba(226, 232, 240, 0.88) !important;
font-size: 11px !important;
font-weight: 680 !important;
line-height: 1.5 !important;
letter-spacing: 0 !important;
text-align: center !important;
white-space: normal !important;
word-break: keep-all !important;
overflow: visible !important;
opacity: 1 !important;
transform: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-toggle,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-toggle,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-toggle {
position: absolute !important;
top: 10px !important;
right: 8px !important;
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
padding: 0 !important;
display: grid !important;
place-items: center !important;
background: transparent !important;
border: 0 !important;
border-radius: 10px !important;
box-shadow: none !important;
color: rgba(226, 232, 240, 0.86) !important;
font-size: 17px !important;
line-height: 1 !important;
transform: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-toggle:hover,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-toggle:focus-visible {
background: rgba(255, 255, 255, 0.08) !important;
box-shadow: none !important;
transform: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu {
width: 100% !important;
display: grid !important;
gap: 6px !important;
margin: 0 !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-section,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-section,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-section {
height: 22px !important;
min-height: 22px !important;
margin: 4px 0 0 !important;
padding: 0 10px !important;
display: flex !important;
align-items: center !important;
color: rgba(148, 163, 184, 0.78) !important;
font-size: 12px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
opacity: 1 !important;
overflow: visible !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu-item,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link {
position: relative !important;
width: 100% !important;
min-width: 0 !important;
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
margin: 0 !important;
padding: 0 12px 0 46px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 0 !important;
border: 0 !important;
border-radius: 12px !important;
color: rgba(226, 232, 240, 0.82) !important;
font-size: 14px !important;
font-weight: 820 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
text-align: left !important;
overflow: hidden !important;
transform: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu-item::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link::before,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link::before {
content: "" !important;
position: absolute !important;
left: 16px !important;
top: 50% !important;
width: 19px !important;
height: 19px !important;
min-width: 19px !important;
min-height: 19px !important;
margin: 0 !important;
display: block !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: currentColor !important;
opacity: 0.82 !important;
transform: translateY(-50%) !important;
-webkit-mask: var(--hw-sidebar-icon) center / 19px 19px no-repeat !important;
mask: var(--hw-sidebar-icon) center / 19px 19px no-repeat !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item.active,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .menu-item:hover,
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-link:hover {
color: #fff !important;
background: linear-gradient(135deg, #4f8cff 0%, #7c4dff 52%, #a833ff 100%) !important;
box-shadow: 0 14px 28px rgba(124, 77, 255, 0.26) !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-bottom-zone,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-zone,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-zone {
width: 100% !important;
display: grid !important;
gap: 8px !important;
margin-top: auto !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-card,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-card,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-account-card {
width: 100% !important;
padding: 10px 0 0 !important;
margin: 6px 0 0 !important;
border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-button,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-button,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-account-button {
width: 100% !important;
min-width: 0 !important;
height: 74px !important;
min-height: 74px !important;
max-height: 74px !important;
padding: 10px 12px !important;
display: grid !important;
grid-template-columns: 52px minmax(0, 1fr) !important;
align-items: center !important;
gap: 12px !important;
border: 1px solid rgba(148, 163, 184, 0.18) !important;
border-radius: 16px !important;
background: rgba(255, 255, 255, 0.045) !important;
box-shadow: none !important;
overflow: hidden !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-account-avatar {
width: 52px !important;
height: 52px !important;
min-width: 52px !important;
min-height: 52px !important;
max-width: 52px !important;
max-height: 52px !important;
inline-size: 52px !important;
block-size: 52px !important;
flex: 0 0 52px !important;
aspect-ratio: 1 / 1 !important;
border: 0 !important;
border-radius: 999px !important;
background-color: #ddd8ff !important;
background-size: 138% 138% !important;
background-position: center center !important;
background-repeat: no-repeat !important;
box-shadow: none !important;
overflow: hidden !important;
transform: none !important;
}
html:not(.react-student-embedded) body .shell.sidebar-expanded .sidebar .sidebar-account-copy strong {
display: block !important;
max-width: 100% !important;
color: rgba(248, 250, 252, 0.96) !important;
font-size: 15px !important;
font-weight: 900 !important;
line-height: 1.15 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
}
/* Delivery polish v302: remove the last clipping/overlap points in cabin pages. */
@media (min-width: 900px) {
html:not(.react-student-embedded) body[data-active-panel="interview"] #companionDock,
html:not(.react-student-embedded) body[data-active-panel="interview"] #companionMini,
html:not(.react-student-embedded) body[data-active-panel="interview"] #companionMiniBubble,
html:not(.react-student-embedded) body[data-active-panel="audio"] #companionDock,
html:not(.react-student-embedded) body[data-active-panel="audio"] #companionMini,
html:not(.react-student-embedded) body[data-active-panel="audio"] #companionMiniBubble,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) #companionDock,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) #companionMini,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) #companionMiniBubble,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) #companionDock,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) #companionMini,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) #companionMiniBubble {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-statusbar,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-statusbar {
height: auto !important;
min-height: 82px !important;
max-height: none !important;
display: grid !important;
grid-template-columns: minmax(300px, 0.95fr) minmax(380px, 1.25fr) minmax(260px, 0.8fr) !important;
gap: 10px !important;
align-items: center !important;
padding: 10px 16px !important;
overflow: visible !important;
box-sizing: border-box !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-title,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-title {
min-width: 0 !important;
display: grid !important;
grid-template-columns: 56px minmax(142px, 1fr) 78px !important;
gap: 10px !important;
align-items: center !important;
overflow: visible !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-title > div,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-title > div {
min-width: 0 !important;
display: grid !important;
gap: 3px !important;
overflow: visible !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-title strong,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-title strong {
font-size: 18px !important;
line-height: 1.15 !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-title span:not(.interview-training-avatar),
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-title span:not(.interview-training-avatar) {
width: auto !important;
max-width: none !important;
font-size: 12px !important;
line-height: 1.25 !important;
white-space: nowrap !important;
overflow: visible !important;
text-overflow: clip !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-profile-inline-btn,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-profile-inline-btn {
width: 78px !important;
min-width: 78px !important;
height: 38px !important;
padding: 0 !important;
white-space: nowrap !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-metrics,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-metrics {
min-width: 0 !important;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 8px !important;
overflow: visible !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-metrics span,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-metrics span {
min-width: 0 !important;
height: 58px !important;
padding: 8px 10px !important;
display: grid !important;
align-content: center !important;
gap: 3px !important;
overflow: visible !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-metrics em,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-metrics strong,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-metrics small,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-metrics em,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-metrics strong,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-metrics small {
width: auto !important;
max-width: none !important;
line-height: 1.12 !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-metrics strong,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-metrics strong {
font-size: 13px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-actions,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-actions {
min-width: 0 !important;
display: grid !important;
grid-template-columns: 82px 70px 82px !important;
gap: 8px !important;
align-items: center !important;
justify-content: end !important;
overflow: visible !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-actions button,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-training-actions button {
min-width: 0 !important;
width: 100% !important;
height: 42px !important;
padding: 0 10px !important;
white-space: nowrap !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active):not(.interview-coach-collapsed) .coach-completeness-main {
height: auto !important;
min-height: 66px !important;
max-height: none !important;
display: grid !important;
grid-template-columns: 120px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: center !important;
overflow: visible !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-completeness-main strong,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active):not(.interview-coach-collapsed) .coach-completeness-main strong {
font-size: 44px !important;
line-height: 0.98 !important;
display: block !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] .coach-live-score-card p,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .coach-live-score-card p {
line-height: 1.45 !important;
max-height: none !important;
overflow: visible !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-bottom-actionbar,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-bottom-actionbar {
display: grid !important;
grid-template-columns: 190px minmax(120px, 1fr) 330px 224px !important;
gap: 10px !important;
align-items: center !important;
padding: 10px 16px !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-bottom-actions,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-bottom-actions {
min-width: 0 !important;
display: flex !important;
gap: 8px !important;
justify-content: flex-end !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-bottom-actionbar button,
html:not(.react-student-embedded) body:has(.panel[data-panel="interview"].active) .interview-bottom-actionbar button {
min-width: 0 !important;
height: 42px !important;
padding: 0 14px !important;
white-space: nowrap !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-workspace,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-workspace {
grid-template-columns: 252px minmax(0, 1fr) 300px !important;
gap: 12px !important;
overflow: hidden !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-timeline-panel,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-timeline-panel {
width: auto !important;
min-width: 0 !important;
overflow: hidden !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-dialogue-timeline,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-dialogue-timeline {
padding: 10px 8px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item {
min-width: 0 !important;
min-height: 76px !important;
display: grid !important;
grid-template-columns: 58px minmax(0, 1fr) 48px !important;
gap: 8px !important;
align-items: center !important;
padding: 12px 8px !important;
overflow: visible !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-time,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item > .audio-timeline-time {
width: 58px !important;
min-width: 58px !important;
max-width: 58px !important;
white-space: nowrap !important;
overflow: visible !important;
text-align: right !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-copy,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item > .audio-timeline-copy {
min-width: 0 !important;
width: auto !important;
max-width: none !important;
display: grid !important;
gap: 4px !important;
overflow: visible !important;
writing-mode: horizontal-tb !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-copy strong,
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-copy em,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item > .audio-timeline-copy strong,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item > .audio-timeline-copy em {
display: block !important;
width: auto !important;
max-width: none !important;
writing-mode: horizontal-tb !important;
white-space: normal !important;
overflow: visible !important;
text-overflow: clip !important;
line-height: 1.25 !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-copy strong,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item > .audio-timeline-copy strong {
font-size: 13px !important;
font-weight: 900 !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > .audio-timeline-copy em,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item > .audio-timeline-copy em {
font-size: 11px !important;
color: #64748b !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-cabin-timeline-item > small,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-cabin-timeline-item > small {
width: 48px !important;
min-width: 48px !important;
max-width: 48px !important;
padding: 3px 6px !important;
text-align: center !important;
white-space: nowrap !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-action-bar,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-action-bar {
display: grid !important;
grid-template-columns: 82px minmax(300px, 1fr) minmax(400px, auto) !important;
gap: 14px !important;
align-items: center !important;
padding: 14px 16px !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-next-steps,
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-progress-shell,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-next-steps,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-progress-shell {
display: none !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-action-buttons,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-action-buttons {
min-width: 0 !important;
display: flex !important;
gap: 10px !important;
justify-content: flex-end !important;
}
html:not(.react-student-embedded) body[data-active-panel="audio"] .audio-action-buttons button,
html:not(.react-student-embedded) body:has(.panel[data-panel="audio"].active) .audio-action-buttons button {
min-width: 124px !important;
height: 44px !important;
padding: 0 16px !important;
white-space: nowrap !important;
}
}
/* Sidebar fit and active state v301. */
@media (min-width: 900px) {
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b) {
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
gap: 0 !important;
}
html body[data-active-panel] .shell.sidebar-expanded .sidebar .menu:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .menu:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b) {
flex: 1 1 auto !important;
min-height: 0 !important;
width: 200px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
scrollbar-width: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 6px !important;
}
html body[data-active-panel] .shell.sidebar-expanded .sidebar .menu::-webkit-scrollbar {
width: 0 !important;
height: 0 !important;
}
html body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-zone:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-zone:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-zone:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b) {
flex: 0 0 auto !important;
width: 200px !important;
min-width: 200px !important;
max-width: 200px !important;
margin-top: 10px !important;
display: grid !important;
gap: 6px !important;
}
html body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-card:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b) {
flex: 0 0 auto !important;
width: 200px !important;
padding-top: 8px !important;
margin-top: 6px !important;
}
html body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item.active:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
html body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item.is-active:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
html body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link.active:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
html body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link.is-active:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b) {
color: #ffffff !important;
background-color: #7c4dff !important;
background-image: linear-gradient(90deg, #3f8cff 0%, #7c4dff 58%, #a93cff 100%) !important;
border: 0 !important;
border-radius: 12px !important;
box-shadow: 0 12px 28px rgba(124, 77, 255, 0.28) !important;
opacity: 1 !important;
}
}
/* Sidebar cascade seal v300: outrank legacy homepage/sidebar important rules. */
@media (min-width: 900px) {
html body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-head.brand-head--main:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .brand .brand-head.brand-head--main:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-head.brand-head--main:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b) {
width: 184px !important;
min-width: 184px !important;
max-width: 184px !important;
height: 120px !important;
min-height: 120px !important;
max-height: 120px !important;
padding: 26px 0 0 !important;
margin: 0 auto !important;
display: grid !important;
place-items: start center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
html body[data-active-panel] .shell.sidebar-expanded .sidebar .brand img.brand-logo.brand-main-logo:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .brand img.brand-logo.brand-main-logo:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand img.brand-logo.brand-main-logo:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b) {
width: 154px !important;
min-width: 154px !important;
max-width: 154px !important;
height: auto !important;
min-height: 0 !important;
max-height: 62px !important;
margin: 0 auto !important;
object-fit: contain !important;
display: block !important;
opacity: 1 !important;
filter: none !important;
transform: none !important;
}
html body[data-active-panel] .shell.sidebar-expanded .sidebar .brand .brand-subtitle-text:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .brand .brand-subtitle-text:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .brand .brand-subtitle-text:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b) {
width: 184px !important;
min-width: 184px !important;
max-width: 184px !important;
margin: -4px auto 0 !important;
color: rgba(226, 232, 240, 0.9) !important;
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1.55 !important;
letter-spacing: 0 !important;
text-align: center !important;
white-space: normal !important;
overflow: visible !important;
}
html body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item.active,
html body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item.is-active,
html body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link.active,
html body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link.is-active {
color: #fff !important;
background: linear-gradient(90deg, #3f8cff 0%, #7c4dff 58%, #a93cff 100%) !important;
border: 0 !important;
border-radius: 12px !important;
box-shadow: 0 12px 28px rgba(124, 77, 255, 0.28) !important;
}
html body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-avatar:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-account-avatar:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b),
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-avatar:not(#hw-sidebar-lock-a):not(#hw-sidebar-lock-b) {
width: 52px !important;
height: 52px !important;
min-width: 52px !important;
min-height: 52px !important;
max-width: 52px !important;
max-height: 52px !important;
aspect-ratio: 1 / 1 !important;
border: 0 !important;
border-radius: 999px !important;
background-size: 128% 128% !important;
background-position: center 48% !important;
box-shadow: none !important;
overflow: hidden !important;
transform: none !important;
}
}
html:not(.react-student-embedded) body[data-active-panel="interview"] .companion-dock,
html:not(.react-student-embedded) body[data-active-panel="interview"] #companionDock,
html:not(.react-student-embedded) body[data-active-panel="interview"] #companionMini,
html:not(.react-student-embedded) body[data-active-panel="interview"] #companionPanel,
html:not(.react-student-embedded) body[data-active-panel="audio"] .companion-dock,
html:not(.react-student-embedded) body[data-active-panel="audio"] #companionDock,
html:not(.react-student-embedded) body[data-active-panel="audio"] #companionMini,
html:not(.react-student-embedded) body[data-active-panel="audio"] #companionPanel,
html:not(.react-student-embedded) body[data-active-panel="debug-lab"] .companion-dock,
html:not(.react-student-embedded) body[data-active-panel="debug-lab"] #companionDock,
html:not(.react-student-embedded) body[data-active-panel="debug-lab"] #companionMini,
html:not(.react-student-embedded) body[data-active-panel="debug-lab"] #companionPanel,
html:not(.react-student-embedded) body[data-active-panel="waveform"] .companion-dock,
html:not(.react-student-embedded) body[data-active-panel="waveform"] #companionDock,
html:not(.react-student-embedded) body[data-active-panel="waveform"] #companionMini,
html:not(.react-student-embedded) body[data-active-panel="waveform"] #companionPanel {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card.section-card {
height: calc(100vh - 168px) !important;
max-height: calc(100vh - 168px) !important;
padding: 12px !important;
overflow: hidden !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .interview-copilot-card .interview-ai-coach-panel {
overflow-y: auto !important;
overflow-x: hidden !important;
padding-right: 4px !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-live-score-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-structure-card,
html:not(.react-student-embedded) body[data-active-panel="interview"]:not(.interview-coach-collapsed) .coach-followup-card {
min-height: 0 !important;
max-height: none !important;
height: auto !important;
overflow: visible !important;
}
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-question-card-head span::before {
background:
url("./assets/interviewer-avatar.png?v=20260617-copy-polish-v314") center 38% / 108% 108% no-repeat,
linear-gradient(135deg, rgba(124, 77, 255, 0.14), rgba(91, 140, 255, 0.08)) !important;
}
html:not(.react-student-embedded) body .sidebar-account-avatar,
html:not(.react-student-embedded) body .topbar-user-avatar,
html:not(.react-student-embedded) body .account-preview-avatar,
html:not(.react-student-embedded) body[data-active-panel="interview"] .interview-training-avatar {
border-radius: 999px !important;
border: 0 !important;
outline: 0 !important;
overflow: hidden !important;
background-color: #ddd8ff !important;
background-position: center center !important;
background-repeat: no-repeat !important;
}
/* Sidebar visual lock v298: same sidebar on every page, no hover expansion and no boxed glyphs. */
@media (min-width: 900px) {
html body .shell.sidebar-expanded,
html body .shell.sidebar-expanded:hover,
html body .shell.sidebar-expanded:focus-within,
html body .shell.sidebar-expanded:has(> .sidebar:hover),
html body .shell.sidebar-expanded:has(> .sidebar:focus-within),
html body[data-active-panel] .shell.sidebar-expanded,
html body[data-active-panel] .shell.sidebar-expanded:hover,
html body[data-active-panel] .shell.sidebar-expanded:focus-within,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover),
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) {
grid-template-columns: 236px minmax(0, 1fr) !important;
transition: none !important;
}
html body .shell.sidebar-collapsed,
html body .shell.sidebar-collapsed:hover,
html body .shell.sidebar-collapsed:focus-within,
html body .shell.sidebar-collapsed:has(> .sidebar:hover),
html body .shell.sidebar-collapsed:has(> .sidebar:focus-within),
html body[data-active-panel] .shell.sidebar-collapsed,
html body[data-active-panel] .shell.sidebar-collapsed:hover,
html body[data-active-panel] .shell.sidebar-collapsed:focus-within,
html body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover),
html body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:focus-within) {
grid-template-columns: 76px minmax(0, 1fr) !important;
transition: none !important;
}
html body .shell.sidebar-expanded .sidebar,
html body .shell.sidebar-expanded:hover .sidebar,
html body .shell.sidebar-expanded:focus-within .sidebar,
html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar,
html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar,
html body[data-active-panel] .shell.sidebar-expanded .sidebar,
html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar,
html body[data-active-panel] .shell.sidebar-expanded:focus-within .sidebar,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar {
width: 236px !important;
min-width: 236px !important;
max-width: 236px !important;
padding: 18px 14px 16px !important;
overflow: hidden !important;
transition: none !important;
}
html body .shell.sidebar-collapsed .sidebar,
html body .shell.sidebar-collapsed:hover .sidebar,
html body .shell.sidebar-collapsed:focus-within .sidebar,
html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar,
html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar,
html body[data-active-panel] .shell.sidebar-collapsed .sidebar,
html body[data-active-panel] .shell.sidebar-collapsed:hover .sidebar,
html body[data-active-panel] .shell.sidebar-collapsed:focus-within .sidebar,
html body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar,
html body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar {
width: 76px !important;
min-width: 76px !important;
max-width: 76px !important;
padding: 16px 10px 14px !important;
overflow: hidden !important;
transition: none !important;
}
html body .sidebar,
html body .sidebar *,
html body .sidebar *::before,
html body .sidebar *::after {
transition: none !important;
}
html body .shell.sidebar-expanded .sidebar > .brand,
html body .shell.sidebar-expanded:hover .sidebar > .brand,
html body .shell.sidebar-expanded:focus-within .sidebar > .brand,
html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand,
html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand,
html body[data-active-panel] .shell.sidebar-expanded .sidebar > .brand,
html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar > .brand,
html body[data-active-panel] .shell.sidebar-expanded:focus-within .sidebar > .brand,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand {
position: relative !important;
width: 100% !important;
height: 150px !important;
min-height: 150px !important;
max-height: 150px !important;
margin: 0 0 12px !important;
padding: 16px 38px 0 8px !important;
display: grid !important;
place-items: start center !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: 0 !important;
overflow: visible !important;
transform: none !important;
}
html body .shell.sidebar-expanded .sidebar > .brand::before,
html body .shell.sidebar-expanded .sidebar > .brand::after,
html body .shell.sidebar-expanded .sidebar > .brand .brand-head::before,
html body .shell.sidebar-expanded .sidebar > .brand .brand-head::after,
html body .shell.sidebar-expanded .sidebar > .brand .brand-head--main::before,
html body .shell.sidebar-expanded .sidebar > .brand .brand-head--main::after,
html body .shell.sidebar-collapsed .sidebar > .brand::before,
html body .shell.sidebar-collapsed .sidebar > .brand::after,
html body .shell.sidebar-collapsed .sidebar > .brand .brand-head::before,
html body .shell.sidebar-collapsed .sidebar > .brand .brand-head::after {
content: none !important;
display: none !important;
}
html body .shell.sidebar-expanded .sidebar > .brand .brand-head.brand-head--main,
html body .shell.sidebar-expanded:hover .sidebar > .brand .brand-head.brand-head--main,
html body .shell.sidebar-expanded:focus-within .sidebar > .brand .brand-head.brand-head--main,
html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .brand-head.brand-head--main,
html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand .brand-head.brand-head--main,
html body[data-active-panel] .shell.sidebar-expanded .sidebar > .brand .brand-head.brand-head--main,
html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar > .brand .brand-head.brand-head--main,
html body[data-active-panel] .shell.sidebar-expanded:focus-within .sidebar > .brand .brand-head.brand-head--main,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .brand-head.brand-head--main,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand .brand-head.brand-head--main {
width: 184px !important;
min-width: 184px !important;
max-width: 184px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 auto !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: 1fr !important;
justify-items: center !important;
align-content: start !important;
gap: 8px !important;
background: transparent !important;
background-image: none !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: 0 !important;
overflow: visible !important;
}
html body .shell.sidebar-expanded .sidebar > .brand .brand-icon-logo,
html body .shell.sidebar-expanded:hover .sidebar > .brand .brand-icon-logo,
html body .shell.sidebar-expanded:focus-within .sidebar > .brand .brand-icon-logo,
html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .brand-icon-logo,
html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand .brand-icon-logo,
html body[data-active-panel] .shell.sidebar-expanded .sidebar > .brand .brand-icon-logo,
html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar > .brand .brand-icon-logo,
html body[data-active-panel] .shell.sidebar-expanded:focus-within .sidebar > .brand .brand-icon-logo,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .brand-icon-logo,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand .brand-icon-logo {
display: none !important;
}
html body .shell.sidebar-expanded .sidebar > .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
html body .shell.sidebar-expanded:hover .sidebar > .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
html body .shell.sidebar-expanded:focus-within .sidebar > .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
html body[data-active-panel] .shell.sidebar-expanded .sidebar > .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar > .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
html body[data-active-panel] .shell.sidebar-expanded:focus-within .sidebar > .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand .brand-head.brand-head--main img.brand-logo.brand-main-logo {
display: block !important;
width: 154px !important;
min-width: 154px !important;
max-width: 154px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 auto !important;
object-fit: contain !important;
object-position: center center !important;
opacity: 1 !important;
filter: brightness(1.25) contrast(1.16) saturate(1.1) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.2)) !important;
transform: none !important;
}
html body .shell.sidebar-expanded .sidebar > .brand .brand-head.brand-head--main .brand-subtitle-text,
html body .shell.sidebar-expanded:hover .sidebar > .brand .brand-head.brand-head--main .brand-subtitle-text,
html body .shell.sidebar-expanded:focus-within .sidebar > .brand .brand-head.brand-head--main .brand-subtitle-text,
html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .brand-head.brand-head--main .brand-subtitle-text,
html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand .brand-head.brand-head--main .brand-subtitle-text,
html body[data-active-panel] .shell.sidebar-expanded .sidebar > .brand .brand-head.brand-head--main .brand-subtitle-text,
html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar > .brand .brand-head.brand-head--main .brand-subtitle-text,
html body[data-active-panel] .shell.sidebar-expanded:focus-within .sidebar > .brand .brand-head.brand-head--main .brand-subtitle-text,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .brand-head.brand-head--main .brand-subtitle-text,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand .brand-head.brand-head--main .brand-subtitle-text {
display: block !important;
width: 184px !important;
min-width: 184px !important;
max-width: 184px !important;
margin: 0 auto !important;
color: rgba(226, 232, 240, 0.88) !important;
font-size: 11px !important;
font-weight: 680 !important;
line-height: 1.55 !important;
letter-spacing: 0 !important;
text-align: center !important;
white-space: normal !important;
word-break: keep-all !important;
overflow: visible !important;
opacity: 1 !important;
transform: none !important;
}
html body .shell.sidebar-expanded .sidebar > .brand .sidebar-toggle,
html body .shell.sidebar-expanded:hover .sidebar > .brand .sidebar-toggle,
html body .shell.sidebar-expanded:focus-within .sidebar > .brand .sidebar-toggle,
html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .sidebar-toggle,
html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand .sidebar-toggle,
html body[data-active-panel] .shell.sidebar-expanded .sidebar > .brand .sidebar-toggle,
html body[data-active-panel] .shell.sidebar-expanded:hover .sidebar > .brand .sidebar-toggle,
html body[data-active-panel] .shell.sidebar-expanded:focus-within .sidebar > .brand .sidebar-toggle,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .sidebar-toggle,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand .sidebar-toggle {
position: absolute !important;
top: 8px !important;
right: 8px !important;
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
padding: 0 !important;
display: grid !important;
place-items: center !important;
background: rgba(15, 23, 42, 0.28) !important;
border: 1px solid rgba(226, 232, 240, 0.18) !important;
border-radius: 11px !important;
box-shadow: none !important;
color: rgba(226, 232, 240, 0.9) !important;
font-size: 16px !important;
line-height: 1 !important;
transform: none !important;
}
html body .shell.sidebar-expanded .sidebar > .brand .sidebar-toggle:hover,
html body .shell.sidebar-expanded .sidebar > .brand .sidebar-toggle:focus-visible {
background: rgba(255, 255, 255, 0.08) !important;
border-color: rgba(226, 232, 240, 0.24) !important;
box-shadow: none !important;
transform: none !important;
}
html body .shell.sidebar-expanded .sidebar .menu,
html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu,
html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu,
html body[data-active-panel] .shell.sidebar-expanded .sidebar .menu,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu {
width: 100% !important;
display: grid !important;
gap: 7px !important;
margin: 0 !important;
}
html body .shell.sidebar-expanded .sidebar .sidebar-section,
html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-section,
html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-section,
html body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-section,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-section,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-section {
height: 22px !important;
min-height: 22px !important;
margin: 5px 0 1px !important;
padding: 0 10px !important;
display: flex !important;
align-items: center !important;
color: rgba(148, 163, 184, 0.76) !important;
font-size: 12px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
opacity: 1 !important;
overflow: visible !important;
}
html body .shell.sidebar-expanded .sidebar .menu-item,
html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item,
html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu-item,
html body .shell.sidebar-expanded .sidebar .sidebar-bottom-link,
html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link,
html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link,
html body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu-item,
html body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link {
position: relative !important;
width: 100% !important;
min-width: 0 !important;
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
margin: 0 !important;
padding: 0 12px 0 44px !important;
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 0 !important;
border: 0 !important;
border-radius: 12px !important;
color: rgba(226, 232, 240, 0.82) !important;
font-size: 14px !important;
font-weight: 820 !important;
line-height: 1 !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
text-align: left !important;
overflow: hidden !important;
transform: none !important;
}
html body .shell.sidebar-expanded .sidebar .menu-item::before,
html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item::before,
html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu-item::before,
html body .shell.sidebar-expanded .sidebar .sidebar-bottom-link::before,
html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link::before,
html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link::before,
html body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item::before,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item::before,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .menu-item::before,
html body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link::before,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link::before,
html body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link::before {
content: "" !important;
position: absolute !important;
left: 16px !important;
top: 50% !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
display: block !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
background: currentColor !important;
opacity: 0.84 !important;
transform: translateY(-50%) !important;
-webkit-mask: var(--hw-sidebar-icon) center / 18px 18px no-repeat !important;
mask: var(--hw-sidebar-icon) center / 18px 18px no-repeat !important;
}
html body .sidebar .menu-item[data-view="landing"],
html body .sidebar .sidebar-bottom-link[data-view="landing"] {
--hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.5%2011.2%2012%204l8.5%207.2'/%3E%3Cpath%20d='M5.5%2010.5V20h5v-5h3v5h5v-9.5'/%3E%3C/svg%3E");
}
html body .sidebar .menu-item[data-view="interview"] {
--hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='9'%20y='3'%20width='6'%20height='11'%20rx='3'/%3E%3Cpath%20d='M5%2011a7%207%200%200%200%2014%200'/%3E%3Cpath%20d='M12%2018v3'/%3E%3Cpath%20d='M8.5%2021h7'/%3E%3C/svg%3E");
}
html body .sidebar .menu-item[data-view="audio"] {
--hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%2015h3l5%204V5L7%209H4z'/%3E%3Cpath%20d='M16%209.5a4%204%200%200%201%200%205'/%3E%3Cpath%20d='M18.5%207a8%208%200%200%201%200%2010'/%3E%3C/svg%3E");
}
html body .sidebar .menu-item[data-view="debug-lab"] {
--hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8%207.5h8v9a4%204%200%200%201-8%200z'/%3E%3Cpath%20d='M9%204.5%2011%207'/%3E%3Cpath%20d='M15%204.5%2013%207'/%3E%3Cpath%20d='M4%2010h4'/%3E%3Cpath%20d='M16%2010h4'/%3E%3Cpath%20d='M4.5%2016H8'/%3E%3Cpath%20d='M16%2016h3.5'/%3E%3C/svg%3E");
}
html body .sidebar .menu-item[data-view="waveform"] {
--hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3%2016h3l2-8%203%2012%203-16%202%2012h5'/%3E%3C/svg%3E");
}
html body .sidebar .menu-item[data-view="question-bank"] {
--hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%204h10a2%202%200%200%201%202%202v14H8a2%202%200%200%201-2-2z'/%3E%3Cpath%20d='M6%2018a2%202%200%200%201%202-2h10'/%3E%3Cpath%20d='M9%208h5'/%3E%3Cpath%20d='M9%2011h6'/%3E%3C/svg%3E");
}
html body .sidebar .menu-item[data-view="reports"] {
--hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%203.5h8l4%204V20a1%201%200%200%201-1%201H6a1%201%200%200%201-1-1V4.5a1%201%200%200%201%201-1z'/%3E%3Cpath%20d='M14%203.5V8h4'/%3E%3Cpath%20d='M8%2016l2-2%202%201%203-4'/%3E%3C/svg%3E");
}
html body .sidebar .menu-item[data-view="resume"] {
--hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='8'%20r='3.5'/%3E%3Cpath%20d='M5%2020a7%207%200%200%201%2014%200'/%3E%3C/svg%3E");
}
html body .sidebar .menu-item[data-view="message-center"] {
--hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%209a6%206%200%200%201%2012%200v4l2%203H4l2-3z'/%3E%3Cpath%20d='M10%2019a2%202%200%200%200%204%200'/%3E%3C/svg%3E");
}
html body .sidebar .menu-item[data-view="settings"] {
--hw-sidebar-icon: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2.1'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3Cpath%20d='M19.4%2015a1.7%201.7%200%200%200%20.3%201.9l.1.2-2%203.4-.3-.1a1.7%201.7%200%200%200-1.9.1%201.7%201.7%200%200%200-.8%201.6V22H9.2v-.3a1.7%201.7%200%200%200-.8-1.6%201.7%201.7%200%200%200-1.9-.1l-.3.1-2-3.4.2-.2a1.7%201.7%200%200%200%20.2-1.8%201.7%201.7%200%200%200-1.4-1.1H3v-4h.3a1.7%201.7%200%200%200%201.4-1.1%201.7%201.7%200%200%200-.2-1.8l-.2-.2%202-3.4.3.1a1.7%201.7%200%200%200%201.9-.1%201.7%201.7%200%200%200%20.8-1.6V2h5.6v.3a1.7%201.7%200%200%200%20.8%201.6%201.7%201.7%200%200%200%201.9.1l.3-.1%202%203.4-.1.2a1.7%201.7%200%200%200-.3%201.9%201.7%201.7%200%200%200%201.5%201.1h.3v4H21a1.7%201.7%200%200%200-1.6%201.1z'/%3E%3C/svg%3E");
}
html body .shell.sidebar-expanded .sidebar .menu-item.active,
html body .shell.sidebar-expanded .sidebar .menu-item:hover,
html body .shell.sidebar-expanded .sidebar .sidebar-bottom-link:hover {
color: #fff !important;
background: linear-gradient(135deg, #4f8cff 0%, #7c4dff 56%, #a833ff 100%) !important;
box-shadow: 0 14px 28px rgba(124, 77, 255, 0.26) !important;
}
html body .shell.sidebar-collapsed .sidebar > .brand,
html body .shell.sidebar-collapsed:hover .sidebar > .brand,
html body .shell.sidebar-collapsed:focus-within .sidebar > .brand,
html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar > .brand,
html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar > .brand {
height: 66px !important;
min-height: 66px !important;
max-height: 66px !important;
margin: 0 0 10px !important;
padding: 0 !important;
display: grid !important;
place-items: center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
html body .shell.sidebar-collapsed .sidebar > .brand .brand-head.brand-head--main,
html body .shell.sidebar-collapsed:hover .sidebar > .brand .brand-head.brand-head--main,
html body .shell.sidebar-collapsed:focus-within .sidebar > .brand .brand-head.brand-head--main,
html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar > .brand .brand-head.brand-head--main,
html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar > .brand .brand-head.brand-head--main {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
padding: 0 !important;
margin: 0 auto !important;
display: grid !important;
place-items: center !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
html body .shell.sidebar-collapsed .sidebar > .brand .brand-icon-logo,
html body .shell.sidebar-collapsed:hover .sidebar > .brand .brand-icon-logo,
html body .shell.sidebar-collapsed:focus-within .sidebar > .brand .brand-icon-logo,
html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar > .brand .brand-icon-logo,
html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar > .brand .brand-icon-logo {
display: block !important;
width: 38px !important;
height: 38px !important;
object-fit: contain !important;
}
html body .shell.sidebar-collapsed .sidebar > .brand .brand-main-logo,
html body .shell.sidebar-collapsed .sidebar > .brand .brand-subtitle-text,
html body .shell.sidebar-collapsed:hover .sidebar > .brand .brand-main-logo,
html body .shell.sidebar-collapsed:hover .sidebar > .brand .brand-subtitle-text,
html body .shell.sidebar-collapsed:focus-within .sidebar > .brand .brand-main-logo,
html body .shell.sidebar-collapsed:focus-within .sidebar > .brand .brand-subtitle-text,
html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar > .brand .brand-main-logo,
html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar > .brand .brand-subtitle-text,
html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar > .brand .brand-main-logo,
html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar > .brand .brand-subtitle-text {
display: none !important;
visibility: hidden !important;
}
html body .shell.sidebar-collapsed .sidebar > .brand .sidebar-toggle,
html body .shell.sidebar-collapsed:hover .sidebar > .brand .sidebar-toggle,
html body .shell.sidebar-collapsed:focus-within .sidebar > .brand .sidebar-toggle,
html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar > .brand .sidebar-toggle,
html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar > .brand .sidebar-toggle {
position: absolute !important;
top: 4px !important;
right: -1px !important;
width: 26px !important;
height: 26px !important;
min-width: 26px !important;
min-height: 26px !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
color: rgba(226, 232, 240, 0.78) !important;
font-size: 14px !important;
}
html body .shell.sidebar-collapsed .sidebar .menu,
html body .shell.sidebar-collapsed:hover .sidebar .menu,
html body .shell.sidebar-collapsed:focus-within .sidebar .menu,
html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .menu,
html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .menu {
width: 56px !important;
margin: 0 auto !important;
display: grid !important;
gap: 8px !important;
}
html body .shell.sidebar-collapsed .sidebar .sidebar-section,
html body .shell.sidebar-collapsed:hover .sidebar .sidebar-section,
html body .shell.sidebar-collapsed:focus-within .sidebar .sidebar-section,
html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-section,
html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .sidebar-section {
height: 12px !important;
min-height: 12px !important;
margin: 8px 0 2px !important;
padding: 0 !important;
color: transparent !important;
font-size: 0 !important;
overflow: hidden !important;
}
html body .shell.sidebar-collapsed .sidebar .menu-item,
html body .shell.sidebar-collapsed:hover .sidebar .menu-item,
html body .shell.sidebar-collapsed:focus-within .sidebar .menu-item,
html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .menu-item,
html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .menu-item,
html body .shell.sidebar-collapsed .sidebar .sidebar-bottom-link,
html body .shell.sidebar-collapsed:hover .sidebar .sidebar-bottom-link,
html body .shell.sidebar-collapsed:focus-within .sidebar .sidebar-bottom-link,
html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-bottom-link,
html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link {
width: 48px !important;
height: 42px !important;
min-width: 48px !important;
min-height: 42px !important;
max-width: 48px !important;
max-height: 42px !important;
margin: 0 auto !important;
padding: 0 !important;
display: grid !important;
place-items: center !important;
border-radius: 12px !important;
color: rgba(226, 232, 240, 0.82) !important;
font-size: 0 !important;
line-height: 0 !important;
overflow: hidden !important;
white-space: nowrap !important;
}
html body .shell.sidebar-collapsed .sidebar .menu-item::before,
html body .shell.sidebar-collapsed:hover .sidebar .menu-item::before,
html body .shell.sidebar-collapsed:focus-within .sidebar .menu-item::before,
html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .menu-item::before,
html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .menu-item::before,
html body .shell.sidebar-collapsed .sidebar .sidebar-bottom-link::before,
html body .shell.sidebar-collapsed:hover .sidebar .sidebar-bottom-link::before,
html body .shell.sidebar-collapsed:focus-within .sidebar .sidebar-bottom-link::before,
html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-bottom-link::before,
html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-link::before {
left: 50% !important;
top: 50% !important;
width: 18px !important;
height: 18px !important;
background: currentColor !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
transform: translate(-50%, -50%) !important;
-webkit-mask: var(--hw-sidebar-icon) center / 18px 18px no-repeat !important;
mask: var(--hw-sidebar-icon) center / 18px 18px no-repeat !important;
}
html body .shell.sidebar-expanded .sidebar .sidebar-bottom-zone,
html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-zone,
html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-zone {
width: 100% !important;
display: grid !important;
gap: 8px !important;
margin-top: auto !important;
}
html body .shell.sidebar-expanded .sidebar .sidebar-account-card,
html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-card,
html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-account-card {
width: 100% !important;
padding: 10px 0 0 !important;
margin: 6px 0 0 !important;
border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
}
html body .shell.sidebar-expanded .sidebar .sidebar-account-button,
html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-button,
html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-account-button {
width: 100% !important;
min-width: 0 !important;
height: 74px !important;
min-height: 74px !important;
max-height: 74px !important;
padding: 10px 12px !important;
display: grid !important;
grid-template-columns: 52px minmax(0, 1fr) 10px !important;
align-items: center !important;
gap: 12px !important;
border: 1px solid rgba(148, 163, 184, 0.18) !important;
border-radius: 16px !important;
background: rgba(255, 255, 255, 0.045) !important;
box-shadow: none !important;
overflow: hidden !important;
}
html body .shell.sidebar-expanded .sidebar .sidebar-account-avatar,
html body .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-avatar,
html body .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar .sidebar-account-avatar {
width: 52px !important;
height: 52px !important;
min-width: 52px !important;
min-height: 52px !important;
max-width: 52px !important;
max-height: 52px !important;
inline-size: 52px !important;
block-size: 52px !important;
flex: 0 0 52px !important;
aspect-ratio: 1 / 1 !important;
border: 0 !important;
outline: 0 !important;
border-radius: 999px !important;
background-color: #ddd8ff !important;
background-size: 132% 132% !important;
background-position: center 47% !important;
background-repeat: no-repeat !important;
box-shadow: none !important;
overflow: hidden !important;
transform: none !important;
}
html body .shell.sidebar-expanded .sidebar .sidebar-account-copy,
html body .shell.sidebar-expanded .sidebar .sidebar-account-copy strong {
min-width: 0 !important;
max-width: 100% !important;
color: rgba(248, 250, 252, 0.96) !important;
font-size: 15px !important;
font-weight: 900 !important;
line-height: 1.15 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
html body .shell.sidebar-collapsed .sidebar .sidebar-bottom-zone,
html body .shell.sidebar-collapsed:hover .sidebar .sidebar-bottom-zone,
html body .shell.sidebar-collapsed:focus-within .sidebar .sidebar-bottom-zone,
html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-bottom-zone,
html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .sidebar-bottom-zone {
width: 56px !important;
margin: auto auto 0 !important;
display: grid !important;
gap: 8px !important;
}
html body .shell.sidebar-collapsed .sidebar .sidebar-account-card,
html body .shell.sidebar-collapsed:hover .sidebar .sidebar-account-card,
html body .shell.sidebar-collapsed:focus-within .sidebar .sidebar-account-card,
html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-account-card,
html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .sidebar-account-card {
width: 56px !important;
padding: 10px 0 0 !important;
margin: 6px auto 0 !important;
border-top: 1px solid rgba(148, 163, 184, 0.18) !important;
}
html body .shell.sidebar-collapsed .sidebar .sidebar-account-button,
html body .shell.sidebar-collapsed:hover .sidebar .sidebar-account-button,
html body .shell.sidebar-collapsed:focus-within .sidebar .sidebar-account-button,
html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-account-button,
html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .sidebar-account-button {
width: 56px !important;
min-width: 56px !important;
max-width: 56px !important;
height: 56px !important;
min-height: 56px !important;
max-height: 56px !important;
padding: 0 !important;
display: grid !important;
place-items: center !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
overflow: visible !important;
}
html body .shell.sidebar-collapsed .sidebar .sidebar-account-avatar,
html body .shell.sidebar-collapsed:hover .sidebar .sidebar-account-avatar,
html body .shell.sidebar-collapsed:focus-within .sidebar .sidebar-account-avatar,
html body .shell.sidebar-collapsed:has(> .sidebar:hover) .sidebar .sidebar-account-avatar,
html body .shell.sidebar-collapsed:has(> .sidebar:focus-within) .sidebar .sidebar-account-avatar {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
max-width: 44px !important;
max-height: 44px !important;
inline-size: 44px !important;
block-size: 44px !important;
aspect-ratio: 1 / 1 !important;
border: 0 !important;
border-radius: 999px !important;
background-size: 132% 132% !important;
background-position: center 47% !important;
background-repeat: no-repeat !important;
box-shadow: none !important;
overflow: hidden !important;
}
html body .shell.sidebar-collapsed .sidebar .sidebar-account-copy,
html body .shell.sidebar-collapsed .sidebar .sidebar-account-copy strong,
html body .shell.sidebar-collapsed .sidebar .sidebar-account-button i {
display: none !important;
visibility: hidden !important;
}
}
html body[data-active-panel="interview"] #companionDock,
html body[data-active-panel="interview"] #companionMini,
html body[data-active-panel="interview"] #companionMiniBubble,
html body[data-active-panel="interview"] #companionMiniAvatar,
html body[data-active-panel="interview"] #companionMiniAvatarStage,
html body[data-active-panel="interview"] #companionMiniCharacter,
html body[data-active-panel="interview"] #companionPanel,
html body[data-active-panel="interview"] #companionAmbientStage,
html body[data-active-panel="interview"] #companionAmbientModel,
html body[data-active-panel="interview"] #companionAmbientCharacter,
html body[data-active-panel="interview"] .companion-dock,
html body[data-active-panel="interview"] .companion-mini,
html body[data-active-panel="interview"] .companion-mini-bubble,
html body[data-active-panel="interview"] .companion-avatar-stage,
html body[data-active-panel="interview"] .companion-ambient-stage,
html body[data-active-panel="audio"] #companionDock,
html body[data-active-panel="audio"] #companionMini,
html body[data-active-panel="audio"] #companionMiniBubble,
html body[data-active-panel="audio"] #companionMiniAvatar,
html body[data-active-panel="audio"] #companionMiniAvatarStage,
html body[data-active-panel="audio"] #companionMiniCharacter,
html body[data-active-panel="audio"] #companionPanel,
html body[data-active-panel="audio"] #companionAmbientStage,
html body[data-active-panel="audio"] #companionAmbientModel,
html body[data-active-panel="audio"] #companionAmbientCharacter,
html body[data-active-panel="audio"] .companion-dock,
html body[data-active-panel="audio"] .companion-mini,
html body[data-active-panel="audio"] .companion-mini-bubble,
html body[data-active-panel="audio"] .companion-avatar-stage,
html body[data-active-panel="audio"] .companion-ambient-stage,
html body[data-active-panel="debug-lab"] #companionDock,
html body[data-active-panel="debug-lab"] #companionMini,
html body[data-active-panel="debug-lab"] #companionMiniBubble,
html body[data-active-panel="debug-lab"] #companionMiniAvatar,
html body[data-active-panel="debug-lab"] #companionMiniAvatarStage,
html body[data-active-panel="debug-lab"] #companionMiniCharacter,
html body[data-active-panel="debug-lab"] #companionPanel,
html body[data-active-panel="debug-lab"] #companionAmbientStage,
html body[data-active-panel="debug-lab"] #companionAmbientModel,
html body[data-active-panel="debug-lab"] #companionAmbientCharacter,
html body[data-active-panel="debug-lab"] .companion-dock,
html body[data-active-panel="debug-lab"] .companion-mini,
html body[data-active-panel="debug-lab"] .companion-mini-bubble,
html body[data-active-panel="debug-lab"] .companion-avatar-stage,
html body[data-active-panel="debug-lab"] .companion-ambient-stage,
html body[data-active-panel="waveform"] #companionDock,
html body[data-active-panel="waveform"] #companionMini,
html body[data-active-panel="waveform"] #companionMiniBubble,
html body[data-active-panel="waveform"] #companionMiniAvatar,
html body[data-active-panel="waveform"] #companionMiniAvatarStage,
html body[data-active-panel="waveform"] #companionMiniCharacter,
html body[data-active-panel="waveform"] #companionPanel,
html body[data-active-panel="waveform"] #companionAmbientStage,
html body[data-active-panel="waveform"] #companionAmbientModel,
html body[data-active-panel="waveform"] #companionAmbientCharacter,
html body[data-active-panel="waveform"] .companion-dock,
html body[data-active-panel="waveform"] .companion-mini,
html body[data-active-panel="waveform"] .companion-mini-bubble,
html body[data-active-panel="waveform"] .companion-avatar-stage,
html body[data-active-panel="waveform"] .companion-ambient-stage,
html body:has(.panel[data-panel="interview"].active) #companionDock,
html body:has(.panel[data-panel="interview"].active) #companionMini,
html body:has(.panel[data-panel="interview"].active) #companionMiniBubble,
html body:has(.panel[data-panel="audio"].active) #companionDock,
html body:has(.panel[data-panel="audio"].active) #companionMini,
html body:has(.panel[data-panel="audio"].active) #companionMiniBubble,
html body:has(.panel[data-panel="debug-lab"].active) #companionDock,
html body:has(.panel[data-panel="debug-lab"].active) #companionMini,
html body:has(.panel[data-panel="debug-lab"].active) #companionMiniBubble,
html body:has(.panel[data-panel="waveform"].active) #companionDock,
html body:has(.panel[data-panel="waveform"].active) #companionMini,
html body:has(.panel[data-panel="waveform"].active) #companionMiniBubble {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Sidebar hard lock v299: keep desktop navigation stable and visually consistent. */
@media (min-width: 900px) {
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:focus-within,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover),
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) {
grid-template-columns: 236px minmax(0, 1fr) !important;
transition: none !important;
}
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:hover,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:focus-within,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:hover),
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-collapsed:has(> .sidebar:focus-within) {
grid-template-columns: 76px minmax(0, 1fr) !important;
transition: none !important;
}
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded > .sidebar,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover > .sidebar,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:focus-within > .sidebar,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) > .sidebar,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) > .sidebar {
width: 236px !important;
min-width: 236px !important;
max-width: 236px !important;
padding: 18px 18px 16px !important;
overflow: hidden !important;
transition: none !important;
}
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar > .brand,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar > .brand,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:focus-within .sidebar > .brand,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:focus-within) .sidebar > .brand {
width: 200px !important;
min-width: 200px !important;
max-width: 200px !important;
height: 150px !important;
min-height: 150px !important;
max-height: 150px !important;
margin: 0 0 12px !important;
padding: 14px 36px 0 10px !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
transition: none !important;
}
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar > .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar > .brand .brand-head.brand-head--main,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .brand-head.brand-head--main {
width: 184px !important;
min-width: 184px !important;
max-width: 184px !important;
height: 120px !important;
min-height: 120px !important;
max-height: 120px !important;
margin: 0 auto !important;
display: grid !important;
place-items: center !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar > .brand img.brand-logo.brand-main-logo,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar > .brand img.brand-logo.brand-main-logo,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand img.brand-logo.brand-main-logo {
width: 154px !important;
min-width: 154px !important;
max-width: 154px !important;
height: auto !important;
min-height: 0 !important;
max-height: 66px !important;
object-fit: contain !important;
display: block !important;
opacity: 1 !important;
filter: none !important;
transform: none !important;
}
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar > .brand .brand-subtitle-text,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar > .brand .brand-subtitle-text,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .brand-subtitle-text {
width: 184px !important;
min-width: 184px !important;
max-width: 184px !important;
margin: -8px auto 0 !important;
color: rgba(226, 232, 240, 0.9) !important;
font-size: 11px !important;
font-weight: 600 !important;
line-height: 1.55 !important;
letter-spacing: 0 !important;
text-align: center !important;
white-space: normal !important;
overflow: visible !important;
}
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar > .brand .sidebar-toggle,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar > .brand .sidebar-toggle,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar > .brand .sidebar-toggle {
top: 8px !important;
right: 0 !important;
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
min-height: 34px !important;
border: 1px solid rgba(226, 232, 240, 0.18) !important;
border-radius: 12px !important;
background: rgba(15, 23, 42, 0.34) !important;
box-shadow: none !important;
transform: none !important;
}
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .menu-item,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-link,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link {
width: 200px !important;
min-width: 200px !important;
max-width: 200px !important;
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
padding: 0 12px 0 44px !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
border: 0 !important;
box-shadow: none !important;
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1 !important;
transition: none !important;
}
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item::before,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link::before,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .menu-item::before,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-bottom-link::before,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .menu-item::before,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-bottom-link::before {
content: "" !important;
position: absolute !important;
left: 18px !important;
top: 50% !important;
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
min-height: 18px !important;
background: currentColor !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
transform: translateY(-50%) !important;
opacity: 0.92 !important;
-webkit-mask: var(--hw-sidebar-icon) center / 18px 18px no-repeat !important;
mask: var(--hw-sidebar-icon) center / 18px 18px no-repeat !important;
}
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .menu-item.is-active,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-bottom-link.is-active {
color: #fff !important;
background: linear-gradient(90deg, #3f8cff 0%, #7c4dff 58%, #a93cff 100%) !important;
border-radius: 12px !important;
box-shadow: 0 12px 28px rgba(124, 77, 255, 0.28) !important;
}
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-button,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-account-button,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-button {
width: 200px !important;
min-width: 200px !important;
max-width: 200px !important;
height: 74px !important;
min-height: 74px !important;
max-height: 74px !important;
padding: 10px 12px !important;
display: grid !important;
grid-template-columns: 52px minmax(0, 1fr) 10px !important;
gap: 12px !important;
align-items: center !important;
background: rgba(255, 255, 255, 0.045) !important;
border: 1px solid rgba(148, 163, 184, 0.18) !important;
border-radius: 16px !important;
box-shadow: none !important;
overflow: hidden !important;
transform: none !important;
}
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:hover .sidebar .sidebar-account-avatar,
html:not(.react-student-embedded) body[data-active-panel] .shell.sidebar-expanded:has(> .sidebar:hover) .sidebar .sidebar-account-avatar {
width: 52px !important;
height: 52px !important;
min-width: 52px !important;
min-height: 52px !important;
max-width: 52px !important;
max-height: 52px !important;
inline-size: 52px !important;
block-size: 52px !important;
flex: 0 0 52px !important;
aspect-ratio: 1 / 1 !important;
border: 0 !important;
outline: 0 !important;
border-radius: 999px !important;
background-color: #ddd8ff !important;
background-size: 132% 132% !important;
background-position: center 47% !important;
background-repeat: no-repeat !important;
box-shadow: none !important;
overflow: hidden !important;
transform: none !important;
}
}