@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Manrope:wght@600;700;800&display=swap");

:root {
    --font-body: "Inter", "Segoe UI", Arial, sans-serif;
    --font-heading: "Manrope", "Inter", "Segoe UI", Arial, sans-serif;
    --bg-dark: #0f172a;
    --bg-soft: #f7f9fb;
    --bg-lilac: #eef2ff;
    --app-screen-width: 1440px;
    --panel: #ffffff;
    --panel-soft: rgba(255, 255, 255, 0.8);
    --panel-border: rgba(199, 196, 215, 0.3);
    --text-main: #191c1e;
    --text-strong: #0f172a;
    --text-body: #464554;
    --text-muted: #64748b;
    --text-soft: #94a3b8;
    --accent: #4648d4;
    --accent-dark: #4f46e5;
    --accent-bright: #6063ee;
    --accent-soft: #e1e0ff;
    --accent-surface: #eef2ff;
    --line: #e2e8f0;
    --line-strong: #cbd5e1;
    --control-bg: #f1f5f9;
    --control-bg-strong: #f2f4f6;
    --button-muted: #eceef0;
    --success: #2da430;
    --success-soft: rgba(33, 192, 4, 0.12);
    --warning: #ea580c;
    --warning-soft: #fff7ed;
    --warning-surface: #ffedd5;
    --danger: #c05858;
    --bot-bubble: #f1f5f9;
    --user-bubble: #6063ee;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    color: var(--text-main);
    background: var(--bg-soft);
}

.shell {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: stretch;
    padding: 0;
    background: var(--bg-soft);
}

.panel {
    width: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    backdrop-filter: none;
}

.dashboard-panel,
.admin-panel,
.admin-methodology-panel,
.admin-reports-panel,
.admin-report-detail-panel,
.ai-welcome-panel,
.prechat-panel,
.profile-panel,
.reports-panel,
.processing-panel,
.report-panel,
.interview-panel,
.chat-panel,
.onboarding-panel {
    width: 100%;
    min-height: 100vh;
}

.auth-panel {
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-self: center;
    width: min(calc(100% - 64px), 448px);
    max-width: 448px;
    min-height: auto;
    padding: 32px 64px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.75);
    text-align: center;
}

.brand {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 18px;
}

h1,
h2 {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: clamp(32px, 4vw, 44px);
    line-height: 1.1;
}

h2 {
    font-size: clamp(36px, 4vw, 56px);
    max-width: 520px;
}

h3,
h4,
.processing-status-header h3,
.profile-card-head h3,
.admin-detail-profile-copy strong,
.report-card-head h3,
.report-details-head h3,
.report-profile-user strong,
.report-hero-score strong,
.report-competency-bar-card strong,
.importance-metric strong,
.prechat-step-card h3,
.interview-case-header h3,
.dashboard-section-title,
.assessment-copy h3,
.assessment-mini-card h3,
.report-copy h3,
.admin-hero-card h2,
.admin-activity-head h3,
.admin-metric-card strong,
.admin-insight-card strong,
.admin-reports-summary-card h3,
.admin-reports-summary-card strong,
.profile-identity-card strong,
.profile-stat strong,
.app-loader-card strong {
    font-family: var(--font-heading);
}

.subtitle {
    margin: 16px 0 0;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1.5;
}

.stack {
    display: grid;
    gap: 18px;
    margin-top: 34px;
}

.field {
    display: grid;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
}

input {
    font-family: var(--font-body);
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px 20px;
    font-size: 18px;
    color: var(--text-main);
    outline: none;
    transition:
        border-color 0.2s ease,
        outline-color 0.2s ease;
}

input:focus {
    border-color: var(--accent);
    outline: 3px solid rgba(70, 72, 212, 0.2);
}

button {
    font-family: var(--font-body);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    font-size: 18px;
}

select,
textarea {
    font-family: var(--font-body);
}

.primary-button {
    padding: 16px 24px;
    border-radius: 8px;
    background: var(--accent-bright);
    color: #fff;
    font-size: 16px;
    line-height: 24px;
}

.primary-button:hover {
    background: var(--accent);
}

.ghost-button {
    background: transparent;
    color: var(--accent);
    padding: 12px 24px;
    font-size: 14px;
    line-height: 20px;
}

.auth-panel .brand {
    margin-bottom: 24px;
    color: var(--text-main);
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -0.45px;
}

.auth-panel h1 {
    color: var(--text-strong);
    font-size: 24px;
    line-height: 32px;
    letter-spacing: 0;
}

.auth-panel-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.auth-panel .subtitle {
    max-width: 320px;
    margin: 0 auto;
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.auth-panel .stack {
    gap: 20px;
    margin-top: 0;
}

.auth-panel .field {
    gap: 8px;
    color: var(--text-strong);
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
}

.auth-panel input {
    border-color: var(--line-strong);
    border-radius: 8px;
    padding: 14px 17px;
    background: #fff;
    color: var(--text-strong);
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
}

.auth-panel input::placeholder {
    color: rgba(100, 116, 139, 0.5);
}

.auth-panel .primary-button {
    width: 100%;
}

.auth-panel .error {
    text-align: left;
}

.onboarding-panel {
    position: relative;
    min-height: 100vh;
    padding: 120px;
    overflow: hidden;
    background: var(--bg-soft);
}

.onboarding-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    min-height: calc(100vh - 240px);
    display: grid;
    grid-template-columns: minmax(448px, 1fr) minmax(448px, 488px);
    gap: 32px;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0 auto;
}

.onboarding-topbar {
    grid-column: 1 / -1;
}

.onboarding-copy {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    min-height: calc(100vh - 240px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
}

.onboarding-copy h2 {
    max-width: 512px;
    margin-top: 16px;
    color: var(--accent);
    font-size: 48px;
    line-height: 48px;
    letter-spacing: -1.5px;
}

.onboarding-copy h2::first-line {
    color: var(--text-main);
}

.onboarding-copy > .subtitle {
    max-width: 512px;
    margin: 16px 0 0;
    color: var(--text-body);
    font-size: 18px;
    line-height: 29.25px;
}

.step-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    height: 48px;
    min-width: 196px;
    padding: 4px 12px;
    border-radius: 12px;
    background: rgba(70, 72, 212, 0.1);
    color: var(--accent);
    font-size: 10px;
    font-weight: 600;
    line-height: 15px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.step-badge::before {
    content: "";
    width: 78px;
    height: 6px;
    border-radius: 12px;
    background:
        linear-gradient(var(--accent), var(--accent)) 0 0 / 40px 6px no-repeat,
        linear-gradient(#c0c1ff, #c0c1ff) 46px 0 / 16px 6px no-repeat,
        linear-gradient(#c0c1ff, #c0c1ff) 68px 0 / 16px 6px no-repeat;
}

.onboarding-panel:has(.case-visual) .step-badge,
.onboarding-panel:has(.radar-visual) .step-badge {
    min-width: 0;
    padding-left: 40px;
}

.onboarding-panel:has(.case-visual) .step-badge::before {
    width: 84px;
    background:
        linear-gradient(#c0c1ff, #c0c1ff) 0 0 / 16px 6px no-repeat,
        linear-gradient(var(--accent), var(--accent)) 22px 0 / 40px 6px
            no-repeat,
        linear-gradient(#c0c1ff, #c0c1ff) 68px 0 / 16px 6px no-repeat;
}

.onboarding-panel:has(.radar-visual) .step-badge::before {
    width: 84px;
    background:
        linear-gradient(#c0c1ff, #c0c1ff) 0 0 / 16px 6px no-repeat,
        linear-gradient(#c0c1ff, #c0c1ff) 22px 0 / 16px 6px no-repeat,
        linear-gradient(var(--accent), var(--accent)) 44px 0 / 40px 6px
            no-repeat;
}

.onboarding-panel:has(.case-visual) .step-badge::after,
.onboarding-panel:has(.radar-visual) .step-badge::after {
    content: "";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.825 9L9.425 14.6L8 16L0 8L8 0L9.425 1.4L3.825 7H16V9H3.825Z' fill='%23191C1E'/%3E%3C/svg%3E")
        center / contain no-repeat;
    transform: translateY(-50%);
}

.feature-list {
    display: grid;
    width: 100%;
    gap: 16px;
    margin-top: auto;
    padding-top: 32px;
}

.feature-item {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 16px;
    row-gap: 0;
    max-width: 512px;
    min-height: 72px;
    padding: 16px;
    border: 0;
    border-radius: 8px;
}

.feature-item::before {
    content: "";
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: var(--control-bg-strong);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

.onboarding-panel:has(.visual-grid) .feature-item:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' viewBox='0 0 20 21' fill='none'%3E%3Cpath d='M1.625 13.025L0 11.85L5 3.85L8 7.35L12 0.85L15 5.35L18.375 0L20 1.175L15.05 9.025L12.075 4.55L8.275 10.725L5.25 7.2L1.625 13.025ZM13.5 17C14.2 17 14.7917 16.7583 15.275 16.275C15.7583 15.7917 16 15.2 16 14.5C16 13.8 15.7583 13.2083 15.275 12.725C14.7917 12.2417 14.2 12 13.5 12C12.8 12 12.2083 12.2417 11.725 12.725C11.2417 13.2083 11 13.8 11 14.5C11 15.2 11.2417 15.7917 11.725 16.275C12.2083 16.7583 12.8 17 13.5 17ZM18.6 21L15.9 18.3C15.55 18.5333 15.1708 18.7083 14.7625 18.825C14.3542 18.9417 13.9333 19 13.5 19C12.25 19 11.1875 18.5625 10.3125 17.6875C9.4375 16.8125 9 15.75 9 14.5C9 13.25 9.4375 12.1875 10.3125 11.3125C11.1875 10.4375 12.25 10 13.5 10C14.75 10 15.8125 10.4375 16.6875 11.3125C17.5625 12.1875 18 13.25 18 14.5C18 14.9333 17.9417 15.3542 17.825 15.7625C17.7083 16.1708 17.5333 16.55 17.3 16.9L20 19.6L18.6 21Z' fill='%234648D4'/%3E%3C/svg%3E");
    background-size: 20px 21px;
}

.onboarding-panel:has(.visual-grid) .feature-item:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='19' viewBox='0 0 22 19' fill='none'%3E%3Cpath d='M3 13C2.16667 13 1.45833 12.7083 0.875 12.125C0.291667 11.5417 0 10.8333 0 10C0 9.16667 0.291667 8.45833 0.875 7.875C1.45833 7.29167 2.16667 7 3 7V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H8C8 2.16667 8.29167 1.45833 8.875 0.875C9.45833 0.291667 10.1667 0 11 0C11.8333 0 12.5417 0.291667 13.125 0.875C13.7083 1.45833 14 2.16667 14 3H17C17.55 3 18.0208 3.19583 18.4125 3.5875C18.8042 3.97917 19 4.45 19 5V7C19.8333 7 20.5417 7.29167 21.125 7.875C21.7083 8.45833 22 9.16667 22 10C22 10.8333 21.7083 11.5417 21.125 12.125C20.5417 12.7083 19.8333 13 19 13V17C19 17.55 18.8042 18.0208 18.4125 18.4125C18.0208 18.8042 17.55 19 17 19H5C4.45 19 3.97917 18.8042 3.5875 18.4125C3.19583 18.0208 3 17.55 3 17V13ZM8 11C8.41667 11 8.77083 10.8542 9.0625 10.5625C9.35417 10.2708 9.5 9.91667 9.5 9.5C9.5 9.08333 9.35417 8.72917 9.0625 8.4375C8.77083 8.14583 8.41667 8 8 8C7.58333 8 7.22917 8.14583 6.9375 8.4375C6.64583 8.72917 6.5 9.08333 6.5 9.5C6.5 9.91667 6.64583 10.2708 6.9375 10.5625C7.22917 10.8542 7.58333 11 8 11ZM14 11C14.4167 11 14.7708 10.8542 15.0625 10.5625C15.3542 10.2708 15.5 9.91667 15.5 9.5C15.5 9.08333 15.3542 8.72917 15.0625 8.4375C14.7708 8.14583 14.4167 8 14 8C13.5833 8 13.2292 8.14583 12.9375 8.4375C12.6458 8.72917 12.5 9.08333 12.5 9.5C12.5 9.91667 12.6458 10.2708 12.9375 10.5625C13.2292 10.8542 13.5833 11 14 11ZM7 15H15V13H7V15ZM5 17H17V5H5V17Z' fill='%234648D4'/%3E%3C/svg%3E");
    background-size: 22px 19px;
}

.onboarding-panel:has(.case-visual) .feature-item:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' viewBox='0 0 18 16' fill='none'%3E%3Cpath d='M0 10V8H7V10H0ZM0 6V4H11V6H0ZM0 2V0H11V2H0ZM9 16V12.925L14.525 7.425C14.675 7.275 14.8417 7.16667 15.025 7.1C15.2083 7.03333 15.3917 7 15.575 7C15.775 7 15.9667 7.0375 16.15 7.1125C16.3333 7.1875 16.5 7.3 16.65 7.45L17.575 8.375C17.7083 8.525 17.8125 8.69167 17.8875 8.875C17.9625 9.05833 18 9.24167 18 9.425C18 9.60833 17.9667 9.79583 17.9 9.9875C17.8333 10.1792 17.725 10.35 17.575 10.5L12.075 16H9ZM16.5 9.425L15.575 8.5L16.5 9.425ZM10.5 14.5H11.45L14.475 11.45L14.025 10.975L13.55 10.525L10.5 13.55V14.5ZM14.025 10.975L13.55 10.525L14.475 11.45L14.025 10.975Z' fill='%234648D4'/%3E%3C/svg%3E");
    background-size: 18px 16px;
}

.onboarding-panel:has(.case-visual) .feature-item:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M3 20V15.7C2.05 14.8333 1.3125 13.8208 0.7875 12.6625C0.2625 11.5042 0 10.2833 0 9C0 6.5 0.875 4.375 2.625 2.625C4.375 0.875 6.5 0 9 0C11.0833 0 12.9292 0.6125 14.5375 1.8375C16.1458 3.0625 17.1917 4.65833 17.675 6.625L18.975 11.75C19.0583 12.0667 19 12.3542 18.8 12.6125C18.6 12.8708 18.3333 13 18 13H16V16C16 16.55 15.8042 17.0208 15.4125 17.4125C15.0208 17.8042 14.55 18 14 18H12V20H10V16H14V11H16.7L15.75 7.125C15.3667 5.60833 14.55 4.375 13.3 3.425C12.05 2.475 10.6167 2 9 2C7.06667 2 5.41667 2.675 4.05 4.025C2.68333 5.375 2 7.01667 2 8.95C2 9.95 2.20417 10.9 2.6125 11.8C3.02083 12.7 3.6 13.5 4.35 14.2L5 14.8V20H3ZM8 13H10L10.15 11.75C10.2833 11.7 10.4042 11.6417 10.5125 11.575C10.6208 11.5083 10.7167 11.4333 10.8 11.35L11.95 11.85L12.95 10.15L11.95 9.4C11.9833 9.26667 12 9.13333 12 9C12 8.86667 11.9833 8.73333 11.95 8.6L12.95 7.85L11.95 6.15L10.8 6.65C10.7167 6.56667 10.6208 6.49167 10.5125 6.425C10.4042 6.35833 10.2833 6.3 10.15 6.25L10 5H8L7.85 6.25C7.71667 6.3 7.59583 6.35833 7.4875 6.425C7.37917 6.49167 7.28333 6.56667 7.2 6.65L6.05 6.15L5.05 7.85L6.05 8.6C6.01667 8.73333 6 8.86667 6 9C6 9.13333 6.01667 9.26667 6.05 9.4L5.05 10.15L6.05 11.85L7.2 11.35C7.28333 11.4333 7.37917 11.5083 7.4875 11.575C7.59583 11.6417 7.71667 11.7 7.85 11.75L8 13ZM9 10.5C8.58333 10.5 8.22917 10.3542 7.9375 10.0625C7.64583 9.77083 7.5 9.41667 7.5 9C7.5 8.58333 7.64583 8.22917 7.9375 7.9375C8.22917 7.64583 8.58333 7.5 9 7.5C9.41667 7.5 9.77083 7.64583 10.0625 7.9375C10.3542 8.22917 10.5 8.58333 10.5 9C10.5 9.41667 10.3542 9.77083 10.0625 10.0625C9.77083 10.3542 9.41667 10.5 9 10.5Z' fill='%234648D4'/%3E%3C/svg%3E");
    background-size: 20px 20px;
}

.feature-item strong {
    color: var(--text-main);
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

.feature-item span {
    color: var(--text-body);
    font-size: 14px;
    line-height: 20px;
}

.onboarding-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 32px;
    padding-top: 24px;
}

.onboarding-actions .primary-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
    padding: 16px 40px;
    font-family: var(--font-heading);
    font-weight: 700;
}

.onboarding-actions .primary-button::after {
    content: "→";
    font-family: var(--font-body);
    font-weight: 600;
}

.onboarding-actions .ghost-button {
    color: var(--text-body);
    padding: 0 16px;
    font-weight: 600;
}

.onboarding-panel:has(.radar-visual) .onboarding-shell {
    grid-template-columns: minmax(512px, 1fr) 512px;
    gap: 0;
}

.onboarding-panel:has(.radar-visual) .onboarding-copy h2 {
    max-width: 640px;
    line-height: 60px;
}

.onboarding-panel:has(.radar-visual) .onboarding-copy > .subtitle {
    max-width: 512px;
    font-size: 20px;
    line-height: 32.5px;
}

.onboarding-panel:has(.radar-visual) .feature-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding-top: 48px;
}

.onboarding-panel:has(.radar-visual) .feature-item {
    display: block;
    min-height: 186px;
    padding: 24px;
    border: 1px solid rgba(199, 196, 215, 0.2);
    background: #fff;
}

.onboarding-panel:has(.radar-visual) .feature-item::before {
    display: block;
    margin-bottom: 16px;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px solid var(--accent);
}

.onboarding-panel:has(.radar-visual) .feature-item:nth-child(1)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none'%3E%3Cpath d='M22.5 10L20.9375 6.5625L17.5 5L20.9375 3.4375L22.5 0L24.0625 3.4375L27.5 5L24.0625 6.5625L22.5 10ZM22.5 27.5L20.9375 24.0625L17.5 22.5L20.9375 20.9375L22.5 17.5L24.0625 20.9375L27.5 22.5L24.0625 24.0625L22.5 27.5ZM10 23.75L6.875 16.875L0 13.75L6.875 10.625L10 3.75L13.125 10.625L20 13.75L13.125 16.875L10 23.75ZM10 17.6875L11.25 15L13.9375 13.75L11.25 12.5L10 9.8125L8.75 12.5L6.0625 13.75L8.75 15L10 17.6875Z' fill='%234648D4'/%3E%3C/svg%3E");
    background-size: 28px 28px;
}

.onboarding-panel:has(.radar-visual) .feature-item:nth-child(2)::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='25' viewBox='0 0 20 25' fill='none'%3E%3Cpath d='M5 20H15V17.5H5V20ZM5 15H15V12.5H5V15ZM2.5 25C1.8125 25 1.22396 24.7552 0.734375 24.2656C0.244792 23.776 0 23.1875 0 22.5V2.5C0 1.8125 0.244792 1.22396 0.734375 0.734375C1.22396 0.244792 1.8125 0 2.5 0H12.5L20 7.5V22.5C20 23.1875 19.7552 23.776 19.2656 24.2656C18.776 24.7552 18.1875 25 17.5 25H2.5ZM11.25 8.75V2.5H2.5V22.5H17.5V8.75H11.25ZM2.5 2.5V8.75V2.5V8.75V22.5V2.5Z' fill='%23904900'/%3E%3C/svg%3E");
    background-size: 20px 25px;
    border-color: var(--warning);
}

