@charset "UTF-8";

:root {
    color-scheme: dark;
    --bg: #03112d;
    --bg-deep: #010716;
    --panel: rgba(5, 26, 67, 0.76);
    --panel-strong: rgba(4, 31, 82, 0.9);
    --line: rgba(65, 155, 255, 0.42);
    --line-soft: rgba(122, 178, 255, 0.2);
    --text: #f7fbff;
    --muted: #b7c8e8;
    --blue: #22c8ff;
    --blue-strong: #3888ff;
    --pink: #d34bff;
    --green: #30f2cf;
    --shadow: 0 24px 80px rgba(0, 4, 22, 0.62);
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    margin: 0;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--text);
    background:
        radial-gradient(circle at 65% 5%, rgba(114, 59, 255, 0.34), transparent 21rem),
        radial-gradient(circle at 8% 38%, rgba(0, 181, 255, 0.18), transparent 22rem),
        linear-gradient(180deg, var(--bg-deep), var(--bg) 42%, #020b21);
}

body.screening-body {
    min-height: 100vh;
    background:
        linear-gradient(90deg, rgba(1, 7, 22, 0.42) 0%, rgba(1, 7, 22, 0.12) 45%, rgba(1, 7, 22, 0.28) 100%),
        linear-gradient(180deg, rgba(1, 7, 22, 0.04) 0%, rgba(1, 7, 22, 0.16) 62%, rgba(2, 11, 33, 0.72) 100%),
        url("/images/intro-space-background.png?v=20260604-full-page-bg");
    background-attachment: fixed;
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
}

body.is-vacancy-modal-open {
    overflow: hidden;
}

body.is-public-nav-open {
    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

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

.page-shell {
    width: min(100%, 1760px);
    min-height: 100vh;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(116, 163, 255, 0.16);
    background: #020b21;
    box-shadow: var(--shadow);
}

.intro-block {
    --intro-background:
        linear-gradient(90deg, rgba(1, 7, 22, 0.42) 0%, rgba(1, 7, 22, 0.08) 44%, rgba(1, 7, 22, 0.24) 100%),
        linear-gradient(180deg, rgba(1, 7, 22, 0.18) 0%, rgba(1, 7, 22, 0.06) 62%, rgba(2, 11, 35, 0.62) 100%),
        url("/images/intro-space-background.png?v=20260604-screening-assets");
    position: relative;
    isolation: isolate;
    min-height: min(64rem, 100vh);
    background: var(--intro-background);
    background-position: center top;
    background-size: cover;
}

.intro-block::after {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    content: "";
}

.intro-block::after {
    top: auto;
    height: 11rem;
    background: linear-gradient(180deg, transparent, rgba(2, 11, 35, 0.82));
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
    height: 5rem;
    padding: 0 clamp(1rem, 4vw, 5.5rem);
    background: linear-gradient(180deg, rgba(1, 8, 24, 0.86), rgba(1, 8, 24, 0.52));
    backdrop-filter: blur(18px);
}

.site-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    justify-content: flex-start;
    gap: 0.55rem;
    width: clamp(11.5rem, 15vw, 15rem);
    height: 3.75rem;
    min-width: 0;
    color: var(--text);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.site-logo__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 0 16px rgba(34, 200, 255, 0.26));
}

.site-logo__icon {
    display: block;
    flex: 0 0 auto;
    width: 2.5rem !important;
    height: 2.5rem !important;
    max-width: 2.5rem;
    max-height: 2.5rem;
    object-fit: contain;
    background: transparent;
}

.site-logo__text {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25rem;
    color: var(--text);
    font-size: 1.28rem;
    font-weight: 800;
    line-height: 1;
}

.site-logo__name {
    color: var(--text);
}

.site-logo__accent {
    color: var(--blue);
}

.footer-logo {
    height: 3.75rem;
}

.footer-logo .site-logo__icon {
    width: 2.5rem !important;
    height: 2.5rem !important;
}

.main-nav,
.header-actions,
.hero-actions,
.trust-list,
.benefits-section,
.legal-line {
    display: flex;
    align-items: center;
}

.main-nav {
    justify-content: center;
    gap: clamp(1rem, 2.5vw, 2.5rem);
    color: var(--text);
    font-weight: 600;
}

.main-nav a {
    color: rgba(247, 251, 255, 0.84);
}

.main-nav a:hover {
    color: var(--blue);
}

.header-actions,
.hero-actions {
    gap: 1rem;
}

.button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border: 1px solid rgba(140, 184, 255, 0.58);
    border-radius: 0.65rem;
    padding: 0.75rem 1.45rem;
    color: var(--text);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.button-primary {
    border-color: transparent;
    background: linear-gradient(120deg, var(--pink), var(--blue));
    box-shadow: 0 0 28px rgba(34, 200, 255, 0.32);
}

.button-ghost {
    background: rgba(7, 20, 55, 0.58);
}

.button-large {
    min-height: 3.55rem;
    border-radius: 0.9rem;
    padding-inline: 1.8rem;
}

.nav-toggle {
    display: none;
}

.hero-section {
    position: relative;
    min-height: 40rem;
    padding: clamp(2rem, 4vw, 4.75rem) clamp(1rem, 4vw, 5.5rem) 2rem;
}

.hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(19rem, 0.72fr) minmax(22rem, 0.92fr);
    align-items: center;
    gap: clamp(1.25rem, 2.4vw, 2.6rem);
}

.hero-copy,
.hero-visual,
.insights-grid {
    min-width: 0;
}

.eyebrow {
    margin: 0 0 1rem;
    color: var(--blue);
    font-weight: 800;
    text-transform: uppercase;
}

.hero-copy h1 {
    max-width: 100%;
    margin: 0;
    font-size: clamp(3.1rem, 4.2vw, 4.8rem);
    line-height: 1.02;
    hyphens: auto;
    overflow-wrap: normal;
    text-wrap: balance;
}

.hero-copy h1::first-line {
    color: var(--text);
}

.hero-subtitle {
    max-width: 34rem;
    margin: 1.5rem 0 2rem;
    color: var(--muted);
    font-size: clamp(1.05rem, 1.45vw, 1.45rem);
    line-height: 1.5;
}

.trust-list {
    flex-wrap: wrap;
    gap: 1.6rem;
    padding: 0;
    margin: 2.4rem 0 0;
    list-style: none;
}

.trust-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 10rem;
}

.trust-list strong,
.trust-list small {
    display: block;
}

.trust-list small {
    color: var(--muted);
}

.trust-icon {
    flex: 0 0 auto;
    width: 2rem;
    aspect-ratio: 1;
    border: 1px solid rgba(43, 205, 255, 0.75);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(43, 205, 255, 0.5), rgba(16, 41, 92, 0.4));
}

.hero-visual {
    position: relative;
    display: grid;
    min-height: 31rem;
    place-items: center;
}

.hero-visual::before {
    display: none;
    content: "";
}

.hero-visual img {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.visual-orbit {
    display: none;
}

.visual-card {
    display: none;
}

.visual-card strong {
    font-size: 2rem;
    color: var(--blue);
}

.visual-card span {
    color: var(--muted);
    font-size: 0.78rem;
}

.planet {
    display: none;
}

.planet-top {
    top: 0.5rem;
    right: 7%;
    width: 6rem;
    opacity: 0.9;
}

.planet-side {
    right: -1rem;
    bottom: 8.5rem;
    width: 3rem;
    opacity: 0.72;
}

.insights-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.insight-card,
.workflow-panel,
.benefit-card,
.mvp-card,
.site-footer {
    border: 1px solid var(--line);
    background: linear-gradient(150deg, var(--panel), rgba(5, 17, 47, 0.72));
    box-shadow: inset 0 0 28px rgba(46, 140, 255, 0.08);
}

.insight-card {
    min-width: 0;
    min-height: 8.3rem;
    border-radius: 0.9rem;
    padding: 1rem;
}

.accent-card {
    border-color: rgba(48, 242, 207, 0.82);
}

.card-label {
    display: block;
    margin-bottom: 0.7rem;
    color: #dfeaff;
    font-weight: 800;
}

.score-line {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.score-line strong {
    min-width: 0;
    font-size: clamp(2rem, 2.8vw, 3rem);
    line-height: 0.9;
    overflow-wrap: anywhere;
}

.score-line span,
.insight-card p {
    color: var(--muted);
}

.accent-card p {
    color: var(--green);
}

.skills-card,
.evidence-card {
    grid-column: span 2;
}

.skill-row,
.evidence-row {
    display: grid;
    grid-template-columns: minmax(6rem, 1fr) minmax(6rem, 1.1fr) 2.4rem;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.5rem;
    color: var(--muted);
    font-size: 0.9rem;
}

meter {
    width: 100%;
    height: 0.45rem;
}

meter::-webkit-meter-bar {
    border: 0;
    border-radius: 999px;
    background: rgba(99, 153, 229, 0.22);
}

meter::-webkit-meter-optimum-value {
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pink), var(--blue), var(--green));
}

.questions-card ol {
    display: grid;
    gap: 0.65rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.questions-card li {
    display: grid;
    grid-template-columns: 1.6rem 1fr;
    gap: 0.65rem;
    align-items: start;
}

.questions-card li span {
    display: grid;
    width: 1.6rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 0.35rem;
    color: var(--blue);
    font-weight: 800;
}

.questions-card p {
    margin: 0;
    color: var(--text);
    font-size: 0.9rem;
}

.link-button {
    margin-top: 0.85rem;
    border: 0;
    padding: 0;
    color: var(--blue);
    background: transparent;
    cursor: pointer;
    font-weight: 700;
}

blockquote {
    margin: 1rem 0 0;
    border-left: 4px solid var(--blue);
    padding: 0.7rem 0 0.7rem 1rem;
    color: var(--muted);
    background: rgba(68, 130, 255, 0.12);
}

.workflow-section,
.benefits-section,
.site-footer {
    margin-inline: clamp(1rem, 4vw, 5.5rem);
}

.section-heading {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.4rem;
    margin: 0 0 0.6rem;
}

.section-heading span {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--blue), transparent);
}

.section-heading h2 {
    margin: 0;
    font-size: clamp(1.6rem, 2.4vw, 2.3rem);
}

.workflow-panel {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    border-radius: 0.95rem;
    padding: 1.35rem;
}

.step-card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.85rem;
    min-width: 0;
}

.step-number {
    display: grid;
    width: 1.9rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid var(--blue);
    border-radius: 50%;
    color: var(--blue);
    font-weight: 800;
}

.step-card h3,
.benefit-card h3,
.mvp-card h3 {
    margin: 0 0 0.55rem;
}

.step-card p,
.benefit-card p,
.mvp-card p,
.site-footer p {
    margin: 0;
    color: var(--muted);
    line-height: 1.55;
}

.benefits-section {
    display: grid;
    grid-template-columns: repeat(4, minmax(12rem, 1fr)) minmax(22rem, 1.9fr);
    gap: 1rem;
    padding-block: 1.5rem 2rem;
}

.benefit-card,
.mvp-card {
    min-width: 0;
    border-radius: 0.85rem;
    padding: 1.3rem;
}

.benefit-card {
    display: grid;
    gap: 0.7rem;
}

.benefit-icon {
    display: block;
    width: 4rem;
    height: 4rem;
    object-fit: contain;
}

.mvp-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 8rem;
    align-items: end;
    overflow: hidden;
}

.mvp-card h3 {
    color: var(--blue);
    font-size: 1.55rem;
}

.mvp-card ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0;
    margin: 0.85rem 0 1rem;
    list-style: none;
}

.mvp-card li {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 0.35rem 0.75rem;
    background: rgba(54, 115, 255, 0.22);
}

.mvp-card::after {
    display: block;
    width: 15rem;
    max-width: none;
    aspect-ratio: 1;
    content: "";
    background-image: url("/images/bayun-reference.png");
    background-position: 50% 31%;
    background-size: 300%;
    clip-path: ellipse(33% 42% at 50% 48%);
    transform: translate(1.2rem, 1.3rem);
}

.mvp-card img {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.site-footer {
    display: grid;
    grid-template-columns: 1.2fr 1.7fr 1.25fr;
    gap: 2rem;
    margin-bottom: 1.5rem;
    border-color: var(--line-soft);
    border-radius: 0;
    border-inline: 0;
    border-bottom: 0;
    padding: 1.8rem 0 0;
    background: transparent;
}

.footer-nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.3rem;
}

.footer-nav div {
    display: grid;
    gap: 0.55rem;
}

.footer-nav a,
.legal-line,
.subscribe-form {
    color: var(--muted);
}

.subscribe-form label {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--text);
    font-weight: 800;
}

.subscribe-form div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.5rem;
}

.subscribe-form input {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 0.65rem;
    padding: 0.85rem 1rem;
    color: var(--text);
    background: rgba(4, 18, 51, 0.78);
}

.legal-line {
    grid-column: 1 / -1;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--line-soft);
    padding: 1.1rem 0 0;
    font-size: 0.9rem;
}

@media (max-width: 1180px) {
    .site-header {
        grid-template-columns: auto auto;
    }

    .nav-toggle {
        display: grid;
        justify-self: end;
        gap: 0.32rem;
        width: 2.7rem;
        aspect-ratio: 1;
        place-content: center;
        border: 1px solid var(--line);
        border-radius: 0.6rem;
        background: rgba(8, 23, 59, 0.84);
    }

    .nav-toggle span {
        display: block;
        width: 1.2rem;
        height: 2px;
        border-radius: 999px;
        background: var(--text);
    }

    .main-nav,
    .header-actions {
        display: none;
    }

    .site-header.is-open .main-nav,
    .site-header.is-open .header-actions {
        display: flex;
        grid-column: 1 / -1;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .hero-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .hero-visual {
        display: none;
    }

    .insights-grid {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .skills-card,
    .evidence-card {
        grid-column: span 2;
    }

    .workflow-panel,
    .benefits-section {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mvp-card {
        grid-column: span 2;
    }

    .site-footer {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 1181px) and (max-width: 1440px) {
    .hero-grid {
        grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.62fr) minmax(20rem, 0.86fr);
        gap: 1.25rem;
    }

    .hero-copy h1 {
        font-size: clamp(3rem, 4vw, 4.1rem);
    }

    .button-large {
        padding-inline: 1.35rem;
    }

    .hero-visual::before {
        width: min(100%, 21rem);
    }

    .visual-orbit {
        width: min(94%, 21rem);
    }

    .score-line strong {
        font-size: clamp(1.8rem, 2.4vw, 2.55rem);
    }
}

@media (max-width: 760px) {
    .site-header,
    .hero-section {
        padding-inline: 1rem;
    }

    .site-header {
        height: 4rem;
    }

    .site-logo {
        width: 9.5rem;
        height: 2.4rem;
    }

    .site-logo__icon {
        width: 2rem !important;
        height: 2rem !important;
        max-width: 2rem;
        max-height: 2rem;
    }

    .site-logo__text {
        font-size: 1.08rem;
    }

    .hero-section {
        min-height: auto;
        padding-top: 1.4rem;
    }

    .intro-block {
        background-position: 58% top;
    }

    .hero-grid,
    .insights-grid,
    .workflow-panel,
    .benefits-section,
    .footer-nav,
    .subscribe-form div {
        grid-template-columns: 1fr;
    }

    .hero-copy h1 {
        max-width: 11ch;
        font-size: 3rem;
    }

    .hero-actions,
    .trust-list {
        align-items: stretch;
        flex-direction: column;
    }

    .button {
        width: 100%;
    }

    .hero-visual {
        display: none;
    }

    .visual-card {
        right: 6%;
        bottom: 18%;
        width: 4.8rem;
    }

    .skills-card,
    .evidence-card,
    .mvp-card {
        grid-column: auto;
    }

    .skill-row,
    .evidence-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .section-heading {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .section-heading span {
        display: none;
    }

    .mvp-card {
        grid-template-columns: 1fr;
    }

    .mvp-card::after {
        justify-self: end;
    }

    .legal-line {
        flex-direction: column;
        align-items: flex-start;
    }
}

.screening-shell {
    width: 100%;
    max-width: none;
    overflow-x: hidden;
    overflow-y: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.screening-page {
    position: relative;
    min-height: 100vh;
    isolation: isolate;
    background: transparent;
}

.screening-page::before,
.screening-page::after {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    content: "";
}

.screening-page::before {
    inset: 5rem 0 0;
    opacity: 0.38;
    background:
        linear-gradient(90deg, rgba(34, 200, 255, 0.12) 1px, transparent 1px) 0 0 / 4.8rem 4.8rem,
        linear-gradient(180deg, rgba(34, 200, 255, 0.09) 1px, transparent 1px) 0 0 / 4.8rem 4.8rem;
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.38), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.42));
}

.screening-page::after {
    inset: auto 0 0;
    height: 18rem;
    background: linear-gradient(180deg, transparent, rgba(2, 11, 33, 0.94));
}

.app-header {
    background: linear-gradient(180deg, rgba(3, 10, 30, 0.84), rgba(3, 10, 30, 0.34));
}

.app-header .main-nav {
    gap: clamp(1.2rem, 3vw, 3.2rem);
}

.app-header-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
}

.icon-button,
.profile-button {
    position: relative;
    display: inline-grid;
    flex: 0 0 auto;
    width: 2.7rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(63, 143, 255, 0.62);
    border-radius: 50%;
    color: var(--text);
    background: rgba(5, 18, 49, 0.62);
    cursor: pointer;
}

.icon-button:hover,
.profile-button:hover {
    border-color: var(--blue);
    box-shadow: 0 0 22px rgba(34, 200, 255, 0.18);
}

.notification-button {
    border-color: transparent;
    background: transparent;
}

.notification-badge {
    position: absolute;
    top: 0.1rem;
    right: 0.1rem;
    display: grid;
    min-width: 1.05rem;
    height: 1.05rem;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: #f13c45;
    font-size: 0.68rem;
    font-weight: 800;
    line-height: 1;
}

.profile-button {
    color: #cce5ff;
    font-size: 1rem;
    font-weight: 800;
}

.chevron-button {
    width: 1.8rem;
    border: 0;
    background: transparent;
}

.chevron-button span {
    width: 0.55rem;
    height: 0.55rem;
    border-right: 2px solid var(--blue);
    border-bottom: 2px solid var(--blue);
    transform: translateY(-0.12rem) rotate(45deg);
}

.bell-shape {
    position: relative;
    width: 1.18rem;
    height: 1.25rem;
    border: 2px solid #bcd7ff;
    border-bottom: 0;
    border-radius: 1rem 1rem 0.28rem 0.28rem;
}

.bell-shape::before,
.bell-shape::after {
    position: absolute;
    left: 50%;
    content: "";
    transform: translateX(-50%);
}

.bell-shape::before {
    top: -0.32rem;
    width: 0.32rem;
    height: 0.32rem;
    border-radius: 50%;
    background: #bcd7ff;
}

.bell-shape::after {
    bottom: -0.42rem;
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: #bcd7ff;
}

.screening-session {
    padding: clamp(1rem, 2.3vw, 2rem) clamp(1rem, 4vw, 5.5rem) 1.25rem;
}

.screening-heading {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(22rem, 0.98fr);
    gap: 1rem clamp(1.2rem, 3vw, 3rem);
    align-items: end;
    margin-bottom: 1.2rem;
}

.screening-title-block {
    min-width: 0;
}

.screening-title-block h1 {
    margin: 0;
    font-size: clamp(2.5rem, 4vw, 3.7rem);
    line-height: 1.04;
    text-wrap: balance;
}

.screening-title-block h1 span {
    color: var(--blue-strong);
}

.screening-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem 1.2rem;
    padding: 0;
    margin: 0.7rem 0 0;
    color: rgba(247, 251, 255, 0.9);
    font-size: clamp(0.95rem, 1.3vw, 1.12rem);
    list-style: none;
}

.screening-meta li {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
}

.screening-meta li + li::before {
    width: 0.22rem;
    aspect-ratio: 1;
    margin-right: 0.55rem;
    border-radius: 50%;
    background: var(--blue);
    content: "";
}

.screening-meta span {
    color: rgba(247, 251, 255, 0.82);
}

.screening-meta strong {
    color: var(--text);
    font-weight: 500;
}

.screening-progress {
    display: grid;
    grid-column: 1;
    grid-template-columns: 1fr auto;
    gap: 0.9rem;
    align-items: center;
    max-width: 64rem;
}

.screening-progress__track {
    height: 0.72rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(82, 137, 219, 0.24);
    box-shadow: inset 0 0 12px rgba(1, 7, 22, 0.54);
}

.screening-progress__track span {
    display: block;
    width: var(--progress);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--pink), var(--blue));
    box-shadow: 0 0 22px rgba(34, 200, 255, 0.45);
    transition: width 360ms ease;
}

.screening-progress__status {
    grid-column: 1 / -1;
    color: rgba(226, 239, 255, 0.86);
    font-size: 0.84rem;
}

.screening-followup-notice {
    margin: 0 0 1rem;
    border: 1px solid rgba(95, 167, 255, 0.36);
    border-radius: 0.65rem;
    padding: 0.8rem 1rem;
    color: #dbeeff;
    background: rgba(28, 89, 164, 0.14);
}

.screening-progress strong {
    color: #9ed7ff;
    font-size: 0.98rem;
}

.screening-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(21rem, 0.98fr);
    gap: clamp(1rem, 2.6vw, 2.5rem);
    align-items: start;
}

.screening-start-panel {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: min(100%, 58rem);
    margin: 0 0 1.1rem;
    border: 1px solid rgba(65, 155, 255, 0.35);
    border-radius: 0.9rem;
    padding: clamp(1rem, 2vw, 1.35rem);
    background: linear-gradient(145deg, rgba(5, 23, 61, 0.86), rgba(4, 13, 39, 0.75));
    box-shadow: inset 0 0 28px rgba(46, 140, 255, 0.08), 0 18px 52px rgba(0, 5, 24, 0.28);
}

.screening-start-panel[hidden] {
    display: none;
}

.screening-start-panel h2 {
    margin: 0.2rem 0 0;
    font-size: 1.35rem;
    line-height: 1.2;
}

.screening-session.is-not-started .voice-card,
.screening-session.is-not-started .transcript-block,
.screening-session.is-not-started .qa-block,
.screening-session.is-finished .voice-card,
.screening-session.is-finished .transcript-block {
    opacity: 0.72;
}

.settings-session,
.vacancies-session,
.interviews-session {
    padding: clamp(1rem, 2.3vw, 2rem) clamp(1rem, 4vw, 5.5rem) 1.25rem;
}

.settings-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.settings-heading h1 {
    margin: 0;
    font-size: clamp(2.3rem, 3.6vw, 3.4rem);
    line-height: 1.05;
}

.settings-saved {
    margin: 0;
    border: 1px solid rgba(48, 242, 207, 0.62);
    border-radius: 999px;
    padding: 0.58rem 0.9rem;
    color: #63ffbe;
    background: rgba(11, 110, 96, 0.18);
    font-size: 0.9rem;
    font-weight: 800;
}

.settings-error {
    width: min(100%, 54rem);
    margin: 0 0 1rem;
    border: 1px solid rgba(255, 91, 124, 0.5);
    border-radius: 0.75rem;
    padding: 0.8rem 1rem;
    color: #ffb6c4;
    background: rgba(120, 13, 39, 0.22);
    font-weight: 800;
}