.onboarding-panel:has(.radar-visual) .onboarding-actions .primary-button {
    min-width: 251px;
    padding: 16px 32px;
    font-size: 18px;
    line-height: 28px;
}

.onboarding-panel:has(.case-visual) .feature-list {
    gap: 24px;
}

.onboarding-panel:has(.case-visual) .feature-item {
    padding: 0;
}

.onboarding-panel:has(.case-visual) .feature-item::before {
    margin-top: 4px;
}

.onboarding-visual {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    width: 100%;
    min-height: 597px;
    display: grid;
    place-items: center;
    border-radius: 0;
    background: transparent;
}

.visual-grid {
    width: min(100%, 488px);
    height: 500px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.visual-card,
.visual-chip,
.case-bubble,
.case-sheet,
.case-progress,
.radar-visual {
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.7);
}

.visual-card {
    min-height: 0;
    padding: 17px;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 10px;
    line-height: 15px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.visual-card.visual-main {
    grid-column: 1 / span 4;
    grid-row: 1 / span 4;
    min-height: 0;
    border-radius: 12px;
    background: var(--accent-bright);
    color: #fff;
    font-size: 12px;
    letter-spacing: 0;
    text-transform: none;
}

.visual-card:not(.visual-main):not(.muted) {
    grid-column: 5 / span 2;
    grid-row: 1 / span 2;
    backdrop-filter: blur(8px);
}

.visual-card:not(.visual-main):not(.muted)::before {
    content: "";
    width: 22px;
    height: 30px;
    margin-bottom: 8px;
    border: 2px solid var(--accent-bright);
    border-radius: 4px;
}

.visual-card.muted {
    grid-column: 5 / span 2;
    grid-row: 3 / span 3;
    background: #e0e3e5;
}

.visual-card.muted::before,
.visual-card.muted::after {
    content: "";
    width: 100%;
    height: 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.5);
}

.visual-card.muted::after {
    width: 80%;
    margin-top: 8px;
}

.visual-chip {
    grid-column: 4;
    grid-row: 6;
    width: auto;
    height: auto;
    justify-self: stretch;
    align-self: stretch;
    border-radius: 12px;
    background: #ffdcc5;
}

.case-visual {
    position: relative;
    width: min(100%, 448px);
    min-height: 597px;
}

.case-bubble {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 342px;
    min-height: 122px;
    padding: 17px 17px 17px 61px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 0 16px 16px;
    background: rgba(255, 255, 255, 0.7);
    color: var(--text-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 19.5px;
    transform: rotate(-2deg);
    backdrop-filter: blur(6px);
}

.case-bubble::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 17px;
    width: 32px;
    height: 32px;
    border-radius: 12px;
    background: var(--accent-bright);
}

.case-sheet {
    position: absolute;
    right: 24px;
    top: 42px;
    width: 376px;
    height: 506px;
    background: #fff;
    border: 0;
    border-radius: 8px;
    transform: rotate(3deg);
}

.case-sheet::before,
.case-sheet::after {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    height: 10px;
    border-radius: 12px;
    background: var(--button-muted);
}

.case-sheet::before {
    top: 88px;
}

.case-sheet::after {
    top: 112px;
    right: 58px;
}

.case-progress {
    position: absolute;
    z-index: 3;
    top: 118px;
    left: 42px;
    width: 342px;
    min-height: 74px;
    padding: 16px;
    border-radius: 0 0 16px 16px;
    background: var(--accent-bright);
    color: #fff;
    text-align: right;
    font-size: 12px;
    line-height: 16px;
    transform: rotate(1deg);
}

.case-progress::before,
.case-progress::after {
    content: "";
    display: block;
    height: 8px;
    margin-top: 8px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.2);
}

.case-progress::after {
    width: 68%;
    margin-left: auto;
}

.radar-visual {
    position: relative;
    width: 488px;
    height: 488px;
    border-radius: 50%;
    border: 1px solid rgba(70, 72, 212, 0.05);
    background: transparent;
    display: grid;
    place-items: center;
}

.radar-visual::before,
.radar-visual::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(70, 72, 212, 0.05);
    border-radius: 50%;
}

.radar-visual::before {
    inset: 51px;
}

.radar-visual::after {
    inset: 102px;
}

.radar-shape {
    position: relative;
    z-index: 1;
    width: 292px;
    height: 292px;
    background: rgba(96, 99, 238, 0.46);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.radar-visual span {
    position: absolute;
    z-index: 2;
    padding: 9px 17px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-main);
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    backdrop-filter: blur(6px);
}

.radar-visual span:nth-of-type(1) {
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
}
.radar-visual span:nth-of-type(2) {
    right: -56px;
    top: 50%;
    transform: translateY(-50%);
}
.radar-visual span:nth-of-type(3) {
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
}
.radar-visual span:nth-of-type(4) {
    left: -80px;
    top: 50%;
    transform: translateY(-50%);
}

.chat-panel {
    padding: 26px;
    display: grid;
    gap: 20px;
}

.ai-welcome-panel,
.prechat-panel,
.processing-panel,
.report-panel,
.interview-panel {
    background: var(--bg-soft);
}

.prechat-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 24px;
}

.processing-panel {
    padding: 22px 24px 32px;
}

.processing-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.processing-back-button {
    padding: 10px 0;
    color: var(--text-main);
}

.processing-safe-badge {
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(70, 72, 212, 0.1);
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.processing-shell {
    min-height: 760px;
    display: grid;
    justify-items: center;
    align-content: start;
    gap: 28px;
    padding: 24px 20px 12px;
}

.processing-copy {
    max-width: 720px;
    text-align: center;
}

.processing-copy h2 {
    max-width: none;
    font-size: clamp(40px, 4vw, 56px);
}

.processing-copy p {
    margin: 16px 0 0;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1.55;
}

.processing-orbit {
    position: relative;
    width: 320px;
    height: 240px;
}

.processing-node {
    position: absolute;
    min-width: 122px;
    padding: 12px 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--panel-border);
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease;
}

.processing-node.center {
    left: 50%;
    top: 54%;
    transform: translate(-50%, -50%);
}

.processing-node.top {
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.processing-node.left {
    left: 0;
    bottom: 8px;
}

.processing-node.right {
    right: 0;
    bottom: 8px;
}

.processing-node.active {
    background: var(--accent-bright);
    color: #fff;
    border-color: transparent;
    transform: translate(-50%, -50%) scale(1.03);
}

.processing-node.top.active {
    transform: translateX(-50%) scale(1.03);
}

.processing-node.left.active,
.processing-node.right.active {
    transform: scale(1.03);
}

.processing-node.done {
    background: var(--success-soft);
    border-color: rgba(45, 164, 48, 0.2);
    color: var(--success);
}

.processing-connector {
    position: absolute;
    background: rgba(70, 72, 212, 0.24);
    border-radius: 999px;
}

.connector-top {
    left: 50%;
    top: 58px;
    width: 4px;
    height: 64px;
    transform: translateX(-50%);
}

.connector-left {
    left: 78px;
    bottom: 74px;
    width: 82px;
    height: 4px;
    transform: rotate(-28deg);
}

.connector-right {
    right: 78px;
    bottom: 74px;
    width: 82px;
    height: 4px;
    transform: rotate(28deg);
}

.processing-status-card,
.processing-agents-card {
    width: min(100%, 760px);
    padding: 24px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--panel-border);
}

.processing-status-header,
.processing-agents-header,
.processing-agent-main,
.processing-agent-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.processing-status-header h3 {
    margin: 6px 0 0;
    font-size: 24px;
}

.processing-status-header strong {
    color: var(--accent);
    font-size: 40px;
}

.processing-progress-track,
.processing-agent-track {
    height: 10px;
    margin-top: 16px;
    border-radius: 999px;
    background: var(--accent-surface);
    overflow: hidden;
}

.processing-progress-fill,
.processing-agent-fill {
    width: 0;
    height: 100%;
    background: linear-gradient(135deg, var(--accent), var(--accent-bright));
    transition: width 0.45s ease;
}

.processing-status-text {
    margin: 14px 0 0;
    color: var(--text-muted);
    line-height: 1.55;
}

.processing-agents-header {
    margin-bottom: 18px;
}

.processing-agents-list {
    display: grid;
    gap: 14px;
}

.processing-agent-card {
    display: grid;
    gap: 12px;
    padding: 18px;
    border-radius: 20px;
    background: var(--control-bg);
    border: 1px solid var(--panel-border);
}

.processing-agent-card.running {
    background: rgba(70, 72, 212, 0.08);
    border-color: rgba(70, 72, 212, 0.18);
}

.processing-agent-card.done {
    background: var(--success-soft);
    border-color: rgba(45, 164, 48, 0.18);
}

.processing-agent-order {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--accent-surface);
    color: var(--accent);
    font-size: 14px;
    font-weight: 800;
}

.processing-agent-copy {
    flex: 1;
}

.processing-agent-copy strong {
    display: block;
    font-size: 16px;
}

.processing-agent-copy p {
    margin: 6px 0 0;
    color: var(--text-muted);
    line-height: 1.5;
}

.processing-agent-status,
.processing-agent-percent {
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.processing-agent-status {
    color: var(--text-muted);
}

.processing-agent-card.running .processing-agent-status,
.processing-agent-card.running .processing-agent-percent {
    color: var(--accent);
}

.processing-agent-card.done .processing-agent-status,
.processing-agent-card.done .processing-agent-percent {
    color: var(--success);
}

.primary-button:disabled {
    opacity: 0.55;
    cursor: default;
}

.report-panel {
    padding: 0 0 30px;
}

.profile-panel {
    padding: 0 0 30px;
    background: var(--bg-soft);
}

.reports-panel {
    padding: 0 0 30px;
    background: var(--bg-soft);
}

.profile-shell {
    display: grid;
    gap: 24px;
    padding: 24px 40px 0;
}

.profile-hero-card {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 20px;
}

.profile-identity-card,
.profile-info-card,
.profile-history-card,
.profile-results-card {
    padding: 24px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--panel-border);
}

.profile-info-card {
    display: flex;
    flex-direction: column;
}

.profile-identity-card {
    display: grid;
    justify-items: center;
    gap: 10px;
    align-content: start;
}

.profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 28px;
    display: grid;
    place-items: center;
    font-size: 40px;
    font-weight: 800;
    color: var(--accent);
    background: var(--accent-surface);
    border: 1px solid rgba(70, 72, 212, 0.16);
}

.profile-identity-card strong {
    font-size: 24px;
    text-align: center;
}

.profile-identity-card > span {
    color: var(--text-muted);
    text-align: center;
}

.profile-stats {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 8px;
}

.profile-stat {
    min-width: 0;
    padding: 18px 20px;
    border-radius: 18px;
    background: var(--accent-surface);
    text-align: center;
}

.profile-stat span {
    display: block;
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.profile-stat strong {
    display: block;
    margin-top: 8px;
    font-size: 28px;
    color: var(--accent);
}

.profile-card-head h3 {
    margin: 0;
    font-size: 26px;
}

.profile-card-head p {
    margin: 8px 0 0;
    color: var(--text-muted);
    line-height: 1.5;
}

.profile-info-grid {
    flex: 1;
    display: grid;
    gap: 14px;
    align-content: space-between;
    margin-top: 20px;
}

.profile-field {
    display: grid;
    gap: 8px;
}

.profile-field span {
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.profile-field input {
    min-height: 50px;
    border-radius: 14px;
    border: 1px solid var(--line-strong);
    background: var(--control-bg);
    padding: 0 14px;
    font: inherit;
    color: var(--text-main);
}

.profile-history-list,
.profile-skills-list {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.profile-report-redirect {
    margin-top: 18px;
    display: flex;
    justify-content: flex-start;
}

#profile-open-reports-button {
    font-weight: 600;
}

.reports-shell {
    gap: 20px;
}

.reports-history-card,
.reports-results-card {
    width: 100%;
}

.profile-history-accordion {
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    overflow: hidden;
}

.profile-history-item {
    width: 100%;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    text-align: left;
    cursor: pointer;
}

.profile-history-copy {
    display: grid;
    gap: 6px;
}

.profile-history-copy span,
.profile-history-status,
.profile-skill-main span {
    color: var(--text-muted);
}

.profile-history-meta {
    text-align: right;
    display: grid;
    gap: 6px;
}

.profile-history-toggle {
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.profile-history-panel {
    display: none;
    padding: 0 18px 18px;
    border-top: 1px solid var(--line);
}

.profile-history-panel.expanded {
    display: block;
}

.profile-history-panel-head {
    padding: 16px 0 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.profile-history-panel-summary {
    display: grid;
    gap: 4px;
}

.profile-history-panel-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.profile-history-panel-head span {
    color: var(--text-muted);
}

.profile-history-panel-head strong {
    color: var(--accent);
    font-size: 24px;
}

.profile-history-pdf-button {
    padding: 10px 16px;
    border-radius: 999px;
    border: 1px solid rgba(70, 72, 212, 0.16);
    background: rgba(255, 255, 255, 0.96);
    color: var(--accent);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.profile-history-pdf-button:hover {
    background: rgba(70, 72, 212, 0.08);
}

.profile-history-panel-body {
    display: grid;
    gap: 10px;
}

.profile-skill-columns {
    padding-top: 4px;
    padding-bottom: 2px;
}

.profile-results-head {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 18px;
}

.profile-results-badge {
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--button-muted);
    color: var(--text-muted);
    font-weight: 700;
}

.profile-results-badge.active {
    background: rgba(70, 72, 212, 0.12);
    color: var(--accent);
}

.profile-skill-row {
    display: grid;
    grid-template-columns: minmax(240px, 1.3fr) 160px minmax(240px, 1fr);
    gap: 18px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
}

.profile-skill-main {
    display: grid;
    gap: 6px;
}

.profile-skill-level {
    font-weight: 700;
    color: var(--accent);
    text-align: center;
}

.profile-skill-progress {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    align-items: center;
}

.compact-primary {
    padding: 12px 16px;
    font-size: 14px;
    border-radius: 12px;
}

.report-shell {
    display: grid;
    gap: 24px;
    padding: 24px 40px 0;
}

.report-hero {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
}

.report-hero-copy h2 {
    max-width: none;
    font-size: clamp(34px, 4vw, 48px);
}

.report-hero-copy p {
    margin: 12px 0 0;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 1.55;
    max-width: 780px;
}

.report-hero-score {
    min-width: 180px;
    padding: 22px 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--panel-border);
    text-align: center;
}

.report-hero-score strong {
    display: block;
    font-size: 54px;
    color: var(--accent);
}

.report-hero-score > span {
    color: var(--text-muted);
}

.report-overview-grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 20px;
}

.report-profile-card,
.report-competencies-card,
.report-insight-card,
.report-details-card {
    padding: 24px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--panel-border);
}

.report-profile-card {
    display: grid;
    gap: 18px;
    align-content: start;
    grid-column: 1 / -1;
}

.admin-detail-profile-head {
    display: grid;
    grid-template-columns: 144px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.admin-detail-photo-card {
    position: relative;
    width: 144px;
}

.admin-detail-photo {
    width: 144px;
    height: 144px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: var(--accent-surface);
    color: var(--accent);
    font-size: 44px;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.admin-detail-photo-status {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--success);
    border: 3px solid #fff;
}

.admin-detail-profile-copy {
    display: grid;
    gap: 6px;
}

.admin-detail-profile-copy strong,
.report-card-head h3,
.report-details-head h3 {
    display: block;
    margin: 6px 0 0;
    font-size: 24px;
}

.admin-detail-profile-copy > span {
    color: var(--text-muted);
}

.admin-detail-profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.admin-detail-badge {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    background: rgba(70, 72, 212, 0.1);
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
}

.admin-detail-badge.muted {
    background: var(--control-bg);
    color: var(--text-muted);
}

.report-profile-user {
    display: flex;
    align-items: center;
    gap: 14px;
}

.report-profile-user strong {
    display: block;
    margin: 6px 0 0;
    font-size: 24px;
}

.report-profile-user span {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
}

.report-profile-box {
    padding: 18px;
    border-radius: 20px;
    background: var(--warning-soft);
    color: var(--text-main);
}

.report-recommendations {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    margin: 16px 0 0;
    color: #fff8ef;
    list-style: none;
    padding: 0;
}

.report-recommendations li {
    padding: 12px 14px;
    border: 1px solid rgba(255, 251, 255, 0.22);
    border-radius: 8px;
    background: rgba(255, 251, 255, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 251, 255, 0.12);
    color: #fff8ef;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.45;
}

.report-competencies-card,
.report-insight-card,
.report-details-card {
    display: grid;
    gap: 18px;
}

.report-card-head,
.report-details-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 16px;
}

.report-competency-bars {
    position: relative;
    min-height: 230px;
    height: 230px;
}

.report-competency-bars canvas {
    width: 100% !important;
    height: 100% !important;
}

.report-competency-bars-fallback {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
    height: 100%;
    padding: 0;
}

.report-competency-bar-card {
    min-height: 230px;
    display: grid;
    grid-template-rows: 34px 24px 1fr;
    gap: 4px;
    align-items: start;
    justify-items: center;
    padding: 16px 8px 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, #f1efff 0%, #dfdcfb 100%);
    text-align: center;
}

.report-competency-bar-card strong {
    grid-row: 1;
    align-self: center;
    color: #6d61f3;
    font-family: var(--font-body);
    font-size: 26px;
    font-weight: 800;
    line-height: 32px;
}

.report-competency-bar-card span {
    grid-row: 2;
    max-width: 100%;
    min-height: 16px;
    padding: 0;
    color: #2b2d42;
    font-size: 11px;
    font-weight: 800;
    line-height: 14px;
    text-decoration: none;
    text-transform: none;
}

.report-competency-meter {
    grid-row: 3;
    align-self: center;
    width: 48px;
    height: 124px;
    display: flex;
    align-items: flex-end;
    padding: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    overflow: hidden;
}

.report-competency-meter-fill {
    width: 100%;
    min-height: 0;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        #8d84ff 0%,
        #6757f0 46%,
        #5d4be8 100%
    );
}

.report-insight-card {
    grid-column: 2;
}

.report-insight-card p:last-child {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.6;
}

.report-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.report-tab-button {
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(70, 72, 212, 0.08);
    color: var(--accent);
    font-size: 13px;
    font-weight: 800;
}

.report-tab-button.active {
    background: var(--accent-bright);
    color: #fff;
}

.report-detail-list {
    display: grid;
    gap: 12px;
}

.report-detail-columns {
    display: grid;
    grid-template-columns: minmax(240px, 1.3fr) 160px minmax(240px, 1fr);
    gap: 18px;
    align-items: center;
    padding: 0 18px 8px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.report-detail-column-level {
    text-align: center;
}

.report-detail-column-progress {
    padding-left: 2px;
}

.report-skill-row {
    display: grid;
    grid-template-columns: minmax(240px, 1.3fr) 160px minmax(240px, 1fr);
    gap: 18px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 18px;
    background: var(--control-bg);
    border: 1px solid var(--panel-border);
}

.report-skill-name {
    font-weight: 700;
}

.report-skill-level {
    color: var(--accent);
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
}

.report-skill-progress {
    display: flex;
    align-items: center;
    gap: 12px;
}

.report-skill-progress-track {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: var(--accent-surface);
    overflow: hidden;
}

.report-skill-progress-fill {
    height: 100%;
    background: linear-gradient(135deg, var(--accent), var(--accent-bright));
}

.report-skill-progress span {
    min-width: 44px;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 800;
    text-align: right;
}

.report-empty-state {
    margin: 0;
    color: var(--text-muted);
}

@media (max-width: 900px) {
    .profile-history-panel-head {
        align-items: start;
        flex-direction: column;
    }

    .profile-history-panel-actions {
        width: 100%;
    }

    .profile-history-pdf-button {
        width: 100%;
        justify-content: center;
    }

    .report-detail-columns {
        display: none;
    }

    .report-skill-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .report-skill-level {
        text-align: left;
    }
}

.ai-welcome-shell {
    display: grid;
    gap: 28px;
    padding: 18px 40px 36px;
}

.ai-hero-card,
.importance-card {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: 24px;
    align-items: center;
    padding: 34px;
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.84);
    border: 1px solid var(--panel-border);
}

.ai-hero-copy h2,
.prechat-copy h2 {
    font-size: clamp(40px, 4vw, 58px);
    max-width: 560px;
}

.ai-hero-copy p,
.library-subtitle,
.importance-card p,
.prechat-copy p {
    color: var(--text-muted);
    line-height: 1.55;
    font-size: 18px;
}

.ai-hero-illustration {
    display: grid;
    place-items: center;
    min-height: 220px;
    font-size: 140px;
    color: rgba(70, 72, 212, 0.22);
}

.compact-title {
    font-size: 28px;
}

.mini-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mini-start-button {
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(70, 72, 212, 0.1);
    color: var(--accent);
    font-size: 14px;
}

.mini-start-button.disabled {
    background: var(--control-bg);
    color: var(--text-soft);
}

.disabled-card {
    opacity: 0.72;
}

.importance-metric {
    justify-self: end;
    text-align: right;
}

.importance-metric strong {
    display: block;
    font-size: 48px;
    color: var(--accent);
}

.importance-metric span {
    color: var(--text-muted);
    font-size: 14px;
}

.prechat-shell {
    width: 100%;
    min-height: calc(100vh - 6rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    padding: 0;
    background: var(--bg-soft);
}

.centered-brand {
    margin: 0;
    color: var(--text-strong);
    font-size: 24px;
    line-height: 28px;
    letter-spacing: -0.5px;
}

.prechat-copy {
    width: min(100%, 768px);
    padding-bottom: 0;
    text-align: center;
}

.prechat-copy h2 {
    max-width: 768px;
    margin: 0 auto;
    color: var(--text-main);
    font-size: 48px;
    line-height: 48px;
    letter-spacing: -1.2px;
}

.prechat-copy h2 span {
    color: var(--accent-bright);
}

.prechat-copy p {
    max-width: 672px;
    margin: 24px auto 0;
    color: var(--text-body);
    font-size: 20px;
    line-height: 28px;
}

.prechat-steps {
    width: min(100%, 1024px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    padding-bottom: 0;
}

.prechat-step-card {
    min-height: 246.25px;
    padding: 32px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid rgba(224, 227, 229, 0.5);
}

.prechat-step-card .mini-card-icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0;
    border-radius: 12px;
    background: #e6e8ea;
    color: var(--accent-bright);
    font-size: 0;
}

.prechat-step-card .mini-card-icon::before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: calc(50% + 2px);
    transform: translate(-50%, -50%);
    width: 16px;
    height: 20px;
    border: 0;
    border-radius: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='20' viewBox='0 0 16 20' fill='none'%3E%3Cpath d='M4 16H12V14H4V16ZM4 12H12V10H4V12ZM2 20C1.45 20 0.979167 19.8042 0.5875 19.4125C0.195833 19.0208 0 18.55 0 18V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0H10L16 6V18C16 18.55 15.8042 19.0208 15.4125 19.4125C15.0208 19.8042 14.55 20 14 20H2ZM9 7V2H2V18H14V7H9ZM2 2V7V2V7V18V2Z' fill='%234648D4'/%3E%3C/svg%3E")
        center / contain no-repeat;
}

.prechat-step-card:nth-child(2) .mini-card-icon::before {
    width: 18px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' viewBox='0 0 18 16' fill='none'%3E%3Cpath d='M0 10V8H7V10H0ZM0 6V4H11V6H0ZM0 2V0H11V2H0ZM9 16V12.925L14.525 7.425C14.675 7.275 14.8417 7.16667 15.025 7.1C15.2083 7.03333 15.3917 7 15.575 7C15.775 7 15.9667 7.0375 16.15 7.1125C16.3333 7.1875 16.5 7.3 16.65 7.45L17.575 8.375C17.7083 8.525 17.8125 8.69167 17.8875 8.875C17.9625 9.05833 18 9.24167 18 9.425C18 9.60833 17.9667 9.79583 17.9 9.9875C17.8333 10.1792 17.725 10.35 17.575 10.5L12.075 16H9ZM16.5 9.425L15.575 8.5L16.5 9.425ZM10.5 14.5H11.45L14.475 11.45L14.025 10.975L13.55 10.525L10.5 13.55V14.5ZM14.025 10.975L13.55 10.525L14.475 11.45L14.025 10.975Z' fill='%234648D4'/%3E%3C/svg%3E");
}

.prechat-step-card:nth-child(3) .mini-card-icon::before {
    width: 22px;
    height: 19px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='19' viewBox='0 0 22 19' fill='none'%3E%3Cpath d='M3 13C2.16667 13 1.45833 12.7083 0.875 12.125C0.291667 11.5417 0 10.8333 0 10C0 9.16667 0.291667 8.45833 0.875 7.875C1.45833 7.29167 2.16667 7 3 7V5C3 4.45 3.19583 3.97917 3.5875 3.5875C3.97917 3.19583 4.45 3 5 3H8C8 2.16667 8.29167 1.45833 8.875 0.875C9.45833 0.291667 10.1667 0 11 0C11.8333 0 12.5417 0.291667 13.125 0.875C13.7083 1.45833 14 2.16667 14 3H17C17.55 3 18.0208 3.19583 18.4125 3.5875C18.8042 3.97917 19 4.45 19 5V7C19.8333 7 20.5417 7.29167 21.125 7.875C21.7083 8.45833 22 9.16667 22 10C22 10.8333 21.7083 11.5417 21.125 12.125C20.5417 12.7083 19.8333 13 19 13V17C19 17.55 18.8042 18.0208 18.4125 18.4125C18.0208 18.8042 17.55 19 17 19H5C4.45 19 3.97917 18.8042 3.5875 18.4125C3.19583 18.0208 3 17.55 3 17V13ZM8 11C8.41667 11 8.77083 10.8542 9.0625 10.5625C9.35417 10.2708 9.5 9.91667 9.5 9.5C9.5 9.08333 9.35417 8.72917 9.0625 8.4375C8.77083 8.14583 8.41667 8 8 8C7.58333 8 7.22917 8.14583 6.9375 8.4375C6.64583 8.72917 6.5 9.08333 6.5 9.5C6.5 9.91667 6.64583 10.2708 6.9375 10.5625C7.22917 10.8542 7.58333 11 8 11ZM14 11C14.4167 11 14.7708 10.8542 15.0625 10.5625C15.3542 10.2708 15.5 9.91667 15.5 9.5C15.5 9.08333 15.3542 8.72917 15.0625 8.4375C14.7708 8.14583 14.4167 8 14 8C13.5833 8 13.2292 8.14583 12.9375 8.4375C12.6458 8.72917 12.5 9.08333 12.5 9.5C12.5 9.91667 12.6458 10.2708 12.9375 10.5625C13.2292 10.8542 13.5833 11 14 11ZM7 15H15V13H7V15ZM5 17H17V5H5V17Z' fill='%234648D4'/%3E%3C/svg%3E");
}

.prechat-step-card h3 {
    margin: 24px 0 0;
    color: var(--text-main);
    font-size: 20px;
    line-height: 28px;
}

.prechat-step-card p {
    margin: 12px 0 0;
    color: var(--text-body);
    font-size: 14px;
    line-height: 22.75px;
}

.prechat-start {
    min-width: 144px;
    min-height: 56px;
    padding: 14px 40px;
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
}

.prechat-duration,
.prechat-social-proof {
    margin: 0;
    color: #8a90ab;
}

.prechat-social-proof {
    padding: 16px 22px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(109, 112, 173, 0.12);
}


.interview-panel {
    padding: 22px 22px 28px;
    display: grid;
    gap: 22px;
}

.interview-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.case-sidebar {
    position: sticky;
    top: 16px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid var(--panel-border);
}

.case-sidebar-header {
    display: grid;
    gap: 4px;
    margin-bottom: 16px;
}

.case-sidebar-header strong {
    font-size: 16px;
}

.case-sidebar-header span {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.case-progress-list {
    display: grid;
    gap: 10px;
}

.case-progress-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border-radius: 18px;
    border: 1px solid var(--panel-border);
    background: var(--control-bg);
}

.case-progress-item.active {
    background: rgba(70, 72, 212, 0.1);
    border-color: rgba(70, 72, 212, 0.22);
}

.case-progress-item.done {
    background: var(--success-soft);
    border-color: rgba(45, 164, 48, 0.18);
}

.case-progress-index {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: var(--accent-surface);
    color: var(--accent);
    font-size: 14px;
    font-weight: 800;
}

.case-progress-item.active .case-progress-index {
    background: var(--accent-bright);
    color: #fff;
}

.case-progress-item.done .case-progress-index {
    background: #dff5e9;
    color: var(--success);
}

.case-progress-copy {
    display: grid;
    gap: 4px;
}

.case-progress-copy strong {
    font-size: 14px;
    line-height: 1.3;
}

.case-progress-copy span {
    color: var(--text-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.case-progress-copy.outcome-success span {
    color: var(--success);
}

.case-progress-copy.outcome-failed span {
    color: var(--danger);
}

.case-progress-copy.outcome-timeout span {
    color: var(--warning);
}

.interview-main {
    display: grid;
    gap: 22px;
}

.interview-topbar {
    display: grid;
    gap: 12px;
}

.interview-case-header {
    display: grid;
    gap: 6px;
}

.interview-case-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.interview-case-header h3 {
    margin: 0;
    font-size: 28px;
}

.interview-case-header p {
    margin: 0;
    color: var(--text-muted);
}

.interview-title-row,
.interview-progress-labels,
.interview-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.interview-case-badge {
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--accent-surface);
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
}

.interview-timer-badge {
    min-width: 88px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(70, 72, 212, 0.1);
    color: var(--accent);
    font-size: 14px;
    font-weight: 800;
    text-align: center;
}

.interview-progress-labels {
    color: var(--text-soft);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.interview-progress-labels .active {
    color: var(--accent);
}

.interview-progress-line {
    height: 6px;
    border-radius: 999px;
    background: var(--accent-surface);
    overflow: hidden;
}

.interview-progress-fill {
    width: 16%;
    height: 100%;
    background: linear-gradient(135deg, var(--accent), var(--accent-bright));
}

.interview-messages {
    min-height: 440px;
    display: grid;
    gap: 18px;
    align-content: start;
    overflow: auto;
    max-height: 52vh;
}

.interview-message {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 12px;
    align-items: start;
}

.interview-message.own {
    grid-template-columns: 1fr;
    justify-items: end;
}

.interview-avatar {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--accent-surface);
    color: var(--accent);
    font-size: 12px;
    font-weight: 800;
}

.interview-bubble {
    max-width: 960px;
    padding: 16px 18px;
    border-radius: 18px;
    line-height: 1.55;
}

.interview-bubble.bot {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--panel-border);
}

.interview-bubble.user {
    background: var(--accent-bright);
    color: #fff;
}

.interview-hint {
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--control-bg);
    color: var(--text-muted);
}

.interview-summary {
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(70, 72, 212, 0.08);
    border: 1px solid rgba(70, 72, 212, 0.16);
    color: var(--accent);
    line-height: 1.5;
}

.interview-complete-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
}

.interview-form {
    display: grid;
    gap: 14px;
    padding: 18px;
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--panel-border);
}

.interview-form textarea {
    min-height: 200px;
    border: 0;
    resize: vertical;
    font: inherit;
    color: var(--text-main);
    outline: none;
}

.interview-action-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
}

.interview-finish-button {
    padding: 14px 18px;
    border: 1px solid rgba(70, 72, 212, 0.18);
    background: rgba(70, 72, 212, 0.08);
}

.interview-form-footer span,
.interview-footnote {
    color: var(--text-soft);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.interview-panel.completed .interview-messages,
.interview-panel.completed .interview-form,
.interview-panel.completed .interview-footnote {
    display: none;
}

.interview-footnote {
    margin: 0;
    text-align: center;
}

.dashboard-panel {
    padding: 0 0 64px;
    display: grid;
    align-content: start;
    gap: 48px;
    background: var(--bg-soft);
}

.dashboard-topbar,
.section-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.dashboard-topbar-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: center;
}

.user-menu {
    position: relative;
    order: 4;
    display: inline-flex;
    align-items: center;
}

.user-menu::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
}

.user-menu .user-chip,
.user-menu .topbar-user-chip {
    cursor: pointer;
}

.user-menu .user-chip::after,
.user-menu .topbar-user-chip::after {
    content: "";
    width: 7px;
    height: 7px;
    border-right: 1.5px solid #64748b;
    border-bottom: 1.5px solid #64748b;
    transform: rotate(45deg) translateY(-1px);
    transition:
        border-color 0.18s ease,
        transform 0.18s ease;
}

.user-menu:hover .user-chip::after,
.user-menu:focus-within .user-chip::after,
.user-menu:hover .topbar-user-chip::after,
.user-menu:focus-within .topbar-user-chip::after {
    border-color: #14151f;
    transform: rotate(225deg) translateY(-1px);
}

.user-menu .user-chip:focus-visible,
.user-menu .topbar-user-chip:focus-visible {
    outline: 2px solid rgba(70, 72, 212, 0.32);
    outline-offset: 4px;
}

.user-menu-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 20;
    display: grid;
    gap: 4px;
    min-width: 148px;
    padding: 6px;
    border-radius: 14px;
    border: 1px solid rgba(18, 24, 42, 0.12);
    background: #fff;
    color: #14151f;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease;
    pointer-events: none;
}

.user-menu-dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -10px;
    height: 10px;
}

.user-menu:hover .user-menu-dropdown,
.user-menu:focus-within .user-menu-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.user-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #14151f;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.user-menu-item:hover,
.user-menu-item:focus-visible {
    background: var(--control-bg);
    outline: none;
}

.dashboard-topbar-actions .topbar-profile-button {
    order: 2;
}

.topbar-profile-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 8px;
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0;
}

.topbar-profile-button:hover {
    background: var(--control-bg);
}

.topbar-profile-button::before {
    content: "";
    width: 21px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='20' viewBox='0 0 21 20' fill='none'%3E%3Cpath d='M7.3 20L6.9 16.8C6.68333 16.7167 6.47917 16.6167 6.2875 16.5C6.09583 16.3833 5.90833 16.2583 5.725 16.125L2.75 17.375L0 12.625L2.575 10.675C2.55833 10.5583 2.55 10.4458 2.55 10.3375C2.55 10.2292 2.55 10.1167 2.55 10C2.55 9.88333 2.55 9.77083 2.55 9.6625C2.55 9.55417 2.55833 9.44167 2.575 9.325L0 7.375L2.75 2.625L5.725 3.875C5.90833 3.74167 6.1 3.61667 6.3 3.5C6.5 3.38333 6.7 3.28333 6.9 3.2L7.3 0H12.8L13.2 3.2C13.4167 3.28333 13.6208 3.38333 13.8125 3.5C14.0042 3.61667 14.1917 3.74167 14.375 3.875L17.35 2.625L20.1 7.375L17.525 9.325C17.5417 9.44167 17.55 9.55417 17.55 9.6625C17.55 9.77083 17.55 9.88333 17.55 10C17.55 10.1167 17.55 10.2292 17.55 10.3375C17.55 10.4458 17.5333 10.5583 17.5 10.675L20.075 12.625L17.325 17.375L14.375 16.125C14.1917 16.2583 14 16.3833 13.8 16.5C13.6 16.6167 13.4 16.7167 13.2 16.8L12.8 20H7.3ZM9.05 18H11.025L11.375 15.35C11.8917 15.2167 12.3708 15.0208 12.8125 14.7625C13.2542 14.5042 13.6583 14.1917 14.025 13.825L16.5 14.85L17.475 13.15L15.325 11.525C15.4083 11.2917 15.4667 11.0458 15.5 10.7875C15.5333 10.5292 15.55 10.2667 15.55 10C15.55 9.73333 15.5333 9.47083 15.5 9.2125C15.4667 8.95417 15.4083 8.70833 15.325 8.475L17.475 6.85L16.5 5.15L14.025 6.2C13.6583 5.81667 13.2542 5.49583 12.8125 5.2375C12.3708 4.97917 11.8917 4.78333 11.375 4.65L11.05 2H9.075L8.725 4.65C8.20833 4.78333 7.72917 4.97917 7.2875 5.2375C6.84583 5.49583 6.44167 5.80833 6.075 6.175L3.6 5.15L2.625 6.85L4.775 8.45C4.69167 8.7 4.63333 8.95 4.6 9.2C4.56667 9.45 4.55 9.71667 4.55 10C4.55 10.2667 4.56667 10.525 4.6 10.775C4.63333 11.025 4.69167 11.275 4.775 11.525L2.625 13.15L3.6 14.85L6.075 13.8C6.44167 14.1833 6.84583 14.5042 7.2875 14.7625C7.72917 15.0208 8.20833 15.2167 8.725 15.35L9.05 18ZM10.1 13.5C11.0667 13.5 11.8917 13.1583 12.575 12.475C13.2583 11.7917 13.6 10.9667 13.6 10C13.6 9.03333 13.2583 8.20833 12.575 7.525C11.8917 6.84167 11.0667 6.5 10.1 6.5C9.11667 6.5 8.2875 6.84167 7.6125 7.525C6.9375 8.20833 6.6 9.03333 6.6 10C6.6 10.9667 6.9375 11.7917 7.6125 12.475C8.2875 13.1583 9.11667 13.5 10.1 13.5Z' fill='%2364748B'/%3E%3C/svg%3E")
        center / contain no-repeat;
}

.topbar-profile-button::after {
    content: none;
}

.topbar-exit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 1;
    width: auto;
    min-width: 0;
    height: 36px;
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 4px;
    background: transparent;
    border: 0;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.topbar-exit-button:hover {
    background: var(--control-bg);
}

.topbar-exit-button span {
    display: inline;
}

.topbar-exit-button::before {
    content: none;
}

.topbar-exit-button::after {
    content: none;
}

.topbar-exit-button .topbar-user-icon {
    display: none;
}

.topbar-user-icon {
    width: 24px;
    height: 24px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--warning-soft);
    font-size: 14px;
    line-height: 1;
}

.dashboard-topbar {
    min-height: 64px;
    padding: 0 24px;
    border-bottom: 1px solid var(--control-bg);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
}