.settings-panel {
    width: min(100%, 54rem);
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    padding: clamp(1rem, 2vw, 1.6rem);
    background: linear-gradient(150deg, rgba(5, 23, 61, 0.86), rgba(4, 13, 39, 0.75));
    box-shadow: inset 0 0 28px rgba(46, 140, 255, 0.08), 0 18px 52px rgba(0, 5, 24, 0.28);
}

.settings-panel fieldset {
    display: grid;
    gap: 1rem;
    margin: 0;
    border: 0;
    padding: 0;
}

.settings-panel legend {
    margin-bottom: 0.95rem;
    color: #f8fbff;
    font-size: 1.12rem;
    font-weight: 800;
}

.settings-panel fieldset + fieldset {
    margin-top: 1.5rem;
}

.settings-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(13rem, 16rem);
    gap: 1rem;
    align-items: center;
    border: 1px solid rgba(65, 155, 255, 0.24);
    border-radius: 0.75rem;
    padding: 0.9rem;
    color: #dfeaff;
    background: rgba(4, 19, 51, 0.5);
    font-weight: 700;
}

.settings-input-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(65, 155, 255, 0.38);
    border-radius: 0.6rem;
    background: rgba(3, 13, 37, 0.72);
}

.settings-input-row:focus-within {
    border-color: #2ee6ff;
    box-shadow: 0 0 0 3px rgba(46, 230, 255, 0.12);
}

.settings-input-row input,
.settings-input-row select,
.settings-input-row textarea {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    padding: 0.72rem 0.8rem;
    color: var(--text);
    background: transparent;
    font-weight: 800;
}

.settings-input-row select {
    cursor: pointer;
    color: var(--text);
    background-color: rgba(3, 13, 37, 0.98);
}

.settings-input-row select option {
    color: #f7fbff;
    background-color: #06183c;
}

.settings-input-row select option:checked {
    color: #ffffff;
    background-color: #1766c7;
}

.settings-input-row select option:disabled {
    color: #8ea4cd;
}

.settings-input-row textarea {
    min-height: 8rem;
    line-height: 1.45;
    resize: vertical;
}

.settings-input-row--wide {
    grid-template-columns: minmax(0, 1fr);
}

.settings-input-row > span {
    padding-right: 0.8rem;
    color: #a8cfff;
    font-size: 0.88rem;
    font-weight: 800;
}

.settings-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.85rem;
    margin-top: 1.25rem;
}

.settings-feedback {
    width: min(100%, 72rem);
    margin-bottom: 1rem;
}

.settings-users {
    display: grid;
    width: min(100%, 72rem);
    gap: 1rem;
    margin-top: clamp(2rem, 4vw, 3.5rem);
    scroll-margin-top: 6rem;
}

.settings-users__heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.25rem;
}

.settings-users__heading h2 {
    margin: 0.2rem 0 0;
    color: #f7fbff;
    font-size: clamp(1.65rem, 2.5vw, 2.2rem);
}

.settings-users__heading p:last-child {
    max-width: 58rem;
    margin: 0.55rem 0 0;
    color: #9db4dc;
    line-height: 1.55;
}

.settings-users__count {
    flex: 0 0 auto;
    border: 1px solid rgba(49, 206, 255, 0.36);
    border-radius: 999px;
    padding: 0.5rem 0.82rem;
    color: #b9deff;
    background: rgba(19, 94, 158, 0.18);
    font-size: 0.83rem;
    font-weight: 800;
    white-space: nowrap;
}

.settings-user-create {
    width: 100%;
}

.settings-user-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
}

.settings-user-field {
    grid-template-columns: minmax(7.5rem, 0.65fr) minmax(0, 1.35fr);
}

.settings-role-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.settings-role-options label {
    position: relative;
    display: inline-flex;
    cursor: pointer;
}

.settings-role-options input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.settings-role-options label > span {
    border: 1px solid rgba(79, 159, 255, 0.34);
    border-radius: 999px;
    padding: 0.48rem 0.72rem;
    color: #afc5e9;
    background: rgba(4, 18, 49, 0.72);
    font-size: 0.82rem;
    font-weight: 800;
    transition: 160ms ease;
}

.settings-role-options input:checked + span,
.settings-role-options input[type="hidden"] + input:disabled:checked + span {
    border-color: rgba(28, 224, 220, 0.7);
    color: #eaffff;
    background: linear-gradient(135deg, rgba(20, 170, 213, 0.28), rgba(80, 85, 242, 0.26));
    box-shadow: inset 0 0 16px rgba(26, 212, 232, 0.08);
}

.settings-role-options input:focus-visible + span {
    outline: 2px solid #2ee6ff;
    outline-offset: 3px;
}

.settings-role-options input:disabled + span {
    cursor: not-allowed;
    opacity: 0.76;
}

.settings-user-list {
    display: grid;
    gap: 0.9rem;
}

.settings-user-card {
    display: grid;
    gap: 1rem;
    border: 1px solid rgba(61, 148, 255, 0.3);
    border-radius: 0.95rem;
    padding: clamp(1rem, 2vw, 1.35rem);
    background: linear-gradient(145deg, rgba(6, 27, 68, 0.9), rgba(3, 13, 39, 0.8));
    box-shadow: inset 0 0 30px rgba(37, 139, 255, 0.07), 0 16px 42px rgba(0, 5, 24, 0.24);
}

.settings-user-card__head,
.settings-user-card__identity,
.settings-user-badges {
    display: flex;
    align-items: center;
}

.settings-user-card__head {
    justify-content: space-between;
    gap: 1rem;
}

.settings-user-card__identity {
    min-width: 0;
    gap: 0.75rem;
}

.settings-user-card__identity > div:last-child {
    min-width: 0;
}

.settings-user-avatar {
    display: grid;
    flex: 0 0 2.65rem;
    width: 2.65rem;
    height: 2.65rem;
    place-items: center;
    border: 1px solid rgba(39, 221, 244, 0.58);
    border-radius: 0.78rem;
    color: #f5ffff;
    background: linear-gradient(145deg, rgba(24, 173, 213, 0.42), rgba(65, 76, 223, 0.42));
    font-weight: 900;
}

.settings-user-card__identity h3 {
    overflow: hidden;
    margin: 0;
    color: #f7fbff;
    font-size: 1.05rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings-user-card__identity p {
    overflow-wrap: anywhere;
    margin: 0.22rem 0 0;
    color: #82a2d2;
    font-size: 0.84rem;
}

.settings-user-badges {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.45rem;
}

.settings-user-status,
.settings-user-system {
    border: 1px solid rgba(83, 139, 214, 0.34);
    border-radius: 999px;
    padding: 0.34rem 0.58rem;
    color: #aac2e8;
    background: rgba(28, 60, 111, 0.24);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.02em;
}

.settings-user-status.is-enabled {
    border-color: rgba(39, 230, 178, 0.4);
    color: #68f0c0;
    background: rgba(13, 114, 82, 0.2);
}

.settings-user-status.is-disabled {
    border-color: rgba(255, 112, 139, 0.38);
    color: #ffadbd;
    background: rgba(125, 24, 50, 0.2);
}

.settings-user-editor {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.8rem;
    border-top: 1px solid rgba(68, 137, 225, 0.18);
    padding-top: 1rem;
}

.settings-user-control {
    display: grid;
    min-width: 0;
    gap: 0.42rem;
    color: #bed0ed;
    font-size: 0.78rem;
    font-weight: 800;
}

.settings-user-control > input {
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(65, 155, 255, 0.38);
    border-radius: 0.62rem;
    outline: 0;
    padding: 0.72rem 0.8rem;
    color: var(--text);
    background: rgba(3, 13, 37, 0.72);
    font: inherit;
}

.settings-user-control > input:focus-visible {
    border-color: #2ee6ff;
    box-shadow: 0 0 0 3px rgba(46, 230, 255, 0.12);
}

.settings-user-enabled {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    align-self: end;
    min-height: 2.65rem;
    color: #c9d9f2;
    font-size: 0.82rem;
    font-weight: 800;
}

.settings-user-enabled input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: #24d9d4;
}

.settings-user-save {
    align-self: end;
    justify-self: end;
}

.settings-user-delete {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid rgba(68, 137, 225, 0.14);
    padding-top: 0.8rem;
}

@media (max-width: 820px) {
    .settings-users__heading,
    .settings-user-card__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .settings-user-grid,
    .settings-user-editor {
        grid-template-columns: 1fr;
    }

    .settings-user-field {
        grid-template-columns: 1fr;
    }

    .settings-user-badges {
        justify-content: flex-start;
    }

    .settings-user-save,
    .settings-user-delete .button {
        width: 100%;
        justify-self: stretch;
    }
}

@media (max-width: 520px) {
    .settings-users,
    .settings-user-card,
    .settings-user-create {
        min-width: 0;
        max-width: 100%;
    }

    .settings-role-options {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-role-options label > span {
        width: 100%;
        text-align: center;
    }
}

.vacancy-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.vacancy-list-panel {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 0.9rem;
    padding: clamp(1rem, 2vw, 1.35rem);
    background: linear-gradient(150deg, rgba(5, 23, 61, 0.86), rgba(4, 13, 39, 0.75));
    box-shadow: inset 0 0 28px rgba(46, 140, 255, 0.08), 0 18px 52px rgba(0, 5, 24, 0.28);
}

.vacancy-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.vacancy-section-head h2 {
    margin: 0;
    color: #f8fbff;
    font-size: 1.15rem;
}

.vacancy-section-head p {
    margin: 0.25rem 0 0;
    color: #8ea4cd;
    font-size: 0.9rem;
}

.vacancy-list {
    display: grid;
    gap: 0.85rem;
}

.vacancy-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: start;
    border: 1px solid rgba(65, 155, 255, 0.24);
    border-radius: 0.85rem;
    padding: 1rem;
    background: rgba(4, 19, 51, 0.5);
}

.vacancy-card__body {
    min-width: 0;
    display: grid;
    gap: 0.55rem;
}

.vacancy-card h3 {
    margin: 0;
    color: #f8fbff;
    font-size: 1.1rem;
}

.vacancy-sphere,
.vacancy-description,
.vacancy-empty {
    margin: 0;
    color: #a9bbdd;
    line-height: 1.5;
}

.vacancy-sphere {
    margin-top: 0.2rem;
    color: #63ffbe;
    font-size: 0.88rem;
    font-weight: 800;
}

.vacancy-grades,
.grade-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.vacancy-grades span,
.grade-options label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid rgba(34, 200, 255, 0.38);
    border-radius: 999px;
    padding: 0.42rem 0.62rem;
    color: #cbe8ff;
    background: rgba(34, 200, 255, 0.08);
    font-size: 0.85rem;
    font-weight: 800;
}

.grade-options label {
    cursor: pointer;
}

.grade-options input {
    width: 1rem;
    height: 1rem;
    accent-color: var(--blue);
}

.vacancy-card__actions {
    display: flex;
    gap: 0.55rem;
    align-items: center;
}

.vacancy-card__actions form {
    margin: 0;
}

.interview-list {
    display: grid;
    gap: 0.85rem;
}

.interview-card {
    grid-template-columns: minmax(0, 1fr);
}

.interview-card__head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.interview-status {
    flex: 0 0 auto;
    border: 1px solid rgba(48, 242, 207, 0.38);
    border-radius: 999px;
    padding: 0.35rem 0.58rem;
    color: #63ffbe;
    background: rgba(48, 242, 207, 0.08);
    font-size: 0.82rem;
    font-weight: 800;
}

.interview-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0;
}

.interview-details div {
    min-width: 0;
    border: 1px solid rgba(65, 155, 255, 0.2);
    border-radius: 0.65rem;
    padding: 0.65rem 0.75rem;
    background: rgba(3, 13, 37, 0.48);
}

.interview-details dt {
    margin: 0 0 0.25rem;
    color: #8ea4cd;
    font-size: 0.76rem;
    font-weight: 800;
}

.interview-details dd {
    min-width: 0;
    margin: 0;
    color: #f8fbff;
    font-size: 0.94rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.interview-details__link {
    grid-column: 1 / -1;
}

.interview-details__link a {
    color: var(--blue);
}

.vacancy-form {
    width: 100%;
}

.vacancy-modal {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 3vw, 2rem);
}

.vacancy-modal[hidden] {
    display: none;
}

.vacancy-modal__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 20%, rgba(34, 200, 255, 0.18), transparent 34rem),
        rgba(1, 7, 22, 0.78);
    backdrop-filter: blur(8px);
}

.vacancy-modal__panel {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1rem;
    width: min(100%, 46rem);
    max-height: min(48rem, calc(100vh - 2rem));
    overflow: auto;
    border: 1px solid rgba(65, 155, 255, 0.4);
    border-radius: 0.95rem;
    padding: clamp(1rem, 2vw, 1.35rem);
    background: linear-gradient(150deg, rgba(5, 23, 61, 0.98), rgba(4, 13, 39, 0.96));
    box-shadow: 0 28px 80px rgba(0, 5, 24, 0.52), inset 0 0 30px rgba(46, 140, 255, 0.1);
}

.vacancy-modal__head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.vacancy-modal__head h2 {
    margin: 0;
    color: #f8fbff;
    font-size: clamp(1.55rem, 3vw, 2.2rem);
    line-height: 1.08;
}

.vacancy-modal__close {
    flex: 0 0 auto;
    color: #dce8ff;
    font-size: 1.3rem;
}

.vacancy-modal .settings-panel {
    width: 100%;
    box-shadow: none;
}

.vacancy-modal__error {
    width: 100%;
    margin: 0;
}

.vacancy-field {
    grid-template-columns: 11rem minmax(0, 1fr);
}

.vacancy-field--grades {
    align-items: start;
}

.button-danger {
    border-color: rgba(255, 91, 124, 0.42);
    color: #ffb6c4;
}

.button-danger:hover {
    border-color: rgba(255, 91, 124, 0.72);
    background: rgba(120, 13, 39, 0.18);
}

.interview-panel,
.side-card,
.stage-track,
.screening-footnote {
    border: 1px solid var(--line);
    background: linear-gradient(150deg, rgba(5, 23, 61, 0.86), rgba(4, 13, 39, 0.75));
    box-shadow: inset 0 0 28px rgba(46, 140, 255, 0.08), 0 18px 52px rgba(0, 5, 24, 0.28);
}

.interview-panel {
    min-width: 0;
    border-radius: 0.9rem;
    padding: clamp(1rem, 2vw, 1.55rem);
}

.question-kicker {
    margin: 0 0 0.75rem;
    color: #a8cfff;
    font-weight: 500;
}

.interview-panel h2 {
    max-width: none;
    margin: 0;
    color: var(--text);
    font-size: clamp(1.32rem, 1.75vw, 1.75rem);
    line-height: 1.28;
    text-wrap: balance;
}

.ornament-divider {
    display: block;
    margin: 0.95rem 0 0.95rem;
    overflow: visible;
}

.ornament-divider::before,
.ornament-divider::after {
    display: none;
    content: none;
}

.ornament-divider img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(34, 200, 255, 0.35));
}

.answer-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
    color: var(--text);
    font-size: 1.02rem;
}

.mic-mini,
.shield-icon,
.spark-icon {
    display: inline-block;
    flex: 0 0 auto;
}

.mic-mini {
    position: relative;
    width: 0.72rem;
    height: 1rem;
    border: 1px solid #9bdcff;
    border-radius: 999px;
}

.mic-mini::before,
.mic-mini::after {
    position: absolute;
    left: 50%;
    content: "";
    transform: translateX(-50%);
}

.mic-mini::before {
    bottom: -0.25rem;
    width: 0.7rem;
    height: 0.4rem;
    border-bottom: 1px solid #9bdcff;
    border-radius: 0 0 999px 999px;
}

.mic-mini::after {
    bottom: -0.48rem;
    width: 1px;
    height: 0.3rem;
    background: #9bdcff;
}

.voice-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(1rem, 2vw, 1.6rem);
    align-items: center;
    min-width: 0;
    border: 1px solid rgba(65, 155, 255, 0.32);
    border-radius: 0.75rem;
    padding: 0.95rem;
    background:
        radial-gradient(circle at 13% 50%, rgba(34, 200, 255, 0.12), transparent 18rem),
        linear-gradient(180deg, rgba(4, 21, 55, 0.8), rgba(3, 13, 37, 0.72));
    box-shadow: inset 0 0 24px rgba(34, 200, 255, 0.05);
}

.voice-orb {
    --voice-level: 0;
    --voice-scale: calc(1 + var(--voice-level) * 0.065);
    --voice-glow-size: calc(1.3rem + var(--voice-level) * 2.6rem);
    position: relative;
    display: grid;
    width: clamp(5.75rem, 7.4vw, 7rem);
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(143, 105, 255, 0.88);
    border-radius: 50%;
    padding: 0;
    background:
        radial-gradient(circle at center, rgba(118, 236, 255, 0.24), transparent 42%),
        conic-gradient(from 90deg, #22c8ff, #d34bff, #6f63ff, #22c8ff);
    box-shadow: 0 0 34px rgba(69, 153, 255, 0.34), inset 0 0 22px rgba(184, 92, 255, 0.22);
    color: var(--text);
    cursor: pointer;
    isolation: isolate;
    appearance: none;
    transition:
        transform 90ms linear,
        box-shadow 90ms linear,
        filter 90ms linear;
}

.voice-orb::before,
.voice-orb::after {
    position: absolute;
    inset: -0.38rem;
    z-index: -1;
    border: 1px solid rgba(64, 210, 255, 0.55);
    border-radius: inherit;
    content: "";
    opacity: 0.55;
}

.voice-orb::after {
    inset: -0.76rem;
    border-color: rgba(211, 75, 255, 0.42);
    opacity: 0.34;
}

.voice-orb:disabled {
    cursor: wait;
    opacity: 0.72;
}

.voice-orb__ring,
.voice-orb__bars,
.voice-orb__fill,
.voice-orb__icon {
    pointer-events: none;
}

.voice-orb__ring {
    position: absolute;
    inset: 0.55rem;
    z-index: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(126, 242, 240, 0.24), transparent 40%),
        radial-gradient(circle at center, rgba(35, 214, 255, 0.12), transparent 66%);
    box-shadow:
        inset 0 0 calc(0.75rem + var(--voice-level) * 1rem) rgba(35, 214, 255, 0.42),
        0 0 calc(1rem + var(--voice-level) * 1.8rem) rgba(35, 214, 255, 0.32);
    opacity: calc(0.38 + var(--voice-level) * 0.44);
    transition:
        opacity 90ms linear,
        box-shadow 90ms linear,
        transform 90ms linear;
}

.voice-orb__bars {
    position: absolute;
    inset: 0.55rem;
    z-index: 1;
    background-image: url("/images/bayun_microphone_bars_overlay.svg?v=20260607-audio-reactive-mic");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter:
        drop-shadow(0 0 calc(0.3rem + var(--voice-level) * 0.9rem) rgba(35, 214, 255, 0.68))
        drop-shadow(0 0 calc(0.2rem + var(--voice-level) * 0.8rem) rgba(211, 75, 255, 0.38));
    opacity: calc(0.07 + var(--voice-level) * 0.68);
    transform: scale(calc(0.86 + var(--voice-level) * 0.18));
    transition:
        opacity 90ms linear,
        filter 90ms linear,
        transform 90ms linear;
}

.voice-orb__fill {
    position: absolute;
    inset: 0.55rem;
    z-index: 2;
    background: linear-gradient(0deg, rgba(211, 75, 255, 0.84), rgba(35, 214, 255, 0.9));
    mask: url("/images/bayun_microphone_fill_mask.svg?v=20260607-audio-reactive-mic") center / contain no-repeat;
    -webkit-mask: url("/images/bayun_microphone_fill_mask.svg?v=20260607-audio-reactive-mic") center / contain no-repeat;
    mix-blend-mode: screen;
    opacity: calc(0.08 + var(--voice-level) * 0.34);
    transform: scaleY(calc(0.12 + var(--voice-level) * 0.88));
    transform-origin: center bottom;
    transition:
        opacity 90ms linear,
        transform 90ms linear;
}

.voice-orb__icon {
    position: relative;
    z-index: 3;
    display: block;
    width: 66%;
    height: 66%;
    object-fit: contain;
    filter:
        drop-shadow(0 0 calc(0.35rem + var(--voice-level) * 0.7rem) rgba(35, 214, 255, 0.78))
        drop-shadow(0 0 calc(0.18rem + var(--voice-level) * 0.62rem) rgba(211, 75, 255, 0.34));
    opacity: calc(0.82 + var(--voice-level) * 0.18);
    transition:
        filter 90ms linear,
        opacity 90ms linear,
        transform 90ms linear;
}

.voice-card[data-state="recording"] .voice-orb {
    box-shadow:
        0 0 var(--voice-glow-size) rgba(34, 200, 255, 0.48),
        0 0 calc(var(--voice-glow-size) * 1.45) rgba(211, 75, 255, 0.32),
        inset 0 0 calc(1.2rem + var(--voice-level) * 1.4rem) rgba(184, 92, 255, 0.26);
    filter: saturate(calc(1.05 + var(--voice-level) * 0.28));
    transform: scale(var(--voice-scale));
}

.voice-card[data-state="recording"] .voice-orb::before {
    opacity: calc(0.36 + var(--voice-level) * 0.52);
    transform: scale(calc(0.96 + var(--voice-level) * 0.18));
}

.voice-card[data-state="recording"] .voice-orb::after {
    opacity: calc(0.22 + var(--voice-level) * 0.44);
    transform: scale(calc(1 + var(--voice-level) * 0.16));
}

.voice-card[data-state="recording"] .voice-orb__icon {
    transform: scale(calc(1 + var(--voice-level) * 0.035));
}

.voice-card[data-state="paused"] .voice-orb,
.voice-card[data-state="idle"] .voice-orb {
    --voice-level: 0;
}

.voice-card[data-state="error"] .voice-orb {
    --voice-level: 0;
    filter: saturate(0.68);
}

.voice-card[data-state="error"] .voice-orb__bars,
.voice-card[data-state="error"] .voice-orb__fill {
    opacity: 0;
}

.voice-card[data-state="requesting-permission"] .voice-orb {
    animation: voicePulse 1.2s ease-in-out infinite;
}

.voice-body {
    min-width: 0;
}

.voice-status,
.quality-line {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.voice-status {
    color: #dfeaff;
    font-size: 0.96rem;
}

.voice-status time {
    margin-left: auto;
    color: #a8d8ff;
}

.record-dot {
    width: 0.72rem;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 51, 61, 0.42);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 51, 61, 0.2);
}

.voice-card[data-state="recording"] .record-dot {
    border-color: #ff333d;
    box-shadow: 0 0 12px rgba(255, 51, 61, 0.58);
    animation: recordingDot 1.15s ease-in-out infinite;
}

.waveform {
    display: block;
    height: clamp(4.7rem, 7.4vw, 6.1rem);
    margin: 0.18rem 0 0.26rem;
    overflow: hidden;
}

.waveform-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.quality-line {
    justify-content: flex-end;
    color: #aebfe0;
    font-size: 0.92rem;
}

.quality-line strong,
.tips-card li::before,
.live-pill,
.status-row strong {
    color: #63ffbe;
}

.shield-icon {
    position: relative;
    width: 1rem;
    height: 1.15rem;
    border: 2px solid #6ef3b9;
    border-radius: 0.45rem 0.45rem 0.65rem 0.65rem;
}

.shield-icon::after {
    position: absolute;
    top: 0.2rem;
    left: 0.24rem;
    width: 0.36rem;
    height: 0.55rem;
    border-right: 2px solid #6ef3b9;
    border-bottom: 2px solid #6ef3b9;
    content: "";
    transform: rotate(45deg);
}

.signal-bars {
    display: inline-flex;
    align-items: end;
    gap: 0.18rem;
}

.signal-bars i {
    display: block;
    width: 0.25rem;
    height: 0.42rem;
    border-radius: 999px;
    background: #63ffbe;
    opacity: 0.28;
}

.signal-bars i:nth-child(2) {
    height: 0.56rem;
}

.signal-bars i:nth-child(3) {
    height: 0.72rem;
}

.signal-bars i:nth-child(4) {
    height: 0.86rem;
}

.signal-bars i:nth-child(5) {
    height: 1rem;
}

.signal-bars[data-quality-level="quiet"] i:nth-child(-n + 2),
.signal-bars[data-quality-level="normal"] i:nth-child(-n + 4),
.signal-bars[data-quality-level="excellent"] i {
    opacity: 1;
}

.voice-error {
    margin: 0.35rem 0 0;
    color: #ffb3be;
    font-size: 0.84rem;
    line-height: 1.35;
}

.audio-downloads {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
    margin: 0.45rem 0 0;
    color: #aebfe0;
    font-size: 0.84rem;
    line-height: 1.35;
}

.audio-downloads[hidden] {
    display: none;
}

.audio-downloads__label {
    color: #c5d7f8;
    font-weight: 700;
}

.audio-downloads__list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    min-width: 0;
}

.audio-downloads__link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2rem;
    padding: 0.36rem 0.68rem;
    border: 1px solid rgba(64, 210, 255, 0.4);
    border-radius: 0.5rem;
    background: rgba(3, 16, 44, 0.62);
    color: #9bdcff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: inset 0 0 14px rgba(34, 200, 255, 0.06);
    transition:
        border-color 160ms ease,
        color 160ms ease,
        box-shadow 160ms ease;
}

.audio-downloads__link::before {
    content: "\2193";
    color: #63ffbe;
    font-size: 1rem;
    line-height: 1;
}

.audio-downloads__link:hover,
.audio-downloads__link:focus-visible {
    border-color: rgba(99, 255, 190, 0.72);
    color: #ffffff;
    box-shadow: 0 0 16px rgba(34, 200, 255, 0.16), inset 0 0 14px rgba(34, 200, 255, 0.1);
}

.control-button:disabled {
    cursor: wait;
    opacity: 0.62;
}

@keyframes voicePulse {
    0%,
    100% {
        box-shadow: 0 0 34px rgba(69, 153, 255, 0.34), inset 0 0 22px rgba(184, 92, 255, 0.22);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 48px rgba(34, 200, 255, 0.62), inset 0 0 30px rgba(211, 75, 255, 0.35);
        transform: scale(1.025);
    }
}

@keyframes voiceRing {
    0%,
    100% {
        opacity: 0.28;
        transform: scale(0.94);
    }
    50% {
        opacity: 0.78;
        transform: scale(1.08);
    }
}

@keyframes recordingDot {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.78);
    }
}

@media (prefers-reduced-motion: reduce) {
    .voice-orb,
    .voice-orb::before,
    .voice-orb::after,
    .voice-orb__ring,
    .voice-orb__bars,
    .voice-orb__fill,
    .voice-orb__icon {
        transition: opacity 160ms ease, filter 160ms ease;
        animation: none !important;
        transform: none !important;
    }
}

.transcript-block {
    margin-top: 0.85rem;
}

.transcript-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.transcript-head h3 {
    margin: 0 0 0.65rem;
    color: #b9cced;
    font-size: 0.94rem;
    font-weight: 600;
}

.transcript-head span,
.edit-note {
    color: #8ea4cd;
    font-weight: 500;
}

.transcript-status {
    margin: 0 0 0.65rem;
    color: #8ea4cd;
    text-align: right;
    font-size: 0.82rem;
    font-weight: 600;
}

.transcript-status[data-status="active"] {
    color: #63ffbe;
}

.transcript-status[data-status="error"] {
    color: #ffb3be;
}

.transcript-field {
    position: relative;
    height: 9.6rem;
    min-height: 0;
    border: 1px solid rgba(65, 155, 255, 0.32);
    border-radius: 0.75rem;
    padding: 0.85rem 0.9rem 1.75rem;
    background: rgba(4, 19, 51, 0.68);
}

.transcript-input {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    resize: none;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.96rem;
    line-height: 1.43;
}

.transcript-input::placeholder {
    color: rgba(174, 191, 224, 0.72);
}

.transcript-counter {
    position: absolute;
    right: 0.9rem;
    bottom: 0.62rem;
    color: #aebfe0;
    font-size: 0.85rem;
}

.transcript-error {
    margin: 0.45rem 0 0;
    color: #ffb3be;
    font-size: 0.84rem;
    line-height: 1.35;
}

.edit-note {
    margin: 0.55rem 0 0;
    font-size: 0.85rem;
    font-style: italic;
}

.edit-note::before {
    content: "\270e\00a0";
}

.qa-block {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
    border: 1px solid rgba(65, 155, 255, 0.28);
    border-radius: 0.75rem;
    padding: 0.9rem;
    background: rgba(4, 19, 51, 0.52);
}

.qa-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.qa-head h3 {
    margin: 0;
    color: #dfeaff;
    font-size: 0.98rem;
}

.qa-head span,
.qa-empty {
    color: #8ea4cd;
    font-size: 0.84rem;
}

.qa-list {
    display: grid;
    gap: 0.7rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

.qa-item {
    display: grid;
    gap: 0.35rem;
    border-top: 1px solid rgba(122, 178, 255, 0.16);
    padding-top: 0.7rem;
}

.qa-list > .qa-item:first-child {
    border-top: 0;
    padding-top: 0;
}

.qa-list strong {
    color: #63ffbe;
    font-size: 0.84rem;
}

.qa-question,
.qa-answer {
    margin: 0;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.qa-question {
    color: #f4f8ff;
    font-weight: 700;
}

.qa-answer {
    color: #b7c8e8;
}

.qa-analysis,
.qa-followup-meta {
    margin: 0;
    border-left: 2px solid rgba(48, 242, 207, 0.6);
    padding: 0.45rem 0 0.45rem 0.7rem;
    color: #bfe8ff;
    background: rgba(48, 242, 207, 0.06);
    font-size: 0.86rem;
    line-height: 1.45;
    white-space: pre-line;
}

.qa-followup-meta {
    border-left-color: rgba(154, 119, 255, 0.65);
    color: #cfc3ff;
}

.qa-followup-list {
    display: grid;
    gap: 0.55rem;
    margin: 0.35rem 0 0;
    padding: 0 0 0 1rem;
    border-left: 1px solid rgba(48, 242, 207, 0.38);
    list-style: none;
}

.qa-item--followup {
    border-top: 0;
    padding-top: 0.35rem;
}

.qa-item--followup strong {
    color: #9ad0ff;
}

.qa-empty {
    margin: 0;
}

.final-evaluation {
    display: grid;
    gap: 0.75rem;
    margin-top: 1rem;
    border: 1px solid rgba(48, 242, 207, 0.32);
    border-radius: 0.75rem;
    padding: 0.9rem;
    background: rgba(4, 19, 51, 0.58);
}

.final-evaluation[hidden] {
    display: none;
}

.final-evaluation__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.final-evaluation__head h3 {
    margin: 0;
    color: #dfeaff;
    font-size: 0.98rem;
}

.final-evaluation__head-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.final-evaluation__status {
    border: 1px solid rgba(48, 242, 207, 0.42);
    border-radius: 999px;
    padding: 0.28rem 0.55rem;
    color: #63ffbe;
    background: rgba(11, 110, 96, 0.18);
    font-size: 0.78rem;
    font-weight: 800;
}

.final-evaluation[data-status="error"] .final-evaluation__status {
    border-color: rgba(255, 91, 124, 0.48);
    color: #ffb6c4;
    background: rgba(120, 13, 39, 0.22);
}

.final-evaluation__copy,
.final-evaluation__pdf,
.final-evaluation__report {
    display: inline-flex;
    min-height: 2rem;
    align-items: center;
    justify-content: center;
    gap: 0.48rem;
    border: 1px solid rgba(65, 155, 255, 0.42);
    border-radius: 999px;
    padding: 0.34rem 0.72rem;
    color: #c9ddff;
    background: rgba(22, 74, 145, 0.2);
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease;
}

.final-evaluation__copy[hidden],
.final-evaluation__pdf[hidden],
.final-evaluation__report[hidden] {
    display: none;
}

.final-evaluation__copy:hover,
.final-evaluation__copy:focus-visible,
.final-evaluation__pdf:hover,
.final-evaluation__pdf:focus-visible,
.final-evaluation__report:hover,
.final-evaluation__report:focus-visible {
    border-color: rgba(84, 190, 255, 0.72);
    color: #f1f7ff;
    background: rgba(22, 100, 179, 0.3);
    outline: none;
}

.final-evaluation__copy.is-copied,
.final-evaluation__pdf.is-done {
    border-color: rgba(48, 242, 207, 0.62);
    color: #63ffbe;
    background: rgba(11, 110, 96, 0.22);
}

.final-evaluation__copy.has-error,
.final-evaluation__pdf.has-error {
    border-color: rgba(255, 91, 124, 0.58);
    color: #ffb6c4;
    background: rgba(120, 13, 39, 0.22);
}

.final-evaluation__copy-icon {
    position: relative;
    width: 0.78rem;
    height: 0.9rem;
    flex: 0 0 auto;
    border: 1.5px solid currentColor;
    border-radius: 2px;
}

.final-evaluation__copy-icon::before {
    position: absolute;
    left: -0.28rem;
    top: 0.22rem;
    width: 0.64rem;
    height: 0.74rem;
    border: 1.5px solid currentColor;
    border-radius: 2px;
    background: #071a42;
    content: "";
}

.final-evaluation__pdf-icon {
    position: relative;
    width: 0.82rem;
    height: 0.92rem;
    flex: 0 0 auto;
    border: 1.5px solid currentColor;
    border-radius: 2px;
}

.final-evaluation__pdf-icon::before {
    position: absolute;
    left: 50%;
    top: 0.12rem;
    width: 0.3rem;
    height: 0.42rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    content: "";
    transform: translateX(-50%) rotate(45deg);
}

.final-evaluation__pdf-icon::after {
    position: absolute;
    left: 50%;
    bottom: 0.12rem;
    width: 0.48rem;
    border-bottom: 1.5px solid currentColor;
    content: "";
    transform: translateX(-50%);
}

.final-evaluation__report-icon {
    position: relative;
    width: 0.9rem;
    height: 0.78rem;
    flex: 0 0 auto;
    border-bottom: 1.5px solid currentColor;
    border-left: 1.5px solid currentColor;
}

.final-evaluation__report-icon::before {
    position: absolute;
    right: 0;
    bottom: 0.12rem;
    width: 0.18rem;
    height: 0.38rem;
    border-radius: 1px 1px 0 0;
    background: currentColor;
    box-shadow: -0.26rem 0.14rem 0 currentColor, -0.52rem 0.25rem 0 currentColor;
    content: "";
}

.final-evaluation__agent,
.final-evaluation__error {
    margin: 0;
    color: #8ea4cd;
    font-size: 0.84rem;
    line-height: 1.4;
}

.final-evaluation__error {
    border-left: 2px solid rgba(255, 91, 124, 0.68);
    padding: 0.5rem 0 0.5rem 0.75rem;
    color: #ffb6c4;
    background: rgba(120, 13, 39, 0.18);
    overflow-wrap: anywhere;
}

.final-evaluation__json {
    max-height: 28rem;
    margin: 0;
    overflow: auto;
    border: 1px solid rgba(65, 155, 255, 0.24);
    border-radius: 0.6rem;
    padding: 0.8rem;
    color: #dff8ff;
    background: rgba(3, 13, 37, 0.72);
    font-family: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
    font-size: 0.82rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.interview-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    align-items: center;
    margin-top: 1rem;
}

.interview-actions .actions-spacer {
    flex: 1;
}

.control-button {
    min-height: 2.9rem;
    border-radius: 0.6rem;
    padding: 0.72rem 1.15rem;
    cursor: pointer;
}

.screening-sidebar {
    display: grid;
    gap: 1.15rem;
    min-width: 0;
}

.side-card {
    min-width: 0;
    border-radius: 0.9rem;
    padding: 1rem;
}

.side-card h2 {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0 0 0.9rem;
    font-size: 1.16rem;
}

.spark-icon {
    position: relative;
    width: 1.05rem;
    aspect-ratio: 1;
    border: 1px solid var(--blue);
    border-radius: 50%;
}

.spark-icon::before,
.spark-icon::after {
    position: absolute;
    inset: 0.18rem;
    border-top: 2px solid #a6e8ff;
    border-left: 2px solid #a6e8ff;
    content: "";
    transform: rotate(45deg);
}

.spark-icon::after {
    inset: 0.28rem;
    transform: rotate(-45deg);
}

.interviewer-content {
    display: grid;
    grid-template-columns: minmax(7rem, 0.78fr) minmax(10rem, 1fr);
    gap: 0.9rem;
    align-items: center;
}

.speech-card {
    position: relative;
    border: 1px solid rgba(143, 105, 255, 0.62);
    border-radius: 0.8rem;
    padding: 1rem;
    color: #f4f8ff;
    background: rgba(11, 19, 57, 0.72);
    font-size: 0.83rem;
    line-height: 1.45;
}

.speech-card::before {
    position: absolute;
    top: 50%;
    left: -0.54rem;
    width: 0.9rem;
    aspect-ratio: 1;
    border-bottom: 1px solid rgba(143, 105, 255, 0.62);
    border-left: 1px solid rgba(143, 105, 255, 0.62);
    background: rgba(11, 19, 57, 0.95);
    content: "";
    transform: translateY(-50%) rotate(45deg);
}

.speech-card p {
    margin: 0;
}

.speech-card p + p {
    margin-top: 0.65rem;
}

.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.9rem;
    border: 1px solid rgba(48, 242, 207, 0.62);
    border-radius: 999px;
    padding: 0.52rem 0.9rem;
    background: rgba(11, 110, 96, 0.18);
    font-size: 0.88rem;
    font-weight: 700;
}

.live-pill span {
    width: 0.5rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #63ffbe;
    box-shadow: 0 0 12px rgba(99, 255, 190, 0.64);
}

.status-card {
    display: grid;
    gap: 0.1rem;
}

.status-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    border-bottom: 1px solid rgba(122, 178, 255, 0.16);
    padding: 0.62rem 0;
    color: #cbd8f2;
}

.status-row:first-child {
    padding-top: 0;
}

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

.status-row strong {
    color: #f0f5ff;
    font-size: 1rem;
    text-align: right;
}

.status-row:nth-child(3) strong {
    color: #63ffbe;
}

.status-icon {
    position: relative;
    display: inline-grid;
    width: 1.38rem;
    aspect-ratio: 1;
    place-items: center;
    border: 0;
    border-radius: 0;
    background-image: var(--status-icon-image);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.status-icon::before {
    content: none;
}

.status-icon--time {
    --status-icon-image: url("/images/remaining-time-hourglass@4x.png?v=20260620-status-icons");
}

.status-icon--questions {
    --status-icon-image: url("/images/questions-left@4x.png?v=20260620-status-icons");
}

.status-icon--quality {
    --status-icon-image: url("/images/record-quality-wave@4x.png?v=20260620-status-icons");
}

.status-icon--recording {
    --status-icon-image: url("/images/status-flag@4x.png?v=20260620-status-icons");
}

.tips-card ul {
    display: grid;
    gap: 0.56rem;
    padding: 0;
    margin: 0;
    color: #cbd8f2;
    font-size: 0.88rem;
    list-style: none;
}

.tips-card li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.62rem;
    align-items: start;
}

.tips-card li::before {
    content: "\2713";
    font-weight: 800;
}

.stage-track {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
    align-items: center;
    margin: 1.25rem 0 0;
    border-radius: 0.9rem;
    padding: 1rem 1.2rem;
    list-style: none;
}

.stage-track li {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.8rem;
    align-items: center;
    min-width: 0;
    color: #dce8ff;
}

.stage-track li:not(:last-child)::after {
    position: absolute;
    top: 50%;
    left: calc(100% + 0.12rem);
    width: calc(1rem - 0.24rem);
    border-top: 2px dashed rgba(145, 190, 255, 0.56);
    content: "";
    transform: translateY(-50%);
}

.stage-status {
    display: grid;
    width: 3rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(145, 190, 255, 0.62);
    border-radius: 50%;
    background: rgba(5, 18, 49, 0.72);
}

.stage-status::before {
    color: #e8f2ff;
    font-weight: 800;
    content: "";
}

.stage-track li.complete .stage-status {
    border-color: #63ffbe;
    background: rgba(26, 123, 106, 0.28);
}

.stage-track li.complete .stage-status::before {
    color: #63ffbe;
    content: "\2713";
}

.stage-track li.current .stage-status {
    border-color: var(--blue);
    box-shadow: 0 0 22px rgba(34, 200, 255, 0.58);
}

.stage-track li.current .stage-status::before {
    width: 1.3rem;
    aspect-ratio: 1;
    border: 0.22rem solid var(--blue);
    border-top-color: transparent;
    border-radius: 50%;
    content: "";
}

.stage-track li.locked {
    color: #aebbe0;
}

.stage-track li.locked .stage-status::before {
    content: "\25a3";
}

.stage-track strong,
.stage-track small {
    display: block;
    min-width: 0;
}

.stage-track strong {
    color: #f8fbff;
    font-size: 0.98rem;
}

.stage-track small {
    margin-top: 0.22rem;
    color: #a8cfff;
    font-size: 0.82rem;
}

.screening-footnote {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1rem;
    border-color: rgba(122, 178, 255, 0.2);
    border-radius: 999px;
    padding: 0.7rem 1.2rem;
    color: #aebfe0;
    font-size: 0.86rem;
}

.screening-footnote p,
.screening-footnote a {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0;
}

.screening-footnote strong {
    color: var(--blue);
}

@media (min-width: 1181px) {
    .screening-sidebar {
        margin-top: -7.2rem;
    }

    .interview-panel {
        padding: 1.15rem 1.45rem;
    }
}