.dashboard-brand {
    margin-bottom: 0;
    color: var(--text-main);
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.45px;
}

.topbar-icon,
.icon-button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    border: 1px solid rgba(70, 72, 212, 0.12);
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-muted);
    font-size: 18px;
}

.profile-settings-button {
    color: var(--accent);
}

.dashboard-hero {
    width: 100%;
    max-width: 1536px;
    margin: 0 auto;
    padding: 64px 96px 0;
}

.dashboard-section {
    display: grid;
    width: 100%;
    max-width: 1536px;
    margin: 0 auto;
    gap: 24px;
    padding: 0 96px;
}

.section-label {
    margin: 0;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.accent-label {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    color: var(--text-soft);
}

.dashboard-subtitle {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 18px;
    line-height: 28px;
}

.dashboard-section-title {
    margin: 4px 0 0;
    color: var(--text-main);
    font-size: 24px;
    line-height: 32px;
}

.dashboard-hero h2 {
    max-width: none;
    color: var(--text-strong);
    font-size: 36px;
    line-height: 40px;
    letter-spacing: -0.9px;
}

.compact-ghost {
    padding: 10px 12px;
    font-size: 14px;
}

.user-chip {
    order: 4;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 0 0 25px;
    border-radius: 0;
    background: transparent;
    border: 0;
}

.user-menu .user-chip {
    order: 0;
    padding-left: 0;
}

.user-chip::before {
    content: "";
    position: absolute;
    left: 8px;
    width: 1px;
    height: 32px;
    background: var(--line);
}

.user-menu .user-chip::before {
    content: none;
}

.user-chip-copy {
    display: grid;
    gap: 8px;
    text-align: right;
}

.user-chip-copy strong {
    color: var(--text-strong);
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    line-height: 14px;
}

.user-chip-copy span {
    color: var(--text-muted);
    font-family: var(--font-heading);
    font-size: 10px;
    font-weight: 400;
    line-height: 15px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    background: var(--text-strong);
    color: #fff;
    font-weight: 800;
}

.assessment-card,
.report-card,
.assessment-mini-card,
.empty-card {
    border: 0;
    border-radius: 8px;
    background: #fff;
}

.assessment-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) minmax(180px, auto);
    gap: 32px;
    align-items: center;
    padding: 32px;
    border-radius: 16px;
}

.assessment-icon,
.mini-card-icon,
.report-badge {
    display: grid;
    place-items: center;
    border-radius: 20px;
    font-weight: 800;
}

.assessment-icon {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 16px;
    background: var(--accent-soft);
    color: var(--accent);
    overflow: hidden;
}

.assessment-copy h3,
.assessment-mini-card h3,
.report-copy h3 {
    margin: 0;
    color: var(--text-strong);
    font-size: 20px;
    line-height: 28px;
}

.assessment-copy p,
.assessment-mini-card p,
.report-copy p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.5;
}

.assessment-meta,
.mini-card-meta {
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 14px;
}

.assessment-state {
    color: var(--text-muted);
}

#assessment-status-label,
#assessment-cases-label {
    font-weight: 400;
}

.progress-track {
    margin-top: 8px;
    height: 12px;
    border-radius: 12px;
    background: var(--control-bg);
    overflow: hidden;
    max-width: none;
}

.progress-bar {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--accent), var(--accent-bright));
}

.assessment-actions {
    display: grid;
    gap: 12px;
    justify-items: stretch;
    min-width: 180px;
}

#assessment-action-button {
    font-weight: 600;
}

.assessment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 400px));
    gap: 24px;
    align-items: stretch;
}

.assessment-mini-card {
    display: grid;
    align-content: space-between;
    width: 100%;
    min-height: 320px;
    padding: 32px;
}

.assessment-mini-card.muted-card {
    position: relative;
    border: 0;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
    cursor: default;
    overflow: hidden;
}

.assessment-mini-card.muted-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(90deg, var(--line-strong) 0 12px, transparent 12px 22px) 0 0 / 22px 2px repeat-x,
        linear-gradient(90deg, var(--line-strong) 0 12px, transparent 12px 22px) 0 100% / 22px 2px repeat-x,
        linear-gradient(180deg, var(--line-strong) 0 12px, transparent 12px 22px) 0 0 / 2px 22px repeat-y,
        linear-gradient(180deg, var(--line-strong) 0 12px, transparent 12px 22px) 100% 0 / 2px 22px repeat-y;
}

.assessment-mini-card.muted-card h3 {
    color: var(--text-muted);
}

.assessment-mini-card.muted-card p {
    color: var(--text-soft);
}

.assessment-mini-card.muted-card .mini-card-meta span:last-child {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--control-bg);
    color: var(--text-muted);
}

.mini-card-action-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 8px 14px;
    border-radius: 8px;
    background: var(--accent-bright);
    color: #fff;
    font-size: 14px;
    line-height: 20px;
}

.mini-card-action-button:hover {
    background: var(--accent);
}

.assessment-mini-card.muted-card .mini-card-icon::before {
    opacity: 0.42;
    filter: grayscale(1);
}

.mini-card-icon {
    position: relative;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 0;
    border-radius: 8px;
    background: var(--accent-soft);
    color: transparent;
    font-size: 0;
    line-height: 0;
}

.assessment-mini-card .mini-card-icon {
    display: block;
    overflow: hidden;
}

.assessment-mini-card .mini-card-icon::before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 23px;
    transform: translate(-50%, -50%);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='23' viewBox='0 0 24 23' fill='none'%3E%3Cpath d='M6 23C5.16667 23 4.45833 22.7083 3.875 22.125C3.29167 21.5417 3 20.8333 3 20C3 19.1667 3.29167 18.4583 3.875 17.875C4.45833 17.2917 5.16667 17 6 17C6.23333 17 6.45 17.025 6.65 17.075C6.85 17.125 7.04167 17.1917 7.225 17.275L8.65 15.5C8.18333 14.9833 7.85833 14.4 7.675 13.75C7.49167 13.1 7.45 12.45 7.55 11.8L5.525 11.125C5.24167 11.5417 4.88333 11.875 4.45 12.125C4.01667 12.375 3.53333 12.5 3 12.5C2.16667 12.5 1.45833 12.2083 0.875 11.625C0.291667 11.0417 0 10.3333 0 9.5C0 8.66667 0.291667 7.95833 0.875 7.375C1.45833 6.79167 2.16667 6.5 3 6.5C3.83333 6.5 4.54167 6.79167 5.125 7.375C5.70833 7.95833 6 8.66667 6 9.5C6 9.53333 6 9.56667 6 9.6C6 9.63333 6 9.66667 6 9.7L8.025 10.4C8.35833 9.8 8.80417 9.29167 9.3625 8.875C9.92083 8.45833 10.55 8.19167 11.25 8.075V5.9C10.6 5.71667 10.0625 5.3625 9.6375 4.8375C9.2125 4.3125 9 3.7 9 3C9 2.16667 9.29167 1.45833 9.875 0.875C10.4583 0.291667 11.1667 0 12 0C12.8333 0 13.5417 0.291667 14.125 0.875C14.7083 1.45833 15 2.16667 15 3C15 3.7 14.7833 4.3125 14.35 4.8375C13.9167 5.3625 13.3833 5.71667 12.75 5.9V8.075C13.45 8.19167 14.0792 8.45833 14.6375 8.875C15.1958 9.29167 15.6417 9.8 15.975 10.4L18 9.7C18 9.66667 18 9.63333 18 9.6C18 9.56667 18 9.53333 18 9.5C18 8.66667 18.2917 7.95833 18.875 7.375C19.4583 6.79167 20.1667 6.5 21 6.5C21.8333 6.5 22.5417 6.79167 23.125 7.375C23.7083 7.95833 24 8.66667 24 9.5C24 10.3333 23.7083 11.0417 23.125 11.625C22.5417 12.2083 21.8333 12.5 21 12.5C20.4667 12.5 19.9792 12.375 19.5375 12.125C19.0958 11.875 18.7417 11.5417 18.475 11.125L16.45 11.8C16.55 12.45 16.5083 13.0958 16.325 13.7375C16.1417 14.3792 15.8167 14.9667 15.35 15.5L16.775 17.25C16.9583 17.1667 17.15 17.1042 17.35 17.0625C17.55 17.0208 17.7667 17 18 17C18.8333 17 19.5417 17.2917 20.125 17.875C20.7083 18.4583 21 19.1667 21 20C21 20.8333 20.7083 21.5417 20.125 22.125C19.5417 22.7083 18.8333 23 18 23C17.1667 23 16.4583 22.7083 15.875 22.125C15.2917 21.5417 15 20.8333 15 20C15 19.6667 15.0542 19.3458 15.1625 19.0375C15.2708 18.7292 15.4167 18.45 15.6 18.2L14.175 16.425C13.4917 16.8083 12.7625 17 11.9875 17C11.2125 17 10.4833 16.8083 9.8 16.425L8.4 18.2C8.58333 18.45 8.72917 18.7292 8.8375 19.0375C8.94583 19.3458 9 19.6667 9 20C9 20.8333 8.70833 21.5417 8.125 22.125C7.54167 22.7083 6.83333 23 6 23ZM3 10.5C3.28333 10.5 3.52083 10.4042 3.7125 10.2125C3.90417 10.0208 4 9.78333 4 9.5C4 9.21667 3.90417 8.97917 3.7125 8.7875C3.52083 8.59583 3.28333 8.5 3 8.5C2.71667 8.5 2.47917 8.59583 2.2875 8.7875C2.09583 8.97917 2 9.21667 2 9.5C2 9.78333 2.09583 10.0208 2.2875 10.2125C2.47917 10.4042 2.71667 10.5 3 10.5ZM6 21C6.28333 21 6.52083 20.9042 6.7125 20.7125C6.90417 20.5208 7 20.2833 7 20C7 19.7167 6.90417 19.4792 6.7125 19.2875C6.52083 19.0958 6.28333 19 6 19C5.71667 19 5.47917 19.0958 5.2875 19.2875C5.09583 19.4792 5 19.7167 5 20C5 20.2833 5.09583 20.5208 5.2875 20.7125C5.47917 20.9042 5.71667 21 6 21ZM12 4C12.2833 4 12.5208 3.90417 12.7125 3.7125C12.9042 3.52083 13 3.28333 13 3C13 2.71667 12.9042 2.47917 12.7125 2.2875C12.5208 2.09583 12.2833 2 12 2C11.7167 2 11.4792 2.09583 11.2875 2.2875C11.0958 2.47917 11 2.71667 11 3C11 3.28333 11.0958 3.52083 11.2875 3.7125C11.4792 3.90417 11.7167 4 12 4ZM12 15C12.7 15 13.2917 14.7583 13.775 14.275C14.2583 13.7917 14.5 13.2 14.5 12.5C14.5 11.8 14.2583 11.2083 13.775 10.725C13.2917 10.2417 12.7 10 12 10C11.3 10 10.7083 10.2417 10.225 10.725C9.74167 11.2083 9.5 11.8 9.5 12.5C9.5 13.2 9.74167 13.7917 10.225 14.275C10.7083 14.7583 11.3 15 12 15ZM18 21C18.2833 21 18.5208 20.9042 18.7125 20.7125C18.9042 20.5208 19 20.2833 19 20C19 19.7167 18.9042 19.4792 18.7125 19.2875C18.5208 19.0958 18.2833 19 18 19C17.7167 19 17.4792 19.0958 17.2875 19.2875C17.0958 19.4792 17 19.7167 17 20C17 20.2833 17.0958 20.5208 17.2875 20.7125C17.4792 20.9042 17.7167 21 18 21ZM21 10.5C21.2833 10.5 21.5208 10.4042 21.7125 10.2125C21.9042 10.0208 22 9.78333 22 9.5C22 9.21667 21.9042 8.97917 21.7125 8.7875C21.5208 8.59583 21.2833 8.5 21 8.5C20.7167 8.5 20.4792 8.59583 20.2875 8.7875C20.0958 8.97917 20 9.21667 20 9.5C20 9.78333 20.0958 10.0208 20.2875 10.2125C20.4792 10.4042 20.7167 10.5 21 10.5Z' fill='%234648D4'/%3E%3C/svg%3E")
        center / contain no-repeat;
}

.muted-card.warm .muted-icon {
    background: var(--control-bg);
    color: transparent;
}

.muted-card.mint .muted-icon {
    background: var(--control-bg);
    color: transparent;
}

.text-link,
.link-button {
    border: 0;
    background: transparent;
    color: var(--accent);
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    padding: 0;
}

.link-button {
    color: var(--text-muted);
    font-weight: 600;
}

.reports-list {
    display: grid;
    gap: 10px;
}

.reports-summary-button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 16px;
    border: 1px solid rgba(223, 227, 241, 0.92);
    background: #ffffff;
    color: var(--text-main);
    box-shadow: none;
    text-align: left;
}

.reports-summary-button:hover {
    background: #fbfbff;
}

.reports-summary-copy {
    display: grid;
    gap: 4px;
}

.reports-summary-label {
    color: #8a90ab;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.reports-summary-count {
    font-family: var(--font-display);
    font-size: 28px;
    line-height: 1;
}

.reports-summary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 10px;
    background: #1c2233;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.report-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 14px;
}

.report-card-clickable {
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.report-card-clickable:hover {
    transform: translateY(-1px);
    box-shadow: 0 20px 48px rgba(76, 80, 148, 0.12);
}

.report-badge {
    min-width: 56px;
    min-height: 48px;
    padding: 10px 10px;
    border-radius: 12px;
    background: #edeefe;
    color: var(--accent);
    font-size: 14px;
}

.report-copy h3 {
    font-size: 13px;
}

.report-copy p {
    font-size: 11px;
}

.muted-report {
    color: #8a90aa;
    background: rgba(233, 236, 247, 0.9);
}

.report-actions {
    display: flex;
    justify-content: flex-end;
}

.report-action-button {
    color: #fff;
    background: #1c2233;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
}

.report-action-button.muted {
    background: #eef1fb;
    color: #7780a0;
}

.empty-card {
    padding: 22px;
    color: var(--text-muted);
}

.chat-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 16px;
}

.status-card {
    padding: 16px 18px;
    border-radius: 18px;
    background: var(--control-bg);
    border: 1px solid var(--line);
    color: var(--text-muted);
    line-height: 1.5;
    white-space: pre-wrap;
}

.messages {
    min-height: 360px;
    max-height: 52vh;
    overflow: auto;
    display: grid;
    gap: 14px;
    padding-right: 4px;
}

.message {
    max-width: 85%;
    padding: 14px 16px;
    border-radius: 18px;
    line-height: 1.45;
    white-space: pre-wrap;
}

.message.bot {
    background: var(--bot-bubble);
    color: var(--text-main);
    border-top-left-radius: 6px;
}

.message.user {
    margin-left: auto;
    background: var(--user-bubble);
    color: #fff;
    border-top-right-radius: 6px;
}

.chat-role-options {
    margin-top: 14px;
    display: grid;
    gap: 10px;
}

.chat-role-options-label {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    font-weight: 700;
}

.chat-role-options-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.chat-role-option-button {
    min-height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid rgba(70, 72, 212, 0.16);
    background: rgba(70, 72, 212, 0.08);
    color: var(--accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}

.chat-role-option-button:hover,
.chat-role-option-button:focus-visible {
    background: rgba(70, 72, 212, 0.14);
    border-color: rgba(70, 72, 212, 0.28);
    transform: translateY(-1px);
    outline: none;
}

.chat-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
}

.error {
    margin: 0;
    color: #ff698f;
    font-weight: 600;
}

.app-loader {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(16, 20, 34, 0.48);
    backdrop-filter: blur(6px);
}

.app-loader-card {
    width: min(100%, 420px);
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 28px 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--panel-border);
    text-align: center;
}

.app-loader-card strong {
    font-size: 20px;
}

.app-loader-card p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.5;
}

.app-loader-progress {
    display: grid;
    gap: 10px;
    width: min(100%, 420px);
}

.app-loader-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
}

.app-loader-progress-track {
    width: 100%;
    height: 10px;
    border-radius: 999px;
    background: rgba(70, 72, 212, 0.12);
    overflow: hidden;
}

.app-loader-progress-bar {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-bright));
    transition: width 0.35s ease;
}

.app-loader-steps {
    width: min(100%, 420px);
    display: grid;
    gap: 10px;
}

.app-loader-step {
    display: grid;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    text-align: left;
    color: var(--text-muted);
    font-size: 14px;
}

.app-loader-step-badge {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: rgba(70, 72, 212, 0.08);
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 800;
}

.app-loader-step-copy {
    display: grid;
    gap: 3px;
}

.app-loader-step-copy strong {
    font-size: 14px;
    color: var(--text-main);
}

.app-loader-step-copy span {
    color: var(--text-muted);
    line-height: 1.45;
}

.app-loader-step.active .app-loader-step-badge {
    background: var(--accent-bright);
    color: #fff;
}

.app-loader-step.active .app-loader-step-copy strong {
    color: var(--accent);
}

.app-loader-step.done .app-loader-step-badge {
    background: var(--success-soft);
    color: var(--success);
}

.app-loader-step.done .app-loader-step-copy strong {
    color: var(--text-main);
}

.app-loader-spinner {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 4px solid rgba(70, 72, 212, 0.16);
    border-top-color: var(--accent);
    animation: app-loader-spin 0.9s linear infinite;
}

.topbar-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 16px;
    border: 1px solid var(--panel-border);
    background: #ffffff;
}

.admin-shell {
    display: grid;
    gap: 20px;
}

.admin-panel > .admin-shell {
    width: min(100%, 1280px);
    margin: 0 auto;
    padding: 20px 64px;
}

.admin-hero-card,
.admin-analytics-card,
.admin-insights-card,
.admin-activity-card {
    background: #ffffff;
    border: 1px solid var(--panel-border);
    border-radius: 28px;
    padding: 28px;
}

.admin-insights-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.admin-hero-card {
    display: flex;
    justify-content: space-between;
}

.admin-hero-card h2 {
    margin: 0;
    font-size: 40px;
    line-height: 1.05;
}

.admin-hero-card p {
    margin: 10px 0 0;
    color: var(--text-muted);
    max-width: 720px;
}

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

.admin-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.admin-metric-card {
    background: #ffffff;
    border: 1px solid var(--panel-border);
    border-radius: 24px;
    padding: 22px 24px;
    display: grid;
    gap: 8px;
}

.admin-metric-card span,
.admin-metric-card small {
    color: var(--text-muted);
}

.admin-metric-card strong {
    font-size: 34px;
    line-height: 1;
}

.admin-analytics-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 20px;
}

.admin-activity-controls {
    display: flex;
    justify-content: flex-end;
}

.admin-activity-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: start;
}

.admin-activity-head h3 {
    margin: 6px 0 0;
    max-width: 860px;
    line-height: 1.1;
}

.admin-activity-title-period {
    display: block;
}

.admin-filter-field {
    display: grid;
    gap: 6px;
    min-width: 170px;
}

.admin-filter-field span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.admin-filter-field select {
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(70, 72, 212, 0.16);
    background: #fff;
    padding: 0 14px;
    font: inherit;
    color: var(--text-main);
}

.admin-competency-chart {
    position: relative;
    height: 284px;
    min-height: 284px;
    padding-top: 8px;
}