@media (max-width: 1180px) {
    .app-header {
        grid-template-columns: auto auto;
    }

    .app-header .main-nav,
    .app-header .app-header-actions {
        display: none;
    }

    .app-header.is-open .main-nav,
    .app-header.is-open .app-header-actions {
        display: flex;
        grid-column: 1 / -1;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .screening-heading,
    .screening-layout,
    .vacancy-workspace {
        grid-template-columns: 1fr;
    }

    .screening-progress {
        grid-column: auto;
    }

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

    .interviewer-card {
        grid-column: 1 / -1;
    }

    .stage-track {
        grid-template-columns: repeat(5, minmax(11rem, 1fr));
        overflow-x: auto;
    }
}

@media (max-width: 820px) {
    .screening-session {
        padding-inline: 1rem;
    }

    .settings-session,
    .vacancies-session,
    .interviews-session {
        padding-inline: 1rem;
    }

    .settings-heading,
    .settings-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .settings-field {
        grid-template-columns: 1fr;
    }

    .vacancy-card,
    .interview-card,
    .vacancy-field {
        grid-template-columns: 1fr;
    }

    .interview-details {
        grid-template-columns: 1fr;
    }

    .vacancy-card__actions,
    .interview-card__head,
    .vacancy-section-head {
        align-items: stretch;
        flex-direction: column;
    }

    .screening-meta {
        gap: 0.55rem;
    }

    .screening-meta li {
        width: 100%;
    }

    .screening-meta li + li::before {
        display: none;
    }

    .voice-card,
    .interviewer-content,
    .screening-sidebar,
    .interview-actions {
        grid-template-columns: 1fr;
    }

    .voice-orb {
        justify-self: center;
    }

    .voice-status,
    .quality-line,
    .screening-footnote {
        align-items: flex-start;
        flex-direction: column;
    }

    .voice-status time {
        margin-left: 0;
    }

    .actions-spacer {
        display: none;
    }

    .interview-actions .button {
        width: 100%;
    }

    .speech-card::before {
        top: -0.48rem;
        left: 50%;
        transform: translateX(-50%) rotate(135deg);
    }

    .stage-track {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .stage-track li:not(:last-child)::after {
        display: none;
    }

    .screening-footnote {
        border-radius: 0.85rem;
    }
}

@media (max-width: 520px) {
    .screening-title-block h1 {
        font-size: 2.25rem;
    }

    .screening-session,
    .settings-session,
    .vacancies-session,
    .interviews-session,
    .screening-heading,
    .settings-heading,
    .screening-layout,
    .interview-panel,
    .settings-panel,
    .voice-card,
    .voice-body,
    .transcript-block,
    .transcript-head,
    .transcript-field,
    .interview-actions,
    .screening-sidebar,
    .side-card {
        min-width: 0;
        max-width: 100%;
    }

    .screening-progress {
        grid-template-columns: 1fr;
    }

    .interview-panel,
    .side-card,
    .stage-track {
        padding: 0.9rem;
    }

    .waveform {
        height: 4.25rem;
    }

    .transcript-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.15rem;
    }

    .transcript-head h3,
    .transcript-status {
        margin-bottom: 0.45rem;
    }

    .transcript-status {
        text-align: left;
    }

    .answer-label,
    .transcript-head h3,
    .transcript-status,
    .edit-note,
    .interview-actions .button {
        min-width: 0;
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    .transcript-field {
        height: 10.5rem;
        padding: 0.85rem 0.8rem 2rem;
    }

    .transcript-counter {
        right: 0.8rem;
        bottom: 0.58rem;
        font-size: 0.78rem;
    }

    .interview-actions .button {
        white-space: normal;
        line-height: 1.2;
    }

    .status-row {
        grid-template-columns: auto 1fr;
    }

    .status-row strong {
        grid-column: 2;
        text-align: left;
    }
}

/* Screening mockup refresh */
body.screening-body {
    background:
        linear-gradient(180deg, rgba(1, 8, 24, 0.16), rgba(1, 8, 24, 0.58) 78%, rgba(1, 8, 24, 0.9)),
        linear-gradient(90deg, rgba(1, 8, 24, 0.5), rgba(1, 8, 24, 0.14) 46%, rgba(1, 8, 24, 0.42)),
        url("/images/intro-space-background.png?v=20260619-screening-refresh");
    background-attachment: fixed;
    background-position: center top;
    background-size: cover;
}

.app-header {
    height: 4.4rem;
    border-bottom: 1px solid rgba(82, 137, 219, 0.18);
    padding: 0 1.65rem;
    background: linear-gradient(180deg, rgba(1, 8, 24, 0.92), rgba(1, 8, 24, 0.82));
}

.app-header .site-logo {
    width: 12rem;
    height: 3rem;
    gap: 0.7rem;
}

.app-header .site-logo__icon {
    width: 2.3rem !important;
    height: 2.55rem !important;
    max-width: 2.3rem;
    max-height: 2.55rem;
    border-radius: 0.35rem;
    object-fit: cover;
    filter: drop-shadow(0 0 10px rgba(34, 200, 255, 0.18));
}

.app-header .site-logo__text {
    gap: 0.3rem;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: 0;
}

.app-header .main-nav {
    gap: clamp(1.35rem, 2.55vw, 2.35rem);
    font-size: 0.82rem;
    font-weight: 600;
}

.app-header-actions {
    gap: 0.42rem;
}

.app-header .icon-button,
.app-header .profile-button {
    width: 2.3rem;
    border-color: rgba(214, 151, 61, 0.68);
    background: rgba(5, 18, 49, 0.34);
}

.app-header .notification-button {
    border-color: transparent;
    background: transparent;
}

.screening-page::before {
    opacity: 0.18;
}

.screening-session {
    --screening-sidebar-width: clamp(24.75rem, 27.75vw, 29.1rem);
    --screening-layout-gap: clamp(1rem, 1.45vw, 1.55rem);
    padding: 1.35rem clamp(1rem, 2.1vw, 1.7rem) 0.6rem;
}

.screening-heading {
    display: block;
    margin-bottom: 0.95rem;
}

.screening-title-block h1 {
    font-size: clamp(1.95rem, 2.65vw, 2.18rem);
    line-height: 1.05;
    letter-spacing: 0;
}

.screening-meta {
    gap: 0.55rem 0.8rem;
    margin-top: 0.38rem;
    font-size: 0.76rem;
}

.screening-meta li {
    gap: 0.26rem;
}

.screening-meta li + li::before {
    width: 0.16rem;
    margin-right: 0.5rem;
}

.screening-progress {
    width: calc(100% - var(--screening-sidebar-width) - var(--screening-layout-gap));
    max-width: none;
    min-height: 5.25rem;
    margin-top: 1.85rem;
    border: 1px solid rgba(65, 155, 255, 0.34);
    border-radius: 0.72rem;
    padding: 1.28rem 2.2rem 1.28rem 1.95rem;
    gap: 1.75rem;
    background:
        radial-gradient(90% 120% at 0% 0%, rgba(24, 91, 169, 0.16), rgba(3, 18, 43, 0) 58%),
        linear-gradient(180deg, rgba(7, 28, 67, 0.82), rgba(3, 17, 47, 0.88));
    box-shadow:
        inset 0 1px 0 rgba(157, 205, 255, 0.025),
        0 10px 26px rgba(0, 5, 20, 0.16);
}

.screening-progress__track {
    position: relative;
    height: 0.92rem;
    overflow: visible;
    border: 1px solid rgba(61, 107, 173, 0.46);
    background: rgba(39, 74, 140, 0.34);
    box-shadow:
        inset 0 0 13px rgba(0, 5, 20, 0.38),
        0 0 18px rgba(37, 107, 255, 0.08);
}

.screening-progress__track::before {
    position: absolute;
    z-index: 2;
    left: -0.76rem;
    top: 50%;
    width: 2.2rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, #d8efff 0 22%, rgba(216, 239, 255, 0.9) 23% 32%, transparent 34%),
        radial-gradient(circle, #6a55ff 0 52%, rgba(37, 153, 255, 0.95) 72%, rgba(26, 67, 169, 0.4) 100%);
    box-shadow:
        0 0 0 0.18rem rgba(59, 108, 255, 0.2),
        0 0 22px rgba(59, 108, 255, 0.62);
    content: "";
    transform: translateY(-50%);
}

.screening-progress__track span {
    width: var(--progress);
    background: linear-gradient(90deg, #139fff 0%, #267cff 56%, #7845ff 100%);
    box-shadow:
        0 0 18px rgba(34, 200, 255, 0.34),
        0 0 22px rgba(120, 69, 255, 0.22);
}

.screening-progress strong {
    color: #f4f8ff;
    font-size: 1.36rem;
    line-height: 1;
}

.screening-layout {
    grid-template-columns: minmax(0, 1fr) minmax(24.75rem, var(--screening-sidebar-width));
    gap: var(--screening-layout-gap);
}

.screening-start-panel {
    position: absolute;
    top: 5.85rem;
    right: calc(clamp(1rem, 2.1vw, 1.7rem) + 24.75rem + 1rem);
    z-index: 6;
    width: auto;
    min-width: 0;
    margin: 0;
    border: 0;
    border-radius: 0.5rem;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.screening-start-panel > div {
    display: none;
}

.screening-start-panel .button {
    min-height: 1.9rem;
    border-radius: 0.42rem;
    padding: 0.5rem 0.82rem;
    font-size: 0.72rem;
}

.interview-panel,
.side-card {
    border-color: rgba(65, 155, 255, 0.28);
    border-radius: 0.5rem;
    background:
        linear-gradient(180deg, rgba(6, 28, 70, 0.62), rgba(4, 15, 43, 0.72)),
        rgba(3, 15, 42, 0.62);
    box-shadow: inset 0 0 28px rgba(46, 140, 255, 0.07), 0 14px 34px rgba(0, 5, 24, 0.22);
}

.interview-panel {
    padding: 0.72rem 0.86rem 0.62rem;
}

.prestart-panel[hidden],
.screening-session:not(.is-not-started) .prestart-panel {
    display: none;
}

.screening-session.is-not-started .interview-panel {
    min-height: min(39rem, calc(100vh - 9.7rem));
    padding: clamp(1.1rem, 2vw, 1.4rem);
}

.screening-session.is-not-started .interview-panel > :not(.prestart-panel) {
    display: none;
}

.prestart-panel {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(14.5rem, 0.78fr) minmax(0, 1.14fr);
    gap: clamp(1.25rem, 3vw, 2.35rem);
    align-items: center;
    min-height: 100%;
}

.screening-observer-notice {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.85rem;
    margin: 1rem 0 0;
    color: #b9cbe6;
    font-size: 0.9rem;
}

.screening-observer-notice strong {
    color: #40d4ff;
}

.screening-observer-notice [data-state="error"] {
    color: #ffd6df;
}

.screening-session[data-screening-observer="true"] .observer-waiting {
    grid-template-columns: minmax(0, 1fr);
    min-height: 12rem;
}

.screening-session[data-screening-observer="true"].is-not-started .interview-panel {
    min-height: 15rem;
}

.prestart-error {
    width: 100%;
    margin: 0;
    border: 1px solid #bd6680;
    border-radius: 0.65rem;
    padding: 0.85rem 1rem;
    color: #ffd6df;
    background: #3a1728;
    font-size: 0.95rem;
    line-height: 1.5;
}

.prestart-error[hidden] {
    display: none;
}

.prestart-visual {
    position: relative;
    display: grid;
    min-height: 21rem;
    place-items: center;
    overflow: hidden;
}

.prestart-visual::after {
    content: none;
}

.prestart-mic-art {
    display: block;
    width: clamp(25rem, 132%, 34rem);
    max-width: none;
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    transform: translateX(-2%);
    user-select: none;
    -webkit-mask-image: radial-gradient(circle at center, #000 0 68%, rgba(0, 0, 0, 0.86) 78%, transparent 100%);
    mask-image: radial-gradient(circle at center, #000 0 68%, rgba(0, 0, 0, 0.86) 78%, transparent 100%);
}

@media (min-width: 821px) {
    .prestart-mic-art {
        transform: translate(-2%, -1.85rem);
    }
}

.prestart-mic-field {
    position: relative;
    width: min(100%, 25rem);
    aspect-ratio: 1;
}

.prestart-orbit,
.prestart-wave,
.prestart-mic-orb,
.prestart-dot {
    position: absolute;
    pointer-events: none;
}

.prestart-orbit {
    inset: 8%;
    border: 1px solid rgba(28, 126, 255, 0.22);
    border-radius: 50%;
    box-shadow: inset 0 0 22px rgba(25, 120, 255, 0.06);
}

.prestart-orbit--outer {
    inset: 2%;
    border-color: rgba(28, 126, 255, 0.16);
}

.prestart-orbit--middle {
    inset: 14%;
    border-style: dashed;
    border-color: rgba(55, 91, 255, 0.36);
}

.prestart-orbit--inner {
    inset: 28%;
    border-color: rgba(27, 177, 255, 0.42);
}

.prestart-wave {
    left: 4%;
    right: 4%;
    top: 50%;
    height: 5.2rem;
    transform: translateY(-50%);
    background:
        linear-gradient(90deg, rgba(184, 49, 255, 0.92), rgba(31, 176, 255, 0.95), rgba(34, 200, 255, 0.9)),
        repeating-linear-gradient(90deg, transparent 0 0.42rem, #fff 0.42rem 0.54rem, transparent 0.54rem 0.86rem);
    mask-image:
        radial-gradient(ellipse at center, #000 0 38%, transparent 72%),
        repeating-linear-gradient(90deg, transparent 0 0.42rem, #000 0.42rem 0.54rem, transparent 0.54rem 0.86rem);
    mask-composite: intersect;
    opacity: 0.72;
}

.prestart-mic-orb {
    left: 50%;
    top: 50%;
    display: grid;
    width: clamp(7.1rem, 45%, 10.2rem);
    aspect-ratio: 1;
    place-items: center;
    border: 2px solid rgba(157, 226, 255, 0.72);
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 24%, rgba(110, 245, 255, 0.9), transparent 30%),
        linear-gradient(135deg, #18c8ff 0%, #3549ff 54%, #a13cff 100%);
    box-shadow:
        0 0 0 1.15rem rgba(18, 118, 255, 0.14),
        0 0 0 2.45rem rgba(18, 118, 255, 0.08),
        0 0 42px rgba(34, 200, 255, 0.34);
    transform: translate(-50%, -50%);
}

.prestart-mic-orb img {
    width: 66%;
    height: 66%;
    object-fit: contain;
    opacity: 0.92;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.32));
}

.prestart-dot {
    width: 0.52rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #5266ff;
    box-shadow: 0 0 16px rgba(82, 102, 255, 0.72);
}

.prestart-dot--one {
    left: 14%;
    top: 28%;
}

.prestart-dot--two {
    right: 17%;
    bottom: 22%;
}

.prestart-dot--three {
    left: 59%;
    top: 14%;
    width: 0.42rem;
}

.prestart-content {
    display: grid;
    align-content: center;
    gap: 0.68rem;
    min-width: 0;
    color: #f4f8ff;
}

.prestart-kicker {
    margin: 0;
    color: #22c8ff;
    font-size: clamp(0.82rem, 1.2vw, 1rem);
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.interview-panel .prestart-content h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.85rem, 3vw, 2.72rem);
    line-height: 1.07;
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.18);
}

.prestart-copy {
    max-width: 30rem;
    margin: 0;
    color: rgba(230, 236, 248, 0.86);
    font-size: clamp(0.9rem, 1.22vw, 1.08rem);
    line-height: 1.45;
}

.prestart-divider {
    justify-self: center;
    box-sizing: border-box;
    width: min(100%, 36rem);
    max-width: calc(100% - clamp(2rem, 4.5vw, 4rem));
    margin: 0.05rem 0 0.02rem;
}

.prestart-divider img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(214, 151, 61, 0.25));
}

.prestart-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.65rem;
    margin-top: 0.55rem;
}

.prestart-feature {
    display: grid;
    min-width: 0;
    min-height: clamp(8.75rem, 10.6vw, 11rem);
    justify-items: center;
    align-content: start;
    gap: 0.48rem;
    border: 1px solid rgba(65, 155, 255, 0.26);
    border-radius: 0.58rem;
    padding: 0.86rem 0.7rem 0.78rem;
    background: rgba(4, 18, 48, 0.54);
    text-align: center;
}

.prestart-feature-icon {
    position: relative;
    display: grid;
    width: 2.95rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(55, 126, 255, 0.62);
    border-radius: 50%;
    color: #22c8ff;
    background: radial-gradient(circle, rgba(12, 125, 255, 0.22), rgba(3, 18, 43, 0.24));
    box-shadow: inset 0 0 18px rgba(34, 200, 255, 0.08);
}

.prestart-feature-icon::before {
    display: block;
    width: 2.05rem;
    height: 2.05rem;
    background: var(--prestart-feature-icon) center / contain no-repeat;
    content: "";
}

.prestart-feature-icon--voice {
    --prestart-feature-icon: url("/images/start-microphone.svg?v=20260621-start-block-icons");
}

.prestart-feature-icon--questions {
    --prestart-feature-icon: url("/images/start-questions.svg?v=20260621-start-block-icons");
}

.prestart-feature-icon--save {
    --prestart-feature-icon: url("/images/start-autosave.svg?v=20260621-start-block-icons");
}

.prestart-feature-icon--save::after {
    content: none;
}

.prestart-feature strong {
    max-width: 9rem;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.82rem;
    line-height: 1.24;
}

.prestart-feature > span:last-child {
    color: rgba(206, 216, 236, 0.75);
    font-size: 0.68rem;
    line-height: 1.45;
}

.prestart-action.control-button {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    width: 100%;
    min-height: 3.65rem;
    margin-top: 0.72rem;
    border: 0;
    border-radius: 0.72rem;
    padding: 0 1.65rem;
    color: #fff;
    background: linear-gradient(120deg, #18bfff 0%, #277cff 54%, #8f46ff 100%);
    box-shadow: 0 0 28px rgba(34, 143, 255, 0.28);
    font-size: 1.05rem;
    font-weight: 800;
    text-align: center;
}

.prestart-action::before {
    width: 0.72rem;
    aspect-ratio: 1;
    border: 2px solid rgba(255, 255, 255, 0.78);
    border-right-color: rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    content: "";
}

.prestart-action span:first-child {
    justify-self: center;
}

.prestart-action span:last-child {
    justify-self: end;
    width: 1.7rem;
    aspect-ratio: 1;
    background: url("/images/start-arrow-right.svg?v=20260621-start-block-icons") center / contain no-repeat;
    color: transparent;
    font-size: 0;
    line-height: 0;
}

.prestart-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.85rem;
    margin: 0.82rem 0 0;
    color: rgba(219, 228, 244, 0.82);
    font-size: 0.78rem;
}

.prestart-note .shield-icon {
    width: 1.24rem;
    height: 1.24rem;
    border: 0;
    background: url("/images/start-shield-check.svg?v=20260621-start-block-icons") center / contain no-repeat;
}

.prestart-note .shield-icon::after {
    content: none;
}

.prestart-note strong {
    color: #22c8ff;
    font-weight: 800;
}

.prestart-consent {
    margin: 0.65rem 0 0;
    color: rgba(219, 228, 244, 0.82);
    font-size: 0.78rem;
    line-height: 1.6;
    text-align: center;
}

.prestart-consent a {
    color: #45d2ff;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.prestart-consent a:hover {
    color: #a5ebff;
}

.prestart-consent a:focus-visible {
    outline: 2px solid #45d2ff;
    outline-offset: 3px;
    border-radius: 2px;
}

.question-kicker {
    margin-bottom: 0.38rem;
    color: #a8bddf;
    font-size: 0.76rem;
}

.interview-panel h2 {
    font-size: clamp(1rem, 1.42vw, 1.14rem);
    line-height: 1.34;
}

.ornament-divider {
    margin: 0.35rem 0 0.45rem;
}

.ornament-divider img {
    max-height: 1.6rem;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(214, 151, 61, 0.28));
}

.answer-label {
    margin-bottom: 0.5rem;
    color: #c5d7f8;
    font-size: 0.78rem;
    font-weight: 700;
}

.voice-card {
    grid-template-columns: 4.45rem minmax(0, 1fr);
    gap: 0.75rem;
    min-height: 5.45rem;
    border-radius: 0.5rem;
    padding: 0.72rem;
}

.voice-orb {
    width: 4rem;
}

.voice-status {
    font-size: 0.74rem;
}

.record-dot {
    width: 0.45rem;
    border-color: #22c8ff;
    border-width: 0;
    background: #22c8ff;
    box-shadow: 0 0 10px rgba(34, 200, 255, 0.48);
}

.waveform {
    height: 2.2rem;
    margin: 0.08rem 0 0.14rem;
}

.quality-line {
    font-size: 0.68rem;
}

.shield-icon {
    width: 0.76rem;
    height: 0.86rem;
    border-width: 1px;
}

.shield-icon::after {
    top: 0.16rem;
    left: 0.19rem;
    width: 0.25rem;
    height: 0.38rem;
    border-width: 1px;
}

.transcript-block {
    margin-top: 0.5rem;
}

.transcript-head h3 {
    margin-bottom: 0.4rem;
    font-size: 0.74rem;
}

.transcript-status,
.edit-note {
    display: none;
}

.transcript-field {
    height: 3.9rem;
    border-radius: 0.45rem;
    padding: 0.65rem 0.75rem 1.25rem;
}

.transcript-input {
    font-size: 0.78rem;
}

.transcript-counter {
    right: 0.75rem;
    bottom: 0.42rem;
    font-size: 0.66rem;
}

.qa-block {
    gap: 0.42rem;
    margin-top: 0.55rem;
    border-radius: 0.5rem;
    padding: 0.64rem 0.7rem;
}

.qa-head h3 {
    font-size: 0.78rem;
}

.qa-head span,
.qa-empty {
    font-size: 0.66rem;
}

.qa-head span {
    border: 1px solid rgba(122, 178, 255, 0.22);
    border-radius: 999px;
    padding: 0.18rem 0.45rem;
    background: rgba(5, 18, 49, 0.46);
}

.qa-list {
    gap: 0.42rem;
    max-height: 10.85rem;
    overflow: auto;
    padding-right: 0.15rem;
}

.qa-item {
    gap: 0.24rem;
    padding-top: 0.45rem;
}

.qa-list strong {
    font-size: 0.68rem;
}

.qa-question,
.qa-answer {
    font-size: 0.66rem;
    line-height: 1.42;
}

.qa-answer {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.qa-analysis {
    display: none;
}

.qa-insight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
    margin-top: 0.42rem;
}

.qa-insight-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.48rem;
    min-width: 0;
    border: 1px solid rgba(65, 155, 255, 0.18);
    border-radius: 0.45rem;
    padding: 0.52rem;
    background: rgba(4, 19, 51, 0.58);
}

.qa-insight-card strong {
    display: block;
    margin-bottom: 0.12rem;
    color: #dfeaff;
    font-size: 0.66rem;
}

.qa-insight-card p {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #aebfe0;
    font-size: 0.58rem;
    line-height: 1.32;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.qa-insight-icon {
    position: relative;
    display: inline-grid;
    width: 1.85rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(214, 151, 61, 0.82);
    border-radius: 50%;
    color: #f2a93b;
}

.qa-insight-icon::before,
.qa-insight-icon::after {
    position: absolute;
    content: "";
}

.qa-insight-icon--score::before {
    width: 0.78rem;
    height: 0.78rem;
    background: currentColor;
    clip-path: polygon(50% 0, 62% 36%, 100% 36%, 69% 58%, 82% 96%, 50% 72%, 18% 96%, 31% 58%, 0 36%, 38% 36%);
}

.qa-insight-icon--signal::before {
    top: 0.48rem;
    width: 0.78rem;
    height: 0.58rem;
    border: 2px solid currentColor;
    border-top: 0;
    border-radius: 0 0 0.42rem 0.42rem;
}

.qa-insight-icon--signal::after {
    bottom: 0.42rem;
    width: 0.72rem;
    height: 0.18rem;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 -0.28rem 0 -0.04rem currentColor;
}

.qa-insight-icon--followup::before {
    color: currentColor;
    content: "?";
    font-size: 0.95rem;
    font-weight: 800;
}

.interview-actions {
    gap: 0.48rem;
    margin-top: 0.55rem;
}

.control-button {
    min-height: 1.9rem;
    border-radius: 0.38rem;
    padding: 0.48rem 0.78rem;
    font-size: 0.72rem;
}

.button-primary {
    background: linear-gradient(120deg, #0c7dff, #22c8ff);
    box-shadow: 0 0 18px rgba(34, 200, 255, 0.22);
}

.button-ghost {
    background: rgba(5, 18, 49, 0.58);
}

.screening-sidebar,
.ai-interviewer-card {
    --screening-sidebar-card-surface-color: #051936;
    --screening-sidebar-card-surface:
        radial-gradient(
            120% 90% at 18% 0%,
            rgba(24, 63, 106, 0.12) 0%,
            rgba(7, 29, 62, 0) 58%
        ),
        linear-gradient(
            180deg,
            #081b3b 0%,
            #051936 52%,
            #021533 100%
        );
    --screening-sidebar-card-border: 1px solid rgba(42, 82, 124, 0.38);
    --screening-sidebar-card-radius: 10px;
    --screening-sidebar-card-shadow:
        inset 0 1px 0 rgba(157, 205, 255, 0.025),
        0 7px 20px rgba(0, 5, 18, 0.14);
}

.screening-sidebar {
    gap: 0.72rem;
}

.side-card {
    padding: 0.82rem;
}

.screening-sidebar .side-card,
.ai-panel-surface {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: var(--screening-sidebar-card-border);
    border-radius: var(--screening-sidebar-card-radius);
    background-color: var(--screening-sidebar-card-surface-color);
    background-image: var(--screening-sidebar-card-surface);
    background-blend-mode: normal;
    box-shadow: var(--screening-sidebar-card-shadow);
    opacity: 1;
    filter: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.side-card h2 {
    gap: 0.5rem;
    margin-bottom: 0.62rem;
    font-size: 0.78rem;
}

.spark-icon {
    width: 0.85rem;
    border: 0;
}

.spark-icon::before,
.spark-icon::after {
    inset: 0.14rem;
    border-color: #d6973d;
}

.interviewer-card > h2 .spark-icon {
    width: 17px;
    height: 22px;
    aspect-ratio: auto;
    border: 0;
    border-radius: 0;
    background: url("/images/ai-interviewer-title-icon-extracted-24.png?v=20260621-ai-title-icon-size") center / 29px 29px no-repeat;
}

.interviewer-card > h2 .spark-icon::before,
.interviewer-card > h2 .spark-icon::after {
    content: none;
}

.interviewer-card {
    position: relative;
    min-height: 18.35rem;
    overflow: hidden;
}

.ai-interviewer-card--long {
    min-height: 23rem;
}

.ai-interviewer-card--long .speech-card {
    bottom: 1.25rem;
    width: min(11.5rem, 50%);
    font-size: 0.7rem;
}

.ai-interviewer-art {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center bottom;
    pointer-events: none;
    user-select: none;
    opacity: 1;
    filter: none;
    transform: none;
    mix-blend-mode: normal;
}

.screening-sidebar .interviewer-card {
    background-color: var(--screening-sidebar-card-surface-color);
    background-image: var(--screening-sidebar-card-surface);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.interviewer-card::before {
    content: none;
}

.interviewer-card > h2 {
    position: relative;
    z-index: 3;
    background: transparent;
}

.interviewer-content {
    position: absolute;
    inset: 0 0.8rem 0.55rem;
    z-index: 3;
    display: block;
}

.ai-interviewer-content {
    z-index: 3;
}

.speech-card {
    position: absolute;
    z-index: 3;
    right: 0.05rem;
    bottom: 1.72rem;
    width: min(10.4rem, 48%);
    border-color: rgba(214, 151, 61, 0.62);
    border-radius: 0.5rem;
    padding: 0.76rem 0.82rem;
    color: #dce8ff;
    background: rgba(11, 19, 57, 0.66);
    font-size: 0.72rem;
    line-height: 1.55;
}

.ai-interviewer-speech {
    z-index: 3;
}

.speech-card::before {
    left: -0.45rem;
    width: 0.8rem;
    border-color: rgba(214, 151, 61, 0.62);
    background: rgba(11, 19, 57, 0.88);
}

.speech-card p + p {
    margin-top: 0.5rem;
}

.live-pill {
    display: none;
}

.status-card {
    gap: 0;
    min-height: 8.9rem;
}

.status-row {
    gap: 0.65rem;
    padding: 0.48rem 0;
    border-bottom: 0;
    color: #c9d8f2;
    font-size: 0.72rem;
}

.status-row strong {
    font-size: 0.73rem;
}

.status-icon {
    width: 1.1rem;
    border-color: rgba(139, 197, 255, 0.72);
}

.tips-card {
    position: relative;
    min-height: 11.45rem;
    padding: 0;
    overflow: hidden;
}

.voice-tips-content {
    position: absolute;
    inset: 0;
    height: 100%;
    padding: 15px 20px 0;
    box-sizing: border-box;
}

.tips-card .voice-tips-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 24px;
    margin: 0;
    padding: 0;
    color: rgba(228, 234, 244, 0.92);
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    letter-spacing: 0;
    background: none;
    text-shadow: none;
}

.tips-card .voice-tips-title {
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    line-height: 18px;
    font-weight: 600;
    letter-spacing: 0;
    color: rgba(228, 234, 244, 0.92);
    white-space: nowrap;
    text-shadow: none;
}

.tips-card .voice-tips-icon {
    display: block;
    flex: 0 0 17px;
    width: 17px;
    height: 22px;
    max-height: none;
    object-fit: contain;
    object-position: center;
    border: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    filter: none;
    transform: none;
}

.tips-card .voice-tips-list {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin: 13px 0 0;
    padding: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0;
    list-style: none;
    text-shadow: none;
}

.tips-card .voice-tips-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    column-gap: 8px;
    align-items: start;
    min-height: 18px;
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", system-ui, sans-serif;
    color: rgba(181, 194, 216, 0.78);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0;
    text-shadow: none;
}

.tips-card .voice-tips-item::before {
    content: none;
}

.tips-card .voice-tips-check {
    display: block;
    width: 10px;
    height: 10px;
    margin-top: 1px;
    border: 0;
    background: none;
    box-shadow: none;
    color: #00bfe8;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.95;
}

.tips-card .voice-tips-item-text {
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", system-ui, sans-serif;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    font-synthesis: none;
    letter-spacing: 0;
    color: rgba(181, 194, 216, 0.78);
    text-shadow: none;
}

.tips-card .voice-tips-flourish {
    position: absolute;
    z-index: 0;
    right: 57px;
    bottom: -1px;
    width: 74px;
    height: 58px;
    pointer-events: none;
    opacity: 0.13;
    fill: none;
    stroke: #d6973d;
    stroke-width: 1;
    stroke-linecap: round;
    filter: none;
    mix-blend-mode: normal;
    transform: none;
}

.tips-card .voice-tips-branches {
    position: absolute;
    z-index: 1;
    right: 12px;
    bottom: 5px;
    display: block;
    width: 64px;
    height: 58px;
    object-fit: fill;
    pointer-events: none;
    opacity: 1;
    filter: none;
    mix-blend-mode: normal;
    transform: none;
}

.stage-track,
.screening-footnote {
    display: none;
}

@media (min-width: 1181px) {
    .prestart-content {
        transform: translateY(0.9rem);
    }

    .screening-sidebar {
        margin-top: -11.5rem;
    }

    .interview-panel {
        padding: 0.72rem 0.86rem 0.62rem;
    }
}

@media (min-width: 1440px) {
    .interviewer-card {
        min-height: 19.85rem;
    }

    .status-card {
        min-height: 11.75rem;
        align-content: center;
    }

    .status-row {
        padding: 0.68rem 0;
        font-size: 0.92rem;
    }

    .status-row strong {
        font-size: 0.92rem;
    }

    .status-icon {
        width: 1.24rem;
    }

    .tips-card {
        min-height: 16.95rem;
    }

    .side-card h2 {
        font-size: 0.92rem;
    }

    .tips-card .voice-tips-header,
    .tips-card .voice-tips-title {
        font-size: 15px;
        line-height: 20px;
    }

    .tips-card .voice-tips-list {
        gap: 10px;
        margin-top: 14px;
        font-size: 13px;
        line-height: 20px;
    }

    .tips-card .voice-tips-item,
    .tips-card .voice-tips-item-text {
        font-size: 13px;
        line-height: 20px;
    }
}

@media (max-width: 1180px) {
    .app-header {
        grid-template-columns: auto auto;
        height: 4rem;
    }

    .screening-layout {
        grid-template-columns: 1fr;
    }

    .screening-progress {
        width: 100%;
    }

    .screening-start-panel {
        position: static;
        width: 100%;
        margin-bottom: 0.75rem;
        border: 1px solid rgba(65, 155, 255, 0.35);
        padding: 0.75rem 1rem;
        background: linear-gradient(145deg, rgba(5, 23, 61, 0.86), rgba(4, 13, 39, 0.75));
        box-shadow: inset 0 0 28px rgba(46, 140, 255, 0.08), 0 18px 52px rgba(0, 5, 24, 0.28);
    }

    .screening-start-panel > div {
        display: block;
    }

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

    .screening-session.is-not-started .interview-panel {
        min-height: auto;
    }
}

@media (max-width: 820px) {
    .screening-session {
        padding-inline: 1rem;
    }

    .qa-insight-grid,
    .voice-card,
    .interview-actions,
    .screening-sidebar {
        grid-template-columns: 1fr;
    }

    .prestart-panel {
        grid-template-columns: 1fr;
    }

    .prestart-visual {
        min-height: 18rem;
    }

    .prestart-content {
        justify-items: center;
        text-align: center;
    }

    .prestart-features {
        grid-template-columns: 1fr;
        width: min(100%, 24rem);
    }

    .prestart-action.control-button {
        width: min(100%, 24rem);
    }

    .interviewer-card {
        min-height: 23rem;
    }

    .speech-card {
        width: min(11rem, 46%);
    }
}

@media (max-width: 520px) {
    .app-header .site-logo {
        width: 9.8rem;
    }

    .app-header .site-logo__text {
        font-size: 1.15rem;
    }

    .screening-title-block h1 {
        font-size: 2rem;
    }

    .screening-progress {
        grid-template-columns: 1fr auto;
    }

    .prestart-visual {
        min-height: 14rem;
    }

    .prestart-mic-field {
        width: min(100%, 17rem);
    }

    .prestart-action.control-button {
        min-height: 3.8rem;
        padding-inline: 1.1rem;
        font-size: 1rem;
    }

    .transcript-field {
        height: 6rem;
    }

    .interviewer-card {
        min-height: 24rem;
    }

    .speech-card {
        right: 0;
        bottom: 1rem;
        width: min(12rem, 58%);
    }
}

/* Interviews page refresh */
.interviews-session {
    padding: 1.25rem clamp(1rem, 1.8vw, 1.9rem) 1.85rem;
}

.interviews-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: end;
    margin-bottom: 1.15rem;
}

.interviews-title-block h1 {
    margin: 0;
    font-size: clamp(2.2rem, 3vw, 2.75rem);
    line-height: 1.02;
    letter-spacing: 0;
}

.interviews-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
    margin-bottom: 0.38rem;
    font-size: 0.93rem;
}

.interviews-kicker span {
    width: 0.34rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #754cff;
    box-shadow: 0 0 10px rgba(117, 76, 255, 0.8);
}

.interviews-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.62rem 1rem;
    margin-top: 0.75rem;
    color: rgba(247, 251, 255, 0.9);
    font-size: 1rem;
    font-weight: 700;
}