.admin-competency-chart canvas {
    width: 100% !important;
    height: 100% !important;
}

.admin-competency-chart-fallback {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    align-items: end;
    height: 100%;
}

.admin-competency-column {
    display: grid;
    justify-items: center;
    gap: 10px;
}

.admin-competency-value {
    color: var(--accent);
    font-weight: 700;
}

.admin-competency-bar {
    width: 100%;
    min-height: 200px;
    display: flex;
    align-items: end;
    justify-content: center;
}

.admin-competency-bar span {
    display: block;
    width: 56px;
    min-height: 16px;
    border-radius: 18px 18px 8px 8px;
    background: var(--accent-bright);
}

.admin-competency-column strong {
    text-align: center;
    font-size: 13px;
}

.admin-mbti-chart {
    position: relative;
    height: 284px;
    min-height: 284px;
    padding-top: 8px;
}

.admin-mbti-chart canvas {
    width: 100% !important;
    height: 100% !important;
}

.admin-mbti-chart-fallback {
    display: grid;
    gap: 14px;
    height: 100%;
    align-content: center;
}

.admin-mbti-row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 48px;
    gap: 12px;
    align-items: center;
}

.admin-mbti-row span,
.admin-mbti-row strong {
    font-size: 14px;
}

.admin-mbti-track {
    height: 10px;
    border-radius: 999px;
    background: rgba(70, 72, 212, 0.12);
    overflow: hidden;
}

.admin-mbti-track span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--accent) 0%,
        var(--accent-bright) 100%
    );
}

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

.admin-insight-card {
    border-radius: 22px;
    border: 1px solid var(--panel-border);
    background: var(--control-bg);
    padding: 18px 20px;
}

.admin-insight-card strong {
    display: block;
    margin-bottom: 8px;
}

.admin-insight-card p {
    margin: 0;
    color: var(--text-muted);
}

.admin-activity-plot {
    min-height: 320px;
    padding-top: 12px;
}

.admin-activity-chart {
    position: relative;
    height: 320px;
    min-height: 320px;
}

.admin-activity-chart canvas {
    width: 100% !important;
    height: 100% !important;
}

.admin-activity-chart-fallback {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(18px, 1fr);
    gap: 8px;
    align-items: end;
    height: 100%;
    overflow: hidden;
}

.admin-activity-bar {
    display: grid;
    justify-items: center;
    gap: 10px;
}

.admin-activity-value {
    font-size: 13px;
    color: var(--text-muted);
}

.admin-activity-bar-fill {
    width: 100%;
    max-width: 32px;
    border-radius: 18px 18px 0 0;
    background: var(--accent-bright);
}

.admin-activity-bar small {
    color: var(--text-muted);
    font-size: 11px;
    white-space: nowrap;
}

.admin-reports-panel {
    padding: 0 0 30px;
    background: var(--bg-soft);
}

.admin-report-detail-panel {
    padding: 0 0 30px;
    background: var(--bg-soft);
}

.admin-reports-shell {
    gap: 20px;
}

.admin-reports-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: end;
}

.admin-reports-actions {
    display: flex;
    gap: 14px;
    align-items: end;
}

.admin-search-field {
    min-width: 320px;
    display: grid;
    gap: 8px;
}

.admin-search-field span {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.admin-search-field input {
    min-height: 52px;
    border-radius: 16px;
    border: 1px solid var(--line-strong);
    background: var(--control-bg);
    padding: 0 16px;
    font-size: 16px;
}

.admin-export-button {
    min-height: 52px;
    padding: 0 18px;
    border-radius: 14px;
    border: 1px solid rgba(70, 72, 212, 0.16);
    background: rgba(255, 255, 255, 0.96);
    color: var(--accent);
}

.admin-reports-table-card,
.admin-reports-summary-card {
    background: #ffffff;
    border: 1px solid var(--panel-border);
    border-radius: 28px;
    padding: 28px;
}

.admin-reports-table-head {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
}

.admin-reports-columns,
.admin-report-row {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.3fr) minmax(220px, 1fr)
        130px 170px 110px 110px 132px;
    gap: 18px;
    align-items: center;
}

.admin-reports-columns {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.admin-reports-found {
    color: var(--text-muted);
    font-size: 14px;
}

.admin-reports-list {
    display: grid;
    gap: 12px;
}

.admin-reports-pagination {
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.admin-reports-page-summary,
.admin-reports-page-indicator {
    color: var(--text-muted);
    font-size: 14px;
}

.admin-reports-pagination-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-report-row {
    padding: 18px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--line);
    cursor: pointer;
    transition:
        transform 0.18s ease,
        border-color 0.18s ease;
}

.admin-report-row:hover,
.admin-report-row:focus-visible {
    transform: translateY(-1px);
    border-color: rgba(70, 72, 212, 0.28);
    outline: none;
}

.admin-report-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-report-avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
    color: var(--accent);
    background: rgba(70, 72, 212, 0.1);
}

.admin-report-copy,
.admin-report-group {
    display: grid;
    gap: 4px;
}

.admin-report-copy span,
.admin-report-group span,
.admin-report-date {
    color: var(--text-muted);
}

.admin-report-download-action {
    display: flex;
    justify-content: flex-start;
}

.admin-report-download-button {
    white-space: nowrap;
}

.admin-status-pill {
    display: inline-flex;
    padding: 8px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.admin-status-pill.done {
    background: var(--success-soft);
    color: var(--success);
}

.admin-status-pill.active {
    background: var(--warning-surface);
    color: var(--warning);
}

.admin-status-pill.draft {
    background: rgba(70, 72, 212, 0.1);
    color: var(--accent);
}

.admin-report-score {
    display: grid;
    gap: 8px;
}

.admin-report-score strong {
    color: var(--accent);
}

.admin-report-score-track {
    height: 8px;
    border-radius: 999px;
    background: var(--accent-surface);
    overflow: hidden;
}

.admin-report-score-track span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent), var(--accent-bright));
}

.admin-reports-summary-card {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 16px;
}

.admin-reports-summary-card h3 {
    margin: 6px 0 0;
    font-size: 24px;
}

.admin-reports-summary-card strong {
    font-size: 52px;
    color: var(--accent);
}

.admin-report-detail-shell {
    gap: 20px;
}

.admin-report-mbti-card {
    display: grid;
    gap: 16px;
}

.admin-detail-skill-radar-section {
    display: grid;
    gap: 16px;
}

.admin-detail-skill-radar-head {
    display: grid;
    gap: 8px;
}

.admin-detail-skill-radar-head strong {
    color: var(--text-main);
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
}

.admin-detail-skill-radar-head p {
    margin: 0;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 20px;
}

.admin-detail-skills-radar-card {
    border-radius: 24px;
    border: 1px solid var(--panel-border);
    padding: 20px;
    min-height: 0;
}

.admin-detail-skills-radar-frame {
    position: relative;
}

.admin-detail-skills-radar-frame canvas {
    position: relative;
    z-index: 1;
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.admin-detail-radar-competency-labels {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.admin-detail-radar-competency-labels span {
    position: absolute;
    max-width: 148px;
    font-size: 16px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

.admin-detail-radar-competency-labels [data-competency="communication"] {
    top: 52px;
    left: 50%;
    color: var(--accent);
    transform: translateX(-50%);
}

.admin-detail-radar-competency-labels [data-competency="teamwork"] {
    top: 50%;
    right: -56px;
    color: #16a34a;
    transform: translateY(-50%) rotate(90deg);
}

.admin-detail-radar-competency-labels [data-competency="creativity"] {
    bottom: 52px;
    left: 50%;
    color: #ea580c;
    transform: translateX(-50%);
}

.admin-detail-radar-competency-labels [data-competency="critical-thinking"] {
    top: 50%;
    left: -56px;
    color: #7c3aed;
    transform: translateY(-50%) rotate(-90deg);
}

.admin-skill-radar-label-tooltip {
    position: absolute;
    z-index: 4;
    width: 280px;
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: #fff;
    color: #14151f;
    transform: translateX(-50%);
    pointer-events: none;
}

.admin-skill-radar-label-tooltip strong,
.admin-skill-radar-label-tooltip span,
.admin-skill-radar-label-tooltip em {
    display: block;
}

.admin-skill-radar-label-tooltip strong {
    font-size: 13px;
    font-weight: 600;
    line-height: 18px;
}

.admin-skill-radar-label-tooltip span,
.admin-skill-radar-label-tooltip em {
    margin-top: 3px;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 17px;
}

.admin-skill-radar-label-tooltip em {
    color: #64748b;
}

.admin-detail-skills-radar-fallback {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 20px;
}

.admin-detail-skill-radar-list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    text-align: left;
}

.admin-detail-skill-radar-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.76);
}

.admin-detail-skill-radar-item span {
    color: var(--text-body);
    font-size: 13px;
    line-height: 18px;
}

.admin-detail-skill-radar-item strong {
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    white-space: nowrap;
}


.admin-detail-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: grid;
    place-items: center;
    background: var(--control-bg);
    color: var(--text-muted);
    font-size: 15px;
    font-weight: 800;
}

.admin-detail-card-icon.accent {
    background: rgba(70, 72, 212, 0.12);
    color: var(--accent);
}

.admin-detail-mbti-axes {
    display: grid;
    gap: 14px;
}

.admin-detail-mbti-axis {
    display: grid;
    gap: 8px;
}

.admin-detail-mbti-axis-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--text-muted);
    font-size: 13px;
}

.admin-detail-mbti-axis-track {
    height: 10px;
    border-radius: 999px;
    background: rgba(70, 72, 212, 0.12);
    overflow: hidden;
}

.admin-detail-mbti-axis-track span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--accent) 0%,
        var(--accent-bright) 100%
    );
}

.admin-detail-insights-card,
.admin-detail-quotes-card {
    background: #ffffff;
    border: 1px solid var(--panel-border);
    border-radius: 28px;
    padding: 28px;
}

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

.admin-detail-insight-column {
    display: grid;
    gap: 12px;
}

.admin-detail-insight-column strong {
    font-size: 18px;
}

.admin-detail-quotes-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.admin-detail-quote-card {
    min-height: 160px;
    border-radius: 20px;
    border: 1px solid var(--panel-border);
    background: var(--control-bg);
    padding: 18px 20px;
    display: grid;
    align-content: start;
}

.admin-detail-quote-card p {
    margin: 0;
    color: var(--text-main);
    line-height: 1.6;
    white-space: pre-wrap;
}

.hidden {
    display: none;
}

@keyframes app-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 900px) {
    .onboarding-panel {
        padding: 64px 32px;
    }

    .onboarding-shell {
        grid-template-columns: 1fr;
        min-height: auto;
        padding: 0;
    }

    .onboarding-topbar,
    .onboarding-copy,
    .onboarding-visual {
        grid-column: 1;
    }

    .onboarding-copy,
    .onboarding-visual {
        grid-row: auto;
    }

    .onboarding-panel:has(.radar-visual) .onboarding-shell {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .onboarding-copy {
        min-height: auto;
        padding: 0;
    }

    .onboarding-copy h2,
    .onboarding-panel:has(.radar-visual) .onboarding-copy h2 {
        max-width: 100%;
        font-size: 40px;
        line-height: 44px;
    }

    .onboarding-copy > .subtitle,
    .onboarding-panel:has(.radar-visual) .onboarding-copy > .subtitle {
        max-width: 100%;
        font-size: 17px;
        line-height: 28px;
    }

    .admin-detail-insights-grid,
    .admin-detail-quotes-grid {
        grid-template-columns: 1fr;
    }

    .admin-detail-profile-head {
        grid-template-columns: 1fr;
    }

    .admin-detail-photo-card {
        width: 112px;
    }

    .admin-detail-photo {
        width: 112px;
        height: 112px;
        font-size: 34px;
    }

    .admin-detail-skills-radar-card {
        min-height: 0;
    }

    .admin-detail-skills-radar-card {
        min-height: 0;
    }

    .admin-detail-skills-radar-frame {
        min-height: 0;
    }

    .onboarding-visual {
        min-height: 420px;
    }

    .radar-visual {
        width: min(100%, 420px);
        height: min(100vw - 64px, 420px);
    }

    .prechat-steps,
    .ai-hero-card,
    .importance-card,
    .admin-metrics-grid,
    .admin-insights-grid,
    .admin-analytics-grid {
        grid-template-columns: 1fr;
    }

    .admin-reports-hero,
    .admin-reports-actions,
    .admin-reports-summary-card,
    .admin-reports-pagination {
        display: grid;
        grid-template-columns: 1fr;
    }

    .admin-search-field {
        min-width: 0;
    }

    .admin-activity-head {
        grid-template-columns: 1fr;
    }

    .admin-reports-columns,
    .admin-report-row {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .auth-panel,
    .chat-panel,
    .onboarding-panel {
        padding: 22px;
    }

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

    .message {
        max-width: 100%;
    }

    .onboarding-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .visual-grid,
    .case-visual {
        width: 100%;
    }

    .visual-grid {
        height: 360px;
    }

    .case-visual {
        min-height: 440px;
    }

    .case-sheet {
        right: 0;
        width: 86%;
        height: 360px;
    }

    .case-bubble,
    .case-progress {
        width: 86%;
    }

    .onboarding-panel:has(.radar-visual) .feature-list {
        grid-template-columns: 1fr;
    }

    .assessment-card,
    .report-card {
        grid-template-columns: 1fr;
        display: grid;
    }

    .dashboard-topbar {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 12px;
        padding-left: 16px;
        padding-right: 16px;
    }

    .dashboard-topbar .dashboard-brand,
    .dashboard-topbar .report-title-group {
        flex: 0 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dashboard-topbar .dashboard-topbar-actions {
        flex: 1 1 auto;
        min-width: 0;
        flex-wrap: nowrap;
        justify-content: flex-end;
    }

    .dashboard-topbar .user-chip,
    .dashboard-topbar .topbar-user-chip {
        min-width: 0;
        gap: 10px;
    }

    .dashboard-topbar .user-chip-copy,
    .dashboard-topbar .topbar-user-copy {
        min-width: 0;
        max-width: clamp(72px, 28vw, 136px);
    }

    .dashboard-topbar .user-chip-copy strong,
    .dashboard-topbar .user-chip-copy span,
    .dashboard-topbar .topbar-user-copy strong,
    .dashboard-topbar .topbar-user-copy span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

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

    .assessment-actions {
        justify-items: stretch;
    }

    .dashboard-panel {
        padding-bottom: 22px;
    }

    .dashboard-section,
    .dashboard-hero {
        padding-left: 22px;
        padding-right: 22px;
    }

    #available-assessments.assessment-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    }

    #available-assessments > .assessment-mini-card:first-child {
        grid-column: 1 / -1;
    }

    .ai-welcome-shell,
    .prechat-shell {
        padding-left: 22px;
        padding-right: 22px;
    }

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

    .case-sidebar {
        position: static;
    }

    .case-progress-list {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }

    .interview-title-row,
    .interview-progress-labels,
    .interview-form-footer,
    .mini-card-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

.interview-panel {
    padding: 22px 22px 28px;
    display: grid;
    gap: 22px;
}

.interview-topbar {
    display: grid;
    gap: 12px;
    border-bottom: 0;
    background: transparent;
}

.interview-title-row {
    position: static;
    min-height: auto;
    justify-content: space-between;
    padding: 0;
    border-bottom: 0;
}

.interview-title-row::after {
    content: none;
}

.interview-title-row strong {
    font-size: inherit;
    line-height: inherit;
    letter-spacing: 0;
}

.interview-case-badge {
    position: static;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--accent-surface);
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0;
    text-transform: none;
    transform: none;
}

.interview-progress-labels {
    padding: 0;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.12em;
}

.interview-progress-line {
    height: 6px;
    margin: 0;
    border-radius: 999px;
    background: var(--accent-surface);
}

.interview-progress-fill {
    width: 16%;
}

.interview-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    padding: 0;
}

.case-sidebar {
    display: block;
}

.interview-case-header {
    display: grid;
}

.interview-main {
    min-height: auto;
    display: grid;
    gap: 22px;
}

.interview-messages {
    flex: initial;
    min-height: 440px;
    max-height: 52vh;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0 0 4px;
}

.interview-form {
    position: static;
    bottom: auto;
    width: 100%;
    margin: 0;
}

.interview-message {
    justify-content: flex-start;
}

.interview-message.own {
    justify-content: flex-end;
    align-items: flex-start;
}

@media (max-width: 900px) {
    .interview-layout {
        grid-template-columns: 1fr;
        padding: 0;
    }

    .case-sidebar {
        position: static;
    }
}

@media (max-width: 720px) {
    .interview-title-row,
    .interview-progress-labels,
    .interview-form-footer {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Scoped additions from main kept on top of the design-fix baseline. */
.admin-methodology-panel {
    background: var(--bg-soft);
}

.auth-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.auth-panel-head .brand {
    margin-bottom: 0;
}

.release-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #f4f6fd;
    border: 1px solid rgba(221, 225, 242, 0.96);
    color: #7c83a1;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.release-badge span {
    color: var(--accent);
    font-weight: 800;
}

.onboarding-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.onboarding-topbar-actions,
.interview-topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.interview-topbar-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
}

.topbar-user-copy {
    display: grid;
    gap: 2px;
}

.topbar-user-copy strong {
    color: var(--text-main);
    font-size: 14px;
    line-height: 1.2;
}

.topbar-user-copy span {
    color: var(--text-muted);
    font-size: 12px;
}

.profile-avatar-card {
    position: relative;
    width: 82px;
    height: 82px;
}

.profile-avatar-card .profile-avatar,
.profile-avatar-image {
    position: absolute;
    inset: 2px;
    width: 78px;
    height: 78px;
    border-radius: 18px;
}

.profile-avatar-image {
    object-fit: cover;
    border: 1px solid var(--line);
    background: var(--bg-soft);
}

.profile-avatar-upload {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 22px;
    height: 22px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    cursor: pointer;
    font-size: 11px;
    font-weight: 900;
}

.profile-editable-field {
    position: relative;
}

.profile-field-wide {
    grid-column: 1 / -1;
}

.profile-editable-field input {
    padding-right: 36px;
}

.profile-field-edit-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 12px;
    pointer-events: none;
}

.profile-field input[readonly] {
    cursor: default;
}

.profile-save-status {
    margin: 12px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.profile-save-status.error {
    color: #d14d5d;
}

.profile-save-status.success {
    color: #2f9c67;
}

.profile-history-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    padding: 8px 4px 0;
}

.profile-history-page-indicator {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 700;
}

.profile-history-page-button[disabled] {
    opacity: 0.48;
    cursor: default;
}

.reports-intro-card {
    padding: 18px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid var(--panel-border);
}

.reports-intro-card strong {
    color: var(--accent);
}

.skill-artifact-hint {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.report-hero-score-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
}

.report-score-hint {
    position: relative;
    width: 20px;
    height: 20px;
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    margin: 0;
    border-radius: 999px;
    background: rgba(70, 72, 212, 0.12);
    border: 1px solid rgba(70, 72, 212, 0.2);
    color: #14151f;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    text-transform: none;
    cursor: help;
}

.report-skill-name-text {
    position: relative;
    display: inline-block;
    cursor: help;
}

.report-skill-name-label {
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.report-skill-name-text:focus-visible {
    outline: 2px solid rgba(70, 72, 212, 0.32);
    outline-offset: 3px;
    border-radius: 4px;
}

.report-hero-score .report-score-tooltip,
.report-skill-name .report-score-tooltip {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    display: block;
    width: 280px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(18, 24, 42, 0.12);
    background: #fff;
    color: #14151f;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: 0;
    text-align: left;
    text-transform: none;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        visibility 0.18s ease;
    z-index: 8;
    pointer-events: none;
}

.report-score-hint:hover .report-score-tooltip,
.report-score-hint:focus-visible .report-score-tooltip,
.report-skill-name-text:hover .report-score-tooltip,
.report-skill-name-text:focus-visible .report-score-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.hero-preparing,
.assessment-preparing {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hero-preparing {
    margin-top: 18px;
}

.assessment-preparing.preparing-ring {
    justify-self: center;
    margin-inline: auto;
}

.preparing-copy {
    display: grid;
    gap: 4px;
}

.preparing-copy strong {
    font-size: 15px;
}

.preparing-copy span {
    color: var(--text-muted);
    line-height: 1.45;
    font-size: 13px;
}

.preparing-ring {
    --progress: 0%;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at center, #fff 58%, transparent 59%),
        conic-gradient(#2fb86f var(--progress), rgba(47, 184, 111, 0.16) 0);
    box-shadow: inset 0 0 0 1px rgba(47, 184, 111, 0.1);
}

.preparing-ring.hero {
    width: 84px;
    height: 84px;
}

.preparing-ring.mini {
    width: 42px;
    height: 42px;
    background:
        radial-gradient(circle at center, #fff 54%, transparent 55%),
        conic-gradient(#2fb86f var(--progress), rgba(47, 184, 111, 0.16) 0);
}

.preparing-ring-value {
    font-size: 12px;
    font-weight: 800;
    color: #22864f;
}

.preparing-ring.hero .preparing-ring-value {
    font-size: 14px;
}

.mini-card-preparing {
    margin-left: auto;
}

.interview-bubble.structured {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.interview-bubble-section {
    display: grid;
    gap: 8px;
}

.interview-bubble-section.task {
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(70, 72, 212, 0.06);
    border: 1px solid rgba(70, 72, 212, 0.12);
}

.interview-bubble-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.interview-bubble-text,
.interview-bubble-task {
    white-space: pre-wrap;
}

.interview-bubble-task {
    font-weight: 700;
}

.admin-methodology-shell,
.admin-methodology-workspace,
.admin-methodology-view,
.admin-methodology-summary,
.admin-methodology-risk-list,
.admin-methodology-risk-shell,
.admin-methodology-risk-body,
.admin-methodology-detail-stack,
.admin-methodology-personalization-table,
.admin-methodology-personalization-editor-table,
.admin-methodology-checks,
.admin-methodology-signals,
.admin-methodology-history {
    display: grid;
    gap: 16px;
}

.admin-methodology-tabs {
    display: inline-flex;
    gap: 8px;
    padding: 6px;
    border-radius: 18px;
    background: #f3f5fd;
    border: 1px solid rgba(70, 72, 212, 0.08);
    width: fit-content;
}

.admin-methodology-tab {
    padding: 12px 18px;
    border-radius: 14px;
    background: transparent;
    color: var(--text-muted);
    font-size: 15px;
}

.admin-methodology-tab.active {
    background: #ffffff;
    color: var(--accent);
    box-shadow: 0 10px 24px rgba(31, 38, 64, 0.08);
}

.admin-methodology-columns,
.admin-methodology-row {
    grid-template-columns: minmax(260px, 1.5fr) 120px 180px 220px 100px 90px 180px;
}

.admin-methodology-row {
    cursor: default;
}

.admin-methodology-row:hover,
.admin-methodology-row:focus-visible {
    transform: none;
}

.admin-methodology-title-cell,
.admin-methodology-status-cell,
.admin-methodology-id-cell {
    display: grid;
    gap: 6px;
}

.admin-methodology-id-cell span {
    font-family: "SFMono-Regular", "Menlo", "Monaco", "Consolas", monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
}

.admin-methodology-id-cell small,
.admin-methodology-status-cell small,
.admin-methodology-row small {
    color: var(--text-muted);
}

.admin-methodology-passports {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.admin-methodology-passport-card,
.admin-methodology-coverage-row,
.admin-methodology-risk-item,
.admin-methodology-detail-field,
.admin-methodology-detail-block,
.admin-methodology-personalization-box,
.admin-methodology-check-item,
.admin-methodology-signal-card,
.admin-methodology-history-item {
    border: 1px solid rgba(204, 208, 232, 0.82);
    background: rgba(250, 251, 255, 0.96);
}

.admin-methodology-passport-card {
    display: grid;
    gap: 10px;
    padding: 18px;
    border-radius: 22px;
}

.admin-methodology-passport-card h4 {
    margin: 0;
    font-size: 18px;
}

.admin-methodology-passport-card p,
.admin-methodology-passport-card small {
    margin: 0;
    color: var(--text-muted);
}

.admin-methodology-passport-head,
.admin-methodology-passport-meta,
.admin-methodology-branch-head,
.admin-methodology-branch-stat,
.admin-methodology-risk-toolbar,
.admin-methodology-risk-pagination,
.admin-methodology-risk-toolbar-controls,
.admin-methodology-risk-head,
.admin-methodology-drawer-head,
.admin-methodology-drawer-actions,
.admin-methodology-section-head,
.admin-methodology-personalization-box-head,
.admin-methodology-personalization-actions,
.admin-methodology-signal-head,
.admin-methodology-history-head {
    display: flex;
    gap: 12px;
}

.admin-methodology-passport-head,
.admin-methodology-passport-meta,
.admin-methodology-branch-head,
.admin-methodology-branch-stat,
.admin-methodology-risk-toolbar,
.admin-methodology-risk-pagination,
.admin-methodology-drawer-head,
.admin-methodology-section-head,
.admin-methodology-personalization-box-head,
.admin-methodology-signal-head,
.admin-methodology-history-head {
    justify-content: space-between;
    align-items: center;
}

.admin-methodology-passport-meta,
.admin-methodology-risk-toolbar-controls,
.admin-methodology-drawer-actions,
.admin-methodology-personalization-actions {
    flex-wrap: wrap;
}

.admin-methodology-branches-grid,
.admin-methodology-coverage-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.admin-methodology-branch-card {
    display: grid;
    gap: 12px;
    padding: 22px;
    border-radius: 24px;
    background: #ffffff;
    border: 1px solid rgba(70, 72, 212, 0.1);
    box-shadow: 0 18px 44px rgba(31, 38, 64, 0.06);
}

.admin-methodology-branch-head span,
.admin-methodology-branch-stat span,
.admin-methodology-summary span,
.admin-methodology-risk-summary span,
.admin-methodology-risk-head span,
.admin-methodology-detail-field span,
.admin-methodology-detail-block-label,
.admin-methodology-chip-group-title,
.admin-methodology-signal-card small,
.admin-methodology-history-head span,
.admin-methodology-history-item small {
    color: var(--text-muted);
}

.admin-methodology-branch-stat strong,
.admin-methodology-summary strong {
    color: var(--accent);
}

.admin-methodology-branch-stat.secondary strong {
    color: #b47a00;
}

.admin-report-score-track.warm span {
    background: linear-gradient(135deg, #f0b768, #d4872b);
}

.admin-methodology-coverage-table {
    display: grid;
    gap: 12px;
}

.admin-methodology-coverage-head,
.admin-methodology-coverage-row {
    display: grid;
    grid-template-columns: minmax(200px, 1.5fr) repeat(3, minmax(80px, 1fr));
    gap: 12px;
    align-items: center;
}

.admin-methodology-coverage-head,
.admin-methodology-personalization-head,
.admin-methodology-personalization-editor-head {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.admin-methodology-coverage-row,
.admin-methodology-risk-item,
.admin-methodology-detail-field,
.admin-methodology-detail-block,
.admin-methodology-personalization-box,
.admin-methodology-check-item,
.admin-methodology-signal-card,
.admin-methodology-history-item {
    padding: 12px 14px;
    border-radius: 16px;
}

.admin-methodology-summary div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(204, 208, 232, 0.6);
}

.admin-methodology-summary div:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.admin-methodology-risk-toolbar {
    padding: 10px 12px;
    border-radius: 16px;
    background: rgba(247, 248, 254, 0.96);
    border: 1px solid rgba(204, 208, 232, 0.72);
}

.admin-methodology-risk-summary {
    display: grid;
    gap: 2px;
}

.admin-methodology-risk-summary strong {
    font-size: 13px;
    color: var(--text-main);
}

.admin-methodology-risk-pagination-summary {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.admin-methodology-risk-pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.admin-methodology-risk-item p,
.admin-methodology-risk-item small,
.admin-methodology-signal-card p {
    margin: 0;
}

.admin-methodology-risk-item.critical {
    border-color: rgba(214, 77, 77, 0.24);
    background: rgba(255, 243, 243, 0.95);
}

.admin-methodology-risk-item.warning {
    border-color: rgba(214, 158, 57, 0.24);
    background: rgba(255, 249, 239, 0.95);
}

.admin-methodology-risk-item.case-quality {
    border-color: rgba(88, 118, 214, 0.18);
    background: rgba(244, 247, 255, 0.95);
}

.admin-methodology-drawer {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.admin-methodology-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(17, 22, 38, 0.34);
    backdrop-filter: blur(3px);
}

.admin-methodology-drawer-panel {
    position: absolute;
    top: 12px;
    right: 0;
    width: min(560px, 100%);
    max-height: calc(100vh - 24px);
    background: rgba(255, 255, 255, 0.98);
    border-left: 1px solid rgba(70, 72, 212, 0.12);
    box-shadow: -18px 0 44px rgba(17, 22, 38, 0.14);
    display: grid;
    grid-template-rows: auto 1fr;
    border-radius: 18px 0 0 18px;
    overflow: hidden;
}

.admin-methodology-drawer-head {
    align-items: flex-start;
    padding: 14px 16px 10px;
    border-bottom: 1px solid rgba(204, 208, 232, 0.7);
}

.admin-methodology-drawer-body {
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px 14px;
}

.admin-methodology-drawer-head h3 {
    margin: 4px 0 0;
    font-size: 17px;
    line-height: 1.2;
    max-width: 360px;
}

.admin-methodology-save-status,
.admin-methodology-edit-hint {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.admin-methodology-detail-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid rgba(70, 72, 212, 0.1);
    box-shadow: 0 12px 28px rgba(31, 38, 64, 0.05);
    align-content: start;
    flex: 0 0 auto;
}

.admin-methodology-detail-grid,
.admin-methodology-inline-controls,
.admin-methodology-status-controls,
.admin-methodology-detail-chip-groups,
.admin-methodology-detail-columns {
    display: grid;
    gap: 10px;
}

.admin-methodology-detail-grid,
.admin-methodology-inline-controls,
.admin-methodology-detail-chip-groups,
.admin-methodology-detail-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-methodology-status-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-methodology-detail-field,
.admin-methodology-status-field,
.admin-methodology-chip-group {
    display: grid;
    gap: 6px;
}

.admin-methodology-chip-group-wide {
    grid-column: 1 / -1;
}

.admin-methodology-detail-card h4 {
    margin: 2px 0 0;
    font-size: 15px;
    line-height: 1.2;
}

.admin-methodology-value,
.admin-methodology-case-text,
.admin-methodology-detail-block p,
.admin-methodology-signal-card p {
    line-height: 1.45;
    font-size: 14px;
}

.admin-methodology-case-text {
    line-height: 1.6;
    font-size: 15px;
}

.admin-methodology-inline-variable {
    display: inline;
    padding: 0 2px;
    border-radius: 6px;
    background: rgba(70, 72, 212, 0.1);
    color: var(--accent);
    font-weight: 700;
}

.admin-methodology-scenario-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(243, 245, 255, 0.98);
    border: 1px solid rgba(204, 208, 232, 0.72);
}

.admin-methodology-scenario-toolbar {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.admin-methodology-scenario-tab {
    padding: 7px 12px;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.admin-methodology-scenario-tab.active {
    background: rgba(70, 72, 212, 0.14);
    color: var(--accent);
}

.admin-methodology-case-text-block {
    gap: 8px;
}

.admin-methodology-personalization-row,
.admin-methodology-personalization-editor-row {
    display: grid;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(204, 208, 232, 0.56);
    font-size: 12px;
    line-height: 1.4;
}

.admin-methodology-personalization-row {
    grid-template-columns: minmax(120px, 0.8fr) minmax(0, 1.4fr) minmax(132px, 0.9fr);
}

.admin-methodology-personalization-editor-row {
    grid-template-columns: minmax(132px, 0.9fr) minmax(0, 1.35fr) minmax(150px, 0.95fr) auto;
}

.admin-methodology-personalization-code {
    font-family: "SF Mono", "Menlo", monospace;
    color: var(--accent);
    font-weight: 700;
}

.admin-methodology-personalization-source,
.admin-methodology-personalization-help,
.admin-methodology-personalization-profile-hint {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.admin-methodology-input {
    width: 100%;
    border: 1px solid rgba(204, 208, 232, 0.92);
    border-radius: 10px;
    padding: 8px 10px;
    font: inherit;
    font-size: 14px;
    color: var(--text-main);
    background: #ffffff;
    resize: vertical;
}

.admin-methodology-input:focus {
    outline: none;
    border-color: rgba(70, 72, 212, 0.6);
    box-shadow: 0 0 0 4px rgba(70, 72, 212, 0.12);
}

.admin-methodology-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.admin-methodology-chip,
.admin-methodology-chip-button {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(70, 72, 212, 0.1);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
}

.admin-methodology-chip.muted {
    background: rgba(226, 230, 244, 0.9);
    color: var(--text-muted);
}

.admin-methodology-chip-button {
    border: 0;
    cursor: pointer;
}

.admin-methodology-chip-button.selected {
    background: rgba(70, 72, 212, 0.16);
    box-shadow: 0 8px 18px rgba(70, 72, 212, 0.12);
}

.admin-methodology-icon-button {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(204, 208, 232, 0.92);
    border-radius: 10px;
    background: #fff;
    color: #c15757;
    cursor: pointer;
}

.admin-methodology-icon-button svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.admin-methodology-detail-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 4px;
    line-height: 1.35;
    font-size: 13px;
}

.admin-methodology-check-item {
    grid-template-columns: 1fr auto;
    align-items: center;
}

.admin-methodology-check-item small {
    grid-column: 1 / -1;
}

.admin-methodology-check-item.passed span {
    color: #2f8b58;
    font-weight: 800;
}

.admin-methodology-check-item.failed span {
    color: #b47a00;
    font-weight: 800;
}

.admin-report-detail-shell {
    gap: 22px;
    justify-items: stretch;
}

.admin-detail-user-card,
.admin-detail-insights-card,
.admin-detail-quotes-card,
.admin-detail-cases-card {
    display: grid;
    gap: 20px;
    background: #ffffff;
    border: 1px solid rgba(70, 72, 212, 0.1);
    border-radius: 28px;
    padding: 28px;
}

.admin-detail-user-strip {
    display: flex;
    justify-content: space-between;
    gap: 22px;
    align-items: start;
}

.admin-detail-user-card .admin-detail-user-score {
    flex: 0 0 auto;
    min-width: 168px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid rgba(70, 72, 212, 0.14);
    background: rgba(70, 72, 212, 0.04);
    text-align: right;
}

.admin-detail-top-grid {
    display: block;
    width: 100%;
    margin: 0;
}

.admin-detail-top-grid > .report-competencies-card {
    width: 100%;
    max-width: none;
    margin: 0;
    grid-area: auto;
}

.admin-detail-profile-summary-card {
    position: relative;
    display: grid;
    gap: 22px;
    overflow: hidden;
    padding: 28px;
    border: 1px solid rgba(70, 72, 212, 0.1);
    border-radius: 28px;
    background: #ffffff;
}

.admin-detail-profile-summary-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--accent) 0%,
        #16a34a 34%,
        #ea580c 68%,
        #7c3aed 100%
    );
}

.admin-detail-profile-summary-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}

.admin-detail-profile-summary-item {
    position: relative;
    min-height: 0;
    display: grid;
    align-content: start;
    gap: 12px;
    overflow: hidden;
    padding: 18px;
    border: 1px solid rgba(70, 72, 212, 0.1);
    border-radius: 8px;
    background:
        linear-gradient(180deg, rgba(248, 249, 255, 0.96), #ffffff 74%),
        #ffffff;
}

.admin-detail-profile-summary-item:nth-child(1),
.admin-detail-profile-summary-item:nth-child(3) {
    grid-column: span 3;
}

.admin-detail-profile-summary-item:nth-child(2) {
    grid-column: span 6;
}

.admin-detail-profile-summary-item:nth-child(n + 4) {
    grid-column: span 3;
}

.admin-detail-profile-summary-item strong {
    max-width: 100%;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    line-height: 16px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-detail-profile-summary-item p,
.admin-detail-profile-summary-list {
    margin: 0;
    color: var(--text-main);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.admin-detail-profile-summary-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    list-style: none;
}

.admin-detail-profile-summary-list > li {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    min-width: 0;
    min-height: 28px;
    padding: 7px 10px;
    border: 1px solid rgba(70, 72, 212, 0.1);
    border-radius: 8px;
    background: #ffffff;
    color: var(--text-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 17px;
    overflow-wrap: anywhere;
    white-space: normal;
}

.admin-detail-insights-summary {
    display: grid;
    gap: 14px;
    padding: 22px 24px;
    border-radius: 22px;
    background: linear-gradient(
        180deg,
        rgba(70, 72, 212, 0.06),
        rgba(70, 72, 212, 0.13)
    );
}

.admin-detail-insights-summary h4 {
    margin: 0;
    font-size: 28px;
    line-height: 1.15;
}

.admin-detail-insights-summary p {
    margin: 0;
    color: var(--text-muted);
    line-height: 1.6;
    font-size: 15px;
}

.admin-detail-figure-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    margin: 0 3px;
    padding: 2px 8px;
    border: 1px solid rgba(70, 72, 212, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.86);
    color: var(--accent);
    font-size: 14px;
    font-weight: 800;
    line-height: 18px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.admin-detail-basis-list {
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    list-style: none;
}

.admin-detail-basis-list li {
    position: relative;
    padding: 10px 12px 10px 38px;
    border: 1px solid rgba(70, 72, 212, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.62);
    color: var(--text-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
}

.admin-detail-basis-list li::before {
    content: "i";
    position: absolute;
    left: 12px;
    top: 12px;
    width: 16px;
    height: 16px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.admin-detail-insight-column {
    padding: 18px 20px;
    border-radius: 20px;
    border: 1px solid rgba(70, 72, 212, 0.08);
    background: rgba(248, 249, 255, 0.88);
}

.admin-detail-insight-column strong {
    color: var(--text-main);
    font-weight: 700;
}

.admin-detail-insight-column .report-recommendations {
    margin: 0;
    gap: 10px;
    color: var(--text-main);
}

.admin-detail-insight-column .report-recommendations li {
    position: relative;
    padding: 12px 14px 12px 18px;
    border: 1px solid var(--panel-border);
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
    color: var(--text-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.admin-detail-insight-column .report-recommendations li::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 8px;
    width: 3px;
    border-radius: 999px;
    background: var(--accent);
}

.admin-detail-insight-column:first-child .report-recommendations li::before {
    background: #16a34a;
}

.admin-detail-cases-list,
.admin-detail-case-body,
.admin-detail-case-dialogue,
.admin-detail-case-skills,
.admin-detail-case-text-stack {
    display: grid;
    gap: 14px;
}

.admin-detail-case-item {
    border: 1px solid rgba(70, 72, 212, 0.12);
    border-radius: 22px;
    background: rgba(247, 247, 255, 0.82);
    overflow: hidden;
}

.admin-detail-case-summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    padding: 18px 20px;
    cursor: pointer;
}

.admin-detail-case-summary::-webkit-details-marker,
.admin-detail-case-section-summary::-webkit-details-marker,
.admin-detail-case-prompt-details summary::-webkit-details-marker {
    display: none;
}

.admin-detail-case-summary-main,
.admin-detail-case-summary-meta {
    display: grid;
    gap: 6px;
}

.admin-detail-case-summary-main strong {
    font-size: 18px;
    line-height: 1.35;
}

.admin-detail-case-order,
.admin-detail-case-code,
.admin-detail-case-summary-meta span,
.admin-detail-case-meta,
.admin-detail-case-message-role,
.admin-detail-case-skill-meta {
    color: var(--text-muted);
    font-size: 13px;
}

.admin-detail-case-summary-meta {
    text-align: right;
    justify-items: end;
}

.admin-detail-case-body {
    padding: 0 20px 20px;
}

.admin-detail-case-columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.admin-detail-case-panel,
.admin-detail-case-skill-card {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(70, 72, 212, 0.1);
    background: #ffffff;
}

.admin-detail-case-meta,
.admin-detail-case-skill-head,
.admin-detail-case-skill-meta,
.admin-detail-case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.admin-detail-case-dialogue-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.admin-detail-case-dialogue-caption {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-detail-case-section,
.admin-detail-case-prompt-details {
    width: 100%;
    border-radius: 18px;
    border: 1px solid rgba(70, 72, 212, 0.08);
    background: rgba(247, 247, 255, 0.62);
    overflow: hidden;
}

.admin-detail-case-section-summary,
.admin-detail-case-prompt-details summary {
    cursor: pointer;
    padding: 14px 16px;
    font-weight: 800;
    color: var(--text-main);
    list-style: none;
}

.admin-detail-case-section-body {
    display: grid;
    gap: 14px;
    padding: 0 16px 16px;
}

.admin-detail-case-text-block {
    display: grid;
    gap: 8px;
    width: 100%;
}

.admin-detail-case-text-block p,
.admin-detail-case-prompt-details pre,
.admin-detail-case-message p,
.admin-detail-case-evidence {
    margin: 0;
    color: var(--text-main);
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 15px;
}

.admin-detail-case-prompt-details pre {
    padding: 14px;
    font-family: var(--font-body);
    overflow-wrap: anywhere;
    overflow-x: auto;
}

.admin-detail-case-message {
    max-width: 88%;
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 18px;
    background: rgba(70, 72, 212, 0.08);
    border: 1px solid rgba(70, 72, 212, 0.08);
}

.admin-detail-case-message.is-user {
    margin-left: auto;
    background: rgba(70, 72, 212, 0.1);
}

.admin-detail-case-tag {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(70, 72, 212, 0.1);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
}

.admin-detail-case-tag.danger {
    background: rgba(201, 72, 72, 0.12);
    color: #a33a3a;
}

.admin-detail-case-tag.muted {
    background: rgba(109, 112, 173, 0.08);
    color: var(--text-muted);
}

@media (max-width: 900px) {
    .onboarding-topbar,
    .interview-topbar-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .admin-detail-case-columns,
    .admin-detail-top-grid,
    .admin-methodology-passports,
    .admin-methodology-branches-grid,
    .admin-methodology-coverage-grid,
    .admin-methodology-coverage-head,
    .admin-methodology-coverage-row,
    .admin-methodology-detail-grid,
    .admin-methodology-detail-columns,
    .admin-methodology-detail-chip-groups,
    .admin-methodology-personalization-row,
    .admin-methodology-personalization-editor-row {
        grid-template-columns: 1fr;
    }

    .admin-detail-profile-summary-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .admin-detail-profile-summary-item:nth-child(1),
    .admin-detail-profile-summary-item:nth-child(3),
    .admin-detail-profile-summary-item:nth-child(n + 4) {
        grid-column: span 3;
    }

    .admin-detail-profile-summary-item:nth-child(2) {
        grid-column: 1 / -1;
    }

    .admin-detail-user-strip {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-detail-user-card .admin-detail-user-score {
        width: 100%;
        text-align: left;
    }

    .admin-methodology-tabs {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .admin-methodology-personalization-head,
    .admin-methodology-personalization-editor-head {
        display: none;
    }
}

@media (max-width: 720px) {
    .admin-methodology-drawer-panel {
        width: 100%;
    }

    .admin-detail-profile-summary-card {
        padding: 22px;
        border-radius: 22px;
    }

    .admin-detail-profile-summary-grid {
        grid-template-columns: 1fr;
    }

    .admin-detail-profile-summary-item,
    .admin-detail-profile-summary-item:nth-child(1),
    .admin-detail-profile-summary-item:nth-child(2),
    .admin-detail-profile-summary-item:nth-child(3),
    .admin-detail-profile-summary-item:nth-child(n + 4) {
        grid-column: 1;
        min-height: 0;
    }
}

.hidden,
.chat-panel.hidden,
.interview-panel.hidden {
    display: none;
}

.report-panel {
    min-height: 100vh;
    padding: 0 0 64px;
    background: var(--bg-soft);
}

.report-panel .dashboard-topbar {
    width: min(100%, 1152px);
    min-height: 78px;
    margin: 0 auto;
    padding: 16px 0 17px;
    border-bottom: 1px solid var(--line-strong);
    background: transparent;
    backdrop-filter: none;
}

.report-title-group {
    display: inline-flex;
    align-items: center;
    gap: 16px;
}

.report-back-button {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.825 9L9.425 14.6L8 16L0 8L8 0L9.425 1.4L3.825 7H16V9H3.825Z' fill='%23191C1E'/%3E%3C/svg%3E")
        center / 16px 16px no-repeat;
}

.report-back-button:hover,
.report-back-button:focus-visible {
    background-color: var(--control-bg);
}

.report-panel .dashboard-brand {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    color: var(--text-main);
    font-size: 20px;
    line-height: 25px;
    letter-spacing: -0.5px;
}

.report-panel .dashboard-brand::after {
    content: "";
    width: 20px;
    height: 20px;
    order: 1;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.03995 10L0 7.62395L2.97768 2.37608L7.02 4.74805L7.0223 0H12.9777L12.98 4.74805L17.0223 2.37608L20 7.62395L15.96 10L20 12.376L17.0223 17.6239L12.98 15.252L12.9777 20H7.0223L7.02 15.252L2.97768 17.6239L0 12.376L4.03995 10Z' fill='%234648D4'/%3E%3C/svg%3E")
        center / contain no-repeat;
}

.report-panel .dashboard-topbar-actions {
    gap: 24px;
    align-items: center;
}

.report-panel .compact-ghost {
    min-height: 40px;
    padding: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    line-height: 21px;
}

.report-panel .compact-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 4px;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.report-panel .compact-primary::before {
    content: "↓";
    margin-right: 8px;
    font-size: 13px;
    line-height: 1;
}

.report-shell {
    width: min(100%, 1280px);
    display: grid;
    gap: 24px;
    margin: 0 auto;
    padding: 20px 64px 0;
}

.report-hero {
    display: grid;
    grid-template-columns: minmax(0, 672px) auto;
    align-items: start;
    gap: 24px;
}

.report-hero-copy h2 {
    color: var(--text-main);
    font-size: 36px;
    font-weight: 800;
    line-height: 45px;
    letter-spacing: -0.9px;
}

.report-hero-copy p {
    max-width: 672px;
    margin: 8px 0 0;
    color: var(--text-body);
    font-size: 18px;
    line-height: 28px;
}

.report-hero-score {
    min-width: 128px;
    padding: 6px 0 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: right;
}

.report-hero-score strong {
    color: var(--accent);
    font-size: 36px;
    font-weight: 800;
    line-height: 40px;
}

.report-hero-score > span {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 2px;
    color: #904900;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.report-overview-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
        "profile profile profile profile competencies competencies competencies competencies competencies competencies competencies competencies"
        "profile profile profile profile insight insight insight insight insight insight insight insight"
        "profile profile profile profile insight insight insight insight insight insight insight insight";
    gap: 24px;
    align-items: start;
}

.report-profile-card,
.report-competencies-card,
.report-insight-card,
.report-details-card {
    border-radius: 8px;
    border: 1px solid rgba(199, 196, 215, 0.1);
    background: #fff;
}

.report-profile-card {
    grid-area: profile;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 25px;
}

.report-profile-card > .section-label {
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.7px;
}

.report-profile-card > .accent-label::before {
    display: none;
}

.report-profile-user {
    gap: 16px;
    align-items: center;
}

.report-profile-user .user-avatar {
    display: none;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    background: var(--accent-bright);
    color: #fff;
    font-size: 0;
}

.report-profile-user .user-avatar::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    line-height: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M10 10C8.625 10 7.44792 9.51042 6.46875 8.53125C5.48958 7.55208 5 6.375 5 5C5 3.625 5.48958 2.44792 6.46875 1.46875C7.44792 0.489583 8.625 0 10 0C11.375 0 12.5521 0.489583 13.5312 1.46875C14.5104 2.44792 15 3.625 15 5C15 6.375 14.5104 7.55208 13.5312 8.53125C12.5521 9.51042 11.375 10 10 10ZM0 20V16.5C0 15.7917 0.182292 15.1406 0.546875 14.5469C0.911458 13.9531 1.39583 13.5 2 13.1875C3.29167 12.5417 4.60417 12.0573 5.9375 11.7344C7.27083 11.4115 8.625 11.25 10 11.25C11.375 11.25 12.7292 11.4115 14.0625 11.7344C15.3958 12.0573 16.7083 12.5417 18 13.1875C18.6042 13.5 19.0885 13.9531 19.4531 14.5469C19.8177 15.1406 20 15.7917 20 16.5V20H0Z' fill='%23FFFBFF'/%3E%3C/svg%3E")
        center / contain no-repeat;
}

.report-profile-user strong {
    margin: 0;
    color: var(--text-main);
    font-size: 24px;
    line-height: 32px;
}

.report-profile-user span {
    margin-top: 0;
    color: var(--text-body);
    font-size: 14px;
    line-height: 22.75px;
}

.report-profile-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: 12px;
    padding: 24px;
    border-radius: 8px;
    background: #b55d00;
    color: #fffbff;
}

.report-profile-box strong {
    display: block;
    color: #fffbff;
    font-size: 16px;
    line-height: 24px;
}

.report-competencies-card {
    grid-area: competencies;
    display: grid;
    padding: 25px;
}

.report-card-head,
.report-details-head {
    align-items: end;
}

.report-card-head .accent-label::before {
    display: none;
}

.report-competencies-card .report-card-head > div {
    display: grid;
    gap: 24px;
}

.report-card-head .section-label {
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.report-card-head h3,
.report-details-head h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

.report-competency-bars {
    position: relative;
    min-height: 230px;
    height: 230px;
}

.report-competency-bars-fallback {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    align-items: stretch;
    height: 100%;
    padding: 0;
}

.report-competency-bar-card {
    min-height: 230px;
    display: grid;
    grid-template-rows: 34px 24px 1fr;
    gap: 4px;
    align-items: start;
    justify-items: center;
    padding: 16px 8px 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, #f1efff 0%, #dfdcfb 100%);
    text-align: center;
}

.report-competency-bar-card strong {
    grid-row: 1;
    align-self: center;
    color: #6d61f3;
    font-family: var(--font-body);
    font-size: 26px;
    font-weight: 800;
    line-height: 32px;
}

.report-competency-bar-card span {
    grid-row: 2;
    max-width: 100%;
    min-height: 16px;
    padding: 0;
    color: #2b2d42;
    font-size: 11px;
    font-weight: 800;
    line-height: 14px;
    text-decoration: none;
    text-transform: none;
}

.report-competency-meter {
    grid-row: 3;
    align-self: center;
    width: 48px;
    height: 124px;
    display: flex;
    align-items: flex-end;
    padding: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    overflow: hidden;
}

.report-competency-meter-fill {
    width: 100%;
    min-height: 0;
    border-radius: 999px;
    background: linear-gradient(
        180deg,
        #8d84ff 0%,
        #6757f0 46%,
        #5d4be8 100%
    );
}

.report-insight-card {
    grid-area: insight;
    position: relative;
    min-height: 320px;
    display: block;
    overflow: hidden;
    padding: 32px;
    border-color: rgba(199, 196, 215, 0.3);
    background: rgba(247, 249, 251, 0.8);
}

.report-insight-card .accent-label {
    display: inline-flex;
    gap: 0;
    margin: 0 0 16px;
    padding: 4px 12px;
    border-radius: 12px;
    background: rgba(70, 72, 212, 0.1);
    color: var(--accent);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 1.2px;
}

.report-insight-card .accent-label::before {
    display: none;
}

.report-insight-card h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 20px;
    line-height: 28px;
}

.report-insight-card p:last-child {
    max-width: 576px;
    margin: 12px 0 0;
    color: var(--text-body);
    font-size: 16px;
    line-height: 26px;
}

.report-details-card {
    grid-column: 1 / -1;
    display: grid;
    gap: 0;
    margin-top: 24px;
    padding: 0;
    border: 0;
    background: transparent;
}

.report-details-head {
    display: grid;
    gap: 24px;
    margin-bottom: 24px;
}

.report-details-head .section-label {
    margin: 0;
    color: var(--text-main);
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0;
    text-transform: none;
}

.report-details-head h3 {
    margin: -16px 0 0;
    color: var(--text-body);
    font-size: 16px;
    line-height: 24px;
}

#report-detail-title {
    display: none;
}

.report-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    width: 100%;
    overflow-x: auto;
    border-bottom: 1px solid rgba(199, 196, 215, 0.1);
}

.report-tab-button {
    padding: 12px 24px 14px;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #767586;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    white-space: nowrap;
}

.report-tab-button.active {
    border-bottom-color: var(--accent);
    background: transparent;
    color: var(--accent);
}

.report-detail-columns,
.report-skill-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    align-items: center;
}

.report-detail-columns {
    padding: 16px 24px;
    background: var(--control-bg-strong);
    color: #767586;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 0;
}

.report-detail-column-name,
.report-detail-column-level,
.report-detail-column-progress {
    text-align: center;
}

.report-detail-list {
    display: grid;
    gap: 0;
    overflow: visible;
    border: 1px solid rgba(199, 196, 215, 0.1);
    border-top: 0;
    border-radius: 0 0 8px 8px;
    background: #fff;
}

.report-skill-row {
    padding: 22px 24px;
    border: 0;
    border-top: 1px solid rgba(199, 196, 215, 0.05);
    border-radius: 0;
    background: #fff;
}

.report-skill-name {
    color: var(--text-main);
    font-size: 16px;
    font-weight: 500;
    text-align: center;
}

.report-skill-level {
    justify-self: center;
    padding: 4px 8px;
    border-radius: 2px;
    background: var(--accent-soft);
    color: #13144a;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
}

.report-skill-progress {
    justify-content: center;
}

.report-skill-progress-track {
    flex: 0 0 96px;
    height: 4px;
    border-radius: 12px;
    background: #e6e8ea;
}

.report-skill-progress-fill {
    background: var(--accent);
}

.report-skill-progress span {
    min-width: 32px;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
}

@media (max-width: 1000px) {
    .admin-panel > .admin-shell,
    .report-panel .dashboard-topbar,
    .report-shell {
        width: 100%;
        padding-left: 24px;
        padding-right: 24px;
    }

    .report-hero,
    .report-overview-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "profile"
            "competencies"
            "insight";
    }

    .report-profile-card,
    .report-competencies-card,
    .report-insight-card,
    .report-details-card {
        grid-column: 1;
    }

    .report-profile-card {
        grid-area: profile;
    }

    .report-competencies-card {
        grid-area: competencies;
    }

    .report-insight-card {
        grid-area: insight;
    }

    .admin-detail-skill-radar-list {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .report-panel .dashboard-topbar {
        display: flex;
        min-height: auto;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .report-panel .dashboard-topbar-actions {
        gap: 12px;
    }

    .report-hero-score {
        text-align: left;
    }

    .report-competency-bars-fallback {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .report-detail-columns,
    .report-skill-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .report-detail-column-name,
    .report-detail-column-level,
    .report-detail-column-progress,
    .report-skill-name {
        text-align: left;
    }

    .report-skill-level {
        justify-self: start;
    }

    .report-skill-progress {
        justify-content: flex-start;
    }
}

.hidden,
.chat-panel.hidden,
.interview-panel.hidden {
    display: none;
}

.ai-welcome-panel {
    background: var(--bg-soft);
}

.ai-welcome-panel .dashboard-topbar {
    min-height: 64px;
    padding: 0 24px;
    border-bottom-color: #f1f5f9;
}

.ai-welcome-panel .icon-button {
    display: none;
}

.ai-welcome-panel .dashboard-topbar-actions {
    flex-wrap: nowrap;
    gap: 0;
}

.ai-welcome-panel .topbar-profile-button {
    order: 0;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 8px;
    border: 0;
    border-radius: 4px;
    background: transparent;
}

.ai-welcome-panel .topbar-exit-button {
    order: 1;
    position: relative;
    height: 36px;
    min-height: 36px;
    margin-left: 17px;
    padding: 8px 0 8px 20px;
    color: #475569;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
}

.ai-welcome-panel .topbar-exit-button::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 1px;
    height: 32px;
    background: var(--line);
}

.ai-welcome-panel .ai-welcome-shell {
    width: 100%;
    max-width: 1440px;
    min-height: calc(100vh - 64px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    margin: 0 auto;
    padding: 64px 96px;
}

.ai-welcome-panel .ai-hero-card {
    position: relative;
    width: 100%;
    max-width: 1248px;
    min-height: 388px;
    display: grid;
    grid-template-columns: minmax(0, 672px) minmax(220px, 1fr);
    align-items: center;
    gap: 48px;
    overflow: hidden;
    padding: 48px;
    border: 0;
    border-radius: 32px;
    background: #fff;
}

.ai-welcome-panel .ai-hero-card::before,
.ai-welcome-panel .ai-hero-card::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 16px;
    opacity: 0.18;
    filter: blur(64px);
}

.ai-welcome-panel .ai-hero-card::before {
    width: 360px;
    height: 260px;
    right: 170px;
    top: 18px;
    background: #ff8100;
}

.ai-welcome-panel .ai-hero-card::after {
    width: 430px;
    height: 320px;
    right: -40px;
    bottom: -70px;
    background: #5658ff;
}

.ai-welcome-panel .ai-hero-copy {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    max-width: 672px;
}

.ai-welcome-panel .ai-hero-copy h2 {
    max-width: 620px;
    color: var(--text-main);
    font-size: 48px;
    font-weight: 800;
    line-height: 48px;
}

.ai-welcome-panel .ai-hero-copy p {
    max-width: 560px;
    margin: 0;
    color: var(--text-body);
    font-size: 18px;
    line-height: 29.25px;
}

.ai-welcome-panel #start-first-assessment {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 60px;
    padding: 16px 32px;
    border-radius: 8px;
    background: var(--accent-bright);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;
}

.ai-welcome-panel #start-first-assessment::after {
    content: "";
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M12.175 9H0V7H12.175L6.575 1.4L8 0L16 8L8 16L6.575 14.6L12.175 9Z' fill='white'/%3E%3C/svg%3E")
        center / contain no-repeat;
}

.ai-welcome-panel .ai-hero-illustration {
    position: relative;
    z-index: 1;
    justify-self: center;
    width: 256px;
    min-height: 256px;
    font-size: 0;
    color: transparent;
    opacity: 0.16;
}

.ai-welcome-panel .ai-hero-illustration::before {
    content: "";
    display: block;
    width: 159px;
    height: 167px;
    margin: 44px auto 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='159' height='167' viewBox='0 0 159 167' fill='none'%3E%3Cpath d='M25 166.667V130.833C17.0833 123.611 10.9375 115.174 6.5625 105.521C2.1875 95.8681 0 85.6944 0 75C0 54.1667 7.29167 36.4583 21.875 21.875C36.4583 7.29167 54.1667 0 75 0C92.3611 0 107.743 5.10417 121.146 15.3125C134.549 25.5208 143.264 38.8194 147.292 55.2083L158.125 97.9167C158.819 100.556 158.333 102.951 156.667 105.104C155 107.257 152.778 108.333 150 108.333H133.333V133.333C133.333 137.917 131.701 141.84 128.438 145.104C125.174 148.368 121.25 150 116.667 150H100V166.667H83.3333V133.333H116.667V91.6667H139.167L131.25 59.375C128.056 46.7361 121.25 36.4583 110.833 28.5417C100.417 20.625 88.4722 16.6667 75 16.6667C58.8889 16.6667 45.1389 22.2917 33.75 33.5417C22.3611 44.7917 16.6667 58.4722 16.6667 74.5833C16.6667 82.9167 18.3681 90.8333 21.7708 98.3333C25.1736 105.833 30 112.5 36.25 118.333L41.6667 123.333V166.667H25ZM66.6667 108.333H83.3333L84.5833 97.9167C85.6945 97.5 86.7014 97.0139 87.6042 96.4583C88.5069 95.9028 89.3056 95.2778 90 94.5833L99.5833 98.75L107.917 84.5833L99.5833 78.3333C99.8611 77.2222 100 76.1111 100 75C100 73.8889 99.8611 72.7778 99.5833 71.6667L107.917 65.4167L99.5833 51.25L90 55.4167C89.3056 54.7222 88.5069 54.0972 87.6042 53.5417C86.7014 52.9861 85.6945 52.5 84.5833 52.0833L83.3333 41.6667H66.6667L65.4167 52.0833C64.3055 52.5 63.2986 52.9861 62.3958 53.5417C61.4931 54.0972 60.6944 54.7222 60 55.4167L50.4167 51.25L42.0833 65.4167L50.4167 71.6667C50.1389 72.7778 50 73.8889 50 75C50 76.1111 50.1389 77.2222 50.4167 78.3333L42.0833 84.5833L50.4167 98.75L60 94.5833C60.6944 95.2778 61.4931 95.9028 62.3958 96.4583C63.2986 97.0139 64.3055 97.5 65.4167 97.9167L66.6667 108.333ZM75 87.5C71.5278 87.5 68.5764 86.2847 66.1458 83.8542C63.7153 81.4236 62.5 78.4722 62.5 75C62.5 71.5278 63.7153 68.5764 66.1458 66.1458C68.5764 63.7153 71.5278 62.5 75 62.5C78.4722 62.5 81.4236 63.7153 83.8542 66.1458C86.2847 68.5764 87.5 71.5278 87.5 75C87.5 78.4722 86.2847 81.4236 83.8542 83.8542C81.4236 86.2847 78.4722 87.5 75 87.5Z' fill='%234648D4'/%3E%3C/svg%3E")
        center / contain no-repeat;
}

.ai-welcome-panel .ai-library-section {
    width: 100%;
    max-width: 1248px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.ai-welcome-panel .compact-title {
    margin: 0;
    color: var(--text-main);
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
}

.ai-welcome-panel .library-subtitle {
    margin: 4px 0 0;
    color: var(--text-body);
    font-size: 14px;
    line-height: 20px;
}

.ai-welcome-panel .static-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 400px));
    justify-content: start;
    gap: 24px;
    width: 100%;
    max-width: 1248px;
}

.ai-welcome-panel .assessment-mini-card {
    width: 100%;
    max-width: 400px;
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 32px;
    border: 0;
    border-radius: 8px;
    background: #fff;
}

.ai-welcome-panel .assessment-mini-card.muted-card {
    border: 0;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
}

.ai-welcome-panel .mini-card-icon {
    position: relative;
    width: 48px;
    height: 48px;
    display: block;
    margin: 0 0 16px;
    border-radius: 4px;
    background: var(--accent-soft);
    color: transparent;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
}

.ai-welcome-panel .mini-card-icon::before {
    content: "";
    display: block;
    width: 24px;
    height: 23px;
}

.ai-welcome-panel .muted-card.warm .muted-icon {
    background: var(--control-bg);
    color: transparent;
}

.ai-welcome-panel .assessment-mini-card h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}

.ai-welcome-panel .assessment-mini-card p {
    min-height: 91px;
    margin: 12px 0 0;
    color: var(--text-body);
    font-size: 14px;
    line-height: 22.75px;
}

.ai-welcome-panel .assessment-mini-card.muted-card h3 {
    color: var(--text-muted);
}

.ai-welcome-panel .assessment-mini-card.muted-card p {
    color: var(--text-soft);
}

.ai-welcome-panel .mini-card-footer {
    width: 100%;
    margin-top: auto;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    letter-spacing: 1.2px;
}

.ai-welcome-panel .mini-start-button {
    min-width: 100px;
    padding: 10px 20px;
    border-radius: 4px;
    background: var(--button-muted);
    color: var(--accent);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.ai-welcome-panel .mini-start-button:disabled,
.ai-welcome-panel .mini-start-button.disabled {
    background: var(--control-bg);
    color: var(--text-soft);
    cursor: not-allowed;
}

.ai-welcome-panel .importance-card {
    position: relative;
    width: 100%;
    max-width: 1248px;
    display: block;
    overflow: hidden;
    padding: 33px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(6px);
}

.ai-welcome-panel .importance-card::after {
    content: "";
    position: absolute;
    top: -10px;
    right: -18px;
    width: 192px;
    height: 192px;
    border-radius: 16px;
    background: var(--accent);
    opacity: 0.1;
    filter: blur(50px);
}

.ai-welcome-panel .importance-card > div:first-child {
    position: relative;
    z-index: 1;
    max-width: 780px;
}

.ai-welcome-panel .importance-card .accent-label {
    gap: 8px;
    margin: 0 0 12px;
    color: var(--accent-bright);
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 1.4px;
}

.ai-welcome-panel .importance-card .accent-label::before {
    content: "i";
    width: 16px;
    height: 16px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: var(--accent-bright);
    color: #fff;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
}

.ai-welcome-panel .importance-card h3 {
    margin: 0;
    color: var(--text-main);
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}

.ai-welcome-panel .importance-card p:not(.section-label) {
    margin: 12px 0 0;
    color: var(--text-body);
    font-size: 16px;
    line-height: 26px;
}

.ai-welcome-panel .importance-metric {
    display: none;
}

@media (max-width: 1100px) {
    .ai-welcome-panel .ai-welcome-shell {
        padding: 48px 68px;
    }

    .ai-welcome-panel .ai-hero-card {
        min-height: 276px;
    }
}

@media (max-width: 900px) {
    .ai-welcome-panel .ai-welcome-shell {
        padding: 32px 24px 48px;
    }

    .ai-welcome-panel .ai-hero-card {
        grid-template-columns: 1fr;
        gap: 24px;
        min-height: 0;
    }

    .ai-welcome-panel .ai-hero-illustration {
        display: none;
    }

    .ai-welcome-panel .static-grid {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }

    .ai-welcome-panel .assessment-mini-card {
        max-width: none;
    }
}

@media (max-width: 720px) {
    .ai-welcome-panel .dashboard-topbar {
        display: flex;
        padding: 0 16px;
    }

    .ai-welcome-panel .dashboard-topbar-actions {
        justify-content: flex-end;
    }

    .ai-welcome-panel .ai-hero-card,
    .ai-welcome-panel .importance-card {
        padding: 28px;
        border-radius: 24px;
    }

    .ai-welcome-panel .ai-hero-copy h2 {
        font-size: 36px;
        line-height: 40px;
    }

    .ai-welcome-panel .ai-hero-copy p {
        font-size: 16px;
        line-height: 26px;
    }

    .ai-welcome-panel #start-first-assessment {
        width: 100%;
        padding: 14px 20px;
        font-size: 16px;
        line-height: 24px;
    }
}

.chat-panel {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 96px;
    background: var(--bg-soft);
}

.chat-panel .chat-header,
.chat-panel .status-card,
.chat-panel .messages,
.chat-panel .chat-role-options,
.chat-panel .chat-form,
.chat-panel .error {
    width: min(100%, 888px);
    margin-left: auto;
    margin-right: auto;
}

.chat-panel .chat-header {
    align-items: center;
}

.chat-panel .chat-header .brand {
    margin: 0 0 4px;
    color: var(--text-main);
    font-size: 18px;
    line-height: 24px;
}

.chat-panel .chat-header h2 {
    max-width: none;
    color: var(--text-main);
    font-size: 24px;
    line-height: 32px;
}

.chat-panel .messages {
    flex: 1;
    min-height: 320px;
    max-height: none;
    display: flex;
    flex-direction: column;
    gap: 32px;
    overflow: auto;
    padding: 12px 0 8px;
}

.chat-panel .message {
    position: relative;
    width: fit-content;
    max-width: min(600px, 100%);
    margin-top: 20px;
    padding: 17px;
    border: 1px solid rgba(199, 196, 215, 0.2);
    border-radius: 8px;
    color: var(--text-main);
    font-size: 14px;
    line-height: 22.75px;
}

.chat-panel .message::before {
    position: absolute;
    top: -22px;
    left: 0;
    color: var(--text-body);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    white-space: nowrap;
}

.chat-panel .message.bot {
    background: #fff;
}

.chat-panel .message.bot::before {
    content: "4K Ассистент";
}

.chat-panel .message.user {
    align-self: flex-end;
    margin-left: 0;
    background: var(--accent-bright);
    color: #fff;
}

.chat-panel .message.user::before {
    content: "Вы";
    right: 0;
    left: auto;
}

.chat-panel .chat-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid rgba(199, 196, 215, 0.3);
    border-radius: 16px;
    background: var(--control-bg-strong);
}

.chat-panel .chat-form input {
    height: 44px;
    border: 0;
    border-radius: 8px;
    padding: 0 10px;
    background: transparent;
    color: var(--text-main);
    font-size: 14px;
    line-height: 22.75px;
}

.chat-panel .chat-form input::placeholder {
    color: rgba(70, 69, 84, 0.6);
}

.chat-panel .chat-form .primary-button {
    min-height: 44px;
    padding: 0 24px;
    border-radius: 8px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.chat-panel .chat-role-options {
    margin-top: 0;
}

.interview-panel {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    background: var(--bg-soft);
}

.interview-topbar {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-bottom: 1px solid rgba(199, 196, 215, 0.2);
    background: #fff;
}

.interview-title-row {
    position: relative;
    min-height: 50px;
    justify-content: flex-start;
    padding: 12px 24px 13px;
    border-bottom: 1px solid rgba(199, 196, 215, 0.1);
}

.interview-title-row strong {
    color: var(--text-main);
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: -0.4px;
}

.interview-title-row::after {
    content: "";
    position: absolute;
    right: 24px;
    top: 50%;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M7 7C6.08333 7 5.29861 6.67361 4.64583 6.02083C3.99306 5.36806 3.66667 4.58333 3.66667 3.66667C3.66667 2.75 3.99306 1.96528 4.64583 1.3125C5.29861 0.659722 6.08333 0.333333 7 0.333333C7.91667 0.333333 8.70139 0.659722 9.35417 1.3125C10.0069 1.96528 10.3333 2.75 10.3333 3.66667C10.3333 4.58333 10.0069 5.36806 9.35417 6.02083C8.70139 6.67361 7.91667 7 7 7ZM0.333333 13.6667V11.3333C0.333333 10.8611 0.454861 10.4271 0.697917 10.0312C0.940972 9.63542 1.26389 9.33333 1.66667 9.125C2.52778 8.69444 3.40278 8.37153 4.29167 8.15625C5.18056 7.94097 6.08333 7.83333 7 7.83333C7.91667 7.83333 8.81944 7.94097 9.70833 8.15625C10.5972 8.37153 11.4722 8.69444 12.3333 9.125C12.7361 9.33333 13.059 9.63542 13.3021 10.0312C13.5451 10.4271 13.6667 10.8611 13.6667 11.3333V13.6667H0.333333Z' fill='%2364748B'/%3E%3C/svg%3E")
            center / 14px 14px no-repeat,
        #e0e3e5;
    transform: translateY(-50%);
}

.interview-case-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(70, 72, 212, 0.05);
    color: var(--accent);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
}

.interview-progress-labels {
    padding: 12px 28px 4px;
    color: rgba(70, 69, 84, 0.6);
    font-size: 10px;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 1px;
}

.interview-progress-labels .active {
    color: var(--accent);
}

.interview-progress-line {
    height: 6px;
    margin: 0 24px 12px;
    border-radius: 12px;
    background: #e6e8ea;
}

.interview-progress-fill {
    width: 90px;
    background: linear-gradient(90deg, var(--accent), var(--accent-bright));
}

.interview-layout {
    flex: 1;
    display: block;
    padding: 32px 96px 24px;
}

.case-sidebar,
.interview-case-header {
    display: none;
}

.interview-main {
    min-height: calc(100vh - 148px);
    display: flex;
    flex-direction: column;
    gap: 0;
}

.interview-messages {
    flex: 1;
    min-height: 0;
    max-height: none;
    display: flex;
    flex-direction: column;
    gap: 32px;
    overflow: auto;
    padding: 16px 0 28px;
}

.interview-message,
.interview-message.own {
    display: flex;
    grid-template-columns: none;
    width: 100%;
    margin-top: 20px;
}

.interview-message {
    align-items: flex-start;
}

.interview-message.own {
    align-items: flex-end;
}

.interview-avatar {
    display: none;
}

.interview-bubble {
    position: relative;
    width: min(600px, 100%);
    max-width: 600px;
    padding: 17px;
    border: 1px solid rgba(199, 196, 215, 0.2);
    border-radius: 8px;
    font-size: 14px;
    line-height: 22.75px;
}

.interview-bubble::before {
    position: absolute;
    top: -22px;
    color: var(--text-body);
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    white-space: nowrap;
}

.interview-bubble.bot {
    background: #fff;
    color: var(--text-main);
}

.interview-bubble.bot::before {
    content: "4K Ассистент";
    left: 0;
}

.interview-bubble.user {
    background: var(--accent-bright);
    color: #fff;
}

.interview-bubble.user::before {
    content: "Вы";
    right: 0;
}

.interview-form {
    position: sticky;
    bottom: 24px;
    width: min(100%, 888px);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 17px;
    border: 1px solid rgba(199, 196, 215, 0.3);
    border-radius: 24px;
    background: var(--control-bg-strong);
}

.interview-form textarea {
    min-height: 152px;
    padding: 7px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--text-main);
    font-size: 14px;
    line-height: 22.75px;
    resize: none;
}

.interview-form textarea::placeholder {
    color: rgba(70, 69, 84, 0.6);
}

.interview-form-footer {
    padding-top: 17px;
    border-top: 1px solid rgba(199, 196, 215, 0.2);
}

.interview-form-footer span,
.interview-footnote {
    color: rgba(70, 69, 84, 0.7);
    font-size: 10px;
    font-weight: 400;
    line-height: 15px;
    letter-spacing: 1px;
}

.interview-action-buttons {
    gap: 12px;
}

.interview-finish-button {
    min-height: 44px;
    padding: 12px 18px;
    border: 1px solid rgba(199, 196, 215, 0.3);
    border-radius: 8px;
    background: transparent;
    color: var(--text-body);
    font-size: 14px;
    line-height: 20px;
}

.interview-form .primary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 32px;
    border-radius: 8px;
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
}

.interview-form .primary-button::after {
    content: "▷";
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1;
}

.interview-footnote {
    margin: 16px 0 0;
    text-align: center;
    letter-spacing: 2px;
}

@media (max-width: 900px) {
    .chat-panel,
    .interview-layout {
        padding-left: 24px;
        padding-right: 24px;
    }

    .interview-form textarea {
        min-height: 128px;
    }
}

@media (max-width: 720px) {
    .chat-panel {
        padding: 24px 16px;
    }

    .chat-panel .chat-header {
        display: flex;
    }

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

    .chat-panel .chat-form .primary-button,
    .interview-form .primary-button,
    .interview-finish-button {
        width: 100%;
    }

    .interview-title-row {
        padding-left: 16px;
        padding-right: 16px;
    }

    .interview-title-row::after {
        right: 16px;
    }

    .interview-progress-labels {
        padding-left: 20px;
        padding-right: 20px;
    }

    .interview-progress-line {
        margin-left: 16px;
        margin-right: 16px;
    }

    .interview-layout {
        padding: 24px 16px;
    }

    .interview-form-footer,
    .interview-action-buttons {
        flex-direction: column;
        align-items: stretch;
    }
}

.interview-panel {
    padding: 22px 22px 28px;
    display: grid;
    gap: 22px;
    background: var(--bg-soft);
}

.interview-topbar {
    display: grid;
    gap: 12px;
    border-bottom: 0;
    background: transparent;
}

.interview-title-row {
    position: static;
    min-height: auto;
    justify-content: space-between;
    padding: 0;
    border-bottom: 0;
}

.interview-title-row::after {
    content: none;
}

.interview-title-row strong {
    font-size: inherit;
    line-height: inherit;
    letter-spacing: 0;
}

.interview-case-badge {
    position: static;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--accent-surface);
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0;
    text-transform: none;
    transform: none;
}

.interview-progress-labels {
    padding: 0;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: 0.12em;
}

.interview-progress-line {
    height: 6px;
    margin: 0;
    border-radius: 999px;
    background: var(--accent-surface);
}

.interview-progress-fill {
    width: 16%;
}

.interview-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    padding: 0;
}

.case-sidebar {
    display: block;
    position: sticky;
    top: 16px;
}

.interview-case-header {
    display: grid;
}

.interview-main {
    min-height: auto;
    display: grid;
    gap: 22px;
}

.interview-messages {
    flex: initial;
    min-height: 440px;
    max-height: 52vh;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0 0 4px;
}

.interview-form {
    position: static;
    bottom: auto;
    width: 100%;
    margin: 0;
}

@media (max-width: 900px) {
    .interview-layout {
        grid-template-columns: 1fr;
        padding: 0;
    }

    .case-sidebar {
        position: static;
        display: block;
    }
}

@media (max-width: 720px) {
    .interview-title-row,
    .interview-progress-labels,
    .interview-form-footer {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 0;
        padding-right: 0;
    }

    .interview-progress-line {
        margin-left: 0;
        margin-right: 0;
    }
}

.hidden,
.chat-panel.hidden,
.interview-panel.hidden {
    display: none;
}