.interviews-summary > span {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
}

.interviews-summary > span + span::before {
    width: 0.36rem;
    aspect-ratio: 1;
    margin-right: 0.38rem;
    border-radius: 50%;
    background: rgba(122, 178, 255, 0.72);
    content: "";
}

.interviews-summary strong {
    color: #22c8ff;
    font-weight: 900;
}

.interviews-summary > span:nth-child(2) strong {
    color: #17e4e9;
}

.interviews-summary > span:nth-child(3) strong {
    color: #f7fbff;
}

.interviews-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
}

.interviews-create-button {
    min-width: 19.5rem;
    min-height: 3.25rem;
    border-radius: 8px;
    padding-inline: 1.55rem;
    background: linear-gradient(115deg, #18bfff 0%, #237dff 55%, #6d35ff 100%);
    box-shadow: 0 0 30px rgba(37, 119, 255, 0.26);
    font-size: 1rem;
}

.interviews-plus {
    position: relative;
    display: inline-block;
    width: 1rem;
    aspect-ratio: 1;
    flex: 0 0 auto;
}

.interviews-plus::before,
.interviews-plus::after {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 999px;
    background: currentColor;
    content: "";
    transform: translate(-50%, -50%);
}

.interviews-plus::before {
    width: 100%;
    height: 0.12rem;
}

.interviews-plus::after {
    width: 0.12rem;
    height: 100%;
}

.interviews-board {
    border: 1px solid rgba(65, 155, 255, 0.28);
    border-radius: 8px;
    padding: 1.2rem 1.35rem 1.3rem;
    background:
        radial-gradient(100% 80% at 3% 0%, rgba(32, 105, 201, 0.16), transparent 58%),
        linear-gradient(180deg, rgba(6, 28, 70, 0.7), rgba(4, 16, 46, 0.76));
    box-shadow:
        inset 0 1px 0 rgba(157, 205, 255, 0.035),
        inset 0 0 28px rgba(46, 140, 255, 0.07),
        0 18px 48px rgba(0, 5, 24, 0.24);
}

.interviews-filters {
    display: grid;
    grid-template-columns: minmax(18rem, 1.35fr) minmax(12rem, 0.92fr) minmax(12rem, 0.92fr) minmax(12rem, 0.92fr) auto;
    gap: 0.78rem;
    align-items: center;
}

.interviews-search,
.interviews-select {
    position: relative;
    display: grid;
    min-width: 0;
}

.interviews-search input,
.interviews-select select {
    width: 100%;
    min-width: 0;
    height: 2.6rem;
    border: 1px solid rgba(74, 136, 222, 0.38);
    border-radius: 8px;
    outline: 0;
    padding: 0 2.7rem 0 2.8rem;
    color: #eef6ff;
    background: rgba(4, 17, 48, 0.62);
    box-shadow: inset 0 0 16px rgba(13, 72, 150, 0.09);
    font-size: 0.9rem;
    font-weight: 700;
}

.interviews-select select {
    appearance: none;
    cursor: pointer;
    background:
        linear-gradient(45deg, transparent 50%, #9db1d4 50%) calc(100% - 1.15rem) 50% / 0.42rem 0.42rem no-repeat,
        linear-gradient(135deg, #9db1d4 50%, transparent 50%) calc(100% - 0.9rem) 50% / 0.42rem 0.42rem no-repeat,
        rgba(4, 17, 48, 0.62);
}

.interviews-search input::placeholder {
    color: rgba(194, 207, 230, 0.72);
}

.interviews-search input:focus,
.interviews-select select:focus {
    border-color: rgba(34, 200, 255, 0.78);
    box-shadow: 0 0 0 2px rgba(34, 200, 255, 0.12), inset 0 0 16px rgba(13, 72, 150, 0.09);
}

.interviews-select select option {
    color: #f7fbff;
    background-color: #06183c;
}

.interviews-control-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    z-index: 1;
    width: 1.05rem;
    height: 1.05rem;
    color: #9dafd0;
    pointer-events: none;
    transform: translateY(-50%);
}

.interviews-control-icon--search {
    border: 2px solid currentColor;
    border-radius: 50%;
}

.interviews-control-icon--search::after {
    position: absolute;
    right: -0.35rem;
    bottom: -0.22rem;
    width: 0.48rem;
    height: 0.12rem;
    border-radius: 999px;
    background: currentColor;
    content: "";
    transform: rotate(45deg);
}

.interviews-control-icon--briefcase,
.interview-group__icon {
    border: 2px solid #22a8ff;
    border-radius: 3px;
}

.interviews-control-icon--briefcase::before,
.interview-group__icon::before {
    position: absolute;
    left: 50%;
    top: -0.35rem;
    width: 0.52rem;
    height: 0.32rem;
    border: 2px solid #22a8ff;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    content: "";
    transform: translateX(-50%);
}


.interviews-control-icon--briefcase::after,
.interview-group__icon::after {
    position: absolute;
    left: 0.18rem;
    right: 0.18rem;
    top: 0.43rem;
    height: 2px;
    background: #22a8ff;
    content: "";
}

.interviews-control-icon--status {
    border: 2px solid currentColor;
    border-radius: 50%;
}

.interviews-control-icon--status::before {
    position: absolute;
    left: 50%;
    top: 0.22rem;
    width: 2px;
    height: 0.36rem;
    border-radius: 999px;
    background: currentColor;
    content: "";
    transform: translateX(-50%);
}

.interviews-control-icon--status::after {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.32rem;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    content: "";
}

.interviews-control-icon--calendar {
    border: 2px solid currentColor;
    border-radius: 3px;
}

.interviews-control-icon--calendar::before {
    position: absolute;
    left: 0.18rem;
    right: 0.18rem;
    top: 0.3rem;
    height: 2px;
    background: currentColor;
    content: "";
}

.interviews-reset {
    display: inline-flex;
    height: 2.6rem;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 0;
    padding: 0 0.25rem 0 0.55rem;
    color: rgba(241, 247, 255, 0.9);
    background: transparent;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 800;
    white-space: nowrap;
}

.interviews-reset span {
    position: relative;
    width: 1rem;
    aspect-ratio: 1;
    border: 2px solid #9db1d4;
    border-right-color: transparent;
    border-radius: 50%;
}

.interviews-reset span::after {
    position: absolute;
    right: -0.12rem;
    top: -0.2rem;
    width: 0.36rem;
    height: 0.36rem;
    border-top: 2px solid #9db1d4;
    border-right: 2px solid #9db1d4;
    content: "";
    transform: rotate(22deg);
}

.interviews-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem 1.15rem;
    margin-top: 1.22rem;
    border-bottom: 1px solid rgba(65, 155, 255, 0.2);
}

.interviews-tab {
    position: relative;
    display: inline-flex;
    min-height: 2.2rem;
    align-items: center;
    gap: 0.5rem;
    border: 0;
    padding: 0 0.34rem 0.62rem;
    color: rgba(209, 221, 241, 0.82);
    background: transparent;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 800;
}

.interviews-tab span {
    display: inline-grid;
    min-width: 1.55rem;
    height: 1.55rem;
    place-items: center;
    border: 1px solid rgba(122, 178, 255, 0.18);
    border-radius: 999px;
    color: #dce9ff;
    background: rgba(122, 178, 255, 0.15);
    box-shadow: inset 0 0 10px rgba(122, 178, 255, 0.08);
    font-size: 0.82rem;
}

.interviews-tab.is-active {
    color: #55b8ff;
}

.interviews-tab.is-active::after {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 999px;
    background: #26a9ff;
    box-shadow: 0 0 12px rgba(38, 169, 255, 0.75);
    content: "";
}

.interview-groups {
    display: grid;
    gap: 0.95rem;
    margin-top: 1.35rem;
}

.interview-group {
    overflow: hidden;
    border: 1px solid rgba(65, 155, 255, 0.2);
    border-radius: 8px;
    background: rgba(3, 16, 45, 0.46);
}

.interview-group[hidden] {
    display: none;
}

.interview-group__head {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto;
    gap: 0.74rem;
    align-items: center;
    min-height: 3.65rem;
    padding: 0.78rem 1.1rem;
    cursor: pointer;
    list-style: none;
}

.interview-group__head::-webkit-details-marker {
    display: none;
}

.interview-group__icon {
    position: relative;
    width: 1.08rem;
    height: 0.9rem;
}

.interview-group__title {
    color: #f7fbff;
    font-size: 1.03rem;
    font-weight: 900;
}

.interview-group__count {
    border: 1px solid rgba(122, 178, 255, 0.16);
    border-radius: 999px;
    padding: 0.28rem 0.62rem;
    color: rgba(214, 225, 244, 0.84);
    background: rgba(122, 178, 255, 0.11);
    font-size: 0.8rem;
    font-weight: 700;
}

.interview-group__chevron {
    position: relative;
    width: 0.78rem;
    height: 0.78rem;
    color: #26a9ff;
}

.interview-group__chevron::before {
    position: absolute;
    inset: 0.22rem 0.12rem;
    border-top: 2px solid currentColor;
    border-left: 2px solid currentColor;
    content: "";
    transform: rotate(45deg);
    transition: transform 160ms ease;
}

.interview-group:not([open]) .interview-group__chevron::before {
    transform: translateY(-0.16rem) rotate(225deg);
}

.interview-group__rows {
    border-top: 1px solid rgba(65, 155, 255, 0.16);
}

.interview-row {
    display: grid;
    grid-template-columns: minmax(18rem, 1fr) 8.6rem 12.6rem 10.6rem 8.8rem;
    gap: 1rem;
    align-items: center;
    min-height: 4.45rem;
    padding: 0.82rem 1.15rem;
    border-top: 1px solid rgba(65, 155, 255, 0.14);
}

.interview-row[hidden] {
    display: none;
}

.interview-row:first-child {
    border-top: 0;
}

.interview-row__candidate {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.85rem;
    align-items: center;
    min-width: 0;
}

.interview-avatar {
    display: grid;
    width: 2.75rem;
    aspect-ratio: 1;
    place-items: center;
    border: 1px solid rgba(36, 125, 255, 0.62);
    border-radius: 50%;
    color: #f6f9ff;
    background: radial-gradient(circle at 72% 18%, rgba(139, 63, 255, 0.88), rgba(18, 57, 145, 0.86) 58%, rgba(20, 36, 102, 0.92));
    box-shadow: inset 0 0 14px rgba(34, 200, 255, 0.12), 0 0 16px rgba(73, 55, 226, 0.16);
    font-size: 0.95rem;
    font-weight: 900;
}

.interview-row__identity {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
}

.interview-row__identity strong {
    overflow: hidden;
    color: #f3f8ff;
    font-size: 0.98rem;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.interview-row__identity > span {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 0.35rem;
    color: rgba(190, 204, 229, 0.86);
    font-size: 0.86rem;
}

.interview-status {
    justify-self: start;
    border: 1px solid rgba(34, 139, 255, 0.24);
    border-radius: 6px;
    padding: 0.45rem 0.72rem;
    color: #37aaff;
    background: rgba(18, 88, 184, 0.2);
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1;
}

.interview-status--completed {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border-color: rgba(32, 255, 180, 0.18);
    color: #38ffc2;
    background: rgba(18, 145, 110, 0.22);
}

.interview-status--completed::after {
    width: 0.46rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #32ff90;
    box-shadow: 0 0 8px rgba(50, 255, 144, 0.68);
    content: "";
}

.interview-status--in_progress {
    color: #34d9ff;
    background: rgba(12, 116, 165, 0.22);
}

.interview-copy-link {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    border: 0;
    padding: 0;
    color: rgba(242, 247, 255, 0.88);
    background: transparent;
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 700;
    white-space: nowrap;
}

.interview-copy-link > span:first-child {
    position: relative;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

.interview-copy-link > span:first-child::before,
.interview-copy-link > span:first-child::after {
    position: absolute;
    width: 0.64rem;
    height: 0.34rem;
    border: 2px solid currentColor;
    border-radius: 999px;
    content: "";
    transform: rotate(-45deg);
}

.interview-copy-link > span:first-child::before {
    left: 0;
    top: 0.42rem;
}

.interview-copy-link > span:first-child::after {
    right: 0;
    top: 0.18rem;
}

.interview-copy-link.is-copied {
    color: #38ffc2;
}

.interview-row__action {
    width: 100%;
    min-height: 2.45rem;
    border-color: rgba(0, 161, 255, 0.8);
    border-radius: 7px;
    padding: 0.68rem 0.82rem;
    color: #9ed7ff;
    background: rgba(2, 28, 73, 0.36);
    box-shadow: inset 0 0 14px rgba(34, 133, 255, 0.08);
    font-size: 0.84rem;
}

.interview-row__action--report {
    border-color: rgba(25, 230, 184, 0.8);
    color: #38ffc2;
}

.interview-row__more {
    display: inline-flex;
    width: 100%;
    min-height: 2.45rem;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border: 1px solid rgba(122, 178, 255, 0.18);
    border-radius: 7px;
    color: rgba(212, 224, 244, 0.8);
    background: rgba(4, 17, 48, 0.44);
    cursor: pointer;
    font-size: 0.84rem;
    font-weight: 800;
}

.interview-row__more > span:last-child {
    width: 0.46rem;
    height: 0.46rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-0.12rem) rotate(45deg);
    transition: transform 160ms ease;
}

.interview-row.is-expanded {
    align-items: start;
    background:
        radial-gradient(80% 120% at 8% 0%, rgba(31, 116, 222, 0.12), transparent 62%),
        rgba(4, 19, 51, 0.22);
}

.interview-row__more.is-expanded {
    border-color: rgba(38, 169, 255, 0.78);
    color: #dcecff;
    background: rgba(12, 64, 142, 0.22);
}

.interview-row__more.is-expanded > span:last-child {
    transform: translateY(0.12rem) rotate(225deg);
}

.interview-row__details {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    margin-top: 0.1rem;
    border: 1px solid rgba(65, 155, 255, 0.18);
    border-radius: 8px;
    background:
        radial-gradient(110% 110% at 0% 0%, rgba(29, 99, 184, 0.12), transparent 62%),
        rgba(5, 21, 55, 0.42);
    box-shadow: inset 0 0 22px rgba(46, 140, 255, 0.04);
}

.interview-row__details[hidden] {
    display: none;
}

.interview-detail {
    display: grid;
    gap: 0.45rem;
    min-width: 0;
    border-left: 1px solid rgba(65, 155, 255, 0.12);
    padding: 1rem 1.18rem;
}

.interview-detail:nth-child(4n + 1) {
    border-left: 0;
}

.interview-detail:nth-child(n + 5) {
    border-top: 1px solid rgba(65, 155, 255, 0.12);
}

.interview-detail > span:first-child {
    color: rgba(196, 209, 233, 0.76);
    font-size: 0.82rem;
    font-weight: 700;
}

.interview-detail > strong {
    min-width: 0;
    color: #f4f8ff;
    font-size: 0.94rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.interview-detail__status {
    width: fit-content;
}

.interview-detail--link {
    grid-column: span 2;
}

.interview-detail-link {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.3rem;
    align-items: center;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(65, 155, 255, 0.16);
    border-radius: 6px;
    background: rgba(3, 13, 37, 0.36);
}

.interview-detail-link a {
    min-width: 0;
    overflow: hidden;
    padding: 0.58rem 0.7rem;
    color: #22c8ff;
    font-size: 0.9rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.interview-details-copy {
    position: relative;
    display: grid;
    width: 2.3rem;
    height: 100%;
    min-height: 2.25rem;
    place-items: center;
    border: 0;
    border-left: 1px solid rgba(65, 155, 255, 0.16);
    color: #c9d9f5;
    background: rgba(5, 18, 49, 0.32);
    cursor: pointer;
}

.interview-details-copy:hover,
.interview-details-copy.is-copied {
    color: #38ffc2;
}

.interview-details-copy__icon {
    position: relative;
    width: 0.95rem;
    height: 1.05rem;
    border: 2px solid currentColor;
    border-radius: 3px;
}

.interview-details-copy__icon::before {
    position: absolute;
    left: 50%;
    top: -0.34rem;
    width: 0.46rem;
    height: 0.3rem;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    background: #06183c;
    content: "";
    transform: translateX(-50%);
}

.interview-details-copy__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.interviews-empty-state {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 1.35rem;
    align-items: center;
    margin-top: 1.28rem;
    border: 1px dashed rgba(65, 155, 255, 0.6);
    border-radius: 8px;
    padding: 1.9rem 2.35rem;
    background: rgba(3, 16, 45, 0.42);
}

.interviews-empty-state__icon {
    position: relative;
    width: 3.05rem;
    height: 2.6rem;
    border: 2px solid rgba(202, 216, 238, 0.58);
    border-radius: 7px;
    opacity: 0.78;
}

.interviews-empty-state__icon::before {
    position: absolute;
    left: 0.42rem;
    right: 0.42rem;
    top: 0.6rem;
    height: 2px;
    background: rgba(202, 216, 238, 0.58);
    content: "";
}

.interviews-empty-state__icon::after {
    position: absolute;
    right: -0.28rem;
    bottom: -0.28rem;
    width: 0.82rem;
    aspect-ratio: 1;
    border: 2px solid rgba(202, 216, 238, 0.58);
    border-radius: 50%;
    background: #04112f;
    content: "";
}

.interviews-empty-state h2 {
    margin: 0 0 0.35rem;
    color: #f7fbff;
    font-size: 1.04rem;
}

.interviews-empty-state p {
    margin: 0;
    color: rgba(218, 228, 246, 0.86);
    font-size: 0.92rem;
}

.interviews-empty-state__action {
    min-width: 19.6rem;
    min-height: 3rem;
    border-color: rgba(42, 134, 255, 0.82);
    border-radius: 7px;
    color: #68bdff;
    background: rgba(5, 18, 49, 0.38);
}

@media (max-width: 1280px) {
    .interviews-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .interviews-search {
        grid-column: 1 / -1;
    }

    .interviews-reset {
        justify-content: flex-start;
    }

    .interview-row {
        grid-template-columns: minmax(18rem, 1fr) 8rem 11.4rem;
    }

    .interview-copy-link {
        justify-self: start;
    }

    .interview-row__action,
    .interview-row__more {
        grid-column: auto;
    }

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

    .interview-detail,
    .interview-detail:nth-child(4n + 1),
    .interview-detail:nth-child(n + 5) {
        border-left: 1px solid rgba(65, 155, 255, 0.12);
        border-top: 1px solid rgba(65, 155, 255, 0.12);
    }

    .interview-detail:nth-child(odd) {
        border-left: 0;
    }

    .interview-detail:nth-child(-n + 2) {
        border-top: 0;
    }

    .interview-detail--link {
        grid-column: span 2;
    }
}

@media (max-width: 900px) {
    .interviews-hero {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .interviews-hero-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .interviews-create-button {
        width: min(100%, 22rem);
        min-width: 0;
    }

    .interviews-board {
        padding: 1rem;
    }

    .interviews-filters {
        grid-template-columns: 1fr;
    }

    .interviews-search {
        grid-column: auto;
    }

    .interview-row {
        grid-template-columns: 1fr;
        gap: 0.72rem;
        align-items: start;
    }

    .interview-status,
    .interview-copy-link,
    .interview-row__action,
    .interview-row__more {
        justify-self: stretch;
    }

    .interview-copy-link {
        min-height: 2rem;
        justify-content: flex-start;
    }

    .interview-row__details {
        grid-template-columns: 1fr;
    }

    .interview-detail,
    .interview-detail:nth-child(odd),
    .interview-detail:nth-child(-n + 2) {
        border-left: 0;
        border-top: 1px solid rgba(65, 155, 255, 0.12);
    }

    .interview-detail:first-child {
        border-top: 0;
    }

    .interview-detail--link {
        grid-column: span 1;
    }

    .interviews-empty-state {
        grid-template-columns: 1fr;
        padding: 1.25rem;
    }

    .interviews-empty-state__action {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 560px) {
    .interviews-session {
        padding-inline: 1rem;
    }

    .interviews-summary {
        gap: 0.48rem;
        font-size: 0.92rem;
    }

    .interviews-summary > span {
        width: 100%;
    }

    .interviews-summary > span + span::before {
        display: none;
    }

    .interview-group__head {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .interview-group__count {
        grid-column: 2;
        justify-self: start;
    }

    .interview-group__chevron {
        grid-column: 3;
        grid-row: 1 / span 2;
    }

    .interview-row__candidate {
        grid-template-columns: 1fr;
    }

    .interview-avatar {
        width: 2.55rem;
    }

    .interview-row__identity strong {
        white-space: normal;
    }
}

/* Home dashboard redesign */
.home-body {
    --public-header-height: 5rem;
    min-width: 0;
    background: #010615;
}

.home-body .page-shell {
    width: 100%;
    max-width: 1800px;
    overflow: clip;
    border: 0;
    background:
        radial-gradient(circle at 76% 9%, rgba(29, 62, 183, 0.2), transparent 28rem),
        #020817;
}

.home-body .intro-block {
    margin-top: calc(-1 * var(--public-header-height));
    padding-top: var(--public-header-height);
    min-height: auto;
    background:
        linear-gradient(180deg, rgba(1, 6, 21, 0.24), rgba(1, 7, 24, 0.62)),
        url("/images/intro-space-background.png?v=20260814-home-redesign") center 34% / cover;
}

.home-body .intro-block::after {
    height: 5rem;
    background: linear-gradient(180deg, transparent, #020817);
}

.home-header {
    position: sticky;
    top: 0;
    z-index: 100;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: clamp(0.75rem, 1.2vw, 1.25rem);
    height: var(--public-header-height);
    padding: 0 clamp(1.25rem, 2.4vw, 2.6rem);
    border-bottom: 1px solid rgba(58, 122, 225, 0.24);
    background: linear-gradient(180deg, rgba(1, 7, 24, 0.68), rgba(1, 7, 24, 0.48));
    box-shadow: 0 0.5rem 2rem rgba(0, 4, 20, 0);
    backdrop-filter: blur(20px) saturate(135%);
    transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.home-header.is-scrolled,
.home-header.is-open {
    border-bottom-color: rgba(61, 145, 247, 0.48);
    background: rgba(1, 7, 24, 0.94);
    box-shadow: 0 0.75rem 2rem rgba(0, 4, 24, 0.36);
}

.home-header .site-logo {
    width: 9.3rem;
    height: 2.75rem;
}

.home-header .site-logo__icon {
    width: 2.5rem !important;
    height: 2.5rem !important;
    max-width: 2.5rem;
    max-height: 2.5rem;
}

.home-header .site-logo__text {
    font-size: 1.25rem;
}

.home-header .main-nav {
    min-width: 0;
    justify-content: flex-start;
    gap: clamp(0.35rem, 0.8vw, 0.85rem);
    font-size: clamp(0.72rem, 0.82vw, 0.84rem);
    font-weight: 600;
}

.home-header .public-nav-link,
.home-header .public-nav-dropdown > summary {
    position: relative;
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem clamp(0.32rem, 0.55vw, 0.62rem);
    color: rgba(234, 240, 255, 0.78);
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}

.home-header .public-nav-dropdown > summary::-webkit-details-marker {
    display: none;
}

.home-header .public-nav-link::after,
.home-header .public-nav-dropdown > summary::after {
    position: absolute;
    right: 0.4rem;
    bottom: 0.2rem;
    left: 0.4rem;
    height: 2px;
    border-radius: 999px;
    content: "";
    background: linear-gradient(90deg, #24d6ff, #6b8cff);
    box-shadow: 0 0 0.65rem rgba(36, 214, 255, 0.72);
    opacity: 0;
    transform: scaleX(0.35);
    transition: opacity 160ms ease, transform 160ms ease;
}

.home-header .public-nav-link:hover,
.home-header .public-nav-link:focus-visible,
.home-header .public-nav-link.is-active,
.home-header .public-nav-dropdown:hover > summary,
.home-header .public-nav-dropdown:focus-within > summary,
.home-header .public-nav-dropdown.is-active > summary {
    color: #43dbff;
}

.home-header .public-nav-link:hover::after,
.home-header .public-nav-link:focus-visible::after,
.home-header .public-nav-link.is-active::after,
.home-header .public-nav-dropdown:hover > summary::after,
.home-header .public-nav-dropdown:focus-within > summary::after,
.home-header .public-nav-dropdown.is-active > summary::after {
    opacity: 1;
    transform: scaleX(1);
}

.public-nav-dropdown {
    position: relative;
}

.public-nav-chevron {
    width: 0.42rem;
    height: 0.42rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-0.12rem) rotate(45deg);
    transition: transform 160ms ease;
}

.public-nav-dropdown[open] .public-nav-chevron {
    transform: translateY(0.12rem) rotate(225deg);
}

.public-nav-dropdown__menu {
    position: absolute;
    top: calc(100% + 1.15rem);
    left: 50%;
    display: grid;
    width: 17.5rem;
    gap: 0.2rem;
    border: 1px solid rgba(69, 143, 247, 0.42);
    border-radius: 0.85rem;
    padding: 0.55rem;
    background: rgba(3, 13, 38, 0.98);
    box-shadow: 0 1.25rem 3rem rgba(0, 3, 20, 0.58), inset 0 0 1.5rem rgba(48, 112, 230, 0.08);
    transform: translate(-50%, -0.25rem);
    transform-origin: top center;
    animation: public-dropdown-in 140ms ease forwards;
}

.public-nav-dropdown__menu a {
    display: flex;
    min-height: 2.65rem;
    align-items: center;
    border-radius: 0.55rem;
    padding: 0.65rem 0.8rem;
    color: rgba(224, 235, 255, 0.82);
    font-size: 0.82rem;
}

.public-nav-dropdown__menu a:hover,
.public-nav-dropdown__menu a:focus-visible {
    color: #ffffff;
    background: rgba(38, 115, 224, 0.2);
}

@keyframes public-dropdown-in {
    from {
        opacity: 0;
        transform: translate(-50%, -0.5rem);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.public-header-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.55rem;
}

.public-header-login,
.public-header-cta,
.public-nav-mobile-cta {
    display: inline-flex;
    min-height: 2.65rem;
    align-items: center;
    justify-content: center;
    border-radius: 0.7rem;
    padding: 0.68rem 1rem;
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
    transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.public-header-login {
    border: 1px solid rgba(76, 161, 255, 0.34);
    color: rgba(239, 246, 255, 0.88);
    background: rgba(8, 31, 71, 0.16);
}

.public-header-login:hover,
.public-header-login:focus-visible {
    border-color: rgba(76, 161, 255, 0.4);
    color: #ffffff;
    background: rgba(18, 72, 150, 0.16);
}

.public-header-cta,
.public-nav-mobile-cta {
    border: 1px solid rgba(91, 178, 255, 0.54);
    color: #ffffff;
    background: linear-gradient(115deg, #6b56e8, #187ddb 55%, #16bde1);
    box-shadow: 0 0 1.35rem rgba(31, 153, 230, 0.23);
}

.public-header-cta:hover,
.public-header-cta:focus-visible,
.public-nav-mobile-cta:hover,
.public-nav-mobile-cta:focus-visible {
    border-color: rgba(135, 211, 255, 0.78);
    box-shadow: 0 0 1.75rem rgba(44, 172, 242, 0.38);
    transform: translateY(-1px);
}

.public-nav-mobile-cta {
    display: none;
}

.home-body .hero-section {
    min-height: auto;
    padding: 0.85rem clamp(1.5rem, 2.4vw, 2.6rem) 0.8rem;
}

.home-body .hero-grid {
    grid-template-columns: minmax(0, 2.08fr) minmax(26rem, 0.98fr);
    align-items: stretch;
    gap: 1rem;
}

.hero-showcase {
    position: relative;
    min-width: 0;
    min-height: 29rem;
    height: auto;
    overflow: hidden;
    border: 1px solid rgba(29, 92, 205, 0.24);
    border-radius: 0.9rem;
    background: #020817 url("/images/home-hero-cityscape.png?v=20260815-fit") center / 100% 100% no-repeat;
    box-shadow: inset 0 0 52px rgba(30, 79, 187, 0.07);
}

.hero-showcase::before,
.hero-showcase::after {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    content: "";
}

.hero-showcase::before {
    inset: 0;
    background:
        linear-gradient(90deg, rgba(1, 7, 25, 0.96) 0%, rgba(1, 7, 25, 0.86) 34%, rgba(1, 7, 25, 0.52) 57%, rgba(1, 7, 25, 0.12) 84%),
        linear-gradient(180deg, rgba(1, 6, 21, 0.18), transparent 48%, rgba(1, 6, 21, 0.5));
}

.hero-showcase::after {
    right: 0;
    bottom: -1px;
    left: 0;
    height: 4.5rem;
    background: linear-gradient(180deg, transparent, rgba(1, 7, 24, 0.72));
}

.home-body .hero-copy {
    position: relative;
    z-index: 3;
    width: 59%;
    padding: 1rem 0 1.25rem 2.1rem;
}

.home-body .eyebrow {
    display: inline-flex;
    margin: 0 0 0.95rem;
    border: 1px solid rgba(0, 177, 255, 0.42);
    border-radius: 0.55rem;
    padding: 0.38rem 0.7rem;
    color: #29c5ff;
    background: rgba(0, 78, 145, 0.22);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1;
}

.home-body .hero-copy h1 {
    max-width: none;
    font-size: clamp(2.55rem, 3vw, 3.3rem);
    line-height: 1.04;
    letter-spacing: -0.035em;
    text-wrap: nowrap;
}

.home-body .hero-copy h1 span {
    display: block;
}

.home-body .gradient-text {
    width: max-content;
    max-width: 100%;
    color: transparent;
    background: linear-gradient(90deg, #18b7ff 5%, #4e8eff 50%, #b955ff 95%);
    background-clip: text;
    -webkit-background-clip: text;
}

.home-body .hero-subtitle {
    max-width: 31rem;
    margin: 1.15rem 0 1.5rem;
    color: rgba(213, 222, 244, 0.77);
    font-size: 1rem;
    line-height: 1.55;
}

.home-body .hero-actions {
    gap: 0.9rem;
}

.home-body .hero-actions .button {
    min-width: 13.8rem;
    min-height: 3.35rem;
    border-radius: 0.68rem;
    padding-inline: 1.35rem;
    font-size: 0.95rem;
}

.home-body .button-primary {
    background: linear-gradient(125deg, #079dff 2%, #27b9ff 55%, #874cff 100%);
    box-shadow: 0 0 26px rgba(42, 129, 255, 0.3);
}

.home-body .button-ghost {
    border-color: rgba(80, 130, 227, 0.58);
    background: rgba(3, 13, 39, 0.68);
}

.home-body .trust-list {
    gap: clamp(1rem, 1.8vw, 2rem);
    margin: 1.55rem 0 0;
}

.home-body .trust-list li {
    min-width: 0;
    gap: 0.65rem;
}

.home-body .trust-list strong {
    font-size: 0.83rem;
    font-weight: 600;
}

.home-body .trust-list small {
    color: rgba(192, 205, 233, 0.72);
    font-size: 0.76rem;
}

.home-body .trust-icon {
    display: grid;
    width: 2.65rem;
    place-items: center;
    border: 0;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.home-body .trust-list li:nth-child(1) .trust-icon {
    background-image: url("/images/bayun_scientific_approach.svg?v=20260816");
}

.home-body .trust-list li:nth-child(2) .trust-icon {
    background-image: url("/images/bayun_time_saving.svg?v=20260816");
}

.home-body .trust-list li:nth-child(3) .trust-icon {
    background-image: url("/images/bayun_transparency.svg?v=20260816");
}

.home-body .hero-visual {
    position: absolute;
    z-index: 2;
    inset: 0 0 0 58%;
    display: block;
    min-height: 0;
    overflow: visible;
    pointer-events: none;
}

.home-body .hero-visual img {
    position: absolute;
    top: auto;
    right: clamp(7rem, 10vw, 11rem);
    bottom: -1.8rem;
    width: auto;
    max-width: 100%;
    height: 110%;
    object-fit: contain;
    object-position: center bottom;
    opacity: 1;
    filter: saturate(1.04) contrast(1.04) drop-shadow(0 0 1.5rem rgba(35, 115, 255, 0.28));
}

.top-insights {
    min-height: 29rem;
    height: auto;
    grid-template-rows: 13.4rem 1fr;
    gap: 0.75rem;
}

.home-body .insight-card {
    border-color: rgba(47, 101, 199, 0.34);
    border-radius: 0.75rem;
    background: linear-gradient(145deg, rgba(7, 24, 62, 0.9), rgba(3, 14, 42, 0.94));
    box-shadow: inset 0 0 32px rgba(38, 99, 218, 0.07);
}

.home-body .score-card {
    position: relative;
    container-name: score-card;
    container-type: inline-size;
    min-height: 0;
    padding: 1.2rem 1.25rem;
}

.home-body .accent-card {
    border-color: rgba(47, 101, 199, 0.34);
}

.home-body .card-label {
    margin-bottom: 0.8rem;
    color: rgba(236, 242, 255, 0.9);
    font-size: 0.86rem;
    font-weight: 650;
}

.top-insights .score-card .score-line strong {
    font-size: 2.6rem;
}

.top-insights .score-card .score-line span {
    font-size: 0.8rem;
}

.top-insights .score-card > p {
    margin: 0.45rem 0 0;
    color: #00e6b5;
    font-size: 0.82rem;
}

.candidate-score-card {
    overflow: hidden;
}

.candidate-score-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(5.6rem, 7rem);
    align-items: end;
    gap: 0.6rem;
}

.candidate-score-summary > :first-child {
    min-width: 0;
}

.candidate-score-summary .score-line {
    flex-wrap: nowrap;
    gap: clamp(0.18rem, 1.4vw, 0.35rem);
    white-space: nowrap;
}

.top-insights .candidate-score-card .score-line strong {
    flex: 0 0 auto;
    font-size: clamp(1.6rem, 13vw, 2.6rem);
    overflow-wrap: normal;
    word-break: normal;
    white-space: nowrap;
}

.candidate-score-summary .score-line span {
    flex: 0 0 auto;
    font-size: clamp(0.68rem, 4vw, 0.8rem);
    white-space: nowrap;
}

.candidate-score-note {
    margin: 0.48rem 0 0;
    color: #00e6b5;
    font-size: 0.82rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.candidate-gauge {
    width: 100%;
    max-width: 7rem;
    justify-self: end;
}

.candidate-gauge svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

.candidate-gauge__track,
.candidate-gauge__value {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
}

.candidate-gauge__track {
    stroke: rgba(39, 64, 122, 0.48);
}

.candidate-gauge__value {
    stroke: url("#candidateGaugeGradient");
    stroke-dasharray: var(--score) 100;
    stroke-dashoffset: var(--score);
    filter: drop-shadow(0 0 3px rgba(105, 83, 255, 0.34));
    animation: candidate-gauge-fill 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.candidate-gauge__needle {
    stroke: rgba(92, 139, 223, 0.56);
    stroke-width: 3;
    stroke-linecap: round;
    transform: rotate(var(--gauge-angle));
    transform-origin: 60px 62px;
    animation: candidate-gauge-needle 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.candidate-gauge__hub {
    fill: #4269b6;
}

.score-trend {
    height: 3.15rem;
    margin-top: 0.55rem;
    padding: 0.15rem 0.1rem 0;
}

.score-trend svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.score-trend__guides line {
    stroke: rgba(55, 101, 154, 0.15);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.score-trend__guides .score-trend__baseline {
    stroke: rgba(28, 182, 164, 0.22);
}

.score-trend__area {
    fill: url("#candidateTrendArea");
    opacity: 0;
    animation: candidate-trend-area 520ms ease-out 180ms forwards;
}

.score-trend__line {
    fill: none;
    stroke: url("#candidateTrendStroke");
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    filter: drop-shadow(0 0 2.5px rgba(32, 226, 200, 0.48));
    vector-effect: non-scaling-stroke;
    animation: candidate-trend-draw 720ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.score-trend__points circle {
    fill: #20dabb;
    stroke: rgba(200, 255, 247, 0.82);
    stroke-width: 0.65;
    opacity: 0;
    vector-effect: non-scaling-stroke;
    animation: candidate-trend-point 240ms ease-out var(--point-delay) forwards;
}

.visualization-state {
    display: grid;
    min-height: 5.2rem;
    place-items: center;
    color: rgba(184, 199, 229, 0.72) !important;
    font-size: 0.78rem !important;
    text-align: center;
}

.visualization-state--error {
    color: #ff8c96 !important;
}

@keyframes candidate-gauge-fill {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes candidate-gauge-needle {
    from {
        transform: rotate(-90deg);
    }
}

@keyframes candidate-trend-draw {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes candidate-trend-area {
    to {
        opacity: 1;
    }
}

@keyframes candidate-trend-point {
    to {
        opacity: 0.88;
    }
}

@media (prefers-reduced-motion: reduce) {
    .candidate-gauge__value {
        stroke-dashoffset: 0;
        animation: none;
    }

    .candidate-gauge__needle {
        transform: rotate(var(--gauge-angle));
        animation: none;
    }

    .score-trend__line {
        stroke-dashoffset: 0;
        animation: none;
    }

    .score-trend__area {
        opacity: 1;
        animation: none;
    }

    .score-trend__points circle {
        opacity: 0.88;
        animation: none;
    }
}

.top-insights .recommendation-card .score-line strong {
    color: #05dfbd;
    font-size: 1.05rem;
    line-height: 1.5;
}

.recommendation-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
}

.recommendation-summary__copy {
    min-width: 0;
}

.top-insights .recommendation-summary__copy > p {
    margin-top: 0;
    color: #05dfbd;
    font-size: 0.82rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.top-insights .recommendation-card {
    display: flex;
    flex-direction: column;
}

.top-insights .score-card.recommendation-card > p.recommendation-rationale {
    max-width: 12rem;
    margin-top: auto;
    padding-top: 1rem;
    color: rgba(177, 195, 226, 0.68);
    font-size: 0.68rem;
    line-height: 1.4;
}

.recommendation-check {
    display: grid;
    flex: 0 0 auto;
    width: 2.8rem;
    aspect-ratio: 1;
    place-items: center;
    border: 2px solid #00e1c0;
    border-radius: 50%;
    color: #00e1c0;
    font-family: Arial, "Segoe UI Symbol", sans-serif;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1;
}

@container score-card (max-width: 16rem) {
    .candidate-score-summary {
        grid-template-columns: minmax(0, 1fr) minmax(4rem, 42%);
        align-items: center;
        gap: 0.45rem;
    }

    .top-insights .candidate-score-card .score-line strong {
        font-size: clamp(1.85rem, 19cqi, 2.6rem);
    }

    .candidate-score-summary .score-line span {
        font-size: 0.7rem;
    }

    .candidate-score-note {
        margin-top: 0.35rem;
        font-size: 0.75rem;
    }

    .candidate-gauge {
        max-width: 4.75rem;
    }

    .recommendation-summary {
        gap: 0.45rem;
    }

    .top-insights .recommendation-card .score-line strong {
        font-size: 0.95rem;
    }

    .top-insights .recommendation-summary__copy > p {
        font-size: 0.75rem;
    }

    .recommendation-check {
        width: 2.4rem;
        font-size: 1.15rem;
    }
}

.top-insights .skills-card {
    padding: 1.05rem 1.25rem;
}

.top-insights .skills-card .card-label {
    margin-bottom: 0.55rem;
}

.top-insights .skill-row {
    grid-template-columns: minmax(9rem, 1fr) minmax(8rem, 1fr) 2rem;
    gap: 0.75rem;
    margin-top: 0.52rem;
    font-size: 0.78rem;
}

.top-insights .skill-row strong {
    color: #f4f7ff;
    font-weight: 600;
    text-align: right;
}

.home-main {
    padding: 0 clamp(1.5rem, 2.4vw, 2.6rem);
}

.stats-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-height: 6.3rem;
    overflow: hidden;
    border: 1px solid rgba(47, 101, 199, 0.34);
    border-radius: 0.75rem;
    background: linear-gradient(135deg, rgba(4, 21, 56, 0.96), rgba(3, 13, 39, 0.9));
    box-shadow: inset 0 0 34px rgba(39, 101, 225, 0.07);
}

.stat-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
    padding: 1rem 1.3rem;
}

.stat-item + .stat-item {
    border-left: 1px dashed rgba(86, 132, 213, 0.24);
}

.stat-icon {
    display: block;
    width: 3rem;
    aspect-ratio: 1;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 0.5rem rgba(20, 149, 255, 0.18));
}

.stat-item div {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    column-gap: 0.45rem;
    min-width: 0;
}

.stat-item small {
    grid-column: 1 / -1;
    margin-bottom: 0.35rem;
    color: rgba(199, 211, 237, 0.78);
    font-size: 0.75rem;
    white-space: nowrap;
}

.stat-item strong {
    color: #f7fbff;
    font-size: 1.55rem;
    line-height: 1;
    white-space: nowrap;
}

.stat-item em {
    color: #00dfb8;
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 500;
}

.stat-item i {
    color: rgba(196, 207, 231, 0.7);
    font-size: 0.8rem;
    font-style: normal;
    font-weight: 400;
}

.stat-item span:not(.stat-icon) {
    color: rgba(182, 197, 225, 0.68);
    font-size: 0.66rem;
}

.home-lower-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17.8rem, 0.23fr);
    grid-template-areas:
        "stats insights"
        "workflow insights";
    align-items: start;
    gap: 0.85rem;
}

.home-lower-grid > .stats-strip {
    grid-area: stats;
}

.home-lower-grid .stat-item small {
    white-space: normal;
}

.home-lower-grid > .workflow-section {
    grid-area: workflow;
}

.home-lower-grid > .lower-insights {
    grid-area: insights;
    align-self: stretch;
    padding-top: 0;
}

.home-body .workflow-section {
    margin: 0;
    padding-top: 0.55rem;
}

.home-body .section-heading {
    gap: 1rem;
    margin: 0 0 0.55rem;
}

.home-body .section-heading h2 {
    font-size: 1.45rem;
}

.home-body .section-heading span {
    background: linear-gradient(90deg, transparent, rgba(76, 70, 218, 0.74), transparent);
}

.home-body .workflow-panel {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.9rem;
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.home-body .step-card {
    position: relative;
    display: block;
    min-height: 9.9rem;
    border: 1px solid rgba(47, 101, 199, 0.38);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem 0.95rem;
    background: linear-gradient(145deg, rgba(6, 24, 62, 0.93), rgba(3, 14, 43, 0.94));
    box-shadow: inset 0 0 28px rgba(42, 103, 221, 0.06);
}

.home-body .step-card:not(:last-child)::after {
    position: absolute;
    z-index: 2;
    top: 50%;
    right: -2rem;
    width: 1.65rem;
    color: #2cb4ff;
    content: ">";
    font-size: 2rem;
    letter-spacing: -0.18em;
    transform: translateY(-50%);
}

.step-visual {
    display: flex;
    align-items: center;
    gap: 2rem;
    min-height: 2.7rem;
    margin-bottom: 0.6rem;
}

.home-body .step-number {
    width: 2.35rem;
    border-color: #279eff;
    color: #dfeeff;
}

.step-icon {
    display: block;
    width: clamp(4rem, 4.6vw, 4.8rem);
    height: auto;
    aspect-ratio: 1;
    filter: invert(1) hue-rotate(180deg);
    mix-blend-mode: screen;
    object-fit: contain;
}

.home-body .step-card h3 {
    margin-bottom: 0.4rem;
    font-size: 0.87rem;
}

.home-body .step-card p {
    color: rgba(195, 207, 233, 0.75);
    font-size: 0.76rem;
    line-height: 1.55;
}

.lower-insights {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    padding-top: 0.55rem;
}

.lower-insights .insight-card {
    padding: 0.8rem 1rem;
}

.lower-insights .questions-card {
    min-height: 10.8rem;
}

.card-heading-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.card-heading-line .link-button {
    flex: 0 0 auto;
    margin: 0;
    font-size: 0.68rem;
}

.lower-insights .questions-card ol {
    gap: 0.42rem;
}

.lower-insights .questions-card li {
    grid-template-columns: 1.7rem 1fr;
    gap: 0.5rem;
}

.lower-insights .questions-card li span {
    width: 1.7rem;
    font-size: 0.8rem;
}

.lower-insights .questions-card p {
    color: rgba(211, 221, 241, 0.8);
    font-size: 0.7rem;
    line-height: 1.32;
}

.lower-insights .evidence-card {
    grid-column: auto;
    min-height: 7.7rem;
}

.lower-insights .evidence-row {
    grid-template-columns: minmax(6.5rem, 1fr) minmax(4rem, 0.65fr) 2.2rem;
    gap: 0.45rem;
    margin-top: 0.36rem;
    font-size: 0.68rem;
}

.lower-insights blockquote {
    margin-top: 0.45rem;
    border: 0;
    padding: 0;
    color: #1dbaff;
    background: transparent;
    font-size: 0.72rem;
}

.home-body [data-marketing-section],
.home-body .role-template-grid a[id] {
    scroll-margin-top: calc(var(--public-header-height) + 1rem);
}

.home-body .benefits-section {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 1.15rem 0 0.65rem;
}

.home-body .public-section-heading {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
    align-items: end;
    gap: 0.3rem 1.5rem;
    padding: 0.35rem 0 0.2rem;
}

.home-body .public-section-heading .public-detail-kicker {
    grid-column: 1 / -1;
}

.home-body .public-section-heading h2,
.public-detail-card h2 {
    margin: 0;
    color: #f4f8ff;
    font-size: clamp(1.35rem, 2vw, 1.85rem);
    line-height: 1.15;
}

.home-body .public-section-heading p,
.public-detail-card p {
    margin: 0;
    color: rgba(190, 205, 233, 0.76);
    font-size: 0.84rem;
    line-height: 1.55;
}

.home-body .benefit-card {
    min-height: 9.25rem;
    border-color: rgba(53, 114, 215, 0.34);
    background: linear-gradient(145deg, rgba(6, 24, 62, 0.92), rgba(3, 14, 43, 0.94));
}

.home-body .benefit-card h3 {
    font-size: 0.92rem;
}

.home-body .benefit-card p {
    font-size: 0.76rem;
}

.home-body .mvp-card {
    grid-column: 1 / -1;
    min-height: 8rem;
    border-color: rgba(51, 143, 239, 0.42);
    background: linear-gradient(125deg, rgba(20, 34, 94, 0.92), rgba(4, 24, 60, 0.94));
}

.public-detail-kicker {
    display: block;
    margin-bottom: 0.45rem;
    color: #3ad3ff;
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.public-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding-top: 0.85rem;
}

.public-detail-card {
    min-width: 0;
    border: 1px solid rgba(54, 120, 220, 0.34);
    border-radius: 0.8rem;
    padding: clamp(1.15rem, 2vw, 1.6rem);
    background:
        radial-gradient(circle at 92% 8%, rgba(37, 118, 221, 0.15), transparent 14rem),
        linear-gradient(145deg, rgba(6, 24, 62, 0.94), rgba(3, 14, 43, 0.96));
    box-shadow: inset 0 0 2rem rgba(42, 103, 221, 0.05);
}

.public-detail-card--wide {
    grid-column: 1 / -1;
}

.public-detail-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr);
    align-items: end;
    gap: 0.3rem 1.5rem;
    margin-bottom: 1rem;
}

.public-detail-heading .public-detail-kicker {
    grid-column: 1 / -1;
    margin: 0;
}

.role-template-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.role-template-grid a {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
    border: 1px solid rgba(71, 140, 234, 0.28);
    border-radius: 0.65rem;
    padding: 0.85rem 0.95rem;
    color: rgba(240, 246, 255, 0.9);
    background: rgba(8, 34, 78, 0.55);
    transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.role-template-grid a:hover,
.role-template-grid a:focus-visible {
    border-color: rgba(46, 202, 255, 0.62);
    background: rgba(14, 61, 125, 0.56);
    transform: translateY(-1px);
}

.role-template-grid span {
    font-size: 0.86rem;
    font-weight: 700;
}

.role-template-grid small {
    color: #37c9ff;
    font-size: 0.68rem;
}

.public-detail-link {
    display: inline-flex;
    margin-top: 1rem;
    color: #3cd2ff;
    font-size: 0.82rem;
    font-weight: 750;
}

.public-detail-list {
    display: grid;
    gap: 0.45rem;
    padding: 0;
    margin: 0.9rem 0 0;
    color: rgba(218, 229, 248, 0.8);
    font-size: 0.78rem;
    list-style: none;
}

.public-detail-list li {
    position: relative;
    padding-left: 1.2rem;
}

.public-detail-list li::before {
    position: absolute;
    top: 0.12rem;
    left: 0;
    color: #2ee2c5;
    content: "✓";
}

.public-about {
    display: grid;
    grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.2fr);
    align-items: end;
    gap: 1.5rem;
}

.home-body .site-footer {
    grid-template-columns: 1.35fr 2fr 1.3fr;
    gap: 1.5rem;
    margin: 1rem clamp(1.5rem, 2.4vw, 2.6rem) 0;
    padding-top: 0.85rem;
    font-size: 0.7rem;
}

.home-body .site-footer .site-logo {
    width: 8rem;
    height: 2rem;
}

.home-body .site-footer .site-logo__icon {
    width: 1.8rem !important;
    height: 1.8rem !important;
}

.home-body .site-footer .site-logo__text {
    font-size: 0.92rem;
}

.home-body .site-footer p,
.home-body .footer-nav {
    font-size: 0.68rem;
}

.home-body .footer-nav {
    gap: 1rem;
}

.home-body .footer-nav div {
    gap: 0.28rem;
}

.home-body .subscribe-form label {
    margin-bottom: 0.35rem;
    font-size: 0.68rem;
}

.home-body .subscribe-form input,
.home-body .subscribe-form .button {
    min-height: 2rem;
    padding: 0.45rem 0.75rem;
    font-size: 0.68rem;
}

.home-body .legal-line {
    padding-top: 0.55rem;
    font-size: 0.62rem;
}

@media (max-width: 1500px) {
    .home-header .main-nav {
        gap: 0.35rem;
        font-size: 0.75rem;
    }

    .home-body .hero-copy h1 {
        font-size: clamp(2.25rem, 2.85vw, 2.85rem);
    }

    .home-body .hero-copy {
        width: 61%;
        padding-left: 1.65rem;
    }

    .home-body .hero-actions .button {
        min-width: 11.4rem;
    }

    .stat-item {
        gap: 0.65rem;
        padding-inline: 0.85rem;
    }

    .stat-icon {
        width: 2.55rem;
    }
}

@media (max-width: 1280px) {
    .home-body {
        --public-header-height: 4.75rem;
    }

    .home-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.65rem;
        padding-inline: 1.25rem;
    }

    .home-header .site-logo {
        width: 8.7rem;
        height: 2.6rem;
    }

    .home-header .public-nav {
        position: absolute;
        top: calc(100% + 0.35rem);
        right: 0.5rem;
        left: 0.5rem;
        display: none;
        max-height: calc(100dvh - var(--public-header-height) - 0.85rem);
        align-items: stretch;
        flex-direction: column;
        gap: 0.15rem;
        overflow-y: auto;
        border: 1px solid rgba(63, 142, 241, 0.42);
        border-radius: 0.9rem;
        padding: 0.65rem;
        background: rgba(3, 13, 38, 0.98);
        box-shadow: 0 1.25rem 3rem rgba(0, 3, 20, 0.62), inset 0 0 1.75rem rgba(48, 112, 230, 0.08);
        overscroll-behavior: contain;
    }

    .home-header.is-open .public-nav {
        display: flex;
        flex-wrap: nowrap;
    }

    .home-header .public-nav-link,
    .home-header .public-nav-dropdown > summary {
        width: 100%;
        min-height: 2.85rem;
        justify-content: space-between;
        border-radius: 0.55rem;
        padding: 0.7rem 0.8rem;
    }

    .home-header .public-nav-link::after,
    .home-header .public-nav-dropdown > summary::after {
        right: 0.8rem;
        bottom: 0.25rem;
        left: 0.8rem;
    }

    .public-nav-dropdown {
        width: 100%;
    }

    .public-nav-dropdown__menu {
        position: static;
        width: 100%;
        gap: 0.1rem;
        margin-top: 0.15rem;
        border: 0;
        border-radius: 0.55rem;
        padding: 0.25rem 0.35rem 0.35rem 0.75rem;
        background: rgba(12, 43, 91, 0.34);
        box-shadow: none;
        transform: none;
        animation: none;
    }

    .public-nav-dropdown__menu a {
        min-height: 2.55rem;
        padding: 0.55rem 0.75rem;
    }

    .public-header-actions {
        grid-column: 2;
    }

    .public-header-cta {
        display: none;
    }

    .public-nav-mobile-cta {
        display: flex;
        width: 100%;
        margin-top: 0.35rem;
    }

    .home-header .nav-toggle {
        display: grid;
        flex: 0 0 auto;
        gap: 0.27rem;
        width: 2.7rem;
        aspect-ratio: 1;
        place-content: center;
        border: 1px solid rgba(78, 154, 247, 0.48);
        border-radius: 0.65rem;
        padding: 0;
        color: #ffffff;
        background: rgba(8, 28, 67, 0.82);
        cursor: pointer;
    }

    .home-header .nav-toggle span {
        display: block;
        width: 1.2rem;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        transition: opacity 150ms ease, transform 150ms ease;
    }

    .home-header.is-open .nav-toggle span:nth-child(1) {
        transform: translateY(0.54rem) rotate(45deg);
    }

    .home-header.is-open .nav-toggle span:nth-child(2) {
        opacity: 0;
    }

    .home-header.is-open .nav-toggle span:nth-child(3) {
        transform: translateY(-0.54rem) rotate(-45deg);
    }
}

@media (max-width: 1180px) {
    .home-body .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-showcase {
        min-height: 29rem;
        height: auto;
    }

    .top-insights {
        height: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
    }

    .top-insights .skills-card {
        grid-column: 1 / -1;
    }

    .stats-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .stat-item:nth-child(4) {
        border-left: 0;
    }

    .home-lower-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "stats"
            "workflow"
            "insights";
    }

    .home-body .benefits-section {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-body .mvp-card {
        grid-column: 1 / -1;
    }

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

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

    .home-body .site-footer {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .home-body {
        --public-header-height: 4.25rem;
    }

    .home-body .hero-section,
    .home-main {
        padding-inline: 1rem;
    }

    .home-header {
        padding-inline: 0.75rem;
    }

    .home-header .site-logo {
        width: auto;
        max-width: 7.75rem;
        height: 2.35rem;
        gap: 0.38rem;
    }

    .home-header .site-logo__icon {
        width: 2rem !important;
        height: 2rem !important;
        max-width: 2rem;
        max-height: 2rem;
    }

    .home-header .site-logo__text {
        font-size: 1rem;
    }

    .public-header-actions {
        gap: 0.35rem;
    }

    .public-header-login {
        width: auto;
        min-height: 2.35rem;
        padding: 0.5rem 0.65rem;
        font-size: 0.78rem;
    }

    .home-header .nav-toggle {
        width: 2.45rem;
    }

    .home-header .public-nav {
        max-height: calc(100dvh - var(--public-header-height) - 0.6rem);
    }

    .hero-showcase {
        height: auto;
        min-height: 34rem;
    }

    .home-body .hero-copy {
        width: 100%;
        padding: 1.25rem;
    }

    .home-body .hero-copy h1 {
        max-width: none;
        font-size: clamp(1.6rem, 8vw, 2.2rem);
        hyphens: none;
        overflow-wrap: normal;
        text-wrap: balance;
    }

    .home-body .hero-copy h1 span {
        width: auto;
    }

    .home-body .hero-subtitle {
        max-width: 26rem;
    }

    .home-body .hero-actions,
    .home-body .trust-list {
        align-items: stretch;
        flex-direction: column;
    }

    .home-body .hero-visual {
        display: block;
        inset: 8rem -2.5rem 0 34%;
        opacity: 0.28;
    }

    .home-body .hero-visual img {
        top: auto;
        right: 0;
        bottom: -1rem;
        width: auto;
        max-width: 100%;
        height: 88%;
    }

    .top-insights,
    .stats-strip,
    .lower-insights,
    .home-body .workflow-panel,
    .home-body .benefits-section,
    .public-details,
    .role-template-grid,
    .public-detail-heading,
    .public-about,
    .home-body .public-section-heading {
        grid-template-columns: 1fr;
    }

    .home-body .public-section-heading .public-detail-kicker,
    .public-detail-heading .public-detail-kicker {
        grid-column: auto;
    }

    .home-body .mvp-card,
    .public-detail-card--wide {
        grid-column: auto;
    }

    .home-body .mvp-card {
        grid-template-columns: 1fr;
    }

    .home-body .mvp-card::after {
        display: none;
    }

    .top-insights .skills-card {
        grid-column: auto;
    }

    .stat-item + .stat-item {
        border-top: 1px dashed rgba(86, 132, 213, 0.24);
        border-left: 0;
    }

    .home-body .step-card:not(:last-child)::after {
        top: auto;
        right: 50%;
        bottom: -1.72rem;
        transform: translateX(50%) rotate(90deg);
    }

    .home-body .site-footer {
        margin-inline: 1rem;
    }
}

/* Screening report */
.report-body {
    --report-surface: linear-gradient(145deg, rgba(7, 36, 83, 0.96), rgba(3, 24, 62, 0.96));
    --report-border: rgba(61, 146, 245, 0.36);
    --report-muted: #9fb5da;
    --report-green: #48f1a4;
    --report-red: #ff646d;
    --report-purple: #8a6cff;
    --report-cyan: #35c8ff;
}

.report-shell {
    max-width: 1920px;
}

.report-app-page {
    min-height: 100vh;
}

.report-app-page .app-header {
    border-bottom: 1px solid rgba(85, 145, 235, 0.22);
}

.report-app-page .app-header .main-nav a[href="/reports"] {
    color: #eef7ff;
    text-shadow: 0 0 18px rgba(44, 169, 255, 0.8);
}

.report-app-page .app-header .main-nav a[href="/reports"]::after {
    width: 100%;
    opacity: 1;
}

.screening-report-main,
.reports-main {
    position: relative;
    z-index: 1;
    padding: 1.2rem clamp(1rem, 2.2vw, 2.5rem) 1.6rem;
}

.screening-report,
.reports-page {
    width: min(100%, 1840px);
    margin: 0 auto;
}

.screening-report__title-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 0 0 0.85rem;
}

.screening-report__title-row .question-kicker {
    margin: 0 0 0.18rem;
    color: #50cfff;
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.screening-report__title-row h1 {
    margin: 0;
    font-size: clamp(1.45rem, 2vw, 2.05rem);
    line-height: 1.1;
}

.report-back-link {
    display: inline-flex;
    min-height: 2.35rem;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.8rem;
    border: 1px solid rgba(76, 157, 255, 0.34);
    border-radius: 0.65rem;
    color: #bfd5f7;
    font-size: 0.84rem;
}

.report-back-link:hover {
    border-color: #35c8ff;
    color: #fff;
}

.report-surface {
    border: 1px solid var(--report-border);
    border-radius: 0.72rem;
    background: var(--report-surface);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025), 0 0.75rem 2rem rgba(0, 5, 24, 0.18);
}

.report-readiness {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.8rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(255, 113, 119, 0.5);
    border-radius: 0.72rem;
    background: rgba(87, 17, 38, 0.72);
}

.report-readiness__icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 100, 109, 0.18);
    color: #ffabb0;
    font-weight: 800;
}

.report-readiness p {
    margin: 0.18rem 0 0;
    color: #d5def0;
    font-size: 0.82rem;
}

.report-readiness--pending {
    border-color: rgba(255, 194, 89, 0.4);
    background: rgba(71, 57, 26, 0.6);
}

.report-readiness--pending .report-readiness__icon {
    color: #ffd78d;
    background: rgba(255, 194, 89, 0.18);
}

.screening-report__layout {
    display: grid;
    grid-template-columns: minmax(0, 2.25fr) minmax(19rem, 0.95fr);
    gap: 0.9rem;
    align-items: start;
}

.screening-report__primary,
.screening-report__sidebar {
    display: grid;
    min-width: 0;
    gap: 0.78rem;
}

.report-candidate-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-height: 6.25rem;
    padding: 0.8rem 1.15rem;
}

.report-candidate-avatar,
.report-list-card__avatar {
    display: grid;
    flex: 0 0 auto;
    width: 4.6rem;
    height: 4.6rem;
    place-items: center;
    border: 2px solid #3ca7ff;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 30%, rgba(95, 202, 255, 0.42), transparent 35%),
        linear-gradient(145deg, #183f78, #071a42);
    box-shadow: 0 0 0 0.32rem rgba(31, 134, 255, 0.12), 0 0 1.4rem rgba(37, 155, 255, 0.32);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 800;
}

.report-candidate-card__identity {
    min-width: 0;
}

.report-candidate-card__identity h2 {
    margin: 0 0 0.28rem;
    font-size: clamp(1.15rem, 1.5vw, 1.55rem);
}

.report-candidate-card__identity p,
.report-candidate-card__identity small {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.62rem;
    margin: 0;
    color: #c5d4ed;
    font-size: 0.84rem;
}

.report-candidate-card__identity small {
    margin-top: 0.28rem;
    color: #88a1c9;
    font-size: 0.76rem;
}

.report-ready-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.62rem 0.85rem;
    border: 1px solid rgba(52, 235, 166, 0.34);
    border-radius: 0.62rem;
    background: rgba(11, 96, 77, 0.2);
    color: #51f3b0;
    font-size: 0.8rem;
    font-weight: 800;
    white-space: nowrap;
}

.report-ready-badge > span:first-child {
    display: grid;
    width: 1.22rem;
    height: 1.22rem;
    place-items: center;
    border-radius: 50%;
    background: #47edaa;
    color: #052a30;
    font-size: 0.72rem;
}

.report-ready-badge.is-pending {
    border-color: rgba(255, 194, 89, 0.4);
    color: #ffd78d;
}

.report-ready-badge.is-pending > span:first-child {
    background: #ffca64;
}

.report-ready-badge.is-error {
    border-color: rgba(255, 113, 119, 0.5);
    color: #ffabb0;
    white-space: normal;
}

.report-ready-badge.is-error > span:first-child {
    background: #ffabb0;
    flex-shrink: 0;
}

.report-metrics {
    display: grid;
    grid-template-columns: 1.25fr 1fr 0.78fr 0.86fr;
    gap: 0.65rem;
}

.report-metric-card {
    display: flex;
    min-width: 0;
    min-height: 8.6rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 0.9rem;
    text-align: center;
}

.report-metric-card__label {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.48rem;
    margin-bottom: auto;
    color: #c6d5ee;
    font-size: 0.78rem;
    text-align: left;
}

.report-metric-card__label i {
    color: #45c9ff;
    font-style: normal;
    font-size: 1rem;
}

.report-metric-card strong {
    margin: 0.55rem 0 0.4rem;
    color: #53f3a8;
    font-size: clamp(1.05rem, 1.45vw, 1.55rem);
    line-height: 1.18;
}

.report-metric-card--recommendation.is-pending strong,
.report-metric-card--recommendation.is-review strong {
    color: #d5def0;
}

.report-metric-card--recommendation.is-not_recommended strong,
.report-status-list dd.is-error {
    color: #ffabb0;
}

.report-status-list dd.is-pending {
    color: #ffd78d;
}

.report-metric-card small {
    display: -webkit-box;
    overflow: hidden;
    color: #c2d0e7;
    font-size: 0.72rem;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.report-metric-card--level strong {
    background: linear-gradient(90deg, #2ea5ff, #9c6aff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.report-metric-card--quality strong {
    color: #9580ff;
    font-size: 2rem;
}

.report-confidence-ring {
    --confidence: 0%;
    position: relative;
    display: grid;
    width: 5.2rem;
    height: 5.2rem;
    margin: 0.38rem auto 0;
    place-items: center;
    border-radius: 50%;
    background: conic-gradient(from -35deg, #45a9ff 0 var(--confidence), #8f6fff var(--confidence), rgba(40, 72, 125, 0.48) var(--confidence) 100%);
    box-shadow: 0 0 1.2rem rgba(86, 109, 255, 0.25);
}

.report-confidence-ring::before {
    position: absolute;
    inset: 0.48rem;
    border: 1px solid rgba(80, 149, 255, 0.35);
    border-radius: inherit;
    background: #071b42;
    content: "";
}

.report-confidence-ring span {
    position: relative;
    z-index: 1;
    font-size: 1.35rem;
    font-weight: 800;
}

.report-summary,
.report-competencies,
.report-evidence {
    padding: 0.85rem 1rem;
}

.report-summary h2,
.report-competencies h2,
.report-evidence h2,
.report-side-card h2 {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 0.68rem;
    font-size: 1rem;
}

.report-heading-icon {
    color: #5dc8ff;
    font-size: 1.08rem;
}

.report-summary__lead,
.report-summary__rationale {
    margin: 0;
    color: #d4e1f5;
    font-size: 0.82rem;
    line-height: 1.48;
}

.report-summary__rationale {
    margin-top: 0.3rem;
    color: #aebfdb;
}

.report-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
    margin-top: 0.65rem;
}

.report-tag {
    padding: 0.32rem 0.58rem;
    border: 1px solid rgba(79, 157, 255, 0.28);
    border-radius: 0.35rem;
    background: rgba(31, 104, 179, 0.2);
    color: #63b9ff;
    font-size: 0.68rem;
    font-weight: 700;
}

.report-tag--strong {
    border-color: rgba(61, 226, 160, 0.22);
    background: rgba(20, 130, 96, 0.24);
    color: #76efbb;
}

.report-tag--risk {
    border-color: rgba(255, 88, 100, 0.25);
    background: rgba(144, 35, 57, 0.24);
    color: #ff7d85;
}

.report-competencies__content {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(15rem, 0.92fr);
    gap: 1rem;
    align-items: center;
}

.report-skill-list {
    display: grid;
    min-width: 0;
}

.report-skill {
    display: grid;
    grid-template-columns: minmax(9rem, 1.2fr) minmax(6rem, 1fr) 2.8rem;
    align-items: center;
    gap: 0.7rem;
    min-height: 2.25rem;
    padding: 0.35rem 0.42rem;
    border-bottom: 1px solid rgba(66, 136, 223, 0.18);
    font-size: 0.73rem;
}

.report-skill__main {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.48rem;
}

.report-skill__main strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-skill__state {
    width: 0.58rem;
    height: 0.58rem;
    flex: 0 0 auto;
    border: 1px solid #55b9ff;
    border-radius: 50%;
    box-shadow: 0 0 0.55rem rgba(65, 175, 255, 0.45);
}

.report-skill__state--strong {
    border-color: #4be3a2;
}

.report-skill__state--risk {
    border-color: #ff646d;
}

.report-skill__bar {
    display: block;
    height: 0.28rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(3, 15, 43, 0.82);
}

.report-skill__bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #2e9cff, #8a6cff);
    box-shadow: 0 0 0.55rem rgba(90, 126, 255, 0.52);
}

.report-skill__bar i.is-strong {
    background: linear-gradient(90deg, #1aaad2, #3adbb8);
}

.report-skill__bar i.is-risk {
    background: linear-gradient(90deg, #ff5d69, #ff8d6b);
}

.report-skill b {
    color: #d6e5fb;
    font-size: 0.8rem;
    text-align: right;
}

.report-radar-card {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) minmax(7rem, 0.72fr);
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}

.report-radar-card svg {
    display: block;
    width: 100%;
    max-height: 12rem;
}

.report-radar__grid {
    fill: rgba(29, 90, 162, 0.08);
    stroke: rgba(75, 143, 226, 0.28);
    stroke-width: 1;
}

.report-radar__axis {
    stroke: rgba(83, 155, 235, 0.26);
    stroke-width: 1;
}

.report-radar__area {
    fill: rgba(69, 123, 255, 0.3);
    stroke: #6776ff;
    stroke-width: 2;
    filter: drop-shadow(0 0 7px rgba(77, 116, 255, 0.64));
}

.report-radar__point {
    fill: #41c6ff;
    stroke: #bdeeff;
    stroke-width: 1;
}

.report-radar-legend {
    display: grid;
    gap: 0.32rem;
    color: #aebfda;
    font-size: 0.62rem;
    line-height: 1.25;
}

.report-radar-legend span {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.report-evidence-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.72rem;
}

.report-evidence-card {
    display: flex;
    min-width: 0;
    min-height: 10rem;
    flex-direction: column;
    padding: 0.82rem;
    border: 1px solid rgba(56, 159, 255, 0.42);
    border-radius: 0.65rem;
    background: linear-gradient(145deg, rgba(8, 42, 95, 0.84), rgba(3, 27, 69, 0.86));
}

.report-evidence-card--accent {
    border-color: rgba(144, 100, 255, 0.58);
}

.report-evidence-card--risk {
    border-color: rgba(255, 85, 99, 0.55);
}

.report-evidence-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.report-evidence-card__head strong {
    font-size: 0.75rem;
}

.report-evidence-card__head span {
    max-width: 5rem;
    overflow: hidden;
    padding: 0.15rem 0.3rem;
    border-radius: 0.22rem;
    background: rgba(38, 124, 227, 0.56);
    color: #d8eeff;
    font-size: 0.58rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.report-evidence-card blockquote,
.report-evidence-card p {
    display: -webkit-box;
    overflow: hidden;
    margin: 0.7rem 0 0;
    color: #c8d8ef;
    font-size: 0.7rem;
    font-style: normal;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.report-evidence-card p {
    margin-top: 0.5rem;
    color: #91a8cd;
    -webkit-line-clamp: 2;
}

.report-evidence-card__badge {
    align-self: flex-start;
    margin-top: auto;
    padding: 0.22rem 0.45rem;
    border: 1px solid rgba(43, 139, 255, 0.46);
    border-radius: 0.35rem;
    background: rgba(29, 100, 187, 0.28);
    color: #53aeff;
    font-size: 0.62rem;
}

.report-evidence-card--risk .report-evidence-card__badge {
    border-color: rgba(255, 89, 102, 0.52);
    background: rgba(136, 37, 54, 0.3);
    color: #ff878e;
}

.report-interviewer {
    display: grid;
    gap: 0.7rem;
}

.report-interviewer .ai-interviewer-art {
    object-fit: contain;
    object-position: left bottom;
}

.report-status-list {
    display: grid;
    gap: 0.38rem;
    margin: 0.7rem 0 0;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(58, 133, 224, 0.2);
    border-radius: 0.55rem;
    background: rgba(2, 19, 50, 0.4);
}

.report-interviewer .report-status-list {
    margin: 0;
}

.report-status-list div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.report-status-list dt {
    color: #9fb3d4;
    font-size: 0.68rem;
}

.report-status-list dd {
    margin: 0;
    color: #58f0ad;
    font-size: 0.68rem;
    font-weight: 800;
    text-align: right;
}

.report-side-card {
    padding: 0.78rem 0.9rem;
}

.report-side-card h2 {
    margin-bottom: 0.5rem;
}

.report-side-card h2 span {
    color: #54d8ff;
}

.report-side-card--risks h2 span {
    color: #ff6b74;
}

.report-side-card--signals h2 span {
    color: #4af0a8;
}

.report-side-card ul {
    display: grid;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.report-side-card li {
    position: relative;
    padding-left: 1rem;
    color: #c0d0e8;
    font-size: 0.68rem;
    line-height: 1.32;
}

.report-side-card li::before {
    position: absolute;
    left: 0.1rem;
    color: #ff656e;
    content: "★";
    font-size: 0.55rem;
}

.report-side-card--signals li::before {
    color: #4af0a8;
    content: "✓";
}

.report-side-card--followup ol {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.report-side-card--followup li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.5rem;
    border: 1px solid rgba(61, 130, 215, 0.15);
    border-radius: 0.42rem;
    background: rgba(14, 46, 96, 0.48);
}

.report-side-card--followup li::before {
    display: none;
}

.report-side-card--followup li > span {
    display: grid;
    width: 1.3rem;
    height: 1.3rem;
    place-items: center;
    border-radius: 0.38rem;
    background: linear-gradient(145deg, #4d83ff, #835eff);
    font-size: 0.62rem;
    font-weight: 800;
}

.report-side-card--followup p {
    margin: 0;
    color: #c2d2e9;
    font-size: 0.66rem;
    line-height: 1.34;
}

.report-empty-note {
    margin: 0;
    color: #8fa6cb;
    font-size: 0.72rem;
    font-style: italic;
}

.report-actions {
    display: grid;
    grid-template-columns: 1fr 0.88fr 1fr;
    gap: 0.85rem;
    margin-top: 0.9rem;
    padding: 0.72rem 0.85rem;
}

.report-action {
    display: flex;
    min-height: 3.15rem;
    align-items: center;
    justify-content: center;
    gap: 0.7rem;
    border: 1px solid rgba(67, 142, 235, 0.42);
    border-radius: 0.58rem;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 800;
    cursor: pointer;
}

.report-action:disabled {
    cursor: not-allowed;
    filter: grayscale(0.8);
    opacity: 0.5;
}

.report-action--invite {
    border-color: rgba(32, 223, 151, 0.52);
    background: linear-gradient(180deg, #11a171, #08745a);
    box-shadow: 0 0 1.25rem rgba(24, 204, 144, 0.18);
}

.report-action--invite b {
    margin-left: auto;
    padding-right: 0.55rem;
    font-size: 1.4rem;
    font-weight: 400;
}

.report-action--pdf {
    background: linear-gradient(180deg, #174f9c, #0c3778);
}

.report-action--compare {
    background: linear-gradient(180deg, #4e31a7, #322274);
}

.report-action.is-done {
    border-color: #4bf0aa;
    color: #78ffc3;
}

.report-action.has-error {
    border-color: #ff646d;
    color: #ff9ea4;
}

.reports-page__subtitle {
    margin: 0.45rem 0 0;
    color: #9fb5d7;
    font-size: 0.9rem;
}

.reports-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}

.report-list-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}

.report-list-card__avatar {
    width: 4rem;
    height: 4rem;
    font-size: 1rem;
}

.report-list-card__body {
    display: grid;
    gap: 0.55rem;
}

.report-list-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.report-list-card__head h2 {
    margin: 0;
    font-size: 1.05rem;
}

.report-list-card__head p,
.report-list-card__body small {
    margin: 0.18rem 0 0;
    color: #9fb3d4;
    font-size: 0.75rem;
}

.report-list-card__head > span {
    padding: 0.3rem 0.5rem;
    border: 1px solid rgba(55, 230, 164, 0.35);
    border-radius: 0.4rem;
    color: #56efae;
    font-size: 0.68rem;
    font-weight: 800;
}

.report-list-card__head > span.is-pending {
    border-color: rgba(255, 196, 91, 0.4);
    color: #ffd17f;
}

.report-list-card .button {
    justify-self: start;
    min-height: 2.3rem;
    padding-inline: 0.8rem;
    font-size: 0.75rem;
}

.reports-empty {
    display: grid;
    min-height: 19rem;
    place-items: center;
    align-content: center;
    padding: 2rem;
    text-align: center;
}

.reports-empty > span {
    color: #4fc7ff;
    font-size: 2.2rem;
}

.reports-empty h2 {
    margin: 0.5rem 0 0;
}

.reports-empty p {
    margin: 0.45rem 0 1rem;
    color: #9fb5d7;
}

@media (max-width: 1280px) {
    .screening-report__layout {
        grid-template-columns: minmax(0, 1.8fr) minmax(18rem, 0.78fr);
    }

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

    .report-metric-card {
        min-height: 7.6rem;
    }

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

@media (max-width: 1020px) {
    .screening-report__layout {
        grid-template-columns: 1fr;
    }

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

    .report-interviewer {
        grid-row: span 2;
    }

    .report-side-card--followup {
        grid-column: 2;
    }

    .report-actions {
        grid-template-columns: 1fr;
    }

    .reports-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .screening-report-main,
    .reports-main {
        padding-inline: 0.75rem;
    }

    .screening-report__title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .report-candidate-card {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .report-ready-badge {
        grid-column: 1 / -1;
        justify-self: stretch;
        justify-content: center;
    }

    .report-metrics,
    .report-competencies__content,
    .screening-report__sidebar,
    .reports-grid {
        grid-template-columns: 1fr;
    }

    .report-interviewer,
    .report-side-card--followup {
        grid-column: auto;
        grid-row: auto;
    }

    .report-radar-card {
        grid-template-columns: minmax(10rem, 0.8fr) minmax(8rem, 1fr);
    }
}

@media (max-width: 560px) {
    .report-candidate-card,
    .report-list-card {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .report-candidate-avatar {
        width: 3.7rem;
        height: 3.7rem;
    }

    .report-candidate-card__identity p,
    .report-candidate-card__identity small {
        display: grid;
        gap: 0.18rem;
    }

    .report-candidate-card__identity [aria-hidden="true"] {
        display: none;
    }

    .report-metrics,
    .report-evidence-grid {
        grid-template-columns: 1fr;
    }

    .report-skill {
        grid-template-columns: minmax(0, 1fr) 2.7rem;
    }

    .report-skill__bar {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .report-radar-card {
        grid-template-columns: 1fr;
    }

    .report-readiness {
        grid-template-columns: auto 1fr;
    }

    .report-readiness .button {
        grid-column: 1 / -1;
    }
}

/* Authentication and candidate email verification */
body.is-auth-modal-open {
    overflow: hidden;
}

.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: clamp(0.75rem, 3vw, 2rem);
}

.auth-modal__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 18%, rgba(34, 200, 255, 0.2), transparent 31rem),
        rgba(1, 7, 22, 0.84);
    backdrop-filter: blur(10px);
}

.auth-modal__panel {
    position: relative;
    z-index: 1;
    width: min(100%, 28rem);
    max-height: calc(100dvh - 1.5rem);
    overflow: auto;
    border: 1px solid rgba(65, 155, 255, 0.5);
    border-radius: 1.15rem;
    padding: clamp(1.35rem, 4vw, 2rem);
    background:
        linear-gradient(150deg, rgba(7, 30, 76, 0.99), rgba(3, 12, 37, 0.99));
    box-shadow:
        0 30px 90px rgba(0, 4, 22, 0.72),
        inset 0 0 36px rgba(46, 140, 255, 0.11);
}

.auth-modal__close {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    place-items: center;
    border: 1px solid rgba(122, 178, 255, 0.28);
    border-radius: 50%;
    padding: 0;
    color: #dce8ff;
    background: rgba(4, 19, 51, 0.75);
    font-size: 1.45rem;
    line-height: 1;
    cursor: pointer;
}

.auth-modal__close:hover,
.auth-modal__close:focus-visible {
    border-color: rgba(34, 200, 255, 0.8);
    color: #ffffff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(34, 200, 255, 0.16);
}

.auth-modal__brand {
    display: grid;
    width: 3.25rem;
    height: 3.25rem;
    margin: 0 auto 1rem;
    place-items: center;
    border: 1px solid rgba(48, 242, 207, 0.55);
    border-radius: 1rem;
    color: #ffffff;
    background: linear-gradient(145deg, rgba(34, 200, 255, 0.32), rgba(103, 73, 255, 0.25));
    box-shadow: 0 0 28px rgba(34, 200, 255, 0.18);
    font-size: 1.65rem;
    font-weight: 900;
}

.auth-modal__heading {
    text-align: center;
}

.auth-modal__eyebrow,
.screening-access__eyebrow {
    margin: 0 0 0.45rem;
    color: var(--green);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.auth-modal__heading h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.65rem, 5vw, 2.15rem);
    line-height: 1.08;
}

.auth-modal__heading > p:last-child {
    margin: 0.75rem 0 0;
    color: #aebfe0;
    line-height: 1.5;
}

.auth-modal__error,
.screening-access__error {
    margin: 1rem 0 0;
    border: 1px solid rgba(255, 91, 124, 0.52);
    border-radius: 0.72rem;
    padding: 0.72rem 0.85rem;
    color: #ffd0da;
    background: rgba(120, 13, 39, 0.22);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.4;
}

.auth-modal__form {
    display: grid;
    gap: 1rem;
    margin-top: 1.25rem;
}

.auth-field {
    display: grid;
    gap: 0.45rem;
    color: #dfeaff;
    font-size: 0.9rem;
    font-weight: 800;
}

.auth-field input,
.screening-access__code {
    width: 100%;
    min-width: 0;
    border: 1px solid rgba(65, 155, 255, 0.4);
    border-radius: 0.72rem;
    outline: none;
    padding: 0.82rem 0.9rem;
    color: var(--text);
    background: rgba(2, 12, 36, 0.82);
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.auth-field input:hover,
.screening-access__code:hover {
    border-color: rgba(65, 155, 255, 0.68);
}

.auth-field input:focus-visible,
.screening-access__code:focus-visible {
    border-color: var(--blue);
    background: rgba(4, 20, 54, 0.96);
    box-shadow: 0 0 0 3px rgba(34, 200, 255, 0.16);
}

.auth-modal__submit,
.screening-access__submit {
    width: 100%;
    min-height: 3rem;
    margin-top: 0.15rem;
}

.auth-modal__privacy {
    margin: 1rem 0 0;
    color: #8198c1;
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: center;
}

.screening-access-body {
    min-width: 0;
}

.screening-access {
    display: grid;
    width: min(100%, 74rem);
    min-height: 100dvh;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 2rem);
    grid-template-rows: auto 1fr;
}

.screening-access__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.screening-access__logo {
    position: static;
}

.screening-access__secure {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid rgba(48, 242, 207, 0.34);
    border-radius: 999px;
    padding: 0.48rem 0.72rem;
    color: #a9fae7;
    background: rgba(6, 79, 76, 0.2);
    font-size: 0.8rem;
    font-weight: 800;
}

.screening-access__secure > span {
    display: grid;
    width: 1.2rem;
    height: 1.2rem;
    place-items: center;
    border-radius: 50%;
    color: #03112d;
    background: var(--green);
    font-size: 0.72rem;
}

.screening-access__card {
    align-self: center;
    justify-self: center;
    width: min(100%, 34rem);
    margin-block: clamp(2rem, 8vh, 5rem);
    border: 1px solid rgba(65, 155, 255, 0.46);
    border-radius: 1.25rem;
    padding: clamp(1.25rem, 5vw, 2.4rem);
    background:
        radial-gradient(circle at 50% 0%, rgba(34, 200, 255, 0.12), transparent 18rem),
        linear-gradient(150deg, rgba(7, 30, 76, 0.97), rgba(3, 12, 37, 0.98));
    box-shadow:
        0 28px 85px rgba(0, 4, 22, 0.64),
        inset 0 0 42px rgba(46, 140, 255, 0.08);
    text-align: center;
}

.screening-access__icon {
    display: grid;
    width: 4.1rem;
    height: 4.1rem;
    margin: 0 auto 1.15rem;
    place-items: center;
    border: 1px solid rgba(34, 200, 255, 0.65);
    border-radius: 50%;
    color: var(--green);
    background: rgba(7, 77, 113, 0.28);
    box-shadow: 0 0 32px rgba(34, 200, 255, 0.17);
    font-size: 1.75rem;
}

.screening-access__card h1 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(1.8rem, 6vw, 2.55rem);
    line-height: 1.08;
}

.screening-access__copy {
    max-width: 28rem;
    margin: 0.85rem auto 0;
    color: #afc1e1;
    line-height: 1.55;
}

.screening-access__copy strong {
    color: #ffffff;
    overflow-wrap: anywhere;
}

.screening-access__temporary-warning {
    margin: 1rem 0;
    color: #ff4d4f;
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 900;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.screening-access__verify {
    display: grid;
    gap: 0.65rem;
    margin-top: 1.35rem;
    text-align: left;
}

.screening-access__verify > label {
    color: #dfeaff;
    font-size: 0.9rem;
    font-weight: 800;
}

.screening-access__code {
    padding-block: 0.86rem;
    font-size: clamp(1.45rem, 7vw, 2rem);
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    letter-spacing: 0.42em;
    text-align: center;
}

.screening-access__code::placeholder {
    color: #506990;
    opacity: 1;
}

.screening-access__code:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.screening-access__verify > p {
    margin: 0;
    color: #7f96bd;
    font-size: 0.78rem;
    line-height: 1.45;
    text-align: center;
}

.screening-access__resend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1.15rem;
    color: #91a7cc;
    font-size: 0.86rem;
}

.screening-access__resend form {
    display: inline;
}

.screening-access__resend button {
    border: 0;
    padding: 0.15rem 0.2rem;
    color: var(--blue);
    background: transparent;
    font-weight: 900;
    cursor: pointer;
}

.screening-access__resend button:hover,
.screening-access__resend button:focus-visible {
    color: #8be9ff;
    outline: 1px solid currentColor;
    outline-offset: 0.18rem;
}

.screening-access__resend button:disabled {
    color: #657a9f;
    cursor: not-allowed;
    outline: none;
}

.screening-access__resend small {
    flex-basis: 100%;
    color: #7890b8;
}

.screening-access__support {
    margin: 1.25rem 0 0;
    border-top: 1px solid rgba(122, 178, 255, 0.18);
    padding-top: 1rem;
    color: #7189b2;
    font-size: 0.78rem;
    line-height: 1.5;
}

@media (max-width: 560px) {
    .auth-modal {
        align-items: end;
        padding: 0;
    }

    .auth-modal__panel {
        width: 100%;
        max-height: calc(100dvh - 0.5rem);
        border-radius: 1.15rem 1.15rem 0 0;
        padding: 1.35rem 1rem calc(1.35rem + env(safe-area-inset-bottom));
    }

    .screening-access {
        padding: 0.85rem;
    }

    .screening-access__secure {
        padding-inline: 0.55rem;
        font-size: 0.72rem;
    }

    .screening-access__card {
        margin-block: 1.35rem;
        border-radius: 1rem;
    }

    .screening-access__code {
        padding-left: calc(0.9rem + 0.42em);
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-field input,
    .screening-access__code {
        transition: none;
    }
}

/* Public candidate registration and activation. */
.interview-status--pending { color: #a35a00; background: #fff1d8; }
.vacancy-registration-link { display: grid; gap: 8px; margin-top: 18px; }
.vacancy-registration-link a { overflow-wrap: anywhere; }