body {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.5;
    color: #333;
    background: #f8fafc;
}

.container {
    width: 100%;
}

@media (min-width: 1400px) {
    .container {
        max-width: 1400px;
    }
}

.header-menu {
    height: 8rem;
    display: flex;
    align-items: center;
    background: #f8fafccc;
    border-bottom: 1px solid #e1e7ef80;
}

.header-menu>.container>.row {
    align-items: center;
}

.header-logo img {
    height: 4rem;
}

.menu-section ul {
    display: flex;
    align-items: center;
    justify-content: center;
}

.menu-section>ul>li>a {
    color: #65758b;
    font-weight: 500;
    transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    transition-duration: .15s;
    font-size: 1.6rem;
}

.menu-section>ul>li:hover>a,
.menu-section>ul>li>a:hover {
    color: #07112c !important;
}

.account-mini>a {
    display: inline-flex;
    align-items: center;
    height: 4rem;
    padding: 0.8rem 2rem;
    color: #07112c;
    font-weight: 500;
    border-radius: 0.8rem;
    line-height: 4rem;
    transition-duration: .3s;
}

.account-mini>a.item-register {
    background-image: linear-gradient(135deg, rgb(33, 54, 242) 0%, rgb(6, 183, 203) 100%);
    color: #fff;
}

.account-mini>a:hover {
    transition-duration: .3s;
}

.account-mini>a.item-login:hover {
    background: #06b7cb1a;
    color: #06b7cb;
}

.account-mini {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.5rem;
}

.account-mini>a.item-register:hover {
    box-shadow: 0 0 4rem hsl(234 89% 54% / .3);
    transform: matrix(1.05, 0, 0, 1.05, 0, 0);
}

.homepage-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(1200px 600px at 20% 15%, rgba(66, 133, 244, .18), transparent 60%),
        radial-gradient(900px 500px at 85% 35%, rgba(0, 200, 255, .12), transparent 55%),
        linear-gradient(180deg, #fbfdff 0%, #f6f9ff 45%, #f7f8ff 100%);
    padding: 12rem 0;
}

.homepage-hero::before {
    content: "";
    position: absolute;
    inset: -30%;
    background: radial-gradient(circle at 30% 30%, rgba(84, 99, 255, .12), transparent 55%),
        radial-gradient(circle at 70% 60%, rgba(79, 214, 255, .10), transparent 50%);
    filter: blur(2px);
    animation: heroBgFloat 10s ease-in-out infinite;
    pointer-events: none;
}

@keyframes heroBgFloat {

    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: .85;
    }

    50% {
        transform: translate3d(10px, -10px, 0) scale(1.02);
        opacity: 1;
    }
}

.hero-badge {
    padding: 0.6rem 1.4rem;
    border-radius: 999px;
    background: rgba(69, 92, 255, .10);
    border: 1px solid rgba(69, 92, 255, .18);
    color: #2b45ff;
    font-weight: 600;
    font-size: 1.4rem;
    gap: 1rem;
    backdrop-filter: blur(8px);
}

.hero-badge .hero-badge__dot>svg {
    width: 1.6rem;
    height: 1.6rem;
    color: #2b45ff !important;
}

.hero-title {
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.02em;
    font-size: 4.2rem;
    color: #0b1025;
    margin-top: 0.8rem;
}

.hero-title__grad1 {
    background: linear-gradient(90deg, #2a49ff, #5f7cff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-title__grad2 {
    background: linear-gradient(90deg, #2a49ff, #00c8ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero-desc {
    color: rgba(11, 16, 37, .70);
    font-size: 1.8rem;
    max-width: 52rem;
}

.hero-cta .btn {
    border-radius: 1.2rem;
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hero-btn-primary {
    background-image: linear-gradient(135deg, rgb(33, 54, 242) 0%, rgb(6, 183, 203) 100%);
    transition: transform .2s ease, box-shadow .2s ease;
    border: 0;
}

.hero-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 38px rgba(42, 73, 255, .22);
}

.hero-btn-outline {
    border-width: 2px;
    transition: transform .2s ease;
}

.hero-btn-outline:hover {
    transform: translateY(-2px);
}

.hero-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0.8rem;
    border-radius: 1.4rem;
    transition: transform .2s ease;
}

.hero-stat:hover {
    transform: translateY(-2px);
}

.hero-stat__icon {
    width: 5rem;
    height: 5rem;
    border-radius: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(42, 73, 255, .10);
    color: #2a49ff;
}

.hero-stat__value {
    font-weight: 700;
    font-size: 3rem;
    color: #3b49f9;
    line-height: 1.4;
}

.hero-stat__label {
    font-size: 1.5rem;
    color: rgba(11, 16, 37, .65);
}

.hero-right {
    text-align: center;
}

.hero-mockup-wrap {
    width: 100%;
    max-width: 560px;
    padding: 0.8rem;
}

.hero-glow {
    position: absolute;
    border-radius: 4rem;
    filter: blur(28px);
    opacity: .55;
    pointer-events: none;
}

.hero-glow--1 {
    width: 24rem;
    height: 24rem;
    left: 5%;
    top: 10%;
    background: rgba(42, 73, 255, .35);
    animation: glowFloat1 6s ease-in-out infinite;
}

.hero-glow--2 {
    width: 26rem;
    height: 26rem;
    right: 2%;
    bottom: 8%;
    background: rgba(0, 200, 255, .25);
    animation: glowFloat2 7.5s ease-in-out infinite;
}

@keyframes glowFloat1 {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(10px, -12px, 0);
    }
}

@keyframes glowFloat2 {

    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(-10px, 10px, 0);
    }
}

.hero-mockup {
    position: relative;
    background: rgba(255, 255, 255, .85);
    border: 1px solid rgba(15, 23, 42, .06);
    box-shadow: 0 28px 60px rgba(15, 23, 42, .18);
    border-radius: 2.2rem;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transform: translateZ(0);
    animation: mockupPop .9s ease both;
}

@keyframes mockupPop {
    from {
        transform: translateY(10px) scale(.98);
        opacity: 0;
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.hero-mockup--skeleton {
    padding: 1.8rem;
}

.hero-skel-top {
    height: 26rem;
    border-radius: 1.6rem;
    background: linear-gradient(90deg, #eef2ff, #f6f8ff, #eef2ff);
    background-size: 200% 100%;
    animation: shimmer 1.8s ease infinite;
    margin-bottom: 1.4rem;
}

.hero-skel-grid {
    margin: 0 -0.8rem;
}

.hero-skel-card {
    height: 8.4rem;
    border-radius: 1.4rem;
    background: linear-gradient(90deg, #edf2ff, #f7f9ff, #edf2ff);
    background-size: 200% 100%;
    animation: shimmer 1.8s ease infinite;
    margin-bottom: 1rem;
}

.hero-skel-line {
    height: 1.2rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, .08);
}

@keyframes shimmer {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

.hero-float {
    position: absolute;
    display: flex;
    align-items: center;
    text-align: left;
    gap: 1rem;
    padding: 1.5rem 1.8rem;
    border-radius: 1.6rem;
    background: rgba(255, 255, 255, .90);
    box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
    backdrop-filter: blur(10px);
    animation: floatY 3.2s ease-in-out infinite;
    z-index: 5;
}

@keyframes floatY {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

.hero-float__icon {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgb(33, 54, 242) 0%, rgb(6, 183, 203) 100%);
    color: #fff;
    font-weight: 600;
    flex: 0 0 auto;
}

.hero-float__icon>svg {
    width: 2rem;
    height: 2rem;
}

.hero-float__icon--user {
    background: rgba(0, 200, 255, .12);
    color: #0aa7d8;
}

.hero-float__title {
    font-weight: 700;
    font-size: 1.5rem;
    color: #0b1025;
}

.hero-float__sub {
    font-size: 1.3rem;
    color: rgba(11, 16, 37, .65);
    line-height: 1.2;
}

.hero-float--left {
    left: 0;
    top: 18%;
    transform: translateX(-10%);
}

.hero-float--right {
    right: 0;
    bottom: 18%;
    transform: translateX(10%);
}

@media (max-width: 575.98px) {
    .hero-title {
        font-size: 3.4rem;
    }

    .hero-desc {
        font-size: 1.5rem;
    }

    .hero-cta .btn {
        width: 100%;
    }

    .hero-cta .btn.mr-3 {
        margin-right: 0 !important;
    }

    .hero-stats .col-4 {
        padding-left: 0.6rem;
        padding-right: 0.6rem;
    }

    .hero-stat__icon {
        width: 3.6rem;
        height: 3.6rem;
    }

    .hero-float--left {
        left: 1rem;
        transform: none;
    }

    .hero-float--right {
        right: 1rem;
        transform: none;
    }
}

@media (min-width: 576px) {
    .hero-title {
        font-size: 4rem;
    }
}

@media (min-width: 992px) {
    .hero-title {
        font-size: 5.6rem;
    }

    .hero-mockup-wrap {
        max-width: 62rem;
    }

    .hero-float--left {
        left: -4rem;
    }

    .hero-float--right {
        right: -4rem;
    }
}

@media (prefers-reduced-motion: reduce) {

    .homepage-hero::before,
    .hero-glow,
    .hero-float,
    .hero-mockup {
        animation: none !important;
    }
}

/* ===== LEFT ===== */
.section-candidate,
.section-employer,
.section-ai-engine {
    margin: 7rem 0;
}

.section-candidate .row-40,
.section-employer .row-40 {
    margin-left: -4rem;
    margin-right: -4rem;
}

.section-candidate .row-40>div[class*=col-],
.section-employer .row-40>div[class*=col-] {
    padding-left: 4rem;
    padding-right: 4rem;
}

.section-candidate .row-custom,
.section-employer .row-custom {
    margin-left: -1rem;
    margin-right: -1rem;
}

.section-candidate .row-custom>div[class*=col-],
.section-employer .row-custom>div[class*=col-] {
    padding-left: 1rem;
    padding-right: 1rem;
}

.ux-badge {
    padding: 0.8rem 1.2rem;
    border-radius: 999px;
    background: rgba(0, 180, 255, .10);
    border: 1px solid rgba(0, 180, 255, .18);
    font-weight: 500;
    font-size: 1.4rem;
    gap: 1rem;
    color: #06b7cb;
}

.ux-badge .ux-badge__icon>svg {
    width: 1.8rem;
    height: 1.8rem;
}

.ux-title {
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-size: 3.4rem;
    /* mobile-first */
    margin-bottom: 1.2rem;
    color: #0b1025;
}

.ux-title__grad {
    background: linear-gradient(90deg, #2a49ff, #00c8ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ux-desc {
    color: rgba(11, 16, 37, .62);
    font-size: 1.5rem;
    max-width: 52rem;
}

/* Feature cards */
.ux-feature {
    border: 1px solid rgba(225, 231, 239, 0.5);
    border-radius: 1.4rem;
    transition: transform .2s ease, box-shadow .2s ease;
    background: rgb(255, 255, 255);
}

.ux-feature:hover {
    transform: translateY(-2px);
    box-shadow: 0 1.6rem 3.4rem rgba(15, 23, 42, .10);
}

.ux-feature .card-body {
    padding: 2.4rem;
}

.ux-feature__icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 183, 203, 0.1);
    color: rgb(6, 183, 203);
    flex: 0 0 auto;
}

.ux-feature__icon>svg {
    width: 2rem;
    height: 2rem;
    color: rgb(6, 183, 203);
}

.ux-feature__title {
    font-weight: 600;
    font-size: 1.6rem;
    color: #0b1025;
    margin-bottom: 0.4rem;
}

.ux-feature__desc {
    font-size: 1.4rem;
    color: rgba(11, 16, 37, .60);
    line-height: 1.35;
}

/* ===== RIGHT PANEL ===== */
.ux-panel {
    border-radius: 1.8rem;
    border: 1px solid rgba(15, 23, 42, .06);
    background: rgba(255, 255, 255, .90);
}

.ux-panel--shadow {
    box-shadow: 0 2.2rem 5.4rem rgba(15, 23, 42, .14);
}

.ux-panel .card-body {
    padding: 1.8rem;
}

.ux-avatar {
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: #fff;
    font-size: 2.1rem;
    background: linear-gradient(135deg, #2a49ff, #00c8ff);
}

.ux-name {
    font-weight: 600;
    color: #0b1025;
    font-size: 1.8rem;
}

.ux-role {
    font-size: 1.4rem;
    color: rgba(11, 16, 37, .60);
}

.ux-pill {
    font-size: 1.2rem;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: rgba(42, 73, 255, .08);
    color: rgba(42, 73, 255, .95);
    border: 1px solid rgba(42, 73, 255, .12);
}

.ux-divider {
    border-top: 1px solid rgba(15, 23, 42, .06);
    margin: 2rem 0;
}

/* mini stats */
.ux-mini {
    border-radius: 1.2rem;
    border: 1px solid rgba(15, 23, 42, .06);
    background: rgba(15, 23, 42, .02);
    padding: 1.2rem 1rem;
}

.ux-mini__num {
    font-weight: 700;
    font-size: 2.2rem;
    color: #2a49ff;
    line-height: 1.1;
}

.ux-mini__num--blue {
    color: #2a49ff;
}

.ux-mini__num--green {
    color: #22c55e;
}

.ux-mini__label {
    font-size: 1.4rem;
    color: rgba(11, 16, 37, .55);
    margin-top: 0.4rem;
}

/* suggest list */
.ux-suggest-title {
    font-weight: 600;
    font-size: 1.5rem;
    color: #06b7cb;
}

.ux-suggest-list {
    margin-top: 1rem;
}

.ux-job {
    padding: 1.2rem 1.4rem;
    background: #f9fafb;
    margin-bottom: 1rem;
    border-radius: 1rem;
    border: 1px solid rgb(15 23 42 / 4%);
}

.ux-job__name {
    font-weight: 600;
    color: #0b1025;
    font-size: 1.5rem;
}

.ux-job__sub {
    color: #65758b;
    font-size: 1.4rem;
}

.ux-match {
    font-size: 1.2rem;
    padding: 0.6rem 1rem;
    border-radius: 999px;
    background: rgba(0, 200, 255, .10);
    color: rgba(0, 120, 200, .90);
    border: 1px solid rgba(0, 200, 255, .14);
}

/* ===== Responsive ===== */
@media (min-width: 576px) {
    .ux-title {
        font-size: 4rem;
    }

    .ux-desc {
        font-size: 1.6rem;
    }
}

@media (min-width: 992px) {
    .ux-title {
        font-size: 4.8rem;
    }

    .ux-panel .card-body {
        padding: 2.2rem;
    }
}

.mb-20 {
    margin-bottom: 2rem;
}

.section-employer .em-mini {
    border-radius: 1.4rem;
    border: .1rem solid rgba(42, 73, 255, .16);
    background: rgba(42, 73, 255, .06);
    padding: 1.4rem 1.4rem;
    height: 100%;
}

.section-employer .em-mini--soft {
    border-color: rgba(0, 200, 255, .14);
    background: rgba(0, 200, 255, .06);
}

.section-employer .em-mini__icon {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .70);
    border: .1rem solid rgba(15, 23, 42, .06);
    color: rgb(6, 183, 203);
    font-size: 1.4rem;
}

.section-employer .em-mini__label {
    font-weight: 600;
    font-size: 1.5rem;
    color: rgba(42, 73, 255, .95);
}

.section-employer .em-mini__value {
    font-weight: 700;
    font-size: 2.4rem;
    color: #0b1025;
    line-height: 1.1;
    margin: 1rem 0 0.5rem;
}

.section-employer .em-mini__hint {
    font-size: 1.4rem;
    margin-top: .4rem;
}

.section-employer .em-ic {
    background: rgba(33, 54, 242, 0.1);
}

.section-employer .ux-badge {
    background: #3c54f924;
    color: #3c54f9;
}

/* ===== AI Engine Section ===== */
.section-ai-engine {
    position: relative;
    overflow: hidden;
}

.section-ai-engine .ai-mock-main {
    margin-bottom: 6.4rem;
}

/* center head spacing (optional) */
.section-ai-engine .ux-center-head .ux-title {
    text-align: center;
}

/* Big mock card */
.section-ai-engine .ai-mock {
    border-radius: 2.2rem;
    border: .1rem solid rgba(15, 23, 42, .06);
    background: rgba(255, 255, 255, .92);
}

.section-ai-engine .ai-mock__body {
    padding: 5rem;
}

/* Core icon */
.section-ai-engine .ai-core {
    margin-bottom: 5rem;
}

.section-ai-engine .ai-core__icon {
    width: 12.8rem;
    height: 12.8rem;
    border-radius: 999rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.0rem;
    color: #fff;
    background: linear-gradient(135deg, #2a49ff, #00c8ff);
    position: relative;
    box-shadow: 0 2.0rem 4.2rem rgba(42, 73, 255, .22);
}

.section-ai-engine .ai-core__icon .ai-core-wrap__dot {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.section-ai-engine .ai-core__icon .ai-icon>svg {
    width: 6.4rem;
    height: 6.4rem;
}

.section-ai-engine .ai-core__dot {
    position: absolute;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999rem;
    background: rgba(0, 200, 255, .9);
}

.section-ai-engine .ai-core__dot--1 {
    top: 1.2rem;
    left: 1.1rem;
    background: rgb(0 200 255);
}

.section-ai-engine .ai-core__dot--2 {
    bottom: 1.2rem;
    right: 1.2rem;
    background: rgb(42 73 255);
    width: 1.2rem;
    height: 1.2rem;
}

.section-ai-engine .ai-core__title {
    font-weight: 700;
    font-size: 2.8rem;
    color: #0b1025;
}

.section-ai-engine .ai-core__grad {
    background: linear-gradient(90deg, #2a49ff, #00c8ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.section-ai-engine .ai-core__sub {
    margin-top: .4rem;
    font-size: 1.6rem;
    color: rgba(11, 16, 37, .55);
}

/* Side cards (candidate/employer) */
.section-ai-engine .ai-side {
    border-radius: 1.6rem;
    border: .1rem solid rgba(15, 23, 42, .06);
    background: rgba(255, 255, 255, .92);
}

.section-ai-engine .ai-side .card-body {
    padding: 2.4rem;
    background: rgba(241, 245, 249, 0.5);
}

.section-ai-engine .ai-side .card-body .ai-side-skill {
    margin-top: 1.5rem;
}

.section-ai-engine .ai-mini-avatar {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 999rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.9rem;
    color: rgb(6, 183, 203);
    background: rgba(6, 183, 203, 0.2);
    flex: 0 0 auto;
}

.section-ai-engine .ai-mini-avatar--blue {
    color: #fff;
    background: linear-gradient(135deg, #2a49ff, #00c8ff);
    border-color: rgba(42, 73, 255, .14);
    border-radius: 1rem;
}

.section-ai-engine .ai-side__title {
    font-weight: 600;
    font-size: 1.6rem;
    color: #0b1025;
}

.section-ai-engine .ai-side__sub {
    font-size: 1.4rem;
    color: rgba(11, 16, 37, .55);
}

/* Pills */
.section-ai-engine .ai-pill {
    font-size: 1.3rem;
    padding: .5rem 1rem;
    border-radius: 99.9rem;
    background: rgba(6, 183, 203, 0.2);
    color: rgb(6, 183, 203);
}

.section-ai-engine .ai-pill--blue {
    background: rgba(42, 73, 255, .08);
    border-color: rgba(42, 73, 255, .12);
    color: rgba(42, 73, 255, .92);
}

/* Match ring */
.section-ai-engine .ai-match__ring {
    width: 11.2rem;
    height: 11.2rem;
    border-radius: 999rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: .4rem solid rgb(6, 183, 203);
    background: rgba(0, 200, 255, .05);
    text-align: center;
    margin-bottom: 2rem;
}

.section-ai-engine .ai-match__num {
    font-weight: 700;
    font-size: 3rem;
    line-height: 1.1;
    color: rgb(6, 183, 203);
}

.section-ai-engine .ai-match__label {
    font-size: 1.4rem;
    color: rgb(101, 117, 139);
}

.section-ai-engine .ai-match__cap {
    font-size: 1.4rem;
    color: rgba(11, 16, 37, .55);
    position: relative;
}

.section-ai-engine .ai-match__cap>span {
    position: relative;
    z-index: 99;
    background: #fff;
    padding: 0 2rem;
}

.section-ai-engine .ai-match__cap:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    width: 100%;
    max-width: 20rem;
    margin: 0 auto;
    height: 0.2rem;
    background: rgba(6, 183, 203, 0.5);
}

/* Feature icon tint (optional) */
.section-ai-engine .row.row-feature {
    margin-left: -1rem;
    margin-right: -1rem;
}

.section-ai-engine .row.row-feature>div[class*=col-] {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: 2rem;
}

.section-ai-engine .ai-ic {
    background: rgba(42, 73, 255, .10);
    color: rgba(42, 73, 255, .95);
    width: 4.8rem;
    height: 4.8rem;
    margin-bottom: 1.5rem;
}

.section-ai-engine .row.row-feature>div[class*=col-]:nth-child(2n) .ai-ic {
    background: rgba(6, 183, 203, 0.1);
}

.section-ai-engine .row.row-feature>div[class*=col-]:nth-child(2n) .ai-ic>svg {
    color: rgb(6, 183, 203) !important;
}

.section-ai-engine .ai-ic>svg {
    width: 2.4rem;
    height: 2.4rem;
}

.section-ai-engine .ux-feature__title {
    font-size: 1.8rem;
    margin-bottom: 1rem;
}

/* CTA btn (optional) */
.section-ai-engine .action-ai-engine {
    text-align: center;
    margin-top: 2rem;
}

.section-ai-engine .ux-cta-btn {
    background: linear-gradient(135deg, #2a49ff, #00c8ff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border-radius: 1.2rem;
    padding: 1.2rem 2rem;
    border: 0;
    font-weight: 500;
}

/* Responsive */
@media (max-width: 57.5rem) {
    .section-ai-engine .ai-mock__body {
        padding: 2.2rem 1.8rem;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* ===== Freelancer Section ===== */
.section-freelancer {
    position: relative;
    margin-top: 12rem;
    margin-bottom: 7rem;
}

.section-freelancer .ux-badge.ux-badge-section {
    background-color: rgba(6, 183, 203, 0.1);
    border-color: rgba(6, 183, 203, 0.2);
    color: rgb(6, 183, 203);
}

.section-freelancer .ux-badge.ux-badge-section .ux-badge__icon>svg {
    color: rgb(6, 183, 203) !important;
}

/* Header spacing */
.section-freelancer .fr-head {
    padding-bottom: 3.2rem;
}

.section-freelancer .fr-badge {
    margin-bottom: 1.4rem;
}

.section-freelancer .fr-title {
    margin: 0;
}

.section-freelancer .fr-desc {
    max-width: 64rem;
    margin-top: 1.2rem;
    margin-bottom: 0;
}

/* Categories grid spacing */
.section-freelancer .fr-cats {
    margin-top: 3.2rem;
    margin-bottom: 4.0rem;
    margin-left: -0.8rem;
    margin-right: -0.8rem;
}

.section-freelancer .fr-col {
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    margin-bottom: 1.6rem;
    /* dùng margin-bottom để auto wrap */
}

.section-freelancer .fr-cat {
    border-radius: 1.6rem;
    border: .1rem solid rgba(225, 231, 239, 0.5);
    background: rgb(255, 255, 255);
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
    height: 100%;
    display: inline-block;
    width: 100%;
}

.section-freelancer .fr-cat:hover {
    transform: translateY(-.2rem);
    box-shadow: 0 1.8rem 3.6rem rgba(15, 23, 42, .10);
    border-color: rgba(0, 200, 255, .4);
}

.section-freelancer .fr-cat__body {
    padding: 1.8rem 1.2rem;
}

.section-freelancer .fr-cat__icon {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 1.4rem;
    margin: 0 auto 1.5rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 183, 203, 0.1);
    color: rgb(6, 183, 203);
    font-size: 1.8rem;
}

.section-freelancer .fr-cat__title {
    font-weight: 600;
    font-size: 1.6rem;
    color: #0b1025;
    line-height: 1.2;
}

.section-freelancer .fr-cat__sub {
    margin-top: 0.5rem;
    font-size: 1.4rem;
    color: rgba(11, 16, 37, .55);
}

/* Row header */
.section-freelancer .fr-row-head {
    padding-top: .8rem;
    padding-bottom: 2.0rem;
}

.section-freelancer .fr-row-title {
    margin: 0;
    font-weight: 600;
    font-size: 2.4rem;
    color: #0b1025;
}

.section-freelancer .fr-link {
    font-size: 1.5rem;
    font-weight: 600;
    color: rgba(11, 16, 37, .75);
    text-decoration: none;
}

.section-freelancer .fr-link__arrow {
    margin-left: .6rem;
}

/* Freelancer cards */
.section-freelancer .fr-cards {
    margin-bottom: 3.2rem;
    margin-left: -1rem;
    margin-right: -1rem;
}

.section-freelancer .fr-card {
    border-radius: 1.8rem;
    border: .1rem solid rgba(15, 23, 42, .06);
    background: rgba(255, 255, 255, .92);
    transition: transform .2s ease, box-shadow .2s ease;
}

.section-freelancer .fr-card:hover {
    transform: translateY(-.2rem);
    box-shadow: 0 1.8rem 3.6rem rgba(15, 23, 42, .10);
}

.section-freelancer .fr-card__body {
    padding: 1.8rem;
}

.section-freelancer .fr-card__top {
    gap: 1.2rem;
}

.section-freelancer .fr-avatar {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 999rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #2a49ff, #00c8ff);
    flex: 0 0 auto;
    font-size: 1.9rem;
}

.section-freelancer .fr-name {
    font-weight: 600;
    font-size: 1.8rem;
    color: #0b1025;
    line-height: 1.2;
}

.section-freelancer .fr-role {
    margin-top: .4rem;
    font-size: 1.4rem;
    color: rgba(11, 16, 37, .55);
}

.section-freelancer .fr-rate {
    margin-top: .6rem;
    gap: .6rem;
}

.section-freelancer .fr-star {
    color: #f4b400;
    font-size: 1.4rem;
    line-height: 1;
}

.section-freelancer .fr-star>svg {
    fill: rgb(234, 179, 8);
    width: 1.6rem;
    height: 1.6rem;
}

.section-freelancer .fr-rate__num {
    font-weight: 700;
    font-size: 1.4rem;
    color: rgba(11, 16, 37, .80);
}

.section-freelancer .fr-rate__sub {
    font-size: 1.4rem;
    color: rgba(11, 16, 37, .55);
}

.section-freelancer .fr-tags {
    padding-top: 1.4rem;
    gap: .8rem;
}

.section-freelancer .fr-pill {
    font-size: 1.3rem;
    padding: .5rem .8rem;
    border-radius: 99.9rem;
    background: rgb(241, 245, 249);
    color: rgb(7, 17, 44);
}

.section-freelancer .fr-divider {
    border-top: .1rem solid rgba(15, 23, 42, .06);
    margin: 1.6rem 0 1.4rem 0;
}

.section-freelancer .fr-price__label {
    font-size: 1.4rem;
    color: rgba(11, 16, 37, .55);
}

.section-freelancer .fr-price__val {
    margin-top: .4rem;
    font-weight: 700;
    font-size: 1.6rem;
    color: rgba(0, 120, 200, .92);
}

.section-freelancer .fr-btn {
    border-radius: 1.2rem;
    padding: .6rem 1.2rem;
    font-weight: 500;
    font-size: 1.3rem;
    background: rgb(248, 250, 252);
    border: 0.2rem solid rgba(33, 54, 242, 0.2);
    color: rgb(7, 17, 44);
}

.section-freelancer .fr-btn:hover {
    border-color: rgb(33, 54, 242);
}

/* Info bar */
.section-freelancer .fr-infobar {
    border-radius: 2.0rem;
    background: linear-gradient(to right bottom, rgba(6, 183, 203, 0.05), rgba(33, 54, 242, 0.05));
    border: 1px solid rgba(225, 231, 239, 0.5);
}

.section-freelancer .fr-infobar__body {
    padding: 2rem 3rem;
}

.section-freelancer .fr-info {
    display: flex;
    gap: 1.2rem;
    padding: 1.2rem 1.0rem;
}

.section-freelancer .fr-info__icon {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(6, 183, 203, 0.1);
    color: rgba(42, 73, 255, .95);
    flex: 0 0 auto;
    font-size: 1.7rem;
}

.section-freelancer .fr-info__icon--blue {
    background: rgba(0, 200, 255, .10);
    border-color: rgba(0, 200, 255, .14);
    color: rgba(0, 120, 200, .92);
}

.section-freelancer .fr-info__icon--cyan {
    background: rgba(34, 197, 94, .10);
    border-color: rgba(34, 197, 94, .16);
    color: #22c55e;
}

.section-freelancer .fr-info__title {
    font-weight: 600;
    font-size: 1.6rem;
    color: #0b1025;
}

.section-freelancer .fr-info__desc {
    margin-top: .4rem;
    font-size: 1.4rem;
    color: rgba(11, 16, 37, .55);
    line-height: 1.35;
}

/* Responsive tuning */
@media (max-width: 57.5rem) {
    .section-freelancer .fr-head {
        padding-bottom: 2.4rem;
    }

    .section-freelancer .fr-cats {
        margin-top: 2.4rem;
        margin-bottom: 3.2rem;
    }

    .section-freelancer .fr-row-title {
        font-size: 1.8rem;
    }
}

.ux-badge.ux-badge-section {
    font-size: 1.6rem;
    padding: 1rem 1.5rem;
    background: rgba(33, 54, 242, 0.1);
    color: rgb(33, 54, 242);
    border-color: rgba(33, 54, 242, 0.2);
    line-height: 1;
    margin-bottom: 2rem !important;
}

.ux-badge.ux-badge-section .ux-badge__icon>svg {
    width: 2.2rem;
    height: 2.2rem;
    color: rgb(33, 54, 242) !important;
}

.section-pricing {
    position: relative;
    margin: 12rem 0;
}

/* Header */
.section-pricing .pr-head {
    padding-bottom: 3.2rem;
}

.section-pricing .pr-title {
    margin: 0;
    font-weight: 700;
    font-size: 4.8rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #0b1025;
}

.section-pricing .pr-title__grad {
    background: linear-gradient(90deg, #2a49ff, #00c8ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.section-pricing .pr-desc {
    max-width: 62rem;
    margin: 1.4rem auto 3rem auto;
    font-size: 1.6rem;
    color: rgba(11, 16, 37, .60);
}

/* Plans row */
.section-pricing .pr-plans {
    justify-content: center;
    align-items: stretch;
}

.section-pricing .pr-col {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    margin-bottom: 2.0rem;
    max-width: 38rem;
}

/* Card base */
.section-pricing .pr-card {
    border-radius: 2.0rem;
    border: .1rem solid rgba(15, 23, 42, .06);
    background: rgba(255, 255, 255, .92);
    height: 100%;
    position: relative;
    transition: transform .2s ease, box-shadow .2s ease;
}

.section-pricing .pr-card:hover {
    transform: translateY(-.2rem);
    box-shadow: 0 2.6rem 7.0rem rgba(15, 23, 42, .16);
}

.section-pricing .pr-card__body {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Featured Pro */
.section-pricing .pr-card--featured {
    border: .2rem solid rgba(42, 73, 255, .70);
    box-shadow: 0 2.6rem 7.0rem rgba(42, 73, 255, .16);
}

.section-pricing .pr-badge {
    position: absolute;
    top: -1.8rem;
    left: 50%;
    transform: translateX(-50%);
    padding: .7rem 1.2rem;
    border-radius: 99.9rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, rgb(33, 54, 242) 0%, rgb(6, 183, 203) 100%);
    box-shadow: 0 1.4rem 3.0rem rgba(42, 73, 255, .22);
}

/* Top block */
.section-pricing .pr-top {
    padding-bottom: 1.6rem;
}

.section-pricing .pr-plan {
    gap: 1.0rem;
    margin-bottom: 1rem;
}

.section-pricing .pr-ico {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, .04);
    border: .1rem solid rgba(15, 23, 42, .06);
    color: rgba(11, 16, 37, .70);
    font-size: 1.6rem;
    flex: 0 0 auto;
}

.section-pricing .pr-ico>svg {
    width: 2.1rem;
    height: 2.1rem;
}

.section-pricing .pr-ico--blue {
    background: linear-gradient(135deg, rgb(33, 54, 242) 0%, rgb(6, 183, 203) 100%);
    border: 0;
    color: #fff;
}

.section-pricing .pr-plan__name {
    font-weight: 700;
    font-size: 2.4rem;
    color: #0b1025;
}

/* Price */
.section-pricing .pr-price {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    padding-top: 1.2rem;
}

.section-pricing .pr-price__num {
    font-weight: 700;
    font-size: 3.6rem;
    color: #0b1025;
    line-height: 1;
}

.section-pricing .pr-price__num--text {
    font-size: 3.2rem;
}

.section-pricing .pr-price__unit {
    font-size: 1.6rem;
    color: rgba(11, 16, 37, .55);
    padding-bottom: .4rem;
}

.section-pricing .pr-price--big .pr-price__num {
    font-size: 4.0rem;
}

.section-pricing .pr-sub {
    padding-top: 1.2rem;
    font-size: 1.6rem;
    color: rgba(11, 16, 37, .58);
}

/* Feature list */
.section-pricing .pr-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 1.1rem;
    /* flex: 1 1 auto; */
}

.section-pricing .pr-item {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    font-size: 1.6rem;
    color: rgba(11, 16, 37, .70);
    line-height: 1.35;
    padding: 0.5rem 0;
}

.section-pricing .pr-check {
    width: 2.0rem;
    height: 2.0rem;
    border-radius: 99.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 200, 255, .10);
    border: .1rem solid rgba(0, 200, 255, .14);
    color: rgba(0, 120, 200, .92);
    font-weight: 900;
    flex: 0 0 auto;
    font-size: 1.2rem;
}

/* Action */
.section-pricing .pr-action {
    padding-top: 3rem;
}

.section-pricing .pr-btn {
    width: 100%;
    border-radius: 1.4rem;
    padding: 1.2rem 1.6rem;
    font-weight: 600;
    font-size: 1.6rem;
}

.section-pricing .pr-btn--primary {
    box-shadow: 0 2.0rem 4.2rem rgba(42, 73, 255, .18);
    background: linear-gradient(135deg, rgb(33, 54, 242) 0%, rgb(6, 183, 203) 100%);
    border: 0;
}

.section-pricing .pr-btn--outline {
    border-width: .2rem;
}

/* Add-ons */
.section-pricing .pr-addons {
    padding-top: 5.2rem;
}

.section-pricing .pr-addons__title {
    font-size: 1.6rem;
    color: rgba(11, 16, 37, .60);
    font-weight: 600;
}

.section-pricing .pr-chips {
    padding-top: 1.4rem;
    gap: 1.0rem;
}

.section-pricing .pr-chip {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    padding: .9rem 1.2rem;
    border-radius: 99.9rem;
    border: .1rem solid rgba(15, 23, 42, .06);
    background: rgba(255, 255, 255, .85);
    text-decoration: none;
    color: rgba(11, 16, 37, .75);
    font-size: 1.5rem;
    font-weight: 600;
    transition: transform .2s ease, box-shadow .2s ease;
}

.section-pricing .pr-chip:hover {
    transform: translateY(-.2rem);
    box-shadow: 0 1.6rem 3.2rem rgba(15, 23, 42, .10);
}

.section-pricing .pr-chip__sub {
    font-weight: 600;
    color: rgb(255 10 64 / 72%);
}

/* Responsive */
@media (max-width: 57.5rem) {
    .section-pricing .pr-title {
        font-size: 3.6rem;
    }

    .section-pricing .pr-desc {
        font-size: 1.5rem;
    }
}

.section-cta-gradient {
    padding: 8rem 0;
    background: linear-gradient(90deg, #2a49ff 0%, #6aa6c7 100%);
    position: relative;
    overflow: hidden;
}

/* hơi “glow” nhẹ như ảnh */
.section-cta-gradient::before {
    content: "";
    position: absolute;
    inset: -20%;
    background:
        radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 55%),
        radial-gradient(circle at 70% 60%, rgba(0, 200, 255, .18), rgba(0, 200, 255, 0) 55%);
    filter: blur(1.2rem);
    pointer-events: none;
}

.section-cta-gradient .cta-wrap {
    position: relative;
    max-width: 86rem;
    margin: 0 auto;
}

/* icon badge */
.section-cta-gradient .cta-badge {
    width: 6.6rem;
    height: 6.6rem;
    border-radius: 1.6rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .16);
    border: .1rem solid rgba(255, 255, 255, .22);
    color: #fff;
    font-size: 3.8rem;
    backdrop-filter: blur(.6rem);
}

/* title */
.section-cta-gradient .cta-title {
    margin: 2.2rem 0 0 0;
    font-weight: 700;
    font-size: 5.2rem;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.section-cta-gradient .cta-title__grad {
    background: linear-gradient(90deg, #9be7ff, #e8fff6);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* desc */
.section-cta-gradient .cta-desc {
    max-width: 68rem;
    margin: 1.8rem auto 0 auto;
    font-size: 1.8rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, .82);
}

/* buttons */
.section-cta-gradient .cta-actions {
    gap: 1.2rem;
    padding-top: 2.6rem;
}

.section-cta-gradient .cta-btn {
    border-radius: 1.6rem;
    padding: 1.2rem 2.0rem;
    font-weight: 600;
    font-size: 1.8rem;
    display: inline-flex;
    align-items: center;
    gap: .9rem;
    border: .1rem solid transparent;
}

.section-cta-gradient .cta-btn--primary {
    background: #ffffff;
    color: rgba(42, 73, 255, .95);
    box-shadow: 0 2.2rem 5.4rem rgba(0, 0, 0, .16);
}

.section-cta-gradient .cta-btn--ghost {
    background: rgba(255, 255, 255, .10);
    color: #ffffff;
    border-color: rgba(255, 255, 255, .25);
    backdrop-filter: blur(.6rem);
}

.section-cta-gradient .cta-btn__arrow {
    margin-left: .2rem;
}

/* notes */
.section-cta-gradient .cta-notes {
    gap: 2.4rem;
    padding-top: 2.2rem;
}

.section-cta-gradient .cta-note {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-size: 1.6rem;
    color: rgba(255, 255, 255, .78);
    font-weight: 500;
}

.section-cta-gradient .cta-note__dot {
    width: 2rem;
    height: 2rem;
    border-radius: 99.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .18);
    border: .1rem solid rgba(255, 255, 255, .22);
    color: rgba(255, 255, 255, .95);
    font-size: 1.0rem;
}

/* hover subtle */
.section-cta-gradient .cta-btn--primary:hover {
    transform: translateY(-.2rem);
}

.section-cta-gradient .cta-btn--ghost:hover {
    transform: translateY(-.2rem);
    background: rgba(255, 255, 255, .14);
}

/* Responsive */
@media (max-width: 57.5rem) {
    .section-cta-gradient {
        padding: 4.8rem 0;
    }

    .section-cta-gradient .cta-title {
        font-size: 3.6rem;
    }

    .section-cta-gradient .cta-desc {
        font-size: 1.5rem;
    }

    .section-cta-gradient .cta-notes {
        gap: 1.4rem;
    }
}

footer {
    background: rgb(7, 17, 44);
}

.footer-company .social-links {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.footer-company .social-item {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .08);
    border: .1rem solid rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .85);
    font-size: 1.8rem;
    text-decoration: none;
    transition:
        transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.footer-company .social-item:hover {
    transform: translateY(-.2rem);
    background: rgba(255, 255, 255, .16);
    box-shadow: 0 1.2rem 2.8rem rgba(0, 0, 0, .25);
    color: #ffffff;
}

.footer-main {
    padding: 6rem 0;
}

.footer-main>.container>.row>div[class*=col-] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 3rem;
}

.footer-company .footer-logo img {
    height: 4rem;
    filter: brightness(0) invert(1);
}

.footer-company .footer-logo {
    margin-bottom: 2rem;
}

.footer-company .description-company {
    color: rgba(248, 250, 252, 0.6);
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

.footer-menu .title-footer {
    color: rgb(248, 250, 252);
    font-size: 1.7rem;
    font-weight: 600;
    margin-bottom: 2rem;
}

.footer-menu .list-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu .list-menu>li>a {
    color: rgba(248, 250, 252, 0.8);
    font-size: 1.6rem;
    padding: 0.5rem 0;
    display: inline-block;
}

.newsletter-bar {
    padding: 4rem 0;
    border-top: 0.1rem solid rgba(255, 255, 255, .10);
    border-bottom: 0.1rem solid rgba(255, 255, 255, .10);
}

/* Left text */
.newsletter-bar .nl-title {
    font-weight: 600;
    font-size: 1.8rem;
    color: #ffffff;
    line-height: 1.2;
}

.newsletter-bar .nl-sub {
    padding-top: .6rem;
    font-size: 1.5rem;
    color: rgba(255, 255, 255, .70);
    line-height: 1.35;
}

/* Form layout */
.newsletter-bar .nl-form {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1.2rem;
}

/* Input field with icon */
.newsletter-bar .nl-field {
    position: relative;
    width: 28rem;
    max-width: 100%;
}

.newsletter-bar form {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
}

.newsletter-bar .nl-icon {
    position: absolute;
    left: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .60);
    font-size: 1.6rem;
    pointer-events: none;
}

.newsletter-bar .nl-input {
    width: 100%;
    height: 4.6rem;
    border-radius: 1.4rem;
    padding: 0 1.4rem 0 4.2rem;
    background: rgba(255, 255, 255, .10);
    border: .1rem solid rgba(255, 255, 255, .18);
    color: #ffffff;
    font-size: 1.5rem;
    outline: none;
}

.newsletter-bar .nl-input::placeholder {
    color: rgba(255, 255, 255, .55);
}

/* Focus */
.newsletter-bar .nl-input:focus {
    border-color: rgba(255, 255, 255, .28);
    box-shadow: 0 0 0 .3rem rgba(255, 255, 255, .10);
}

/* Button */
.newsletter-bar .nl-btn {
    height: 4.6rem;
    line-height: 4.6rem;
    padding: 0 2.2rem;
    border-radius: 1rem;
    border: 0;
    font-weight: 500;
    font-size: 1.6rem;
    color: #ffffff;
    background: linear-gradient(135deg, rgb(33, 54, 242) 0%, rgb(6, 183, 203) 100%);
    box-shadow: 0 1.8rem 4.2rem rgba(0, 0, 0, .22);
    cursor: pointer;
    white-space: nowrap;
}

.newsletter-bar .nl-btn:hover {
    transform: translateY(-.1rem);
}

/* Responsive */
@media (max-width: 99.1rem) {

    /* < 992px */
    .newsletter-bar .nl-form {
        justify-content: flex-start;
        padding-top: 1.4rem;
    }

    .newsletter-bar .nl-field {
        width: 100%;
    }
}

@media (max-width: 57.5rem) {

    /* < 576px */
    .newsletter-bar {
        padding: 2.0rem 1.6rem;
    }

    .newsletter-bar .nl-form {
        flex-direction: column;
        align-items: stretch;
    }

    .newsletter-bar .nl-btn {
        width: 100%;
    }
}

.footer-bottom .fb-wrap {
    min-height: 7.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0;
}

.footer-bottom .fb-left {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, .65);
}

.footer-bottom .fb-right {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.footer-bottom .fb-link {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, .70);
    text-decoration: none;
    transition: color .2s ease;
}

.footer-bottom .fb-link:hover {
    color: #ffffff;
}

.footer-bottom .fb-dot {
    color: rgba(255, 255, 255, .35);
    font-size: 1.2rem;
}

/* Responsive */
@media (max-width: 57.5rem) {
    .footer-bottom .fb-wrap {
        flex-direction: column;
        justify-content: center;
        gap: .8rem;
        padding: 1.2rem 0;
        text-align: center;
    }
}

.auth-page {
    position: relative;
    padding: 10rem 0;
}

.auth-login {
    background:
        radial-gradient(circle at 12% 70%, rgba(0, 200, 255, .12), rgba(0, 200, 255, 0) 45%),
        radial-gradient(circle at 80% 10%, rgba(42, 73, 255, .10), rgba(42, 73, 255, 0) 45%);
}

.auth-row {
    margin-left: -6rem;
    margin-right: -6rem;
}

.auth-row>div[class*=col-] {
    padding-left: 6rem;
    padding-right: 6rem;
}

.auth-left {
    padding: 1.2rem;
}

.auth-badge {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    padding: .8rem 1.2rem;
    border-radius: 99.9rem;
    background: rgba(42, 73, 255, .06);
    border: .1rem solid rgba(42, 73, 255, .10);
    font-size: 1.4rem;
    font-weight: 600;
    color: rgba(42, 73, 255, .95);
}

.auth-badge__dot {
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-title {
    margin: 1.8rem 0 0 0;
    font-size: 4.2rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #0b1025;
}

.auth-title__grad {
    background: linear-gradient(90deg, #2a49ff, #00c8ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.auth-desc {
    margin: 1.8rem 0 0 0;
    font-size: 1.6rem;
    line-height: 1.6;
    color: rgba(11, 16, 37, .60);
    max-width: 52rem;
}

/* mini card */
.auth-mini {
    margin-top: 2.0rem;
    border-radius: 1.8rem;
    border: .1rem solid rgba(15, 23, 42, .06);
    box-shadow: 0 2.2rem 5.6rem rgba(15, 23, 42, .10);
}

.auth-mini__body {
    padding: 1.6rem 1.6rem;
}

.auth-mini__top {
    gap: 2rem;
}

.auth-avatars {
    gap: -.8rem;
}

.auth-avatar {
    width: 3.8rem;
    height: 3.8rem;
    border-radius: 99.9rem;
    border: .2rem solid #fff;
    background: rgb(192 202 225);
}

.auth-avatar:not(:first-child) {
    margin-left: -1rem;
    position: relative;
}

.auth-avatar--more {
    padding: 0 1.0rem;
    border-radius: 99.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 900;
    color: rgba(11, 16, 37, .65);
    background: rgb(163 189 251);
}

.auth-mini__label {
    font-size: 1.4rem;
    font-weight: 600;
    color: rgba(11, 16, 37, .70);
}

.auth-mini__divider {
    height: .1rem;
    background: rgba(15, 23, 42, .06);
    margin: 1.2rem 0;
}

.auth-mini__k {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: rgba(11, 16, 37, .45);
}

.auth-mini__v {
    padding-top: .6rem;
    font-size: 2.1rem;
    font-weight: 700;
    color: #0b1025;
}

.auth-mini__v--green {
    color: #22c55e;
}

.auth-perks {
    margin-top: 1.6rem;
    gap: 1.6rem;
}

.auth-perk {
    display: flex;
    align-items: center;
    gap: .8rem;
    font-size: 1.6rem;
    font-weight: 500;
    color: rgba(11, 16, 37, .55);
}

.auth-perk>i {
    color: #22c55e;
}

.auth-perk__dot {
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 99.9rem;
    background: rgba(34, 197, 94, .30);
    border: .1rem solid rgba(34, 197, 94, .45);
}

/* RIGHT card */
.auth-right {
    padding: 1.2rem;
}

.auth-card {
    border-radius: 2.2rem;
    border: .1rem solid rgba(15, 23, 42, .06);
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 2.8rem 7.2rem rgba(15, 23, 42, .12);
}

.auth-card__body {
    padding: 3rem;
}

.auth-card__title {
    font-size: 2.9rem;
    font-weight: 700;
    color: #0b1025;
}

.auth-card__sub {
    padding-top: .8rem;
    font-size: 1.6rem;
    color: rgba(11, 16, 37, .55);
}

/* Tabs */
/* Role Selector (Radio) */
.auth-role-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.0rem;
    margin-bottom: 2.6rem;
}

/* Employer fields - hidden by default */
.employer-field {
    display: none;
}

.auth-role-option {
    cursor: pointer;
    margin: 0;
}

.auth-role-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.auth-role-box {
    height: 4.8rem;
    border-radius: 1.4rem;
    border: .1rem solid rgba(15, 23, 42, .08);
    background: rgba(15, 23, 42, .02);
    font-size: 1.6rem;
    font-weight: 600;
    color: rgba(11, 16, 37, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    transition: all 0.2s ease;
}

.auth-role-option:hover .auth-role-box {
    border-color: rgba(42, 73, 255, .20);
    background: rgba(42, 73, 255, .03);
}

.auth-role-option input[type="radio"]:checked+.auth-role-box {
    background: rgba(42, 73, 255, .06);
    border-color: rgba(42, 73, 255, .30);
    color: rgba(42, 73, 255, .95);
}

.auth-role-option input[type="radio"]:focus+.auth-role-box {
    box-shadow: 0 0 0 .2rem rgba(42, 73, 255, .15);
}

/* Form */
.auth-form {
    margin-top: 1.6rem;
}

.auth-field {
    margin-top: 1.2rem;
}

.auth-label {
    display: block;
    font-size: 1.6rem;
    font-weight: 600;
    color: rgba(11, 16, 37, .65);
    margin-bottom: 1rem;
}

.auth-input-wrap {
    position: relative;
}

.auth-icon {
    position: absolute;
    left: 1.4rem;
    top: 1.1rem;
    color: rgba(11, 16, 37, .45);
    font-size: 1.8rem;
    pointer-events: none;
}

.auth-input {
    width: 100%;
    height: 4.8rem;
    border-radius: 1rem;
    border: .1rem solid rgba(15, 23, 42, .10);
    background: #fff;
    padding: 0 4.4rem 0 4.2rem;
    font-size: 1.4rem;
    color: rgba(11, 16, 37, .80);
    outline: none;
    margin-bottom: 0.5rem;
}

.auth-input::placeholder {
    color: rgba(11, 16, 37, .40);
}

.auth-input:focus {
    border-color: rgba(42, 73, 255, .35);
    box-shadow: 0 0 0 .3rem rgba(42, 73, 255, .10);
}

.auth-eye {
    position: absolute;
    right: 1.2rem;
    top: 1.1rem;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 1.2rem;
    border: 0;
    background: transparent;
    color: rgba(11, 16, 37, .45);
}

/* remember row */
.auth-rowline {
    margin-top: 1.5rem;
    gap: 1.0rem;
}

.auth-check {
    display: flex;
    align-items: center;
    gap: 1rem;
    cursor: pointer;
    user-select: none;
}

.auth-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.auth-check__box {
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    border: .15rem solid rgba(15, 23, 42, .2);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.auth-check__box i {
    font-size: 1rem;
    color: #fff;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.15s ease;
}

.auth-check:hover .auth-check__box {
    border-color: rgba(42, 73, 255, .4);
}

.auth-check input:checked+.auth-check__box {
    background: #3961df;
    border-color: transparent;
}

.auth-check input:checked+.auth-check__box i {
    opacity: 1;
    transform: scale(1);
}

.auth-check input:focus+.auth-check__box {
    box-shadow: 0 0 0 .3rem rgba(42, 73, 255, .15);
}

.auth-check__text {
    font-size: 1.5rem;
    font-weight: 500;
    color: rgba(11, 16, 37, .6);
    transition: color 0.2s ease;
}

.auth-check:hover .auth-check__text {
    color: rgba(11, 16, 37, .8);
}

.auth-link {
    font-size: 1.5rem;
    font-weight: 600;
    color: rgba(42, 73, 255, .95);
    text-decoration: none;
}

/* submit */
.auth-submit {
    margin-top: 1.4rem;
    margin-bottom: 1.4rem;
    width: 100%;
    height: 5rem;
    border-radius: 1.4rem;
    border: 0;
    font-size: 1.6rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, rgb(33, 54, 242) 0%, rgb(6, 183, 203) 100%);
}

/* divider */
.auth-divider {
    margin-top: 1.5rem;
    position: relative;
    text-align: center;
    color: rgb(11 16 37 / 58%);
    font-size: 1.6rem;
    font-weight: 500;
}

.auth-divider::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: .1rem;
    background: rgba(15, 23, 42, .08);
}

.auth-divider span {
    position: relative;
    background: #fff;
    padding: 0 1.5rem;
}

/* oauth */
.auth-oauth {
    margin-top: 1.8rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.auth-oauth__col {
    flex: 0 0 calc(50% - 0.5rem);
}

.auth-oauth__col .btn-login-social {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border: .1rem solid rgba(15, 23, 42, .10);
    border-radius: 1rem;
    padding: 1.2rem 1rem;
    font-size: 1.6rem;
    font-weight: 500;
}

.auth-oauth__col .btn-login-social:hover {
    background: #3960df;
    color: #fff;
}

.auth-oauth__col .btn-login-social.btn-login-apple:hover {
    background: #000;
    color: #fff;
}

.auth-oauth__col .btn-login-social:hover>img {
    filter: brightness(0) invert(1);
}

.auth-oauth__btn {
    width: 100%;
    height: 4.6rem;
    border-radius: 1.4rem;
    border: .1rem solid rgba(15, 23, 42, .10);
    background: #fff;
    font-size: 1.6rem;
    font-weight: 600;
    color: rgba(11, 16, 37, .75);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
}

.auth-oauth__g {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.1rem;
    font-weight: 600;
}

/* footer */
.auth-foot {
    margin-top: .6rem;
    font-size: 1.5rem;
    color: rgba(11, 16, 37, .55);
}

/* Responsive */
@media (max-width: 99.1rem) {
    .auth-title {
        font-size: 3.6rem;
    }
}

@media (max-width: 57.5rem) {
    .auth-page {
        padding: 2.6rem 0;
    }

    .auth-title {
        font-size: 3.0rem;
    }

    .auth-card__body {
        padding: 1.8rem 1.6rem;
    }
}

/* html{ font-size:62.5%; } 10px=1rem */

.candidate-dashboard {
    padding: 2.4rem 0 3.2rem;
}

/* Head */
.cd-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.6rem;
    padding-bottom: 2.0rem;
}

.cd-title {
    margin: 0;
    font-size: 2.8rem;
    font-weight: 900;
    color: #0b1025;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.cd-title__name {
    color: rgba(42, 73, 255, .95);
}

.cd-subtitle {
    padding-top: .6rem;
    font-size: 1.4rem;
    color: rgba(11, 16, 37, .60);
}

.cd-head__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.0rem;
}

.cd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    height: 4.2rem;
    padding: 0 1.4rem;
    border-radius: 1.4rem;
    font-size: 1.3rem;
    font-weight: 900;
    border: .1rem solid transparent;
    text-decoration: none;
}

.cd-btn--ghost {
    background: rgba(255, 255, 255, .92);
    border-color: rgba(15, 23, 42, .08);
    color: rgba(11, 16, 37, .72);
}

.cd-btn--primary {
    background: linear-gradient(90deg, #2a49ff, #00c8ff);
    color: #fff;
    box-shadow: 0 1.6rem 3.6rem rgba(42, 73, 255, .18);
}

/* Common card */
.cd-card {
    background: rgba(255, 255, 255, .92);
    border: .1rem solid rgba(15, 23, 42, .06);
    border-radius: 1.8rem;
    box-shadow: 0 2.2rem 5.6rem rgba(15, 23, 42, .08);
}

/* Stats */
.cd-stats {
    padding-bottom: 2.0rem;
}

.cd-col {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    margin-bottom: 1.6rem;
}

.cd-stat {
    padding: 1.6rem 1.6rem;
}

.cd-stat__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 1.2rem;
}

.cd-ico {
    width: 3.8rem;
    height: 3.8rem;
    border-radius: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    border: .1rem solid rgba(15, 23, 42, .06);
    background: rgba(15, 23, 42, .03);
}

.cd-ico--blue {
    background: rgba(42, 73, 255, .10);
    border-color: rgba(42, 73, 255, .14);
    color: rgba(42, 73, 255, .95);
}

.cd-ico--purple {
    background: rgba(130, 90, 255, .10);
    border-color: rgba(130, 90, 255, .14);
    color: rgba(130, 90, 255, .95);
}

.cd-ico--orange {
    background: rgba(255, 140, 50, .12);
    border-color: rgba(255, 140, 50, .16);
    color: rgba(255, 140, 50, .95);
}

.cd-ico--pink {
    background: rgba(255, 80, 140, .10);
    border-color: rgba(255, 80, 140, .14);
    color: rgba(255, 80, 140, .95);
}

.cd-pill {
    font-size: 1.1rem;
    font-weight: 900;
    padding: .5rem .9rem;
    border-radius: 99.9rem;
    border: .1rem solid transparent;
    white-space: nowrap;
}

.cd-pill--green {
    background: rgba(34, 197, 94, .10);
    border-color: rgba(34, 197, 94, .16);
    color: #22c55e;
}

.cd-pill--orange {
    background: rgba(255, 140, 50, .12);
    border-color: rgba(255, 140, 50, .18);
    color: rgba(255, 140, 50, .95);
}

.cd-pill--gray {
    background: rgba(15, 23, 42, .06);
    border-color: rgba(15, 23, 42, .08);
    color: rgba(11, 16, 37, .55);
}

.cd-stat__num {
    font-size: 2.8rem;
    font-weight: 900;
    color: #0b1025;
    line-height: 1.1;
}

.cd-stat__label {
    padding-top: .6rem;
    font-size: 1.3rem;
    color: rgba(11, 16, 37, .58);
}

/* Main grid spacing */
.cd-main {
    padding-top: .4rem;
}

.cd-left,
.cd-right {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

/* Banner */
.cd-banner {
    padding: 1.8rem 1.8rem;
    background: linear-gradient(90deg, #3f5bff, #5a4ae6);
    border: 0;
    color: #fff;
    box-shadow: 0 2.2rem 5.8rem rgba(63, 91, 255, .22);
}

.cd-banner__tag {
    display: inline-flex;
    align-items: center;
    gap: .8rem;
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: .08em;
    opacity: .92;
}

.cd-banner__star {
    width: 2.0rem;
    height: 2.0rem;
    border-radius: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .18);
}

.cd-banner__grid {
    padding-top: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.cd-banner__title {
    font-size: 1.8rem;
    font-weight: 900;
    line-height: 1.2;
}

.cd-banner__desc {
    padding-top: .8rem;
    font-size: 1.3rem;
    color: rgba(255, 255, 255, .82);
    line-height: 1.45;
    max-width: 58rem;
}

.cd-banner__btn {
    height: 4.2rem;
    padding: 0 1.4rem;
    border-radius: 1.4rem;
    font-weight: 900;
    font-size: 1.3rem;
    background: rgba(255, 255, 255, .92);
    color: rgba(42, 73, 255, .95);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.cd-progress {
    padding-top: 1.4rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

.cd-progress__bar {
    flex: 1 1 auto;
    height: .8rem;
    border-radius: 99.9rem;
    background: rgba(255, 255, 255, .22);
    overflow: hidden;
}

.cd-progress__fill {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #ffd54a, #fffbcc);
    border-radius: 99.9rem;
}

.cd-progress__text {
    font-size: 1.2rem;
    font-weight: 900;
    color: rgba(255, 255, 255, .86);
    white-space: nowrap;
}

/* Section head */
.cd-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.6rem 0 1.2rem;
}

.cd-section-title {
    font-size: 1.6rem;
    font-weight: 900;
    color: #0b1025;
    display: flex;
    align-items: center;
    gap: .8rem;
}

.cd-spark {
    color: rgba(42, 73, 255, .95);
}

.cd-link {
    font-size: 1.3rem;
    font-weight: 900;
    color: rgba(42, 73, 255, .95);
    text-decoration: none;
}

/* Jobs */
.cd-jobs {
    display: grid;
    gap: 1.6rem;
    padding-bottom: 1.6rem;
}

.cd-job {
    padding: 1.6rem 1.6rem;
}

.cd-job__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.cd-job__left {
    display: flex;
    gap: 1.2rem;
}

.cd-job__ava {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 1.4rem;
    overflow: hidden;
    border: .1rem solid rgba(15, 23, 42, .06);
    background: rgba(15, 23, 42, .04);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(11, 16, 37, .70);
    font-weight: 900;
}

.cd-job__ava img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cd-job__ava--mono {
    background: rgba(15, 23, 42, .06);
}

.cd-job__name {
    font-size: 1.5rem;
    font-weight: 900;
    color: #0b1025;
}

.cd-job__meta {
    padding-top: .5rem;
    font-size: 1.2rem;
    color: rgba(11, 16, 37, .55);
}

.cd-tags {
    padding-top: 1.0rem;
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
}

.cd-tag {
    font-size: 1.1rem;
    font-weight: 800;
    padding: .5rem .9rem;
    border-radius: 99.9rem;
    background: rgba(15, 23, 42, .05);
    border: .1rem solid rgba(15, 23, 42, .06);
    color: rgba(11, 16, 37, .70);
}

.cd-tag--blue {
    background: rgba(42, 73, 255, .08);
    border-color: rgba(42, 73, 255, .12);
    color: rgba(42, 73, 255, .95);
}

.cd-tag--soft {
    background: rgba(0, 200, 255, .08);
    border-color: rgba(0, 200, 255, .12);
    color: rgba(0, 120, 200, .92);
}

.cd-job__right {
    text-align: right;
    min-width: 14rem;
}

.cd-match {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.2rem;
    font-weight: 900;
    padding: .5rem .9rem;
    border-radius: 99.9rem;
    background: rgba(34, 197, 94, .10);
    border: .1rem solid rgba(34, 197, 94, .16);
    color: #22c55e;
}

.cd-match--green {
    background: rgba(34, 197, 94, .10);
    border-color: rgba(34, 197, 94, .16);
    color: #22c55e;
}

.cd-match__dot {
    width: .7rem;
    height: .7rem;
    border-radius: 99.9rem;
    background: currentColor;
}

.cd-salary {
    padding-top: .9rem;
    font-size: 1.3rem;
    font-weight: 900;
    color: rgba(42, 73, 255, .95);
}

.cd-salary--muted {
    color: rgba(11, 16, 37, .55);
}

.cd-job__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.2rem;
    padding-top: 1.2rem;
    margin-top: 1.2rem;
    border-top: .1rem solid rgba(15, 23, 42, .06);
}

.cd-time {
    font-size: 1.2rem;
    color: rgba(11, 16, 37, .55);
}

.cd-job__actions {
    display: flex;
    align-items: center;
    gap: 1.0rem;
}

.cd-iconbtn {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 1.2rem;
    border: .1rem solid rgba(15, 23, 42, .08);
    background: rgba(255, 255, 255, .92);
    color: rgba(11, 16, 37, .65);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cd-apply {
    height: 3.6rem;
    padding: 0 1.2rem;
    border-radius: 1.2rem;
    font-weight: 900;
    font-size: 1.3rem;
    color: rgba(42, 73, 255, .95);
    background: rgba(42, 73, 255, .10);
    border: .1rem solid rgba(42, 73, 255, .14);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Sidebar */
.cd-side {
    padding: 1.6rem 1.6rem;
    margin-bottom: 1.6rem;
}

.cd-side__title {
    font-size: 1.4rem;
    font-weight: 900;
    color: #0b1025;
    display: flex;
    align-items: center;
    gap: .8rem;
}

/* Meets */
.cd-meets {
    padding-top: 1.2rem;
    display: grid;
    gap: 1.2rem;
}

.cd-meet {
    border-radius: 1.6rem;
    padding: 1.2rem 1.2rem;
    background: rgba(15, 23, 42, .03);
    border: .1rem solid rgba(15, 23, 42, .06);
    position: relative;
}

.cd-meet::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.2rem;
    bottom: 1.2rem;
    width: .4rem;
    border-radius: 99.9rem;
    background: rgba(42, 73, 255, .80);
}

.cd-meet--orange::before {
    background: rgba(255, 140, 50, .95);
}

.cd-meet__name {
    font-weight: 900;
    font-size: 1.3rem;
    color: #0b1025;
}

.cd-meet__meta {
    padding-top: .5rem;
    font-size: 1.2rem;
    color: rgba(11, 16, 37, .55);
}

.cd-meet__time {
    padding-top: .8rem;
    font-size: 1.2rem;
    font-weight: 900;
    color: rgba(42, 73, 255, .95);
}

.cd-meet--orange .cd-meet__time {
    color: rgba(255, 140, 50, .95);
}

.cd-side__link {
    display: inline-block;
    padding-top: 1.2rem;
    font-size: 1.3rem;
    font-weight: 900;
    color: rgba(42, 73, 255, .95);
    text-decoration: none;
}

/* Activities */
.cd-acts {
    padding-top: 1.2rem;
    display: grid;
    gap: 1.2rem;
}

.cd-act {
    display: flex;
    align-items: flex-start;
    gap: 1.0rem;
}

.cd-dot {
    width: .8rem;
    height: .8rem;
    border-radius: 99.9rem;
    margin-top: .6rem;
    flex: 0 0 auto;
    background: rgba(42, 73, 255, .95);
}

.cd-dot--green {
    background: #22c55e;
}

.cd-dot--purple {
    background: rgba(130, 90, 255, .95);
}

.cd-dot--gray {
    background: rgba(11, 16, 37, .25);
}

.cd-act__text {
    font-size: 1.3rem;
    line-height: 1.35;
    color: rgba(11, 16, 37, .75);
}

.cd-act__text a {
    color: rgba(42, 73, 255, .95);
    text-decoration: none;
}

.cd-act__time {
    padding-top: .4rem;
    font-size: 1.2rem;
    color: rgba(11, 16, 37, .55);
}

/* Shortcuts */
.cd-short {
    padding-top: 1.2rem;
}

.cd-short__col {
    padding-left: .8rem;
    padding-right: .8rem;
    margin-bottom: 1.2rem;
}

.cd-short__item {
    height: 6.0rem;
    border-radius: 1.6rem;
    border: .1rem solid rgba(15, 23, 42, .06);
    background: rgba(15, 23, 42, .03);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    font-size: 1.3rem;
    font-weight: 900;
    color: rgba(11, 16, 37, .70);
    text-decoration: none;
}

/* Responsive tweaks */
@media (max-width: 99.1rem) {
    .cd-job__right {
        text-align: left;
        min-width: auto;
    }
}

@media (max-width: 57.5rem) {
    .cd-title {
        font-size: 2.2rem;
    }

    .cd-head__actions {
        width: 100%;
    }

    .cd-btn {
        width: 100%;
    }
}

/* ========================================
   DASHBOARD PAGE STYLES
======================================== */

/* Dashboard Hero - Main welcome header */
.dashboard-hero {
    position: relative;
    background: linear-gradient(135deg, #1E3A5F 0%, #0F172A 50%, #1E1B4B 100%);
    border-radius: 1.6rem;
    padding: 3rem;
    margin-bottom: 2.4rem;
    overflow: hidden;
}

.dashboard-hero__bg {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.25) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.dashboard-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 60rem;
    height: 60rem;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.dashboard-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: 10%;
    width: 40rem;
    height: 40rem;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.dashboard-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.dashboard-hero__left {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.dashboard-hero__avatar {
    width: 7.2rem;
    height: 7.2rem;
    border-radius: 1.4rem;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(168, 85, 247, 0.3) 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-hero__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dashboard-hero__avatar span {
    font-size: 2.4rem;
    font-weight: 700;
    color: #fff;
}

.dashboard-hero__text {
    color: #fff;
}

.dashboard-hero__greeting {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 0 0.4rem;
}

.dashboard-hero__title {
    font-size: 2.6rem;
    font-weight: 700;
    margin: 0 0 0.6rem;
    color: #fff;
    letter-spacing: -0.02em;
}

.dashboard-hero__subtitle {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
}

.dashboard-hero__subtitle i {
    font-size: 1.3rem;
    color: rgba(99, 102, 241, 0.9);
}

.dashboard-hero__actions {
    display: flex;
    gap: 1.2rem;
}

.dashboard-hero__btn {
    padding: 1.2rem 2rem;
    border-radius: 1rem;
    font-size: 1.4rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
    border: none;
}

.dashboard-hero__btn i {
    font-size: 1.4rem;
}

.dashboard-hero__btn--outline {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
}

.dashboard-hero__btn--outline:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    text-decoration: none;
}

.dashboard-hero__btn--primary {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    color: #fff;
}

.dashboard-hero__btn--primary:hover {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

/* Dashboard Alerts */
.dashboard-alerts {
    display: flex;
    gap: 1.4rem;
    margin-bottom: 2.4rem;
}

.dashboard-alert {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: 1.6rem 2rem;
    border-radius: 1.2rem;
    text-decoration: none;
    transition: all 0.25s ease;
    border: 1px solid;
}

.dashboard-alert:hover {
    transform: translateY(-2px);
    text-decoration: none;
}

.dashboard-alert__icon {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dashboard-alert__icon i {
    font-size: 1.8rem;
}

.dashboard-alert__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.dashboard-alert__value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.dashboard-alert__label {
    font-size: 1.3rem;
}

.dashboard-alert__arrow {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.dashboard-alert:hover .dashboard-alert__arrow {
    transform: translateX(4px);
}

.dashboard-alert__arrow i {
    font-size: 1.4rem;
}

/* Alert Variants */
.dashboard-alert--warning {
    background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
    border-color: #FDE68A;
}

.dashboard-alert--warning .dashboard-alert__icon {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    color: #D97706;
}

.dashboard-alert--warning .dashboard-alert__value {
    color: #92400E;
}

.dashboard-alert--warning .dashboard-alert__label {
    color: #B45309;
}

.dashboard-alert--warning .dashboard-alert__arrow {
    background: rgba(217, 119, 6, 0.1);
    color: #D97706;
}

.dashboard-alert--danger {
    background: linear-gradient(135deg, #FEF2F2 0%, #FEE2E2 100%);
    border-color: #FECACA;
}

.dashboard-alert--danger .dashboard-alert__icon {
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    color: #DC2626;
}

.dashboard-alert--danger .dashboard-alert__value {
    color: #991B1B;
}

.dashboard-alert--danger .dashboard-alert__label {
    color: #B91C1C;
}

.dashboard-alert--danger .dashboard-alert__arrow {
    background: rgba(220, 38, 38, 0.1);
    color: #DC2626;
}

.dashboard-alert--info {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border-color: #BFDBFE;
}

.dashboard-alert--info .dashboard-alert__icon {
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
    color: #2563EB;
}

.dashboard-alert--info .dashboard-alert__value {
    color: #1E40AF;
}

.dashboard-alert--info .dashboard-alert__label {
    color: #1D4ED8;
}

.dashboard-alert--info .dashboard-alert__arrow {
    background: rgba(37, 99, 235, 0.1);
    color: #2563EB;
}

@media (max-width: 992px) {
    .dashboard-alerts {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .dashboard-hero {
        padding: 2rem 1.6rem;
        border-radius: 1.4rem;
    }
    
    .dashboard-hero__content {
        flex-direction: column;
        text-align: center;
    }
    
    .dashboard-hero__left {
        flex-direction: column;
    }
    
    .dashboard-hero__avatar {
        width: 6rem;
        height: 6rem;
    }
    
    .dashboard-hero__avatar span {
        font-size: 2rem;
    }
    
    .dashboard-hero__title {
        font-size: 2rem;
    }
    
    .dashboard-hero__subtitle {
        font-size: 1.2rem;
        justify-content: center;
    }
    
    .dashboard-hero__actions {
        flex-direction: column;
        width: 100%;
    }
    
    .dashboard-hero__btn {
        justify-content: center;
    }
    
    .dashboard-alert {
        padding: 1.2rem 1.4rem;
    }
    
    .dashboard-alert__icon {
        width: 4rem;
        height: 4rem;
    }
    
    .dashboard-alert__value {
        font-size: 1.6rem;
    }
    
    .dashboard-alert__label {
        font-size: 1.2rem;
    }
}

/* Legacy styles */
.dashboard-page {
    background: #f8fafc;
    min-height: 100vh;
    padding: 3rem 0;
}

/* Dashboard Header */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2.4rem;
    flex-wrap: wrap;
    gap: 1.6rem;
}

.dashboard-header__title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.4rem;
    font-family: 'Be Vietnam Pro', sans-serif;
}

.dashboard-header__name {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.dashboard-header__sub {
    font-size: 1.5rem;
    color: #64748b;
    margin: 0;
}

.dashboard-header__right {
    display: flex;
    gap: 1rem;
}

.dashboard-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 2rem;
    font-size: 1.4rem;
    font-weight: 600;
    border-radius: 1rem;
    transition: all 0.2s ease;
}

.dashboard-btn--outline {
    background: #fff;
    color: #334155;
    border: 1px solid #e2e8f0;
}

.dashboard-btn--outline:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
}

.dashboard-btn--primary {
    background: #3b82f6;
    color: #fff;
    border: none;
}

.dashboard-btn--primary:hover {
    background: #2563eb;
    color: #fff;
}

/* Stats Cards */
.dashboard-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
    margin-bottom: 2.4rem;
}

.dashboard-stat-card {
    background: #fff;
    border-radius: 1.6rem;
    padding: 2rem;
    position: relative;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid #f1f5f9;
}

.dashboard-stat-card__icon {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 1.2rem;
}

.dashboard-stat-card__icon--blue {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.dashboard-stat-card__icon--orange {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.dashboard-stat-card__icon--purple {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.dashboard-stat-card__icon--pink {
    background: rgba(236, 72, 153, 0.1);
    color: #ec4899;
}

.dashboard-stat-card__badge {
    position: absolute;
    top: 2rem;
    right: 2rem;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: 0.6rem;
}

.dashboard-stat-card__badge--blue {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.dashboard-stat-card__badge--orange {
    background: rgba(249, 115, 22, 0.1);
    color: #f97316;
}

.dashboard-stat-card__badge--purple {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.dashboard-stat-card__badge--pink {
    background: rgba(236, 72, 153, 0.1);
    color: #ec4899;
}

.dashboard-stat-card__number {
    font-size: 3.2rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1;
    margin-bottom: 0.4rem;
}

.dashboard-stat-card__label {
    font-size: 1.4rem;
    color: #64748b;
}

/* Main Layout */
.dashboard-main {
    display: grid;
    grid-template-columns: 1fr 38rem;
    gap: 2.4rem;
}

.dashboard-left {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.dashboard-right {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Profile Completion Card */
.dashboard-profile-card {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 1.6rem;
    padding: 2.4rem;
    color: #fff;
}

.dashboard-profile-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 0.6rem;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.2rem;
}

.dashboard-profile-card__title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.8rem;
}

.dashboard-profile-card__desc {
    font-size: 1.4rem;
    opacity: 0.9;
    margin: 0 0 2rem;
    line-height: 1.6;
}

.dashboard-profile-card__progress {
    height: 0.8rem;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 1.2rem;
}

.dashboard-profile-card__progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    border-radius: 1rem;
    transition: width 0.3s ease;
}

.dashboard-profile-card__progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dashboard-profile-card__btn {
    background: #fff;
    color: #6366f1;
    padding: 0.8rem 1.6rem;
    border-radius: 0.8rem;
    font-size: 1.4rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.dashboard-profile-card__btn:hover {
    background: #f8fafc;
    color: #4f46e5;
}

.dashboard-profile-card__percent {
    font-size: 1.3rem;
    opacity: 0.9;
}

/* Jobs Section */
.dashboard-jobs {
    background: #fff;
    border-radius: 1.6rem;
    padding: 2.4rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid #f1f5f9;
}

.dashboard-jobs__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.dashboard-jobs__title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.dashboard-jobs__title i {
    color: #8b5cf6;
}

.dashboard-jobs__link {
    font-size: 1.4rem;
    font-weight: 600;
    color: #3b82f6;
}

.dashboard-jobs__link:hover {
    color: #2563eb;
}

/* Job Card */
.dashboard-job-card {
    display: flex;
    justify-content: space-between;
    padding: 2rem;
    border: 1px solid #f1f5f9;
    border-radius: 1.2rem;
    margin-bottom: 1.2rem;
    transition: all 0.2s ease;
}

.dashboard-job-card:last-child {
    margin-bottom: 0;
}

.dashboard-job-card:hover {
    border-color: #e2e8f0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.dashboard-job-card__left {
    display: flex;
    gap: 1.4rem;
    flex: 1;
}

.dashboard-job-card__logo {
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: #64748b;
}

.dashboard-job-card__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dashboard-job-card__logo--blue {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}

.dashboard-job-card__logo--pink {
    background: rgba(236, 72, 153, 0.1);
    color: #ec4899;
}

.dashboard-job-card__info {
    flex: 1;
}

.dashboard-job-card__title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.4rem;
}

.dashboard-job-card__company {
    font-size: 1.4rem;
    color: #64748b;
    margin: 0 0 1rem;
}

.dashboard-job-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.dashboard-job-card__tag {
    font-size: 1.2rem;
    padding: 0.4rem 0.8rem;
    background: #f1f5f9;
    color: #475569;
    border-radius: 0.5rem;
    font-weight: 500;
}

.dashboard-job-card__tag--benefit {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.dashboard-job-card__tag--remote {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.dashboard-job-card__time {
    font-size: 1.3rem;
    color: #94a3b8;
}

.dashboard-job-card__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.8rem;
    min-width: 14rem;
}

.dashboard-job-card__match {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.3rem;
    font-weight: 600;
    color: #10b981;
}

.dashboard-job-card__match i {
    font-size: 1.2rem;
}

.dashboard-job-card__salary {
    font-size: 1.5rem;
    font-weight: 700;
    color: #3b82f6;
}

.dashboard-job-card__actions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: auto;
}

.dashboard-job-card__save {
    width: 3.6rem;
    height: 3.6rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.8rem;
    background: #fff;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dashboard-job-card__save:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}

.dashboard-job-card__apply {
    padding: 0.8rem 1.4rem;
    font-size: 1.3rem;
    font-weight: 600;
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
    border-radius: 0.8rem;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.dashboard-job-card__apply:hover {
    background: #3b82f6;
    color: #fff;
}

/* Dashboard Card (Right Column) */
.dashboard-card {
    background: #fff;
    border-radius: 1.6rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid #f1f5f9;
    overflow: hidden;
}

.dashboard-card__header {
    padding: 1.6rem 2rem;
    border-bottom: 1px solid #f1f5f9;
}

.dashboard-card__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.dashboard-card__title i {
    color: #64748b;
    font-size: 1.4rem;
}

.dashboard-card__body {
    padding: 1.6rem 2rem;
}

.dashboard-card__link {
    display: block;
    text-align: center;
    padding: 1.2rem;
    font-size: 1.4rem;
    font-weight: 600;
    color: #3b82f6;
    border-top: 1px solid #f1f5f9;
}

.dashboard-card__link:hover {
    background: #f8fafc;
    color: #2563eb;
}

/* Interview Items */
.dashboard-interview {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.4rem;
    border: 1px solid #f1f5f9;
    border-radius: 1rem;
    margin-bottom: 1rem;
}

.dashboard-interview:last-child {
    margin-bottom: 0;
}

.dashboard-interview__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.3rem;
}

.dashboard-interview__company {
    font-size: 1.3rem;
    color: #64748b;
    margin: 0 0 0.6rem;
}

.dashboard-interview__time {
    font-size: 1.3rem;
    font-weight: 600;
    color: #3b82f6;
}

.dashboard-interview__time--orange {
    color: #f97316;
}

.dashboard-interview__icon {
    width: 3.2rem;
    height: 3.2rem;
    background: #f1f5f9;
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 1.3rem;
}

/* Activity Items */
.dashboard-activity {
    display: flex;
    gap: 1.2rem;
    padding: 1rem 0;
    border-bottom: 1px solid #f8fafc;
}

.dashboard-activity:last-child {
    border-bottom: none;
}

.dashboard-activity__dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    margin-top: 0.6rem;
    flex-shrink: 0;
}

.dashboard-activity__dot--blue {
    background: #3b82f6;
}

.dashboard-activity__dot--green {
    background: #10b981;
}

.dashboard-activity__dot--orange {
    background: #f97316;
}

.dashboard-activity__dot--purple {
    background: #8b5cf6;
}

.dashboard-activity__content p {
    font-size: 1.4rem;
    color: #475569;
    margin: 0 0 0.3rem;
    line-height: 1.5;
}

.dashboard-activity__content strong {
    color: #3b82f6;
    font-weight: 600;
}

.dashboard-activity__time {
    font-size: 1.2rem;
    color: #94a3b8;
}

/* Shortcuts */
.dashboard-shortcuts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1.6rem 2rem;
}

.dashboard-shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem;
    border: 1px solid #f1f5f9;
    border-radius: 1rem;
    transition: all 0.2s ease;
}

.dashboard-shortcut:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
}

.dashboard-shortcut__icon {
    width: 4rem;
    height: 4rem;
    background: #f1f5f9;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #64748b;
}

.dashboard-shortcut__label {
    font-size: 1.3rem;
    font-weight: 600;
    color: #475569;
    text-align: center;
}

.dashboard-shortcut--danger .dashboard-shortcut__icon {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
}

.dashboard-shortcut--danger .dashboard-shortcut__label {
    color: #ef4444;
}

.dashboard-shortcut--danger:hover {
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.2);
}

/* Responsive */
@media (max-width: 1200px) {
    .dashboard-main {
        grid-template-columns: 1fr 32rem;
    }
}

@media (max-width: 992px) {
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dashboard-main {
        grid-template-columns: 1fr;
    }
    
    .dashboard-right {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .dashboard-page {
        padding: 2rem 0;
    }
    
    .dashboard-header {
        flex-direction: column;
    }
    
    .dashboard-header__title {
        font-size: 2.2rem;
    }
    
    .dashboard-header__right {
        width: 100%;
    }
    
    .dashboard-btn {
        flex: 1;
        justify-content: center;
    }
    
    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dashboard-right {
        grid-template-columns: 1fr;
    }
    
    .dashboard-job-card {
        flex-direction: column;
        gap: 1.4rem;
    }
    
    .dashboard-job-card__right {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .dashboard-stats {
        grid-template-columns: 1fr;
    }
    
    .dashboard-stat-card {
        display: flex;
        align-items: center;
        gap: 1.4rem;
        padding: 1.6rem;
    }
    
    .dashboard-stat-card__icon {
        margin-bottom: 0;
    }
    
    .dashboard-stat-card__badge {
        position: static;
        margin-left: auto;
    }
    
    .dashboard-shortcuts {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.6rem;
    }
    
    .dashboard-shortcut {
        padding: 1rem;
    }
    
    .dashboard-shortcut__icon {
        width: 3.2rem;
        height: 3.2rem;
        font-size: 1.4rem;
    }
    
    .dashboard-shortcut__label {
        font-size: 1.1rem;
    }
}

/* ========================================
   MINI USER STYLES
======================================== */
.mini-user-wrap {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

/* Notification Bell */
.mini-notify__btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    color: #64748b;
    font-size: 2rem;
    transition: all 0.2s ease;
}

.mini-notify__btn:hover {
    color: #3b82f6;
}

.mini-notify__dot {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 0.8rem;
    height: 0.8rem;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid #fff;
}

/* Divider */
.mini-divider {
    width: 1px;
    height: 2.4rem;
    background: #e2e8f0;
}

/* User Button */
.mini-user {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem;
    border-radius: 5rem;
    transition: all 0.2s ease;
}

.mini-user:hover {
    background: #f8fafc;
}

.mini-user__avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mini-user__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-user__letter {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}

.mini-user__name {
    font-size: 1.5rem;
    font-weight: 600;
    color: #334155;
    max-width: 15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini-user__arrow {
    font-size: 1.2rem;
    color: #94a3b8;
    transition: transform 0.2s ease;
}

.dropdown.show .mini-user__arrow {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.mini-dropdown {
    min-width: 28rem;
    padding: 0;
    border: 1px solid #e2e8f0;
    border-radius: 1.2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-top: 1rem !important;
}

.mini-dropdown__header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.6rem;
    background: #f8fafc;
}

.mini-dropdown__avatar {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mini-dropdown__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mini-dropdown__letter {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}

.mini-dropdown__name {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.2rem;
}

.mini-dropdown__email {
    font-size: 1.3rem;
    color: #64748b;
}

.mini-dropdown__role {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.1rem;
    color: #6366F1;
    background: #EEF2FF;
    padding: 0.3rem 0.8rem;
    border-radius: 0.6rem;
    margin-top: 0.4rem;
}

.mini-dropdown__role i {
    font-size: 1rem;
}

.mini-dropdown__divider {
    height: 1px;
    background: #f1f5f9;
    margin: 0.4rem 0;
}

.mini-dropdown__item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.2rem 1.6rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: #475569;
    transition: all 0.15s ease;
}

.mini-dropdown__item:hover {
    background: #f8fafc;
    color: #3b82f6;
}

.mini-dropdown__item i {
    font-size: 1.6rem;
    width: 2rem;
    text-align: center;
    color: #64748b;
}

.mini-dropdown__item:hover i {
    color: #3b82f6;
}

.mini-dropdown__item--danger {
    color: #ef4444;
}

.mini-dropdown__item--danger i {
    color: #ef4444;
}

.mini-dropdown__item--danger:hover {
    background: rgba(239, 68, 68, 0.05);
    color: #dc2626;
}

.mini-dropdown__item--danger:hover i {
    color: #dc2626;
}

/* Responsive */
@media (max-width: 768px) {
    .mini-user__name {
        display: none;
    }
    
    .mini-user__arrow {
        display: none;
    }
    
    .mini-user {
        padding: 0;
    }
}

/* ========================================
   PROFILE PAGE STYLES
======================================== */
.profile-page {
    background: #f8fafc;
    min-height: 100vh;
    padding: 3rem 0;
}

/* Breadcrumb */
.profile-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.3rem;
    color: #64748b;
    margin-bottom: 0.8rem;
}

.profile-breadcrumb a {
    color: #64748b;
}

.profile-breadcrumb a:hover {
    color: #3b82f6;
}

.profile-breadcrumb i {
    font-size: 1rem;
}

/* Header */
.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2.4rem;
    flex-wrap: wrap;
    gap: 1.6rem;
}

.profile-header__title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.4rem;
}

.profile-header__sub {
    font-size: 1.5rem;
    color: #64748b;
    margin: 0;
}

.profile-header__right {
    display: flex;
    gap: 1rem;
}

.profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 2rem;
    font-size: 1.4rem;
    font-weight: 600;
    border-radius: 1rem;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.profile-btn--outline {
    background: #fff;
    color: #334155;
    border: 1px solid #e2e8f0;
}

.profile-btn--outline:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
    color: #1e293b;
}

.profile-btn--primary {
    background: #3b82f6;
    color: #fff;
}

.profile-btn--primary:hover {
    background: #2563eb;
    color: #fff;
}

/* Main Layout */
.profile-main {
    display: grid;
    grid-template-columns: 1fr 36rem;
    gap: 2.4rem;
}

.profile-left {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.profile-right {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Profile Card */
.profile-card {
    background: #fff;
    border-radius: 1.6rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid #f1f5f9;
    overflow: hidden;
}

.profile-card__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.6rem 2rem;
    border-bottom: 1px solid #f1f5f9;
}

.profile-card__header i {
    font-size: 1.6rem;
    color: #8b5cf6;
}

.profile-card__header h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
    flex: 1;
}

.profile-card__header--simple {
    background: #f8fafc;
}

.profile-card__header--simple h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #64748b;
    letter-spacing: 0.05em;
}

.profile-card__add {
    font-size: 1.4rem;
    font-weight: 600;
    color: #3b82f6;
}

.profile-card__add:hover {
    color: #2563eb;
}

.profile-card__body {
    padding: 2rem;
}

/* Profile Avatar */
.profile-avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.profile-avatar {
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

.profile-avatar__letter {
    font-size: 4rem;
    font-weight: 700;
    color: #fff;
}

.profile-avatar__upload {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 3.2rem;
    height: 3.2rem;
    background: #fff;
    border: 2px solid #f1f5f9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.profile-avatar__upload:hover {
    background: #f8fafc;
    border-color: #3b82f6;
}

.profile-avatar__upload i {
    font-size: 1.4rem;
    color: #64748b;
}

/* Profile Basic */
.profile-basic {
    display: flex;
    gap: 2.4rem;
    margin-bottom: 2rem;
}

.profile-basic__fields {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

/* Profile Field */
.profile-field {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.profile-field--full {
    margin-top: 1rem;
}

.profile-field__label {
    font-size: 1.3rem;
    font-weight: 600;
    color: #64748b;
}

.profile-field__label .required {
    color: #ef4444;
}

.profile-field__input {
    width: 100%;
    padding: 1.2rem 1.4rem;
    font-size: 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #fff;
    color: #1e293b;
    transition: all 0.2s ease;
}

.profile-field__input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.profile-field__input::placeholder {
    color: #94a3b8;
}

.profile-field__input-wrap {
    position: relative;
}

.profile-field__input-wrap i {
    position: absolute;
    left: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1.4rem;
}

.profile-field__input--icon {
    padding-left: 4rem;
}

.profile-field__textarea {
    padding: 1.2rem 1.4rem;
    font-size: 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    background: #fff;
    color: #1e293b;
    min-height: 12rem;
    resize: vertical;
    font-family: inherit;
    transition: all 0.2s ease;
}

.profile-field__textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.profile-field__count {
    font-size: 1.2rem;
    color: #94a3b8;
    text-align: right;
}

.profile-field__static {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    background: #f8fafc;
    border-radius: 1rem;
    font-size: 1.5rem;
    color: #475569;
}

.profile-field__static i {
    color: #94a3b8;
}

.profile-field__static span {
    flex: 1;
}

.profile-field__edit {
    font-size: 1.3rem;
    font-weight: 600;
    color: #3b82f6;
}

/* Profile Contact Grid */
.profile-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
}

/* Profile Skills */
.profile-skill-add {
    margin-bottom: 1.6rem;
}

.profile-skill-add__row {
    display: flex;
    gap: 1rem;
}

.profile-skill-add__row .profile-field__input {
    flex: 1;
}

.profile-skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.profile-skill {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.2rem;
    background: #f1f5f9;
    border-radius: 0.6rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: #475569;
}

.profile-skill__remove {
    cursor: pointer;
    color: #94a3b8;
    transition: color 0.2s ease;
}

.profile-skill__remove:hover {
    color: #ef4444;
}

/* Profile Experiences */
.profile-experiences {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.profile-experience {
    display: flex;
    gap: 1.6rem;
    padding: 1.6rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.profile-experience:last-child {
    border-bottom: none;
}

.profile-experience__dot {
    width: 1rem;
    height: 1rem;
    background: #3b82f6;
    border-radius: 50%;
    margin-top: 0.5rem;
    flex-shrink: 0;
}

.profile-experience__content {
    flex: 1;
}

.profile-experience__title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.3rem;
}

.profile-experience__company {
    font-size: 1.4rem;
    color: #3b82f6;
    margin-bottom: 0.3rem;
}

.profile-experience__date {
    font-size: 1.3rem;
    color: #94a3b8;
    margin-bottom: 0.8rem;
}

.profile-experience__desc {
    font-size: 1.4rem;
    color: #475569;
    line-height: 1.6;
}

.profile-experience__actions {
    display: flex;
    gap: 0.8rem;
}

.profile-experience__btn {
    width: 3.2rem;
    height: 3.2rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.6rem;
    background: #fff;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.profile-experience__btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}

.profile-experience__btn--delete:hover {
    border-color: #ef4444;
    color: #ef4444;
}

/* Profile Completion */
.profile-completion {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 1.6rem;
    padding: 2rem;
    color: #fff;
}

.profile-completion__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
}

.profile-completion__header h3 {
    font-size: 1.6rem;
    font-weight: 700;
    margin: 0;
}

.profile-completion__percent {
    position: relative;
    width: 5rem;
    height: 5rem;
}

.profile-completion__percent svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.profile-completion__bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 3;
}

.profile-completion__fill {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
}

.profile-completion__percent span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.3rem;
    font-weight: 700;
}

.profile-completion__bar {
    height: 0.6rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1rem;
    margin-bottom: 1.2rem;
    overflow: hidden;
}

.profile-completion__progress {
    height: 100%;
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    border-radius: 1rem;
}

.profile-completion__desc {
    font-size: 1.4rem;
    opacity: 0.9;
    margin: 0 0 1.4rem;
    line-height: 1.5;
}

.profile-completion__list {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.profile-completion__item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1.2rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 0.8rem;
    font-size: 1.4rem;
}

.profile-completion__item i {
    font-size: 1.4rem;
}

.profile-completion__item--done {
    background: rgba(16, 185, 129, 0.2);
}

.profile-completion__item--done i {
    color: #34d399;
}

.profile-completion__item--warning {
    background: rgba(251, 191, 36, 0.2);
}

.profile-completion__item--warning i {
    color: #fbbf24;
}

/* Profile Toggle */
.profile-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.profile-toggle:last-child {
    border-bottom: none;
}

.profile-toggle__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.2rem;
}

.profile-toggle__desc {
    font-size: 1.3rem;
    color: #94a3b8;
}

/* Profile Switch */
.profile-switch {
    position: relative;
    width: 4.8rem;
    height: 2.6rem;
    cursor: pointer;
}

.profile-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.profile-switch__slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #e2e8f0;
    border-radius: 2rem;
    transition: 0.3s;
}

.profile-switch__slider:before {
    position: absolute;
    content: "";
    height: 2rem;
    width: 2rem;
    left: 0.3rem;
    bottom: 0.3rem;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.profile-switch input:checked + .profile-switch__slider {
    background: #3b82f6;
}

.profile-switch input:checked + .profile-switch__slider:before {
    transform: translateX(2.2rem);
}

/* Profile CV */
.profile-cv__file {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.2rem;
    background: #f8fafc;
    border-radius: 1rem;
    margin-bottom: 1.2rem;
}

.profile-cv__icon {
    width: 4rem;
    height: 4rem;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-cv__icon i {
    font-size: 1.8rem;
    color: #ef4444;
}

.profile-cv__info {
    flex: 1;
}

.profile-cv__name {
    font-size: 1.4rem;
    font-weight: 600;
    color: #1e293b;
}

.profile-cv__meta {
    font-size: 1.2rem;
    color: #94a3b8;
}

.profile-cv__download {
    width: 3.6rem;
    height: 3.6rem;
    border: 1px solid #e2e8f0;
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    transition: all 0.2s ease;
}

.profile-cv__download:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}

.profile-cv__upload {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 1.4rem;
    border: 2px dashed #e2e8f0;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.4rem;
    font-weight: 600;
    color: #64748b;
}

.profile-cv__upload:hover {
    border-color: #3b82f6;
    background: rgba(59, 130, 246, 0.02);
    color: #3b82f6;
}

.profile-cv__upload i {
    font-size: 1.6rem;
}

/* Profile Modal */
.profile-modal {
    border: none;
    border-radius: 1.6rem;
}

.profile-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    border-bottom: 1px solid #f1f5f9;
}

.profile-modal__header h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0;
}

.profile-modal__close {
    width: 3.6rem;
    height: 3.6rem;
    border: none;
    background: #f1f5f9;
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #64748b;
    transition: all 0.2s ease;
}

.profile-modal__close:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.profile-modal__body {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.profile-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.6rem 2rem;
    border-top: 1px solid #f1f5f9;
}

.profile-field-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.4rem;
}

/* Responsive */
@media (max-width: 1200px) {
    .profile-main {
        grid-template-columns: 1fr 32rem;
    }
}

@media (max-width: 992px) {
    .profile-main {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .profile-page {
        padding: 2rem 0;
    }
    
    .profile-header {
        flex-direction: column;
    }
    
    .profile-header__title {
        font-size: 2.2rem;
    }
    
    .profile-header__right {
        width: 100%;
    }
    
    .profile-btn {
        flex: 1;
        justify-content: center;
    }
    
    .profile-basic {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .profile-contact-grid {
        grid-template-columns: 1fr;
    }
    
    .profile-field-row {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   CV MANAGEMENT PAGE STYLES
   ============================================ */
.cv-page {
    padding: 3rem 0 5rem;
    min-height: 100vh;
    background: linear-gradient(180deg, #f0f5ff 0%, #f8fafc 100%);
}

/* Member CV Hero Header */
.member-cv-hero {
    position: relative;
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 50%, #1E40AF 100%);
    border-radius: 1.6rem;
    padding: 2.4rem 3rem;
    margin-bottom: 2.4rem;
    overflow: hidden;
}

.member-cv-hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.member-cv-hero__pattern {
    position: absolute;
    top: -50%;
    right: -10%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    transform: rotate(15deg);
}

.member-cv-hero__content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2rem;
    z-index: 1;
}

.member-cv-hero__icon {
    width: 6.4rem;
    height: 6.4rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.member-cv-hero__icon i {
    font-size: 2.6rem;
    color: #fff;
}

.member-cv-hero__info {
    flex: 1;
    min-width: 0;
}

.member-cv-hero__title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.4rem;
}

.member-cv-hero__subtitle {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.member-cv-hero__stats {
    display: flex;
    gap: 2rem;
    flex-shrink: 0;
}

.member-cv-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    padding: 1.2rem 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.member-cv-hero__stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.member-cv-hero__stat-label {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 0.4rem;
}

/* CV Page Layout Update */
.cv-page {
    margin-top: 0;
}

.cv-main {
    display: grid;
    grid-template-columns: 1fr 32rem;
    gap: 2rem;
}

.cv-card {
    background: #fff;
    border-radius: 1.4rem;
    padding: 2rem;
    margin-bottom: 1.6rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.cv-card:last-child {
    margin-bottom: 0;
}

.cv-card--upload {
    padding: 0;
    border: none;
    box-shadow: none;
    background: transparent;
}

.cv-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.6rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid #F1F5F9;
}

.cv-card__header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cv-card__header-left i {
    font-size: 1.6rem;
    color: #3B82F6;
}

.cv-card__header-left h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1E293B;
    margin: 0;
}

.cv-card__count {
    font-size: 1.3rem;
    color: #64748B;
    background: #F1F5F9;
    padding: 0.4rem 1rem;
    border-radius: 2rem;
}

/* Upload Zone */
.cv-upload-zone {
    border: 2px dashed #cbd5e1;
    border-radius: 1.2rem;
    padding: 2.4rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f8fafc;
}

.cv-upload-zone:hover,
.cv-upload-zone.dragover {
    border-color: #3b82f6;
    background: #eff6ff;
}

.cv-upload-zone__icon {
    width: 5.6rem;
    height: 5.6rem;
    background: #dbeafe;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.2rem;
}

.cv-upload-zone__icon i {
    font-size: 2rem;
    color: #3b82f6;
}

.cv-upload-zone__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.4rem;
}

.cv-upload-zone__desc {
    color: #64748b;
    font-size: 1.3rem;
    margin: 0 0 1.2rem;
}

.cv-upload-zone__formats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.cv-format-tag {
    background: #e2e8f0;
    color: #475569;
    padding: 0.4rem 1rem;
    border-radius: 0.6rem;
    font-size: 1.2rem;
    font-weight: 500;
}

.cv-format-tag--text {
    color: #64748b;
    font-size: 1.3rem;
}

/* CV List */
.cv-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
}

.cv-list-header__left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cv-list-header__left i {
    color: #3b82f6;
    font-size: 1.8rem;
}

.cv-list-header__left h3 {
    font-size: 1.8rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.cv-list-header__count {
    color: #64748b;
    font-size: 1.4rem;
}

.cv-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cv-item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.4rem;
    background: #f8fafc;
    border-radius: 1rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.cv-item:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.cv-item__icon {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.cv-item__icon--pdf {
    background: #fef2f2;
    color: #dc2626;
}

.cv-item__icon--doc,
.cv-item__icon--docx {
    background: #eff6ff;
    color: #2563eb;
}

.cv-item__info {
    flex: 1;
    min-width: 0;
}

.cv-item__name {
    font-weight: 600;
    color: #1e293b;
    font-size: 1.4rem;
    margin-bottom: 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cv-item__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.2rem;
    color: #64748b;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}

.cv-item__meta span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.cv-item__meta i {
    font-size: 1.1rem;
}

.cv-item__status {
    padding: 0.2rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 1.1rem;
    font-weight: 500;
}

.cv-item__status--approved {
    background: #dcfce7;
    color: #15803d;
}

.cv-item__status--pending {
    background: #fef3c7;
    color: #b45309;
}

.cv-item__status--rejected {
    background: #fee2e2;
    color: #dc2626;
}

.cv-item__right {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.cv-item__actions {
    display: flex;
    gap: 1rem;
}

.cv-item__action {
    color: #3b82f6;
    font-size: 1.2rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s;
}

.cv-item__action:hover {
    color: #1d4ed8;
}

.cv-item__action i {
    font-size: 1.1rem;
}

.cv-item__badge {
    padding: 0.4rem 0.8rem;
    border-radius: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.cv-item__badge--primary {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff;
}

.cv-item__btn-primary {
    width: 3rem;
    height: 3rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 0.5rem;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.cv-item__btn-primary:hover {
    border-color: #fbbf24;
    color: #fbbf24;
    background: #fffbeb;
}

.cv-item__delete {
    width: 3rem;
    height: 3rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 0.5rem;
    color: #94a3b8;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.cv-item__delete:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: #fef2f2;
}

.cv-empty {
    text-align: center;
    padding: 3rem 2rem;
    color: #94a3b8;
}

.cv-empty i {
    font-size: 3rem;
    margin-bottom: 1.2rem;
    opacity: 0.5;
}

.cv-empty p {
    font-size: 1.4rem;
    color: #64748b;
    margin: 0 0 0.4rem;
}

.cv-empty span {
    font-size: 1.3rem;
}

/* AI Section */
.cv-card--ai {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: none;
}

.cv-ai {
    position: relative;
}

.cv-ai__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cv-ai__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(245, 158, 11, 0.2);
    color: #b45309;
    padding: 0.4rem 0.8rem;
    border-radius: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.cv-ai__coming {
    font-size: 1.1rem;
    color: #92400E;
    background: rgba(245, 158, 11, 0.15);
    padding: 0.3rem 0.6rem;
    border-radius: 0.4rem;
}

.cv-ai__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.6rem;
}

.cv-ai__desc {
    color: #57534e;
    font-size: 1.3rem;
    margin: 0 0 1.4rem;
    line-height: 1.5;
}

.cv-ai__btn {
    background: #fff;
    color: #3b82f6;
    border: none;
    padding: 1rem 2rem;
    border-radius: 1rem;
    font-weight: 600;
    font-size: 1.4rem;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    cursor: not-allowed;
    opacity: 0.8;
}

.cv-ai__coming {
    margin-left: 1.2rem;
    color: #92400e;
    font-size: 1.3rem;
    font-style: italic;
}

/* CV Tips */
.cv-tips__header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.4rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #F1F5F9;
}

.cv-tips__header i {
    color: #f59e0b;
    font-size: 1.6rem;
}

.cv-tips__header h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.cv-tips__list {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.cv-tips__item {
    display: flex;
    gap: 1rem;
}

.cv-tips__number {
    width: 2.6rem;
    height: 2.6rem;
    background: #eff6ff;
    color: #3b82f6;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 600;
    flex-shrink: 0;
}

.cv-tips__content h4 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.3rem;
}

.cv-tips__content p {
    font-size: 1.3rem;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

/* Profile Status */
.cv-profile-status__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 1.6rem;
    text-align: center;
}

.cv-profile-status__circle {
    position: relative;
    width: 10rem;
    height: 10rem;
    margin: 0 auto 1.4rem;
}

.cv-progress-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.cv-progress-ring__bg {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 3;
}

.cv-progress-ring__progress {
    fill: none;
    stroke: #3b82f6;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.cv-profile-status__percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.cv-profile-status__number {
    display: block;
    font-size: 2.2rem;
    font-weight: 700;
    color: #1e293b;
}

.cv-profile-status__checklist {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.cv-profile-status__check {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.4rem;
    color: #94a3b8;
}

.cv-profile-status__check i {
    font-size: 1.6rem;
}

.cv-profile-status__check--done {
    color: #1e293b;
}

.cv-profile-status__check--done i {
    color: #22c55e;
}

/* CV Buttons */
.cv-btn {
    padding: 1rem 1.6rem;
    border-radius: 1rem;
    font-weight: 500;
    font-size: 1.4rem;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    border: none;
    cursor: pointer;
}

.cv-btn--outline {
    background: transparent;
    border: 1px solid #e2e8f0;
    color: #475569;
}

.cv-btn--outline:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}

.cv-btn--full {
    width: 100%;
}

/* Online Profile Card */
.cv-card--dark {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: none;
}

.cv-online-profile__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.6rem;
}

.cv-online-profile__icon {
    width: 4.4rem;
    height: 4.4rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cv-online-profile__icon i {
    color: #fff;
    font-size: 1.8rem;
}

.cv-online-profile__badge {
    background: #22c55e;
    color: #fff;
    padding: 0.4rem 1rem;
    border-radius: 0.6rem;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.cv-online-profile__title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.8rem;
}

.cv-online-profile__desc {
    color: #94a3b8;
    font-size: 1.4rem;
    margin: 0 0 1.6rem;
    line-height: 1.6;
}

.cv-online-profile__link-wrap {
    display: flex;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    overflow: hidden;
}

.cv-online-profile__link {
    flex: 1;
    background: transparent;
    border: none;
    padding: 1.2rem 1.4rem;
    color: #94a3b8;
    font-size: 1.3rem;
    outline: none;
}

.cv-online-profile__copy {
    width: 5rem;
    background: #3b82f6;
    border: none;
    color: #fff;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.cv-online-profile__copy:hover {
    background: #2563eb;
}

/* Responsive */
@media (max-width: 1200px) {
    .cv-main {
        grid-template-columns: 1fr 28rem;
    }
}

@media (max-width: 992px) {
    .cv-main {
        grid-template-columns: 1fr;
    }
    
    .cv-right {
        order: -1;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.6rem;
    }
    
    .member-cv-hero__stats {
        display: none;
    }
}

@media (max-width: 768px) {
    .member-cv-hero {
        padding: 2rem 1.6rem;
    }
    
    .member-cv-hero__content {
        flex-direction: column;
        text-align: center;
    }
    
    .member-cv-hero__icon {
        margin: 0 auto;
    }
    
    .member-cv-hero__title {
        font-size: 1.8rem;
    }
    
    .cv-right {
        grid-template-columns: 1fr;
    }
    
    .cv-item {
        flex-wrap: wrap;
    }
    
    .cv-item__right {
        width: 100%;
        justify-content: flex-end;
        margin-top: 0.8rem;
        padding-top: 0.8rem;
        border-top: 1px solid #E2E8F0;
    }
}

/* ============================================
   INTERVIEW SCHEDULE PAGE STYLES
   ============================================ */
.interview-page {
    padding: 3rem 0 5rem;
    min-height: 100vh;
    background: #f8fafc;
}

.interview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2.4rem;
}

.interview-header__title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.4rem;
    font-family: 'Lexend', sans-serif;
}

.interview-header__desc {
    color: #64748b;
    margin: 0;
    font-size: 1.5rem;
}

.interview-header__right {
    display: flex;
    gap: 1.2rem;
}

.interview-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 2rem;
    border-radius: 1rem;
    font-size: 1.4rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.interview-btn--outline {
    background: #fff;
    color: #334155;
    border: 1px solid #e2e8f0;
}

.interview-btn--outline:hover {
    background: #f8fafc;
    border-color: #cbd5e1;
}

.interview-btn--primary {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    color: #fff;
}

.interview-btn--primary:hover {
    background: linear-gradient(135deg, #4f46e5, #4338ca);
}

.interview-main {
    display: grid;
    grid-template-columns: 1fr 38rem;
    gap: 2.4rem;
}

.interview-left {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.interview-right {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Tabs */
.interview-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 2.4rem;
    border-bottom: 1px solid #e2e8f0;
}

.interview-tab {
    padding: 1.2rem 2rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: #64748b;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: all 0.2s ease;
}

.interview-tab:hover {
    color: #3b82f6;
}

.interview-tab--active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
}

/* Interview Group */
.interview-group {
    margin-bottom: 2rem;
}

.interview-group__header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.6rem;
}

.interview-group__indicator {
    width: 0.4rem;
    height: 2rem;
    background: #f97316;
    border-radius: 0.2rem;
}

.interview-group__label {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
}

.interview-group__date {
    font-size: 1.5rem;
    color: #64748b;
}

/* Interview Card */
.interview-card {
    display: flex;
    gap: 2rem;
    background: #fff;
    border-radius: 1.6rem;
    padding: 2rem;
    margin-bottom: 1.2rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.interview-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.interview-card__time {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 6rem;
    padding-top: 0.4rem;
}

.interview-card__hour {
    font-size: 2.4rem;
    font-weight: 700;
    color: #f97316;
    line-height: 1;
}

.interview-card__period {
    font-size: 1.2rem;
    color: #f97316;
    font-weight: 500;
    margin-top: 0.4rem;
}

.interview-card__content {
    flex: 1;
    min-width: 0;
}

.interview-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.interview-card__type {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    border-radius: 0.6rem;
    font-size: 1.2rem;
    font-weight: 500;
}

.interview-card__type--online {
    background: #dbeafe;
    color: #2563eb;
}

.interview-card__type--onsite {
    background: #ffedd5;
    color: #ea580c;
}

.interview-card__type--phone {
    background: #dcfce7;
    color: #16a34a;
}

.interview-card__actions-top {
    display: flex;
    gap: 0.6rem;
}

.interview-card__icon-btn {
    width: 3.6rem;
    height: 3.6rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 0.8rem;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.4rem;
}

.interview-card__icon-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}

.interview-card__title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.8rem;
}

.interview-card__company {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.6rem;
    flex-wrap: wrap;
}

.interview-card__company-logo {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.4rem;
    object-fit: contain;
}

.interview-card__company-icon {
    width: 2.4rem;
    height: 2.4rem;
    background: #f1f5f9;
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 1.2rem;
}

.interview-card__company-name {
    font-size: 1.4rem;
    color: #475569;
}

.interview-card__location {
    font-size: 1.3rem;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.interview-card__location::before {
    content: '•';
    margin: 0 0.4rem;
}

.interview-card__buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.interview-card__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1.6rem;
    border-radius: 0.8rem;
    font-size: 1.3rem;
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none;
}

.interview-card__btn--primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    border: none;
}

.interview-card__btn--primary:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
}

.interview-card__btn--outline {
    background: #fff;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.interview-card__btn--outline:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}

/* Empty State */
.interview-empty {
    text-align: center;
    padding: 6rem 2rem;
    color: #94a3b8;
}

.interview-empty i {
    font-size: 5rem;
    margin-bottom: 2rem;
    opacity: 0.5;
}

.interview-empty h3 {
    font-size: 1.8rem;
    color: #475569;
    margin: 0 0 0.8rem;
}

.interview-empty p {
    font-size: 1.4rem;
    margin: 0;
}

/* Right Column Widgets */
.interview-card-widget {
    background: #fff;
    border-radius: 1.6rem;
    padding: 2rem;
    border: 1px solid #e2e8f0;
}

.interview-widget__title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 1.6rem;
}

/* Calendar Widget */
.interview-calendar__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.6rem;
}

.interview-calendar__title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #1e293b;
}

.interview-calendar__nav {
    display: flex;
    gap: 0.4rem;
}

.interview-calendar__nav-btn {
    width: 3.2rem;
    height: 3.2rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 0.6rem;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.2rem;
}

.interview-calendar__nav-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
}

.interview-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.4rem;
    margin-bottom: 0.8rem;
}

.interview-calendar__weekdays span {
    text-align: center;
    font-size: 1.2rem;
    color: #94a3b8;
    font-weight: 500;
    padding: 0.4rem;
}

.interview-calendar__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.4rem;
}

.interview-calendar__day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #475569;
    border-radius: 0.6rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.interview-calendar__day:hover {
    background: #f1f5f9;
}

.interview-calendar__day--disabled {
    color: #cbd5e1;
    cursor: default;
}

.interview-calendar__day--disabled:hover {
    background: transparent;
}

.interview-calendar__day--today {
    background: #3b82f6;
    color: #fff;
    font-weight: 600;
}

.interview-calendar__day--today:hover {
    background: #2563eb;
}

.interview-calendar__day--has-event {
    background: #fef3c7;
    color: #f59e0b;
    font-weight: 600;
}

.interview-calendar__day--has-event:hover {
    background: #fde68a;
}

.interview-calendar__day--today.interview-calendar__day--has-event {
    background: linear-gradient(135deg, #3b82f6 50%, #f59e0b 50%);
    color: #fff;
}

/* Interview Stats */
.interview-stats {
    margin-bottom: 1.6rem;
}

.interview-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.interview-stat__icon {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.interview-stat__icon--blue {
    background: #dbeafe;
    color: #2563eb;
}

.interview-stat__icon--orange {
    background: #ffedd5;
    color: #ea580c;
}

.interview-stat__label {
    flex: 1;
    font-size: 1.4rem;
    color: #475569;
}

.interview-stat__value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e293b;
}

.interview-stat__bar {
    height: 0.6rem;
    background: #f1f5f9;
    border-radius: 0.3rem;
    margin-bottom: 1.2rem;
    overflow: hidden;
}

.interview-stat__bar-fill {
    height: 100%;
    border-radius: 0.3rem;
    transition: width 0.3s ease;
}

.interview-stat__bar-fill--blue {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.interview-stat__bar-fill--orange {
    background: linear-gradient(90deg, #f97316, #fb923c);
}

.interview-stats__total {
    text-align: center;
    font-size: 1.3rem;
    color: #64748b;
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}

/* Interview Tips Widget */
.interview-card-widget--gradient {
    background: linear-gradient(135deg, #6366f1, #4f46e5);
    border: none;
}

.interview-tips__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 0.5rem 1rem;
    border-radius: 0.6rem;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1.2rem;
}

.interview-tips__title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.8rem;
}

.interview-tips__desc {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 2rem;
    line-height: 1.6;
}

.interview-tips__btn {
    display: block;
    width: 100%;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    text-align: center;
    padding: 1rem 1.6rem;
    border-radius: 1rem;
    font-size: 1.4rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
}

.interview-tips__btn:hover {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* Responsive */
@media (max-width: 1200px) {
    .interview-main {
        grid-template-columns: 1fr 34rem;
    }
}

@media (max-width: 992px) {
    .interview-main {
        grid-template-columns: 1fr;
    }
    
    .interview-right {
        order: -1;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.6rem;
    }
    
    .interview-card-widget--gradient {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .interview-page {
        padding: 2rem 0;
    }
    
    .interview-header {
        flex-direction: column;
        gap: 1.6rem;
    }
    
    .interview-header__title {
        font-size: 2.2rem;
    }
    
    .interview-header__right {
        width: 100%;
    }
    
    .interview-btn {
        flex: 1;
        justify-content: center;
    }
    
    .interview-card {
        flex-direction: column;
        gap: 1.2rem;
    }
    
    .interview-card__time {
        flex-direction: row;
        gap: 0.8rem;
        min-width: auto;
        padding: 0;
    }
    
    .interview-right {
        grid-template-columns: 1fr;
    }
    
    .interview-card-widget--gradient {
        grid-column: span 1;
    }
}


/* =====================================================
   EMPLOYER PAGES - Nhà tuyển dụng
   ===================================================== */

.employer-page {
    padding: 3rem 0;
    min-height: 100vh;
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

/* Header */
.employer-dashboard__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1.5rem;
    width: 100%;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.employer-dashboard__title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.4rem;
    font-family: 'Lexend', sans-serif;
    font-style: italic;
}

.employer-dashboard__name {
    color: #3b82f6;
    font-style: italic;
}

.employer-dashboard__subtitle {
    font-size: 1.4rem;
    color: #64748b;
    margin: 0;
}

.employer-dashboard__actions {
    display: flex;
    gap: 1rem;
}

/* Alerts */
.employer-alerts {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.employer-alert {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.2rem 1.5rem;
    border-radius: 1.2rem;
    background: #fff;
    border-left: 4px solid;
}

.employer-alert--warning {
    border-color: #f59e0b;
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.08) 0%, #fff 100%);
}

.employer-alert--danger {
    border-color: #ef4444;
    background: linear-gradient(90deg, rgba(239, 68, 68, 0.08) 0%, #fff 100%);
}

.employer-alert--info {
    border-color: #3b82f6;
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.08) 0%, #fff 100%);
}

.employer-alert__icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}

.employer-alert--warning .employer-alert__icon {
    background: rgba(245, 158, 11, 0.15);
    color: #f59e0b;
}

.employer-alert--danger .employer-alert__icon {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

.employer-alert--info .employer-alert__icon {
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
}

.employer-alert__content {
    flex: 1;
    font-size: 1.4rem;
    color: #334155;
}

.employer-alert__content strong {
    color: #0f172a;
}

.employer-alert__action {
    font-size: 1.4rem;
    font-weight: 500;
    color: #3b82f6;
    text-decoration: none;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.employer-alert__action:hover {
    color: #2563eb;
}

/* Pipeline */
.employer-pipeline {
    background: #fff;
    border-radius: 1.6rem;
    padding: 2rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.employer-pipeline__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.employer-pipeline__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin: 0;
}

.employer-pipeline__title i {
    color: #3b82f6;
}

.employer-pipeline__link {
    font-size: 1.4rem;
    color: #3b82f6;
    text-decoration: none;
}

.employer-pipeline__stages {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
}

.employer-pipeline__stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    min-width: 10rem;
    flex: 1;
}

.employer-pipeline__stage-icon {
    width: 5rem;
    height: 5rem;
    border-radius: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.employer-pipeline__stage-icon--new { background: rgba(100, 116, 139, 0.1); color: #64748b; }
.employer-pipeline__stage-icon--reviewing { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.employer-pipeline__stage-icon--shortlisted { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.employer-pipeline__stage-icon--interview { background: rgba(168, 85, 247, 0.1); color: #a855f7; }
.employer-pipeline__stage-icon--offer { background: rgba(6, 182, 212, 0.1); color: #06b6d4; }
.employer-pipeline__stage-icon--hired { background: rgba(16, 185, 129, 0.1); color: #10b981; }

.employer-pipeline__stage-info {
    text-align: center;
}

.employer-pipeline__stage-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
}

.employer-pipeline__stage-label {
    font-size: 1.4rem;
    color: #64748b;
}

.employer-pipeline__arrow {
    color: #cbd5e1;
    font-size: 1.4rem;
    flex-shrink: 0;
}

/* Stat Card Sub */
.employer-stat-card__sub {
    display: flex;
    gap: 1rem;
    margin-top: 0.8rem;
    font-size: 1.4rem;
}

.employer-stat-card--clickable {
    cursor: pointer;
}

.employer-stat-card--clickable:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Job Item Enhanced */
.employer-job-item {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #f1f5f9;
}

.employer-job-item:last-child {
    border-bottom: none;
}

.employer-job-item__main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 1.2rem;
}

.employer-job-item__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.employer-job-item__title a {
    color: inherit;
    text-decoration: none;
}

.employer-job-item__title a:hover {
    color: #3b82f6;
}

.employer-job-item__tag {
    font-size: 1rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 0.4rem;
    text-transform: uppercase;
}

.employer-job-item__tag--urgent {
    background: #fef2f2;
    color: #ef4444;
}

.employer-job-item__tag--hot {
    background: #fff7ed;
    color: #f97316;
}

.employer-job-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    font-size: 1.4rem;
    color: #64748b;
}

.employer-job-item__meta i {
    margin-right: 0.4rem;
    color: #94a3b8;
}

.employer-job-item__salary {
    font-weight: 600;
    color: #10b981;
}

.employer-job-item__stats {
    display: flex;
    gap: 2rem;
    flex-shrink: 0;
}

.employer-job-item__stat {
    text-align: center;
}

.employer-job-item__stat-value {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: #0f172a;
}

.employer-job-item__stat-label {
    font-size: 1.4rem;
    color: #94a3b8;
}

.employer-job-item__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.employer-job-item__progress {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 30rem;
}

.employer-job-item__progress-bar {
    flex: 1;
    height: 0.6rem;
    background: #e2e8f0;
    border-radius: 0.3rem;
    position: relative;
}

.employer-job-item__progress-bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: inherit;
    background: linear-gradient(90deg, #3b82f6, #6366f1);
    border-radius: inherit;
}

.employer-job-item__progress-text {
    font-size: 1.4rem;
    color: #64748b;
    white-space: nowrap;
}

.employer-job-item__actions {
    display: flex;
    gap: 0.8rem;
}

/* Applicant Card */
.employer-applicant-list {
    display: flex;
    flex-direction: column;
}

.employer-applicant-card {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #f1f5f9;
}

.employer-applicant-card:last-child {
    border-bottom: none;
}

.employer-applicant-card__header {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    margin-bottom: 1rem;
}

.employer-applicant-card__avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 1.2rem;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.employer-applicant-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employer-applicant-card__match-badge {
    position: absolute;
    bottom: -0.3rem;
    right: -0.3rem;
    background: #10b981;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.3rem 0.5rem;
    border-radius: 0.4rem;
    border: 2px solid #fff;
}

.employer-applicant-card__info {
    flex: 1;
    min-width: 0;
}

.employer-applicant-card__name {
    font-size: 1.5rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 0.3rem;
}

.employer-applicant-card__headline {
    font-size: 1.4rem;
    color: #64748b;
    margin: 0 0 0.5rem;
}

.employer-applicant-card__meta {
    display: flex;
    gap: 1.2rem;
    font-size: 1.4rem;
    color: #94a3b8;
}

.employer-applicant-card__meta i {
    margin-right: 0.3rem;
}

.employer-applicant-card__skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.employer-applicant-card__skill {
    font-size: 1.4rem;
    padding: 0.5rem 1rem;
    background: #f1f5f9;
    color: #475569;
    border-radius: 0.5rem;
}

.employer-applicant-card__skill--more {
    background: #e2e8f0;
    color: #64748b;
}

.employer-applicant-card__actions {
    display: flex;
    gap: 0.8rem;
}

/* Activities */
.employer-activities {
    padding: 0;
}

.employer-activity {
    display: flex;
    gap: 1.2rem;
    padding: 1.2rem 2rem;
    border-bottom: 1px solid #f1f5f9;
}

.employer-activity:last-child {
    border-bottom: none;
}

.employer-activity__icon {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.employer-activity__icon--success { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.employer-activity__icon--info { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.employer-activity__icon--warning { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.employer-activity__icon--danger { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

.employer-activity__content {
    flex: 1;
}

.employer-activity__text {
    font-size: 1.4rem;
    color: #334155;
    margin: 0 0 0.3rem;
    line-height: 1.5;
}

.employer-activity__text strong {
    color: #0f172a;
}

.employer-activity__time {
    font-size: 1.4rem;
    color: #94a3b8;
}

/* Interview Item Enhanced */
.employer-interviews {
    padding: 0;
}

.employer-interview-item {
    display: flex;
    gap: 1.2rem;
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #f1f5f9;
    align-items: flex-start;
}

.employer-interview-item:last-child {
    border-bottom: none;
}

.employer-interview-item--next {
    background: linear-gradient(90deg, rgba(59, 130, 246, 0.05) 0%, transparent 100%);
    border-left: 3px solid #3b82f6;
}

.employer-interview-item__time {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 6rem;
    flex-shrink: 0;
}

.employer-interview-item__hour {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0f172a;
}

.employer-interview-item__duration {
    font-size: 1.4rem;
    color: #94a3b8;
}

.employer-interview-item__info {
    flex: 1;
    min-width: 0;
}

.employer-interview-item__title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.3rem;
}

.employer-interview-item__position {
    font-size: 1.4rem;
    color: #3b82f6;
    margin-bottom: 0.5rem;
}

.employer-interview-item__candidate {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.4rem;
    color: #64748b;
    margin-bottom: 0.3rem;
}

.employer-interview-item__avatar {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

.employer-interview-item__type {
    font-size: 1.4rem;
    color: #94a3b8;
}

.employer-interview-item__type i {
    margin-right: 0.4rem;
}

/* Company Stats */
.employer-company__stats {
    display: flex;
    justify-content: space-around;
    padding: 1.2rem 0;
    margin: 1rem 0;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}

.employer-company__stat {
    text-align: center;
}

.employer-company__stat-value {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    color: #0f172a;
}

.employer-company__stat-label {
    font-size: 1.4rem;
    color: #94a3b8;
}

.employer-company__completion-hint {
    font-size: 1.4rem;
    color: #f59e0b;
    margin: 0.8rem 0 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Quick Actions */
.employer-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.employer-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding: 1.2rem;
    border-radius: 1rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.employer-quick-action:hover {
    background: #f8fafc;
}

.employer-quick-action__icon {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.employer-quick-action__icon--blue { background: rgba(59, 130, 246, 0.1); color: #3b82f6; }
.employer-quick-action__icon--green { background: rgba(16, 185, 129, 0.1); color: #10b981; }
.employer-quick-action__icon--yellow { background: rgba(245, 158, 11, 0.1); color: #f59e0b; }
.employer-quick-action__icon--purple { background: rgba(168, 85, 247, 0.1); color: #a855f7; }
.employer-quick-action__icon--pink { background: rgba(236, 72, 153, 0.1); color: #ec4899; }
.employer-quick-action__icon--gray { background: rgba(100, 116, 139, 0.1); color: #64748b; }

.employer-quick-action span {
    font-size: 1.4rem;
    color: #475569;
    text-align: center;
}

/* Empty State */
.employer-empty {
    padding: 4rem 2rem;
    text-align: center;
}

.employer-empty--small {
    padding: 2rem;
}

.employer-empty__icon {
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #94a3b8;
    margin: 0 auto 1.5rem;
}

.employer-empty--small .employer-empty__icon {
    width: 5rem;
    height: 5rem;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.employer-empty__title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 0.5rem;
}

.employer-empty__text {
    font-size: 1.4rem;
    color: #64748b;
    margin: 0 0 1.5rem;
}

.employer-empty--small .employer-empty__text {
    margin: 0;
    font-size: 1.4rem;
}

/* Button SM Ghost */
.employer-btn-sm--ghost {
    background: transparent;
    border: none;
    color: #64748b;
    padding: 0.6rem;
}

.employer-btn-sm--ghost:hover {
    background: #f1f5f9;
    color: #0f172a;
}

.employer-btn-sm--success {
    background: #10b981;
    color: #fff;
    border: none;
}

.employer-btn-sm--success:hover {
    background: #059669;
    color: #fff;
}

/* Buttons */
.employer-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.2rem 2rem;
    border-radius: 1.2rem;
    font-size: 1.4rem;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.employer-btn--primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

.employer-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
    color: #fff;
}

.employer-btn--outline {
    background: #fff;
    color: #0f172a;
    border: 1px solid #e2e8f0;
}

.employer-btn--outline:hover {
    background: #f8fafc;
    color: #0f172a;
}

.employer-btn-sm {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    border-radius: 0.8rem;
    font-size: 1.3rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.employer-btn-sm--primary {
    background: #3b82f6;
    color: #fff;
}

.employer-btn-sm--primary:hover {
    background: #2563eb;
    color: #fff;
}

.employer-btn-sm--outline {
    background: #fff;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.employer-btn-sm--outline:hover {
    background: #f8fafc;
    color: #0f172a;
}

/* Stats Cards - New Design */
.employer-stats {
    margin-bottom: 2.5rem;
}

.employer-stats > .row {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.employer-stats > .row > [class*="col-"] {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.employer-dashboard__content {
    margin-top: 0;
}

.employer-dashboard__content > .row {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
}

.employer-dashboard__content > .row > [class*="col-"] {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.employer-stat-card {
    padding: 2rem;
    border-radius: 1.6rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 1.5rem;
    transition: all 0.2s ease;
    border: 1px solid #e2e8f0;
}

.employer-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.employer-stat-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.2rem;
}

.employer-stat-card__icon {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.employer-stat-card__icon--blue {
    background: #eff6ff;
    color: #3b82f6;
}

.employer-stat-card__icon--green {
    background: #ecfdf5;
    color: #10b981;
}

.employer-stat-card__icon--yellow {
    background: #fffbeb;
    color: #f59e0b;
}

.employer-stat-card__icon--purple {
    background: #f5f3ff;
    color: #8b5cf6;
}

.employer-stat-card__badge {
    font-size: 1.4rem;
    font-weight: 500;
    padding: 0.4rem 1rem;
    border-radius: 0.6rem;
}

.employer-stat-card__badge--blue {
    background: #eff6ff;
    color: #3b82f6;
}

.employer-stat-card__badge--green {
    background: #ecfdf5;
    color: #10b981;
}

.employer-stat-card__badge--yellow {
    background: #fffbeb;
    color: #f59e0b;
}

.employer-stat-card__badge--purple {
    background: #f5f3ff;
    color: #8b5cf6;
}

.employer-stat-card__value {
    font-size: 3.2rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
    margin-bottom: 0.4rem;
}

.employer-stat-card__label {
    font-size: 1.4rem;
    color: #64748b;
}

/* Cards */
.employer-card {
    background: #fff;
    border-radius: 1.6rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    margin-bottom: 2.5rem;
    margin-bottom: 2rem;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.employer-card--ai {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border: none;
}

.employer-card--ai .employer-card__header {
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.employer-card--ai .employer-card__title {
    color: #fff;
}

.employer-card--ai .employer-card__title i {
    color: #fbbf24;
}

.employer-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.6rem 2rem;
    border-bottom: 1px solid #e2e8f0;
}

.employer-card__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.employer-card__title i {
    color: #3b82f6;
}

.employer-card__link {
    font-size: 1.4rem;
    color: #3b82f6;
    text-decoration: none;
    font-weight: 500;
}

.employer-card__link:hover {
    text-decoration: underline;
}

.employer-card__body {
    padding: 2rem;
}

.employer-card__body--no-padding {
    padding: 0;
}

/* Job Items */
.employer-job-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.6rem 2rem;
    border-bottom: 1px solid #f1f5f9;
    gap: 1.5rem;
}

.employer-job-item:last-child {
    border-bottom: none;
}

.employer-job-item__info {
    flex: 1;
}

.employer-job-item__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 0.5rem;
}

.employer-job-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 1.4rem;
    color: #64748b;
    margin-bottom: 1rem;
}

.employer-job-item__meta span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.employer-job-item__salary {
    color: #10b981;
    font-weight: 600;
}

.employer-job-item__salary--nego {
    color: #3b82f6;
}

.employer-job-item__applicants {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.employer-job-item__avatars {
    display: flex;
}

.employer-job-item__avatar {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-left: -0.8rem;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.employer-job-item__avatar:first-child {
    margin-left: 0;
}

.employer-job-item__avatar--more {
    background: #e2e8f0;
    color: #64748b;
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.employer-job-item__count {
    font-size: 1.4rem;
    color: #64748b;
}

.employer-job-item__count strong {
    color: #0f172a;
}

.employer-job-item__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.8rem;
}

.employer-job-item__status {
    font-size: 1.4rem;
    font-weight: 500;
    padding: 0.5rem 1.2rem;
    border-radius: 0.6rem;
}

.employer-job-item__status--active {
    background: #ecfdf5;
    color: #10b981;
}

.employer-job-item__status--paused {
    background: #fef3c7;
    color: #d97706;
}

.employer-job-item__btns {
    display: flex;
    gap: 0.6rem;
}

/* Applicants Table */
.employer-applicants-table {
    width: 100%;
}

.employer-applicants-table__header {
    display: flex;
    padding: 1rem 2rem;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.employer-applicants-table__col {
    font-size: 1.2rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.employer-applicants-table__col--name {
    flex: 2;
}

.employer-applicants-table__col--position {
    flex: 1.5;
}

.employer-applicants-table__col--match {
    flex: 1.2;
}

.employer-applicants-table__col--status {
    flex: 1;
}

.employer-applicants-table__col--actions {
    flex: 0.8;
    text-align: right;
}

.employer-applicants-table__row {
    display: flex;
    align-items: center;
    padding: 1.2rem 2rem;
    border-bottom: 1px solid #f1f5f9;
}

.employer-applicants-table__row:last-child {
    border-bottom: none;
}

.employer-applicants-table__row .employer-applicants-table__col {
    font-size: 1.4rem;
    color: #0f172a;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
}

/* Applicant */
.employer-applicant {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.employer-applicant__avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

.employer-applicant__avatar--blue {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

.employer-applicant__avatar--purple {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.employer-applicant__avatar--green {
    background: linear-gradient(135deg, #10b981, #059669);
}

.employer-applicant__avatar--img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.employer-applicant__name {
    font-size: 1.4rem;
    font-weight: 600;
    color: #0f172a;
}

.employer-applicant__exp {
    font-size: 1.4rem;
    color: #64748b;
}

/* Match Bar */
.employer-match {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.employer-match__bar {
    flex: 1;
    height: 0.6rem;
    background: #e2e8f0;
    border-radius: 0.3rem;
    overflow: hidden;
    max-width: 8rem;
}

.employer-match__fill {
    height: 100%;
    border-radius: 0.3rem;
    background: #10b981;
}

.employer-match__fill--high {
    background: #10b981;
}

.employer-match__fill--medium {
    background: #f59e0b;
}

.employer-match__fill--low {
    background: #ef4444;
}

.employer-match__value {
    font-size: 1.4rem;
    font-weight: 600;
    color: #10b981;
}

/* Status Badge */
.employer-status {
    font-size: 1.4rem;
    font-weight: 500;
    padding: 0.5rem 1.2rem;
    border-radius: 0.6rem;
}

.employer-status--new {
    background: #dbeafe;
    color: #3b82f6;
}

.employer-status--viewed {
    background: #e2e8f0;
    color: #64748b;
}

.employer-status--interview {
    background: #dcfce7;
    color: #16a34a;
}

.employer-status--rejected {
    background: #fee2e2;
    color: #ef4444;
}

/* Action Buttons */
.employer-action-btn {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 0.8rem;
    border: 1px solid #e2e8f0;
    background: #fff;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.employer-action-btn:hover {
    background: #f8fafc;
    color: #3b82f6;
}

.employer-action-btn--success {
    border-color: #10b981;
    color: #10b981;
}

.employer-action-btn--success:hover {
    background: #ecfdf5;
    color: #059669;
}

/* AI Suggestions Card */
.employer-ai__subtitle {
    font-size: 1.4rem;
    color: rgba(255,255,255,0.7);
    padding: 0 2rem;
    margin: 0 0 1.5rem;
}

.employer-ai__list {
    padding: 0 1.5rem;
}

.employer-ai__item {
    display: flex;
    gap: 1rem;
    padding: 1.2rem;
    background: rgba(255,255,255,0.08);
    border-radius: 1.2rem;
    margin-bottom: 1rem;
}

.employer-ai__avatar {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    font-weight: 600;
    color: #fff;
    flex-shrink: 0;
}

.employer-ai__avatar--green {
    background: linear-gradient(135deg, #10b981, #059669);
}

.employer-ai__avatar--purple {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}

.employer-ai__info {
    flex: 1;
}

.employer-ai__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.6rem;
}

.employer-ai__name {
    font-size: 1.4rem;
    font-weight: 600;
    color: #fff;
}

.employer-ai__title {
    font-size: 1.4rem;
    color: rgba(255,255,255,0.6);
}

.employer-ai__match {
    font-size: 1.4rem;
    font-weight: 600;
    color: #10b981;
}

.employer-ai__skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.employer-ai__skill {
    font-size: 1.4rem;
    padding: 0.4rem 1rem;
    background: rgba(255,255,255,0.1);
    border-radius: 0.5rem;
    color: rgba(255,255,255,0.8);
}

.employer-ai__more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1.2rem 2rem;
    margin: 0.5rem 1.5rem 1.5rem;
    background: rgba(59, 130, 246, 0.2);
    border-radius: 1rem;
    color: #60a5fa;
    font-size: 1.4rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
}

.employer-ai__more:hover {
    background: rgba(59, 130, 246, 0.3);
    color: #93c5fd;
}

/* Interview Items */
.employer-interviews {
    padding: 0;
}

.employer-interview-item {
    display: flex;
    gap: 1.2rem;
    padding: 1.4rem 2rem;
    border-bottom: 1px solid #f1f5f9;
}

.employer-interview-item:last-child {
    border-bottom: none;
}

.employer-interview-item__date {
    width: 5rem;
    height: 5.5rem;
    background: #eff6ff;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.employer-interview-item__day-label {
    font-size: 1.4rem;
    font-weight: 500;
    color: #3b82f6;
    text-transform: uppercase;
}

.employer-interview-item__day {
    font-size: 2rem;
    font-weight: 700;
    color: #1e40af;
    line-height: 1;
}

.employer-interview-item__info {
    flex: 1;
}

.employer-interview-item__title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 0.3rem;
}

.employer-interview-item__meta {
    font-size: 1.4rem;
    color: #64748b;
    margin-bottom: 0.5rem;
}

.employer-interview-item__candidate {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.4rem;
    color: #64748b;
}

.employer-interview-item__avatar {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.employer-interview-item__avatar--pink {
    background: linear-gradient(135deg, #ec4899, #db2777);
}

/* Company Profile Card */
.employer-company__header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
}

.employer-company__logo {
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 1.2rem;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
}

.employer-company__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employer-company__logo span {
    font-size: 2rem;
    font-weight: 700;
    color: #3b82f6;
}

.employer-company__name {
    font-size: 1.5rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 0.3rem;
}

.employer-company__type {
    font-size: 1.3rem;
    color: #64748b;
    margin: 0;
}

.employer-company__completion {
    margin-bottom: 1.5rem;
}

.employer-company__completion-label {
    display: flex;
    justify-content: space-between;
    font-size: 1.3rem;
    color: #64748b;
    margin-bottom: 0.6rem;
}

.employer-company__completion-value {
    font-weight: 600;
    color: #3b82f6;
}

.employer-company__progress {
    height: 0.8rem;
    background: #e2e8f0;
    border-radius: 0.4rem;
    overflow: hidden;
}

.employer-company__progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
    border-radius: 0.4rem;
    transition: width 0.3s ease;
}

.employer-company__stats {
    display: flex;
    gap: 1rem;
}

.employer-company__stat {
    flex: 1;
    text-align: center;
    padding: 1.2rem;
    background: #f8fafc;
    border-radius: 1rem;
}

.employer-company__stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.2rem;
}

.employer-company__stat-label {
    font-size: 1rem;
    font-weight: 500;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Shortcuts */
.employer-shortcuts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.employer-shortcut {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.5rem 1rem;
    border-radius: 1.2rem;
    background: #f8fafc;
    text-decoration: none;
    transition: all 0.2s ease;
}

.employer-shortcut:hover {
    background: #f1f5f9;
    transform: translateY(-2px);
}

.employer-shortcut i {
    font-size: 2rem;
    color: #3b82f6;
}

.employer-shortcut span {
    font-size: 1.2rem;
    color: #475569;
    font-weight: 500;
    text-align: center;
}

.employer-shortcut--danger:hover {
    background: #fef2f2;
}

.employer-shortcut--danger i {
    color: #ef4444;
}

.employer-shortcut--danger span {
    color: #ef4444;
}

/* Responsive */
@media (max-width: 992px) {
    .employer-applicants-table__header,
    .employer-applicants-table__row {
        flex-wrap: wrap;
    }
    
    .employer-applicants-table__col--match,
    .employer-applicants-table__col--status {
        display: none;
    }
    
    .employer-pipeline__stages {
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding-bottom: 1rem;
    }
    
    .employer-pipeline__stage {
        min-width: 8rem;
    }
    
    .employer-pipeline__arrow {
        display: none;
    }
    
    .employer-job-item__main {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .employer-job-item__stats {
        justify-content: flex-start;
        gap: 1.5rem;
    }
    
    .employer-job-item__footer {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .employer-job-item__progress {
        max-width: 100%;
        width: 100%;
    }
    
    .employer-quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .employer-alert {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        text-align: left;
    }
    
    .employer-alert__action {
        align-self: flex-end;
    }
    
    .employer-pipeline__stage {
        min-width: 7rem;
    }
    
    .employer-pipeline__stage-icon {
        width: 4rem;
        height: 4rem;
        font-size: 1.6rem;
    }
    
    .employer-pipeline__stage-value {
        font-size: 1.6rem;
    }
    
    .employer-applicant-card__header {
        flex-wrap: wrap;
    }
    
    .employer-applicant-card__actions {
        width: 100%;
        justify-content: flex-start;
    }
    
    .employer-interview-item {
        flex-wrap: wrap;
    }
    
    .employer-interview-item__time {
        min-width: auto;
    }
}

@media (max-width: 768px) {
    .employer-dashboard__header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .employer-dashboard__title {
        font-size: 2.2rem;
    }
    
    .employer-stat-card__value {
        font-size: 2.4rem;
    }
    
    .employer-shortcuts {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .employer-job-item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .employer-job-item__actions {
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        margin-top: 1rem;
    }
}

@media (max-width: 576px) {
    .employer-shortcuts {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* =====================================================
   EMPLOYER JOB FORM - Form đăng tin tuyển dụng
   ===================================================== */

.employer-create-job {
    padding-bottom: 10rem;
}

/* Form Header */
.employer-job-form__header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
    padding: 2rem;
    background: #fff;
    border-radius: 1.6rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.employer-back-btn {
    width: 4.4rem;
    height: 4.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.2rem;
    background: #f1f5f9;
    color: #64748b;
    text-decoration: none;
    transition: all 0.2s ease;
}

.employer-back-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.employer-job-form__title-wrap {
    flex: 1;
}

.employer-job-form__title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.3rem;
}

.employer-job-form__subtitle {
    font-size: 1.4rem;
    color: #64748b;
    margin: 0;
}

.employer-job-form__actions {
    display: flex;
    gap: 1rem;
}

/* Form Elements */
.employer-label {
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.6rem;
}

.employer-label.required::after {
    content: ' *';
    color: #ef4444;
}

.employer-input,
.employer-select,
.employer-textarea {
    width: 100%;
    padding: 1.2rem 1.6rem;
    font-size: 1.4rem;
    color: #0f172a;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    transition: all 0.2s ease;
}

.employer-input:focus,
.employer-select:focus,
.employer-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.employer-input::placeholder,
.employer-textarea::placeholder {
    color: #94a3b8;
}

.employer-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.2rem center;
    padding-right: 3rem;
}

.employer-textarea {
    resize: vertical;
    min-height: 12rem;
}

.employer-hint {
    display: block;
    font-size: 1.2rem;
    color: #94a3b8;
    margin-top: 0.4rem;
}

.form-group {
    margin-bottom: 1.8rem;
}

/* Radio Group */
.employer-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.employer-radio {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 1.6rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.employer-radio:hover {
    background: #f1f5f9;
}

.employer-radio input {
    display: none;
}

.employer-radio input:checked + .employer-radio__box {
    background: #3b82f6;
    border-color: #3b82f6;
}

.employer-radio input:checked + .employer-radio__box::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.employer-radio input:checked ~ .employer-radio__text {
    color: #3b82f6;
    font-weight: 600;
}

.employer-radio__box {
    width: 2rem;
    height: 2rem;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    position: relative;
    transition: all 0.2s ease;
}

.employer-radio__box::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 0.8rem;
    height: 0.8rem;
    background: #fff;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.2s ease;
}

.employer-radio__text {
    font-size: 1.4rem;
    color: #475569;
}

/* Toggle */
.employer-toggle-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.employer-toggle {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.2rem;
    background: #f8fafc;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.employer-toggle:hover {
    background: #f1f5f9;
}

.employer-toggle input {
    display: none;
}

.employer-toggle input:checked + .employer-toggle__slider {
    background: #3b82f6;
}

.employer-toggle input:checked + .employer-toggle__slider::after {
    transform: translateX(2rem);
}

.employer-toggle__slider {
    width: 4.4rem;
    height: 2.4rem;
    background: #cbd5e1;
    border-radius: 1.2rem;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.employer-toggle__slider::after {
    content: '';
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    width: 2rem;
    height: 2rem;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

.employer-toggle__label {
    display: flex;
    flex-direction: column;
}

.employer-toggle__label strong {
    font-size: 1.4rem;
    color: #0f172a;
    font-weight: 600;
}

.employer-toggle__label small {
    font-size: 1.2rem;
    color: #64748b;
}

/* Skills Input */
.employer-skills-input {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
}

.employer-skills-input .employer-input {
    flex: 1;
}

.employer-skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.employer-skill-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.2rem;
    background: #eff6ff;
    color: #3b82f6;
    border-radius: 0.8rem;
    font-size: 1.3rem;
    font-weight: 500;
}

.employer-skill-tag__remove {
    width: 1.8rem;
    height: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: rgba(59, 130, 246, 0.2);
    border-radius: 50%;
    color: #3b82f6;
    cursor: pointer;
    transition: all 0.2s ease;
}

.employer-skill-tag__remove:hover {
    background: #3b82f6;
    color: #fff;
}

/* Salary Range */
.employer-salary-range {
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
    margin-top: 1rem;
}

/* Preview Card */
.employer-card--preview {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.employer-job-preview {
    padding: 1.5rem;
    background: #fff;
    border-radius: 1.2rem;
    border: 1px solid #e2e8f0;
}

.employer-job-preview__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 1rem;
    line-height: 1.4;
}

.employer-job-preview__company {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.3rem;
    color: #64748b;
    margin-bottom: 1rem;
}

.employer-job-preview__logo {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 0.6rem;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.employer-job-preview__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 1.2rem;
    color: #64748b;
}

.employer-job-preview__meta span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.employer-job-preview__meta i {
    color: #94a3b8;
}

/* Tips Card */
.employer-card--tips {
    background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
    border-color: #fde047;
}

.employer-card--tips .employer-card__title {
    color: #854d0e;
}

.employer-card--tips .employer-card__title i {
    color: #eab308;
}

.employer-tips {
    list-style: none;
    padding: 0;
    margin: 0;
}

.employer-tips li {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    font-size: 1.3rem;
    color: #713f12;
    margin-bottom: 0.8rem;
}

.employer-tips li:last-child {
    margin-bottom: 0;
}

.employer-tips li i {
    color: #16a34a;
    margin-top: 0.2rem;
}

/* Mobile Actions */
.employer-job-form__mobile-actions {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1.5rem;
    background: #fff;
    border-top: 1px solid #e2e8f0;
    gap: 1rem;
    z-index: 100;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

.employer-job-form__mobile-actions .employer-btn {
    flex: 1;
    justify-content: center;
}

/* Responsive */
@media (max-width: 992px) {
    .employer-job-form__actions {
        display: none;
    }
    
    .employer-job-form__mobile-actions {
        display: flex;
    }
}

@media (max-width: 768px) {
    .employer-job-form__header {
        flex-wrap: wrap;
    }
    
    .employer-job-form__title {
        font-size: 1.8rem;
    }
    
    .employer-radio-group {
        flex-direction: column;
    }
    
    .employer-radio {
        width: 100%;
    }
}


/* =====================================================
   EMPLOYER JOBS LIST - Danh sách tin tuyển dụng
   ===================================================== */

.employer-jobs__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.employer-jobs__title {
    font-size: 2.4rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.3rem;
}

.employer-jobs__subtitle {
    font-size: 1.4rem;
    color: #64748b;
    margin: 0;
}

/* Stats Bar */
.employer-jobs__stats {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.employer-jobs__stat {
    padding: 1rem 2rem;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    text-align: center;
    min-width: 10rem;
}

.employer-jobs__stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
}

.employer-jobs__stat-label {
    font-size: 1.2rem;
    color: #64748b;
}

.employer-jobs__stat--active .employer-jobs__stat-value {
    color: #10b981;
}

.employer-jobs__stat--draft .employer-jobs__stat-value {
    color: #64748b;
}

.employer-jobs__stat--paused .employer-jobs__stat-value {
    color: #f59e0b;
}

.employer-jobs__stat--closed .employer-jobs__stat-value {
    color: #ef4444;
}

/* Filter */
.employer-jobs__filter {
    display: flex;
    gap: 1rem;
}

.employer-select--sm {
    padding: 0.8rem 2.5rem 0.8rem 1.2rem;
    font-size: 1.3rem;
    border-radius: 0.8rem;
}

/* Jobs List */
.employer-jobs-list__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    border-bottom: 1px solid #f1f5f9;
    gap: 2rem;
}

.employer-jobs-list__item:last-child {
    border-bottom: none;
}

.employer-jobs-list__item:hover {
    background: #fafafa;
}

.employer-jobs-list__main {
    flex: 1;
    display: flex;
    gap: 3rem;
}

.employer-jobs-list__info {
    flex: 1;
}

.employer-jobs-list__title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.employer-jobs-list__title a {
    color: inherit;
    text-decoration: none;
}

.employer-jobs-list__title a:hover {
    color: #3b82f6;
}

.employer-jobs-list__badge {
    font-size: 1rem;
    padding: 0.3rem 0.8rem;
    border-radius: 0.5rem;
    font-weight: 600;
}

.employer-jobs-list__badge--urgent {
    background: #fee2e2;
    color: #ef4444;
}

.employer-jobs-list__badge--hot {
    background: #fef3c7;
    color: #d97706;
}

.employer-jobs-list__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    font-size: 1.3rem;
    color: #64748b;
}

.employer-jobs-list__meta span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.employer-jobs-list__meta i {
    color: #94a3b8;
}

.employer-jobs-list__stats {
    display: flex;
    gap: 2rem;
}

.employer-jobs-list__stat {
    text-align: center;
    min-width: 6rem;
}

.employer-jobs-list__stat-value {
    display: block;
    font-size: 1.8rem;
    font-weight: 700;
    color: #0f172a;
}

.employer-jobs-list__stat-label {
    font-size: 1.1rem;
    color: #94a3b8;
}

.employer-jobs-list__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.8rem;
}

.employer-jobs-list__status {
    font-size: 1.2rem;
    font-weight: 500;
    padding: 0.4rem 1rem;
    border-radius: 0.6rem;
}

.employer-jobs-list__status--success {
    background: #dcfce7;
    color: #16a34a;
}

.employer-jobs-list__status--secondary {
    background: #f1f5f9;
    color: #64748b;
}

.employer-jobs-list__status--warning {
    background: #fef3c7;
    color: #d97706;
}

.employer-jobs-list__status--info {
    background: #dbeafe;
    color: #2563eb;
}

.employer-jobs-list__status--danger {
    background: #fee2e2;
    color: #dc2626;
}

.employer-jobs-list__status--dark {
    background: #e2e8f0;
    color: #475569;
}

.employer-jobs-list__btns {
    display: flex;
    gap: 0.5rem;
}

.employer-btn-sm--success {
    background: #10b981;
    color: #fff;
    border: none;
}

.employer-btn-sm--success:hover {
    background: #059669;
    color: #fff;
}

.employer-btn-sm--warning {
    background: #f59e0b;
    color: #fff;
    border: none;
}

.employer-btn-sm--warning:hover {
    background: #d97706;
    color: #fff;
}

.employer-btn-sm--danger {
    background: transparent;
    color: #ef4444;
    border: 1px solid #ef4444;
}

.employer-btn-sm--danger:hover {
    background: #ef4444;
    color: #fff;
}

/* Responsive */
@media (max-width: 992px) {
    .employer-jobs-list__main {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .employer-jobs-list__stats {
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .employer-jobs-list__item {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .employer-jobs-list__actions {
        flex-direction: row;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        margin-top: 1rem;
        flex-wrap: wrap;
    }
    
    .employer-jobs-list__btns {
        flex-wrap: wrap;
    }
    
    .employer-jobs__stats {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.5rem;
    }
    
    .employer-jobs__stat {
        flex-shrink: 0;
    }
}

/* ===================================================================
   MEMBER (CANDIDATE) LAYOUT - SIDEBAR & MAIN CONTENT
   =================================================================== */

.member-layout {
    display: flex;
    min-height: 100vh;
    background: #f8fafc;
}

/* Member Main Wrapper */
.member-main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 280px;
    min-height: 100vh;
}

/* Member Sidebar */
.member-sidebar {
    width: 280px;
    background: linear-gradient(180deg, #0F766E 0%, #115E59 100%);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.member-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.member-sidebar__logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
}

.member-sidebar__logo i {
    font-size: 2rem;
    color: #5EEAD4;
}

.member-sidebar__logo:hover {
    color: #fff;
}

.member-sidebar__toggle {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.member-sidebar__user {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.member-sidebar__avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.member-sidebar__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-sidebar__avatar span {
    font-size: 1.8rem;
    font-weight: 600;
    color: #fff;
}

.member-sidebar__info {
    flex: 1;
    min-width: 0;
}

.member-sidebar__name {
    font-size: 1.4rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-sidebar__status {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.7);
}

.member-sidebar__status i {
    margin-right: 0.4rem;
}

.member-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0;
}

.member-sidebar__section {
    padding: 0.5rem 1.5rem;
}

.member-sidebar__section-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 0.8rem;
    padding: 0.5rem 0;
}

.member-sidebar__link {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    font-size: 1.4rem;
    text-decoration: none;
    border-radius: 0.8rem;
    transition: all 0.2s ease;
    margin-bottom: 0.2rem;
}

.member-sidebar__link i {
    font-size: 1.6rem;
    width: 2rem;
    text-align: center;
}

.member-sidebar__link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    text-decoration: none;
}

.member-sidebar__link.active {
    background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
    color: #fff;
}

.member-sidebar__badge {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1.1rem;
    padding: 0.2rem 0.6rem;
    border-radius: 0.5rem;
    font-weight: 600;
}

.member-sidebar__badge--warning {
    background: #F59E0B;
}

.member-sidebar__footer {
    padding: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.member-sidebar__link--danger {
    color: #FCA5A5;
}

.member-sidebar__link--danger:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #FCA5A5;
}

.member-sidebar__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.member-sidebar__overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Member Topbar */
.member-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 2.4rem;
    height: 7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.member-topbar__left {
    display: flex;
    align-items: center;
}

.member-topbar__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.member-topbar__logo img {
    height: 4rem;
    width: auto;
    object-fit: contain;
}

.member-topbar__logo-text {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1E293B;
}

.member-topbar__logo-text i {
    font-size: 2rem;
    color: #0D9488;
}

.member-topbar__right {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.member-topbar__search {
    margin-right: 1.6rem;
}

.member-topbar__search-form {
    display: flex;
    align-items: center;
    background: #F1F5F9;
    border-radius: 1rem;
    padding: 0 1.4rem;
    border: 1px solid transparent;
    transition: all 0.2s ease;
}

.member-topbar__search-form:focus-within {
    background: #fff;
    border-color: #14B8A6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.member-topbar__search-form i {
    color: #94A3B8;
    font-size: 1.4rem;
}

.member-topbar__search-input {
    background: transparent;
    border: none;
    outline: none;
    padding: 1rem 1.2rem;
    font-size: 1.4rem;
    width: 24rem;
    color: #1E293B;
}

.member-topbar__search-input::placeholder {
    color: #94A3B8;
}

.member-topbar__item {
    position: relative;
}

.member-topbar__btn {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748B;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    transition: all 0.2s ease;
    position: relative;
    text-decoration: none;
}

.member-topbar__btn i {
    font-size: 1.8rem;
}

.member-topbar__btn:hover {
    background: #F0FDFA;
    color: #0D9488;
    border-color: #99F6E4;
    text-decoration: none;
}

.member-topbar__badge {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    min-width: 1.8rem;
    height: 1.8rem;
    padding: 0 0.5rem;
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

.member-topbar__divider {
    width: 1px;
    height: 3.2rem;
    background: #E2E8F0;
    margin: 0 0.8rem;
}

.member-topbar__user {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1.2rem 0.6rem 0.6rem;
    border-radius: 1rem;
    text-decoration: none;
    transition: all 0.2s ease;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
}

.member-topbar__user:hover {
    background: #F0FDFA;
    border-color: #99F6E4;
    text-decoration: none;
}

.member-topbar__avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 0.8rem;
    overflow: hidden;
    background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.member-topbar__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-topbar__letter {
    font-size: 1.6rem;
    font-weight: 600;
    color: #fff;
}

.member-topbar__user-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.member-topbar__user-name {
    font-size: 1.4rem;
    font-weight: 600;
    color: #1E293B;
    line-height: 1.2;
}

.member-topbar__arrow {
    font-size: 1.2rem;
    color: #94A3B8;
    margin-left: 0.4rem;
    transition: transform 0.2s ease;
}

.member-topbar__user[aria-expanded="true"] .member-topbar__arrow {
    transform: rotate(180deg);
}

/* Member Dropdown */
.member-dropdown {
    min-width: 28rem;
    padding: 0;
    border: 1px solid #E2E8F0;
    border-radius: 1.2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    margin-top: 0.8rem !important;
}

.member-dropdown__header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.6rem;
    background: linear-gradient(135deg, #F0FDFA 0%, #CCFBF1 100%);
}

.member-dropdown__avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.member-dropdown__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-dropdown__letter {
    font-size: 1.8rem;
    font-weight: 600;
    color: #fff;
}

.member-dropdown__info {
    flex: 1;
    min-width: 0;
}

.member-dropdown__name {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 0.2rem;
}

.member-dropdown__email {
    font-size: 1.3rem;
    color: #64748B;
}

.member-dropdown__divider {
    height: 1px;
    background: #E2E8F0;
    margin: 0;
}

.member-dropdown__item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.2rem 1.6rem;
    color: #475569;
    font-size: 1.4rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

.member-dropdown__item i {
    font-size: 1.6rem;
    width: 2rem;
    text-align: center;
    color: #94A3B8;
    transition: color 0.2s ease;
}

.member-dropdown__item:hover {
    background: #F0FDFA;
    color: #1E293B;
    text-decoration: none;
}

.member-dropdown__item:hover i {
    color: #0D9488;
}

.member-dropdown__item--danger {
    color: #DC2626;
}

.member-dropdown__item--danger i {
    color: #DC2626;
}

.member-dropdown__item--danger:hover {
    background: #FEF2F2;
    color: #B91C1C;
}

/* Member Main Content */
.member-main {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.member-content {
    padding: 2.4rem;
    width: 100%;
    flex: 1;
}

/* Member Mobile Header */
.member-mobile-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.6rem;
    background: #fff;
    border-bottom: 1px solid #E2E8F0;
}

.member-mobile-header__toggle {
    width: 4rem;
    height: 4rem;
    border: 1px solid #E2E8F0;
    border-radius: 0.8rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748B;
}

.member-mobile-header__logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #0F766E;
    text-decoration: none;
}

.member-mobile-header__user {
    width: 4rem;
    height: 4rem;
    border-radius: 0.8rem;
    overflow: hidden;
    background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.member-mobile-header__user img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-mobile-header__user span {
    font-size: 1.4rem;
    font-weight: 600;
    color: #fff;
}

/* Member Dashboard Hero */
.member-dashboard-hero {
    position: relative;
    background: linear-gradient(135deg, #0D9488 0%, #0F766E 50%, #115E59 100%);
    border-radius: 1.6rem;
    padding: 2.8rem 3rem;
    margin-bottom: 2.4rem;
    overflow: hidden;
}

.member-dashboard-hero__bg {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.2) 0%, transparent 50%);
    pointer-events: none;
}

.member-dashboard-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.member-dashboard-hero__left {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.member-dashboard-hero__avatar {
    width: 7rem;
    height: 7rem;
    border-radius: 1.4rem;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
}

.member-dashboard-hero__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-dashboard-hero__avatar span {
    font-size: 2.4rem;
    font-weight: 700;
    color: #fff;
}

.member-dashboard-hero__text {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.member-dashboard-hero__greeting {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.member-dashboard-hero__title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.member-dashboard-hero__subtitle {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.member-dashboard-hero__actions {
    display: flex;
    gap: 1rem;
}

.member-dashboard-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.2rem 2rem;
    border-radius: 1rem;
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.member-dashboard-hero__btn--outline {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.member-dashboard-hero__btn--outline:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    text-decoration: none;
}

.member-dashboard-hero__btn--primary {
    background: #fff;
    color: #0F766E;
}

.member-dashboard-hero__btn--primary:hover {
    background: #F0FDFA;
    color: #0F766E;
    text-decoration: none;
}

/* Member Stats Grid */
.member-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
    margin-bottom: 2.4rem;
}

.member-stat-card {
    background: #fff;
    border-radius: 1.2rem;
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid #E2E8F0;
    transition: all 0.2s ease;
}

.member-stat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.member-stat-card__icon {
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.member-stat-card__icon i {
    font-size: 2rem;
}

.member-stat-card__icon--blue {
    background: #DBEAFE;
    color: #2563EB;
}

.member-stat-card__icon--orange {
    background: #FEF3C7;
    color: #D97706;
}

.member-stat-card__icon--purple {
    background: #EDE9FE;
    color: #7C3AED;
}

.member-stat-card__icon--pink {
    background: #FCE7F3;
    color: #DB2777;
}

.member-stat-card__info {
    flex: 1;
}

.member-stat-card__value {
    font-size: 2.4rem;
    font-weight: 700;
    color: #1E293B;
    line-height: 1.2;
}

.member-stat-card__label {
    font-size: 1.3rem;
    color: #64748B;
    margin-top: 0.2rem;
}

/* Member Dashboard Grid */
.member-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 36rem;
    gap: 2.4rem;
}

.member-dashboard-grid__main {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.member-dashboard-grid__sidebar {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

/* Member Profile Completion */
.member-profile-completion {
    background: linear-gradient(135deg, #0D9488 0%, #0F766E 100%);
    border-radius: 1.4rem;
    padding: 2.4rem;
    color: #fff;
}

.member-profile-completion__header {
    margin-bottom: 1rem;
}

.member-profile-completion__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: rgba(255, 255, 255, 0.2);
    padding: 0.5rem 1rem;
    border-radius: 0.6rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.member-profile-completion__title {
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 0.6rem;
}

.member-profile-completion__desc {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 1.6rem;
    line-height: 1.5;
}

.member-profile-completion__progress {
    height: 0.8rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 0.4rem;
    overflow: hidden;
    margin-bottom: 1.4rem;
}

.member-profile-completion__progress-bar {
    height: 100%;
    background: #fff;
    border-radius: 0.4rem;
    transition: width 0.5s ease;
}

.member-profile-completion__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.member-profile-completion__percent {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.8);
}

.member-profile-completion__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    background: #fff;
    color: #0F766E;
    padding: 0.8rem 1.6rem;
    border-radius: 0.8rem;
    font-size: 1.3rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.member-profile-completion__btn:hover {
    background: #F0FDFA;
    text-decoration: none;
}

/* Member Card */
.member-card {
    background: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: 1px solid #E2E8F0;
    overflow: hidden;
}

.member-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.6rem 2rem;
    border-bottom: 1px solid #E2E8F0;
}

.member-card__title {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: #1E293B;
    margin: 0;
}

.member-card__title i {
    font-size: 1.6rem;
    color: #0D9488;
}

.member-card__link {
    font-size: 1.3rem;
    color: #0D9488;
    text-decoration: none;
    font-weight: 500;
}

.member-card__link:hover {
    text-decoration: underline;
}

.member-card__body {
    padding: 1.6rem 2rem;
}

/* Member Application Item */
.member-application-item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.2rem 0;
    border-bottom: 1px solid #F1F5F9;
}

.member-application-item:last-child {
    border-bottom: none;
}

.member-application-item__logo {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 1rem;
    background: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.member-application-item__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-application-item__logo i {
    font-size: 1.8rem;
    color: #94A3B8;
}

.member-application-item__info {
    flex: 1;
    min-width: 0;
}

.member-application-item__title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #1E293B;
    margin: 0 0 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-application-item__company {
    font-size: 1.3rem;
    color: #64748B;
    margin: 0 0 0.2rem;
}

.member-application-item__time {
    font-size: 1.2rem;
    color: #94A3B8;
}

.member-application-item__status {
    padding: 0.4rem 1rem;
    border-radius: 0.6rem;
    font-size: 1.2rem;
    font-weight: 600;
    flex-shrink: 0;
}

.member-application-item__status--pending {
    background: #FEF3C7;
    color: #D97706;
}

.member-application-item__status--reviewed {
    background: #DBEAFE;
    color: #2563EB;
}

.member-application-item__status--shortlisted {
    background: #D1FAE5;
    color: #059669;
}

.member-application-item__status--interview {
    background: #EDE9FE;
    color: #7C3AED;
}

.member-application-item__status--rejected {
    background: #FEE2E2;
    color: #DC2626;
}

.member-application-item__status--hired {
    background: #D1FAE5;
    color: #059669;
}

/* Member Saved Job */
.member-saved-job {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
    border-bottom: 1px solid #F1F5F9;
}

.member-saved-job:last-child {
    border-bottom: none;
}

.member-saved-job__info {
    flex: 1;
    min-width: 0;
}

.member-saved-job__title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #1E293B;
    margin: 0 0 0.2rem;
}

.member-saved-job__company {
    font-size: 1.3rem;
    color: #64748B;
    margin: 0;
}

.member-saved-job__btn {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 0.6rem;
    background: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748B;
    text-decoration: none;
    transition: all 0.2s ease;
}

.member-saved-job__btn:hover {
    background: #0D9488;
    color: #fff;
}

/* Member Quick Actions */
.member-quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1.6rem 2rem;
}

.member-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding: 1.4rem;
    border-radius: 1rem;
    background: #F8FAFC;
    text-decoration: none;
    transition: all 0.2s ease;
}

.member-quick-action:hover {
    background: #F0FDFA;
    transform: translateY(-2px);
    text-decoration: none;
}

.member-quick-action__icon {
    width: 4rem;
    height: 4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.member-quick-action__icon i {
    font-size: 1.6rem;
}

.member-quick-action__icon--teal {
    background: #CCFBF1;
    color: #0D9488;
}

.member-quick-action__icon--blue {
    background: #DBEAFE;
    color: #2563EB;
}

.member-quick-action__icon--purple {
    background: #EDE9FE;
    color: #7C3AED;
}

.member-quick-action__icon--gray {
    background: #F1F5F9;
    color: #64748B;
}

.member-quick-action span {
    font-size: 1.3rem;
    font-weight: 500;
    color: #475569;
}

/* Member Empty State */
.member-empty-state {
    text-align: center;
    padding: 3rem 2rem;
}

.member-empty-state i {
    font-size: 4rem;
    color: #CBD5E1;
    margin-bottom: 1rem;
}

.member-empty-state p {
    font-size: 1.4rem;
    color: #64748B;
    margin: 0 0 1.6rem;
}

.member-empty-state--small {
    padding: 2rem 1rem;
}

.member-empty-state--small i {
    font-size: 2.8rem;
}

.member-empty-state--small p {
    font-size: 1.3rem;
    margin-bottom: 1.2rem;
}

/* Member Button */
.member-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1rem 2rem;
    border-radius: 0.8rem;
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
}

.member-btn--primary {
    background: linear-gradient(135deg, #14B8A6 0%, #0D9488 100%);
    color: #fff;
}

.member-btn--primary:hover {
    background: linear-gradient(135deg, #0D9488 0%, #0F766E 100%);
    color: #fff;
    text-decoration: none;
}

.member-btn--sm {
    padding: 0.8rem 1.4rem;
    font-size: 1.3rem;
}

/* Member Page Hero (smaller version for inner pages) */
.member-page-hero {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    padding: 2rem 2.4rem;
    border-radius: 1.2rem;
    margin-bottom: 2.4rem;
    background: linear-gradient(135deg, #0D9488 0%, #0F766E 100%);
}

.member-page-hero--purple {
    background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
}

.member-page-hero--blue {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
}

.member-page-hero__icon {
    width: 5.6rem;
    height: 5.6rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.member-page-hero__icon i {
    font-size: 2.4rem;
    color: #fff;
}

.member-page-hero__text {
    flex: 1;
}

.member-page-hero__title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.4rem;
}

.member-page-hero__subtitle {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* Member Form Elements */
.member-form-group {
    margin-bottom: 2rem;
}

.member-label {
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 0.8rem;
}

.member-label .required {
    color: #EF4444;
}

.member-input {
    width: 100%;
    padding: 1.2rem 1.6rem;
    border: 1px solid #E2E8F0;
    border-radius: 1rem;
    font-size: 1.4rem;
    color: #1E293B;
    background: #fff;
    transition: all 0.2s ease;
}

.member-input:focus {
    outline: none;
    border-color: #14B8A6;
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.member-input::placeholder {
    color: #94A3B8;
}

.member-input-wrap {
    position: relative;
}

.member-input-wrap i {
    position: absolute;
    left: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.6rem;
    color: #94A3B8;
}

.member-input--icon {
    padding-left: 4.4rem;
}

.member-form-actions {
    margin-top: 2.4rem;
    padding-top: 2rem;
    border-top: 1px solid #E2E8F0;
}

/* Member Tips List */
.member-tips-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.member-tips-list li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    font-size: 1.4rem;
    color: #475569;
    border-bottom: 1px solid #F1F5F9;
}

.member-tips-list li:last-child {
    border-bottom: none;
}

.member-tips-list li i {
    font-size: 1.6rem;
    color: #10B981;
}

/* Member Profile Hero */
.member-profile-hero {
    position: relative;
    background: linear-gradient(135deg, #0D9488 0%, #0F766E 50%, #047857 100%);
    border-radius: 1.6rem;
    padding: 3rem;
    margin-bottom: 2rem;
    overflow: hidden;
}

.member-profile-hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.member-profile-hero__pattern {
    position: absolute;
    top: -50%;
    right: -10%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    transform: rotate(15deg);
}

.member-profile-hero__content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2.4rem;
    z-index: 1;
}

.member-profile-hero__avatar {
    position: relative;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff 0%, #E2E8F0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    border: 4px solid rgba(255, 255, 255, 0.3);
}

.member-profile-hero__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.member-profile-hero__avatar > span {
    font-size: 3.6rem;
    font-weight: 700;
    color: #0D9488;
}

.member-profile-hero__upload {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 3.2rem;
    height: 3.2rem;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.member-profile-hero__upload:hover {
    background: #0D9488;
    color: #fff;
}

.member-profile-hero__upload i {
    font-size: 1.4rem;
    color: #0D9488;
}

.member-profile-hero__upload:hover i {
    color: #fff;
}

.member-profile-hero__info {
    flex: 1;
    min-width: 0;
}

.member-profile-hero__name {
    font-size: 2.4rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.4rem;
}

.member-profile-hero__headline {
    font-size: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 1rem;
}

.member-profile-hero__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.6rem;
}

.member-profile-hero__meta span {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.8);
}

.member-profile-hero__meta i {
    font-size: 1.4rem;
}

.member-profile-hero__actions {
    flex-shrink: 0;
}

.member-btn--outline-light {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
}

.member-btn--outline-light:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    color: #fff;
}

.member-profile-hero__completion {
    position: absolute;
    top: 2rem;
    right: 2.4rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 1rem 1.6rem;
    border-radius: 1.2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.member-profile-hero__progress {
    position: relative;
    width: 4.4rem;
    height: 4.4rem;
}

.member-profile-hero__progress svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.member-profile-hero__progress-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 3;
}

.member-profile-hero__progress-fill {
    fill: none;
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.member-profile-hero__progress span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
}

.member-profile-hero__completion-text {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.member-profile-hero__completion-text strong {
    font-size: 1.3rem;
    font-weight: 600;
    color: #fff;
}

.member-profile-hero__completion-text span {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.75);
}

/* Member Profile Actions Bar */
.member-profile-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.6rem 2rem;
    background: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    margin-bottom: 2.4rem;
    position: sticky;
    top: 1rem;
    z-index: 100;
}

.member-profile-actions__back {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.4rem;
    color: #64748B;
    text-decoration: none;
    transition: color 0.2s ease;
}

.member-profile-actions__back:hover {
    color: #0D9488;
}

.member-profile-actions__back i {
    font-size: 1.6rem;
}

.member-profile-actions__right {
    display: flex;
    gap: 1.2rem;
}

/* Responsive */
@media (max-width: 1280px) {
    .member-dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .member-dashboard-grid__sidebar {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .member-main-wrapper {
        margin-left: 0;
    }
    
    .member-sidebar {
        transform: translateX(-100%);
    }
    
    .member-sidebar.active {
        transform: translateX(0);
    }
    
    .member-topbar {
        padding: 0 1.6rem;
        height: 6rem;
    }
    
    .member-mobile-header {
        display: flex;
    }
    
    .member-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .member-content {
        padding: 1.6rem;
    }
    
    .member-dashboard-hero {
        padding: 2rem 1.6rem;
    }
    
    .member-dashboard-hero__content {
        flex-direction: column;
        text-align: center;
    }
    
    .member-dashboard-hero__left {
        flex-direction: column;
    }
    
    .member-dashboard-hero__actions {
        flex-direction: column;
        width: 100%;
    }
    
    .member-dashboard-hero__btn {
        width: 100%;
        justify-content: center;
    }
    
    .member-dashboard-grid__sidebar {
        grid-template-columns: 1fr;
    }
    
    .member-quick-actions {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 576px) {
    .member-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .member-quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Member Profile Hero Responsive */
@media (max-width: 1024px) {
    .member-profile-hero__completion {
        position: relative;
        top: auto;
        right: auto;
        margin-top: 2rem;
    }
    
    .member-profile-hero {
        padding: 2.4rem;
    }
}

@media (max-width: 768px) {
    .member-profile-hero__content {
        flex-direction: column;
        text-align: center;
    }
    
    .member-profile-hero__meta {
        justify-content: center;
    }
    
    .member-profile-hero__completion {
        justify-content: center;
    }
    
    .member-profile-actions {
        flex-direction: column;
        gap: 1.2rem;
        position: relative;
        top: auto;
    }
    
    .member-profile-actions__right {
        width: 100%;
    }
    
    .member-profile-actions__right .member-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 576px) {
    .member-profile-hero {
        padding: 2rem 1.6rem;
    }
    
    .member-profile-hero__avatar {
        width: 8rem;
        height: 8rem;
    }
    
    .member-profile-hero__avatar > span {
        font-size: 2.8rem;
    }
    
    .member-profile-hero__name {
        font-size: 2rem;
    }
    
    .member-profile-hero__meta {
        flex-direction: column;
        gap: 0.8rem;
    }
}

/* ===================================================================
   MEMBER APPLICATIONS PAGE
   =================================================================== */

/* Applications Hero Header */
.member-applications-hero {
    position: relative;
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 50%, #6D28D9 100%);
    border-radius: 1.6rem;
    padding: 2.4rem 3rem;
    margin-bottom: 2rem;
    overflow: hidden;
}

.member-applications-hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.member-applications-hero__pattern {
    position: absolute;
    top: -50%;
    right: -10%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    transform: rotate(15deg);
}

.member-applications-hero__content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2rem;
    z-index: 1;
}

.member-applications-hero__icon {
    width: 6.4rem;
    height: 6.4rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.member-applications-hero__icon i {
    font-size: 2.6rem;
    color: #fff;
}

.member-applications-hero__info {
    flex: 1;
    min-width: 0;
}

.member-applications-hero__title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.4rem;
}

.member-applications-hero__subtitle {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.member-applications-hero__stats {
    display: flex;
    gap: 1.5rem;
    flex-shrink: 0;
}

.member-applications-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    padding: 1.2rem 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.member-applications-hero__stat--success {
    background: rgba(34, 197, 94, 0.3);
    border-color: rgba(34, 197, 94, 0.4);
}

.member-applications-hero__stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.member-applications-hero__stat-label {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 0.4rem;
}

/* Applications Tabs */
.member-applications-tabs {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1.6rem;
    padding: 0.6rem;
    background: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow-x: auto;
}

.member-applications-tab {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.6rem;
    border-radius: 0.8rem;
    font-size: 1.3rem;
    font-weight: 500;
    color: #64748B;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.member-applications-tab:hover {
    background: #F1F5F9;
    color: #1E293B;
}

.member-applications-tab.active {
    background: #8B5CF6;
    color: #fff;
}

.member-applications-tab.active .member-applications-tab__count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.member-applications-tab--success.active {
    background: #10B981;
}

.member-applications-tab--danger.active {
    background: #EF4444;
}

.member-applications-tab__count {
    background: #E2E8F0;
    color: #64748B;
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Applications Filter */
.member-applications-filter {
    margin-bottom: 2rem;
}

.member-applications-search {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 1rem;
    padding: 0.8rem 1.4rem;
}

.member-applications-search i {
    font-size: 1.6rem;
    color: #94A3B8;
}

.member-applications-search input {
    flex: 1;
    border: none;
    font-size: 1.4rem;
    color: #1E293B;
    background: transparent;
}

.member-applications-search input::placeholder {
    color: #94A3B8;
}

.member-applications-search input:focus {
    outline: none;
}

.member-applications-search button {
    background: #8B5CF6;
    border: none;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 0.8rem;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}

.member-applications-search button:hover {
    background: #7C3AED;
}

/* Applications List */
.member-applications-list {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/* Application Card */
.member-application-card {
    display: flex;
    gap: 1.6rem;
    background: #fff;
    border-radius: 1.2rem;
    padding: 1.6rem;
    border: 1px solid #E2E8F0;
    transition: all 0.2s ease;
}

.member-application-card:hover {
    border-color: #8B5CF6;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.1);
}

.member-application-card__logo {
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 1rem;
    background: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.member-application-card__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-application-card__logo span {
    font-size: 2rem;
    font-weight: 700;
    color: #8B5CF6;
}

.member-application-card__content {
    flex: 1;
    min-width: 0;
}

.member-application-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.4rem;
}

.member-application-card__title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.member-application-card__title a {
    color: #1E293B;
    text-decoration: none;
}

.member-application-card__title a:hover {
    color: #8B5CF6;
}

.member-application-card__status {
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    font-size: 1.1rem;
    font-weight: 600;
    white-space: nowrap;
}

.member-application-card__status--pending {
    background: #FEF3C7;
    color: #B45309;
}

.member-application-card__status--reviewing {
    background: #DBEAFE;
    color: #1D4ED8;
}

.member-application-card__status--shortlisted {
    background: #E0E7FF;
    color: #4338CA;
}

.member-application-card__status--interview {
    background: #D1FAE5;
    color: #059669;
}

.member-application-card__status--rejected {
    background: #FEE2E2;
    color: #DC2626;
}

.member-application-card__status--hired {
    background: #DCFCE7;
    color: #15803D;
}

.member-application-card__status--withdrawn {
    background: #F3F4F6;
    color: #6B7280;
}

.member-application-card__company {
    font-size: 1.3rem;
    color: #64748B;
    margin-bottom: 0.8rem;
}

.member-application-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-bottom: 1.2rem;
}

.member-application-card__meta span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.2rem;
    color: #64748B;
}

.member-application-card__meta i {
    font-size: 1.2rem;
    color: #94A3B8;
}

.member-application-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.2rem;
    border-top: 1px solid #F1F5F9;
}

.member-application-card__date {
    font-size: 1.2rem;
    color: #94A3B8;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.member-application-card__actions {
    display: flex;
    gap: 0.8rem;
}

.member-application-card__btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    border-radius: 0.6rem;
    font-size: 1.2rem;
    font-weight: 500;
    border: 1px solid #E2E8F0;
    background: #fff;
    color: #64748B;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.member-application-card__btn:hover {
    border-color: #8B5CF6;
    color: #8B5CF6;
}

.member-application-card__btn--primary {
    background: #8B5CF6;
    border-color: #8B5CF6;
    color: #fff;
}

.member-application-card__btn--primary:hover {
    background: #7C3AED;
    border-color: #7C3AED;
    color: #fff;
}

.member-application-card__btn--danger {
    color: #EF4444;
    border-color: #FCA5A5;
}

.member-application-card__btn--danger:hover {
    background: #FEE2E2;
    border-color: #EF4444;
}

/* Applications Pagination */
.member-applications-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    padding: 2rem 0;
}

.member-applications-pagination__btn {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.8rem;
    background: #fff;
    border: 1px solid #E2E8F0;
    color: #64748B;
    text-decoration: none;
    transition: all 0.2s ease;
}

.member-applications-pagination__btn:hover {
    border-color: #8B5CF6;
    color: #8B5CF6;
}

.member-applications-pagination__info {
    font-size: 1.4rem;
    color: #64748B;
}

/* Applications Empty State */
.member-applications-empty {
    text-align: center;
    padding: 5rem 2rem;
    background: #fff;
    border-radius: 1.2rem;
    border: 1px solid #E2E8F0;
}

.member-applications-empty__icon {
    width: 8rem;
    height: 8rem;
    background: #F1F5F9;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.6rem;
}

.member-applications-empty__icon i {
    font-size: 3rem;
    color: #94A3B8;
}

.member-applications-empty__title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #1E293B;
    margin: 0 0 0.8rem;
}

.member-applications-empty__desc {
    font-size: 1.4rem;
    color: #64748B;
    margin: 0 0 2rem;
}

/* Applications Responsive */
@media (max-width: 992px) {
    .member-applications-hero__stats {
        display: none;
    }
}

@media (max-width: 768px) {
    .member-applications-hero {
        padding: 2rem 1.6rem;
    }
    
    .member-applications-hero__content {
        flex-direction: column;
        text-align: center;
    }
    
    .member-applications-tabs {
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    .member-application-card {
        flex-direction: column;
    }
    
    .member-application-card__logo {
        width: 4.8rem;
        height: 4.8rem;
    }
    
    .member-application-card__header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .member-application-card__footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .member-application-card__actions {
        width: 100%;
        flex-wrap: wrap;
    }
    
    .member-application-card__btn {
        flex: 1;
        justify-content: center;
    }
}

/* ===================================================================
   MEMBER SAVED JOBS PAGE
   =================================================================== */

/* Saved Jobs Hero Header */
.member-saved-jobs-hero {
    position: relative;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 50%, #B45309 100%);
    border-radius: 1.6rem;
    padding: 2.4rem 3rem;
    margin-bottom: 2rem;
    overflow: hidden;
}

.member-saved-jobs-hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.member-saved-jobs-hero__pattern {
    position: absolute;
    top: -50%;
    right: -10%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    transform: rotate(15deg);
}

.member-saved-jobs-hero__content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2rem;
    z-index: 1;
}

.member-saved-jobs-hero__icon {
    width: 6.4rem;
    height: 6.4rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.member-saved-jobs-hero__icon i {
    font-size: 2.6rem;
    color: #fff;
}

.member-saved-jobs-hero__info {
    flex: 1;
    min-width: 0;
}

.member-saved-jobs-hero__title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.4rem;
}

.member-saved-jobs-hero__subtitle {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.member-saved-jobs-hero__count {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.2);
    padding: 1.2rem 2.4rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    flex-shrink: 0;
}

.member-saved-jobs-hero__count-value {
    font-size: 2.4rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.member-saved-jobs-hero__count-label {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.3rem;
}

/* Saved Jobs List */
.member-saved-jobs-list {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

/* Saved Job Card */
.member-saved-job-card {
    display: flex;
    gap: 1.6rem;
    background: #fff;
    border-radius: 1.2rem;
    padding: 1.6rem;
    border: 1px solid #E2E8F0;
    transition: all 0.2s ease;
}

.member-saved-job-card:hover {
    border-color: #F59E0B;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.1);
}

.member-saved-job-card--expired {
    opacity: 0.7;
    background: #F9FAFB;
}

.member-saved-job-card--expired:hover {
    border-color: #E2E8F0;
    box-shadow: none;
}

.member-saved-job-card__logo {
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 1rem;
    background: #FEF3C7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.member-saved-job-card__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-saved-job-card__logo span {
    font-size: 2rem;
    font-weight: 700;
    color: #D97706;
}

.member-saved-job-card__content {
    flex: 1;
    min-width: 0;
}

.member-saved-job-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.4rem;
}

.member-saved-job-card__title-wrap {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.member-saved-job-card__title {
    font-size: 1.5rem;
    font-weight: 600;
    margin: 0;
}

.member-saved-job-card__title a {
    color: #1E293B;
    text-decoration: none;
}

.member-saved-job-card__title a:hover {
    color: #F59E0B;
}

.member-saved-job-card__badges {
    display: flex;
    gap: 0.4rem;
}

.member-saved-job-card__badge {
    padding: 0.2rem 0.6rem;
    border-radius: 0.4rem;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
}

.member-saved-job-card__badge--urgent {
    background: #FEE2E2;
    color: #DC2626;
}

.member-saved-job-card__badge--hot {
    background: #FFEDD5;
    color: #EA580C;
}

.member-saved-job-card__badge--expired {
    background: #F3F4F6;
    color: #6B7280;
}

.member-saved-job-card__remove {
    width: 3.2rem;
    height: 3.2rem;
    border: 1px solid #E2E8F0;
    background: #fff;
    border-radius: 0.6rem;
    color: #94A3B8;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.member-saved-job-card__remove:hover {
    border-color: #EF4444;
    color: #EF4444;
    background: #FEF2F2;
}

.member-saved-job-card__company {
    font-size: 1.3rem;
    color: #64748B;
    margin-bottom: 0.8rem;
}

.member-saved-job-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-bottom: 1.2rem;
}

.member-saved-job-card__meta span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.2rem;
    color: #64748B;
}

.member-saved-job-card__meta i {
    font-size: 1.2rem;
    color: #94A3B8;
}

.member-saved-job-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.2rem;
    border-top: 1px solid #F1F5F9;
}

.member-saved-job-card__saved-time {
    font-size: 1.2rem;
    color: #F59E0B;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.member-saved-job-card__actions {
    display: flex;
    gap: 0.8rem;
}

.member-saved-job-card__btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    border-radius: 0.6rem;
    font-size: 1.2rem;
    font-weight: 500;
    border: 1px solid #E2E8F0;
    background: #fff;
    color: #64748B;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.member-saved-job-card__btn:hover {
    border-color: #F59E0B;
    color: #F59E0B;
}

.member-saved-job-card__btn--primary {
    background: #F59E0B;
    border-color: #F59E0B;
    color: #fff;
}

.member-saved-job-card__btn--primary:hover {
    background: #D97706;
    border-color: #D97706;
    color: #fff;
}

/* Saved Jobs Empty State */
.member-saved-jobs-empty {
    text-align: center;
    padding: 5rem 2rem;
    background: #fff;
    border-radius: 1.2rem;
    border: 1px solid #E2E8F0;
}

.member-saved-jobs-empty__icon {
    width: 8rem;
    height: 8rem;
    background: #FEF3C7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.6rem;
}

.member-saved-jobs-empty__icon i {
    font-size: 3rem;
    color: #F59E0B;
}

.member-saved-jobs-empty__title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #1E293B;
    margin: 0 0 0.8rem;
}

.member-saved-jobs-empty__desc {
    font-size: 1.4rem;
    color: #64748B;
    margin: 0 0 2rem;
}

/* Saved Jobs Tips */
.member-saved-jobs-tips {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
    margin-top: 2rem;
    padding: 1.6rem;
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-radius: 1.2rem;
}

.member-saved-jobs-tips__icon {
    width: 4rem;
    height: 4rem;
    background: rgba(245, 158, 11, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.member-saved-jobs-tips__icon i {
    font-size: 1.8rem;
    color: #B45309;
}

.member-saved-jobs-tips__content h4 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #92400E;
    margin: 0 0 0.4rem;
}

.member-saved-jobs-tips__content p {
    font-size: 1.3rem;
    color: #78350F;
    margin: 0;
    line-height: 1.5;
}

/* Saved Jobs Responsive */
@media (max-width: 992px) {
    .member-saved-jobs-hero__count {
        display: none;
    }
}

@media (max-width: 768px) {
    .member-saved-jobs-hero {
        padding: 2rem 1.6rem;
    }
    
    .member-saved-jobs-hero__content {
        flex-direction: column;
        text-align: center;
    }
    
    .member-saved-job-card {
        flex-direction: column;
    }
    
    .member-saved-job-card__logo {
        width: 4.8rem;
        height: 4.8rem;
    }
    
    .member-saved-job-card__header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .member-saved-job-card__remove {
        position: absolute;
        top: 1.2rem;
        right: 1.2rem;
    }
    
    .member-saved-job-card {
        position: relative;
    }
    
    .member-saved-job-card__footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .member-saved-job-card__actions {
        width: 100%;
    }
    
    .member-saved-job-card__btn {
        flex: 1;
        justify-content: center;
    }
    
    .member-saved-jobs-tips {
        flex-direction: column;
        text-align: center;
    }
    
    .member-saved-jobs-tips__icon {
        margin: 0 auto;
    }
}

/* ===================================================================
   MEMBER INTERVIEWS PAGE
   =================================================================== */

/* Interviews Hero Header */
.member-interviews-hero {
    position: relative;
    background: linear-gradient(135deg, #06B6D4 0%, #0891B2 50%, #0E7490 100%);
    border-radius: 1.6rem;
    padding: 2.4rem 3rem;
    margin-bottom: 2rem;
    overflow: hidden;
}

.member-interviews-hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.member-interviews-hero__pattern {
    position: absolute;
    top: -50%;
    right: -10%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    transform: rotate(15deg);
}

.member-interviews-hero__content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2rem;
    z-index: 1;
}

.member-interviews-hero__icon {
    width: 6.4rem;
    height: 6.4rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.member-interviews-hero__icon i {
    font-size: 2.6rem;
    color: #fff;
}

.member-interviews-hero__info {
    flex: 1;
    min-width: 0;
}

.member-interviews-hero__title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.4rem;
}

.member-interviews-hero__subtitle {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.member-interviews-hero__stats {
    display: flex;
    gap: 1.5rem;
    flex-shrink: 0;
}

.member-interviews-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    padding: 1.2rem 2rem;
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.member-interviews-hero__stat--success {
    background: rgba(34, 197, 94, 0.3);
    border-color: rgba(34, 197, 94, 0.4);
}

.member-interviews-hero__stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.member-interviews-hero__stat-label {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 0.4rem;
}

/* Interviews Tabs */
.member-interviews-tabs {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 2rem;
    padding: 0.6rem;
    background: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow-x: auto;
}

.member-interviews-tab {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.6rem;
    border-radius: 0.8rem;
    font-size: 1.3rem;
    font-weight: 500;
    color: #64748B;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.member-interviews-tab:hover {
    background: #F1F5F9;
    color: #1E293B;
}

.member-interviews-tab.active {
    background: #06B6D4;
    color: #fff;
}

.member-interviews-tab.active .member-interviews-tab__count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.member-interviews-tab--danger.active {
    background: #EF4444;
}

.member-interviews-tab__count {
    background: #E2E8F0;
    color: #64748B;
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Interviews Grid */
.member-interviews-grid {
    display: grid;
    grid-template-columns: 1fr 32rem;
    gap: 2rem;
}

.member-interviews-main {
    min-width: 0;
}

.member-interviews-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

/* Interview List */
.member-interviews-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Interview Group */
.member-interview-group {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.member-interview-group__header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.member-interview-group__dot {
    width: 1rem;
    height: 1rem;
    background: #06B6D4;
    border-radius: 50%;
}

.member-interview-group__label {
    font-size: 1.4rem;
    font-weight: 600;
    color: #1E293B;
}

.member-interview-group__date {
    font-size: 1.3rem;
    color: #64748B;
}

/* Interview Card */
.member-interview-card {
    display: flex;
    gap: 1.6rem;
    background: #fff;
    border-radius: 1.2rem;
    padding: 1.6rem;
    border: 1px solid #E2E8F0;
    transition: all 0.2s ease;
}

.member-interview-card:hover {
    border-color: #06B6D4;
    box-shadow: 0 4px 16px rgba(6, 182, 212, 0.1);
}

.member-interview-card__time {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 7rem;
    padding: 1.2rem;
    background: linear-gradient(135deg, #06B6D4 0%, #0891B2 100%);
    border-radius: 1rem;
    flex-shrink: 0;
}

.member-interview-card__hour {
    font-size: 1.6rem;
    font-weight: 700;
    color: #fff;
}

.member-interview-card__duration {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 0.2rem;
}

.member-interview-card__content {
    flex: 1;
    min-width: 0;
}

.member-interview-card__header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.6rem;
}

.member-interview-card__type {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    border-radius: 0.4rem;
    font-size: 1.1rem;
    font-weight: 500;
}

.member-interview-card__type--online {
    background: #DBEAFE;
    color: #1D4ED8;
}

.member-interview-card__type--onsite {
    background: #FFEDD5;
    color: #EA580C;
}

.member-interview-card__type--phone {
    background: #E0E7FF;
    color: #4338CA;
}

.member-interview-card__status {
    padding: 0.3rem 0.8rem;
    border-radius: 2rem;
    font-size: 1.1rem;
    font-weight: 500;
}

.member-interview-card__status--pending {
    background: #FEF3C7;
    color: #B45309;
}

.member-interview-card__status--confirmed {
    background: #D1FAE5;
    color: #059669;
}

.member-interview-card__status--completed {
    background: #DCFCE7;
    color: #15803D;
}

.member-interview-card__status--cancelled {
    background: #FEE2E2;
    color: #DC2626;
}

.member-interview-card__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1E293B;
    margin: 0 0 0.6rem;
}

.member-interview-card__company {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.6rem;
}

.member-interview-card__logo {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.4rem;
    object-fit: cover;
}

.member-interview-card__logo-placeholder {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.4rem;
    background: #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: #64748B;
}

.member-interview-card__company-name {
    font-size: 1.3rem;
    color: #64748B;
}

.member-interview-card__location {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.2rem;
    color: #94A3B8;
    margin-bottom: 1rem;
}

.member-interview-card__location i {
    font-size: 1.2rem;
}

.member-interview-card__actions {
    display: flex;
    gap: 0.8rem;
    padding-top: 1rem;
    border-top: 1px solid #F1F5F9;
}

.member-interview-card__btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.2rem;
    border-radius: 0.6rem;
    font-size: 1.2rem;
    font-weight: 500;
    border: 1px solid #E2E8F0;
    background: #fff;
    color: #64748B;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.member-interview-card__btn:hover {
    border-color: #06B6D4;
    color: #06B6D4;
}

.member-interview-card__btn--primary {
    background: #06B6D4;
    border-color: #06B6D4;
    color: #fff;
}

.member-interview-card__btn--primary:hover {
    background: #0891B2;
    border-color: #0891B2;
    color: #fff;
}

.member-interview-card__btn--danger {
    color: #EF4444;
    border-color: #FCA5A5;
}

.member-interview-card__btn--danger:hover {
    background: #FEE2E2;
    border-color: #EF4444;
}

/* Interviews Widget */
.member-interviews-widget {
    background: #fff;
    border-radius: 1.2rem;
    padding: 1.6rem;
    border: 1px solid #E2E8F0;
}

.member-interviews-widget--gradient {
    background: linear-gradient(135deg, #ECFEFF 0%, #CFFAFE 100%);
    border: none;
}

.member-interviews-widget__title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #1E293B;
    margin: 0 0 1.2rem;
}

/* Interviews Calendar */
.member-interviews-calendar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.2rem;
}

.member-interviews-calendar__title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #1E293B;
}

.member-interviews-calendar__nav {
    width: 3rem;
    height: 3rem;
    border: 1px solid #E2E8F0;
    background: #fff;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.member-interviews-calendar__nav:hover {
    border-color: #06B6D4;
    color: #06B6D4;
}

.member-interviews-calendar__weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.4rem;
    margin-bottom: 0.8rem;
}

.member-interviews-calendar__weekdays span {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 500;
    color: #94A3B8;
    padding: 0.4rem;
}

.member-interviews-calendar__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.4rem;
}

.member-interviews-calendar__day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #1E293B;
    border-radius: 0.6rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.member-interviews-calendar__day:hover {
    background: #F1F5F9;
}

.member-interviews-calendar__day--disabled {
    color: #CBD5E1;
    cursor: default;
}

.member-interviews-calendar__day--disabled:hover {
    background: transparent;
}

.member-interviews-calendar__day--today {
    background: #06B6D4;
    color: #fff;
    font-weight: 600;
}

.member-interviews-calendar__day--today:hover {
    background: #0891B2;
}

.member-interviews-calendar__day--event {
    position: relative;
}

.member-interviews-calendar__day--event::after {
    content: '';
    position: absolute;
    bottom: 0.3rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.4rem;
    height: 0.4rem;
    background: #06B6D4;
    border-radius: 50%;
}

.member-interviews-calendar__day--today.member-interviews-calendar__day--event::after {
    background: #fff;
}

/* Interviews Stats */
.member-interviews-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.member-interviews-stat {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.member-interviews-stat__icon {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
}

.member-interviews-stat__icon--blue {
    background: #DBEAFE;
    color: #1D4ED8;
}

.member-interviews-stat__icon--orange {
    background: #FFEDD5;
    color: #EA580C;
}

.member-interviews-stat__icon--green {
    background: #DCFCE7;
    color: #15803D;
}

.member-interviews-stat__info {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.member-interviews-stat__label {
    font-size: 1.3rem;
    color: #64748B;
}

.member-interviews-stat__value {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1E293B;
}

/* Interviews Tips */
.member-interviews-tips__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(6, 182, 212, 0.2);
    color: #0E7490;
    padding: 0.4rem 0.8rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.8rem;
}

.member-interviews-tips__title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #0E7490;
    margin: 0 0 0.4rem;
}

.member-interviews-tips__desc {
    font-size: 1.3rem;
    color: #155E75;
    margin: 0;
    line-height: 1.5;
}

/* Interviews Empty State */
.member-interviews-empty {
    text-align: center;
    padding: 5rem 2rem;
    background: #fff;
    border-radius: 1.2rem;
    border: 1px solid #E2E8F0;
}

.member-interviews-empty__icon {
    width: 8rem;
    height: 8rem;
    background: #ECFEFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.6rem;
}

.member-interviews-empty__icon i {
    font-size: 3rem;
    color: #06B6D4;
}

.member-interviews-empty__title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #1E293B;
    margin: 0 0 0.8rem;
}

.member-interviews-empty__desc {
    font-size: 1.4rem;
    color: #64748B;
    margin: 0 0 2rem;
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

/* Interviews Responsive */
@media (max-width: 1200px) {
    .member-interviews-grid {
        grid-template-columns: 1fr 28rem;
    }
}

@media (max-width: 992px) {
    .member-interviews-hero__stats {
        display: none;
    }
    
    .member-interviews-grid {
        grid-template-columns: 1fr;
    }
    
    .member-interviews-sidebar {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1.6rem;
    }
    
    .member-interviews-sidebar > .member-interviews-widget:last-child {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .member-interviews-hero {
        padding: 2rem 1.6rem;
    }
    
    .member-interviews-hero__content {
        flex-direction: column;
        text-align: center;
    }
    
    .member-interviews-tabs {
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    
    .member-interview-card {
        flex-direction: column;
    }
    
    .member-interview-card__time {
        flex-direction: row;
        justify-content: flex-start;
        gap: 0.8rem;
        padding: 1rem 1.2rem;
    }
    
    .member-interview-card__actions {
        flex-wrap: wrap;
    }
    
    .member-interview-card__btn {
        flex: 1;
        justify-content: center;
    }
    
    .member-interviews-sidebar {
        grid-template-columns: 1fr;
    }
    
    .member-interviews-sidebar > .member-interviews-widget:last-child {
        grid-column: auto;
    }
}

/* ===================================================================
   MEMBER SETTINGS PAGE
   =================================================================== */

/* Settings Hero Header */
.member-settings-hero {
    position: relative;
    background: linear-gradient(135deg, #64748B 0%, #475569 50%, #334155 100%);
    border-radius: 1.6rem;
    padding: 2.4rem 3rem;
    margin-bottom: 2rem;
    overflow: hidden;
}

.member-settings-hero__bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.member-settings-hero__pattern {
    position: absolute;
    top: -50%;
    right: -10%;
    width: 60%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    transform: rotate(15deg);
}

.member-settings-hero__content {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2rem;
    z-index: 1;
}

.member-settings-hero__icon {
    width: 6.4rem;
    height: 6.4rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.member-settings-hero__icon i {
    font-size: 2.6rem;
    color: #fff;
}

.member-settings-hero__info {
    flex: 1;
    min-width: 0;
}

.member-settings-hero__title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.4rem;
}

.member-settings-hero__subtitle {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* Settings Container */
.member-settings-container {
    display: flex;
    gap: 2rem;
}

/* Settings Tabs */
.member-settings-tabs {
    width: 24rem;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background: #fff;
    border-radius: 1.2rem;
    padding: 1rem;
    border: 1px solid #E2E8F0;
    height: fit-content;
    position: sticky;
    top: 2rem;
}

.member-settings-tab {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.2rem 1.4rem;
    border-radius: 0.8rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: #64748B;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}

.member-settings-tab:hover {
    background: #F1F5F9;
    color: #1E293B;
}

.member-settings-tab.active {
    background: #0D9488;
    color: #fff;
}

.member-settings-tab i {
    font-size: 1.6rem;
    width: 2rem;
    text-align: center;
}

/* Settings Content */
.member-settings-content {
    flex: 1;
    min-width: 0;
}

.member-settings-panel {
    display: none;
}

.member-settings-panel.active {
    display: block;
}

/* Settings Card */
.member-settings-card {
    background: #fff;
    border-radius: 1.2rem;
    border: 1px solid #E2E8F0;
    margin-bottom: 1.6rem;
    overflow: hidden;
}

.member-settings-card:last-child {
    margin-bottom: 0;
}

.member-settings-card--danger {
    border-color: #FCA5A5;
}

.member-settings-card__header {
    padding: 1.6rem 2rem;
    border-bottom: 1px solid #F1F5F9;
}

.member-settings-card__header h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1E293B;
    margin: 0 0 0.3rem;
}

.member-settings-card__header p {
    font-size: 1.3rem;
    color: #64748B;
    margin: 0;
}

.member-settings-card--danger .member-settings-card__header {
    background: #FEF2F2;
}

.member-settings-card--danger .member-settings-card__header h3 {
    color: #DC2626;
}

.member-settings-card__body {
    padding: 1.6rem 2rem;
}

.member-settings-card__footer {
    padding: 1.2rem 2rem;
    background: #F8FAFC;
    border-top: 1px solid #F1F5F9;
}

/* Settings Toggle */
.member-settings-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.4rem 0;
    border-bottom: 1px solid #F1F5F9;
}

.member-settings-toggle:first-child {
    padding-top: 0;
}

.member-settings-toggle:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.member-settings-toggle__info {
    flex: 1;
    padding-right: 2rem;
}

.member-settings-toggle__title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 0.2rem;
}

.member-settings-toggle__desc {
    font-size: 1.3rem;
    color: #64748B;
}

/* Member Switch */
.member-switch {
    position: relative;
    display: inline-block;
    width: 4.8rem;
    height: 2.6rem;
    flex-shrink: 0;
}

.member-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.member-switch__slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #CBD5E1;
    transition: 0.3s;
    border-radius: 2.6rem;
}

.member-switch__slider:before {
    position: absolute;
    content: "";
    height: 2rem;
    width: 2rem;
    left: 0.3rem;
    bottom: 0.3rem;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.member-switch input:checked + .member-switch__slider {
    background-color: #0D9488;
}

.member-switch input:checked + .member-switch__slider:before {
    transform: translateX(2.2rem);
}

/* Settings Info */
.member-settings-info {
    display: flex;
    align-items: center;
    padding: 1.2rem 0;
    border-bottom: 1px solid #F1F5F9;
}

.member-settings-info:last-child {
    border-bottom: none;
}

.member-settings-info__label {
    width: 16rem;
    font-size: 1.3rem;
    color: #64748B;
    flex-shrink: 0;
}

.member-settings-info__value {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.4rem;
    color: #1E293B;
}

.member-settings-info__value i {
    color: #94A3B8;
    font-size: 1.4rem;
}

.member-settings-info__action {
    margin-left: auto;
    font-size: 1.3rem;
    color: #0D9488;
    text-decoration: none;
    font-weight: 500;
}

.member-settings-info__action:hover {
    text-decoration: underline;
}

/* Settings Social */
.member-settings-social {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.member-settings-social__item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.2rem;
    background: #F8FAFC;
    border-radius: 1rem;
}

.member-settings-social__icon {
    width: 4rem;
    height: 4rem;
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #fff;
}

.member-settings-social__icon--google {
    background: #EA4335;
}

.member-settings-social__icon--facebook {
    background: #1877F2;
}

.member-settings-social__info {
    flex: 1;
}

.member-settings-social__name {
    font-size: 1.4rem;
    font-weight: 600;
    color: #1E293B;
}

.member-settings-social__status {
    font-size: 1.2rem;
    color: #64748B;
}

/* Settings Danger */
.member-settings-danger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.member-settings-danger__title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #DC2626;
    margin-bottom: 0.3rem;
}

.member-settings-danger__desc {
    font-size: 1.3rem;
    color: #64748B;
}

/* Member Btn Danger */
.member-btn--danger {
    background: #EF4444;
    border-color: #EF4444;
    color: #fff;
}

.member-btn--danger:hover {
    background: #DC2626;
    border-color: #DC2626;
    color: #fff;
}

/* Settings Responsive */
@media (max-width: 992px) {
    .member-settings-container {
        flex-direction: column;
    }
    
    .member-settings-tabs {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        position: relative;
        top: auto;
    }
    
    .member-settings-tab {
        flex-shrink: 0;
    }
}

@media (max-width: 768px) {
    .member-settings-hero {
        padding: 2rem 1.6rem;
    }
    
    .member-settings-hero__content {
        flex-direction: column;
        text-align: center;
    }
    
    .member-settings-card__body {
        padding: 1.2rem 1.4rem;
    }
    
    .member-settings-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.6rem;
    }
    
    .member-settings-info__label {
        width: auto;
    }
    
    .member-settings-danger {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .member-settings-danger .member-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===================================================================
   EMPLOYER LAYOUT - SIDEBAR & MAIN CONTENT
   =================================================================== */

.employer-layout {
    display: flex;
    min-height: 100vh;
    background: #f8fafc;
}

/* Main Wrapper - Contains topbar and main content */
.employer-main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 280px;
    min-height: 100vh;
}

/* ===================================================================
   EMPLOYER TOPBAR
   =================================================================== */
.employer-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    padding: 0 2.4rem;
    height: 7rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.employer-topbar__left {
    display: flex;
    align-items: center;
}

.employer-topbar__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.employer-topbar__logo img {
    height: 4rem;
    width: auto;
    object-fit: contain;
}

.employer-topbar__logo-text {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1E293B;
}

.employer-topbar__logo-text i {
    font-size: 2rem;
    color: #6366F1;
}

.employer-topbar__logo:hover {
    text-decoration: none;
}

.employer-topbar__right {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.employer-topbar__item {
    position: relative;
}

.employer-topbar__btn {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748B;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    transition: all 0.2s ease;
    position: relative;
    text-decoration: none;
}

.employer-topbar__btn i {
    font-size: 1.8rem;
}

.employer-topbar__btn:hover {
    background: #EEF2FF;
    color: #6366F1;
    border-color: #C7D2FE;
    text-decoration: none;
}

.employer-topbar__badge {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    min-width: 1.8rem;
    height: 1.8rem;
    padding: 0 0.5rem;
    background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
}

.employer-topbar__divider {
    width: 1px;
    height: 3.2rem;
    background: #E2E8F0;
    margin: 0 0.8rem;
}

/* User Dropdown */
.employer-topbar__user {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1.2rem 0.6rem 0.6rem;
    border-radius: 1rem;
    text-decoration: none;
    transition: all 0.2s ease;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
}

.employer-topbar__user:hover {
    background: #EEF2FF;
    border-color: #C7D2FE;
    text-decoration: none;
}

.employer-topbar__avatar {
    width: 4rem;
    height: 4rem;
    border-radius: 0.8rem;
    overflow: hidden;
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.employer-topbar__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employer-topbar__letter {
    font-size: 1.6rem;
    font-weight: 600;
    color: #fff;
}

.employer-topbar__user-info {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.employer-topbar__user-name {
    font-size: 1.4rem;
    font-weight: 600;
    color: #1E293B;
    line-height: 1.2;
}

.employer-topbar__user-role {
    font-size: 1.2rem;
    color: #64748B;
    line-height: 1.2;
}

.employer-topbar__arrow {
    font-size: 1.2rem;
    color: #94A3B8;
    margin-left: 0.4rem;
    transition: transform 0.2s ease;
}

.employer-topbar__user[aria-expanded="true"] .employer-topbar__arrow {
    transform: rotate(180deg);
}

/* Employer Dropdown Menu */
.employer-dropdown {
    min-width: 28rem;
    padding: 0;
    border: 1px solid #E2E8F0;
    border-radius: 1.2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    margin-top: 0.8rem !important;
}

.employer-dropdown__header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.6rem;
    background: linear-gradient(135deg, #F8FAFC 0%, #F1F5F9 100%);
}

.employer-dropdown__avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.employer-dropdown__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employer-dropdown__letter {
    font-size: 1.8rem;
    font-weight: 600;
    color: #fff;
}

.employer-dropdown__info {
    flex: 1;
    min-width: 0;
}

.employer-dropdown__name {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.employer-dropdown__email {
    font-size: 1.3rem;
    color: #64748B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.employer-dropdown__divider {
    height: 1px;
    background: #E2E8F0;
    margin: 0;
}

.employer-dropdown__item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.2rem 1.6rem;
    color: #475569;
    font-size: 1.4rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

.employer-dropdown__item i {
    font-size: 1.6rem;
    width: 2rem;
    text-align: center;
    color: #94A3B8;
    transition: color 0.2s ease;
}

.employer-dropdown__item:hover {
    background: #F8FAFC;
    color: #1E293B;
    text-decoration: none;
}

.employer-dropdown__item:hover i {
    color: #6366F1;
}

.employer-dropdown__item--danger {
    color: #DC2626;
}

.employer-dropdown__item--danger i {
    color: #DC2626;
}

.employer-dropdown__item--danger:hover {
    background: #FEF2F2;
    color: #B91C1C;
}

.employer-dropdown__item--danger:hover i {
    color: #B91C1C;
}

/* Responsive */
@media (max-width: 1024px) {
    .employer-main-wrapper {
        margin-left: 0;
    }
    
    .employer-topbar {
        padding: 0 1.6rem;
        height: 6rem;
    }
}

@media (max-width: 768px) {
    .employer-topbar {
        height: 5.6rem;
        padding: 0 1.2rem;
    }
    
    .employer-topbar__logo img {
        height: 3.2rem;
    }
    
    .employer-topbar__btn {
        width: 4rem;
        height: 4rem;
    }
    
    .employer-topbar__btn i {
        font-size: 1.6rem;
    }
    
    .employer-topbar__user {
        padding: 0.4rem;
    }
    
    .employer-topbar__avatar {
        width: 3.6rem;
        height: 3.6rem;
    }
    
    .employer-dropdown {
        min-width: 26rem;
    }
}

/* Sidebar */
.employer-sidebar {
    width: 280px;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
}

.employer-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.employer-sidebar__logo {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
}

.employer-sidebar__logo i {
    font-size: 2rem;
    color: #6366f1;
}

.employer-sidebar__logo:hover {
    color: #fff;
}

.employer-sidebar__toggle {
    width: 3.2rem;
    height: 3.2rem;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 0.6rem;
    cursor: pointer;
    display: none;
}

/* Company Info in Sidebar */
.employer-sidebar__company {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    margin: 1.5rem;
    border-radius: 1rem;
}

.employer-sidebar__avatar {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

.employer-sidebar__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employer-sidebar__info {
    flex: 1;
    min-width: 0;
}

.employer-sidebar__name {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.employer-sidebar__plan {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #f59e0b;
    font-size: 1.2rem;
    margin-top: 0.3rem;
}

.employer-sidebar__plan i {
    font-size: 1rem;
}

/* Sidebar Navigation */
.employer-sidebar__nav {
    flex: 1;
    overflow-y: auto;
    padding: 0 1rem;
}

.employer-sidebar__section {
    margin-bottom: 1.5rem;
}

.employer-sidebar__section-title {
    color: rgba(255, 255, 255, 0.4);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 0.8rem 1rem;
    margin-bottom: 0.4rem;
}

.employer-sidebar__link {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1rem 1.2rem;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    border-radius: 0.8rem;
    font-size: 1.4rem;
    transition: all 0.2s ease;
    margin-bottom: 0.2rem;
}

.employer-sidebar__link i {
    width: 2rem;
    font-size: 1.6rem;
    text-align: center;
}

.employer-sidebar__link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.employer-sidebar__link.active {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-weight: 500;
}

.employer-sidebar__badge {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border-radius: 1rem;
    min-width: 2.2rem;
    text-align: center;
}

.employer-sidebar__badge--new {
    background: #10b981;
}

.employer-sidebar__badge--warning {
    background: #f59e0b;
}

/* Sidebar Footer */
.employer-sidebar__footer {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: auto;
}

.employer-sidebar__link--danger {
    color: #f87171;
}

.employer-sidebar__link--danger:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

/* Sidebar Overlay */
.employer-sidebar__overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* Main Content */
.employer-main {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.employer-content {
    padding: 3rem;
    width: 100%;
    max-width: 100%;
    flex: 1;
}

/* Cho màn hình rất lớn (> 1920px), giới hạn max-width để tránh content quá rộng */
@media (min-width: 1921px) {
    .employer-content {
        margin: 0 auto;
        padding: 3rem 4rem;
    }
}

/* Mobile Header */
.employer-mobile-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    z-index: 100;
}

.employer-mobile-header__toggle {
    width: 4rem;
    height: 4rem;
    border: none;
    background: transparent;
    color: #334155;
    font-size: 2rem;
    cursor: pointer;
}

.employer-mobile-header__logo {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: #1e293b;
    font-size: 1.6rem;
    font-weight: 700;
    text-decoration: none;
}

.employer-mobile-header__logo i {
    color: #6366f1;
}

.employer-mobile-header__user {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    overflow: hidden;
}

.employer-mobile-header__user img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Page Header */
.employer-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.employer-page-header__title {
    font-size: 2.4rem;
    font-weight: 700;
    color: #0f172a;
    margin: 0;
}

.employer-page-header__subtitle {
    color: #64748b;
    font-size: 1.4rem;
    margin: 0.5rem 0 0;
}

/* Tabs */
.employer-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0;
    overflow-x: auto;
}

.employer-tab {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.2rem 1.8rem;
    color: #64748b;
    font-size: 1.4rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.employer-tab:hover {
    color: #6366f1;
}

.employer-tab.active {
    color: #6366f1;
    border-bottom-color: #6366f1;
}

.employer-tab__count {
    background: #f1f5f9;
    color: #64748b;
    font-size: 1.2rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border-radius: 1rem;
}

.employer-tab.active .employer-tab__count {
    background: #e0e7ff;
    color: #6366f1;
}

.employer-tab__count--warning {
    background: #fef3c7 !important;
    color: #d97706 !important;
}

/* Filter Bar */
.employer-filter {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.employer-filter__search {
    flex: 1;
    min-width: 250px;
    position: relative;
}

.employer-filter__search i {
    position: absolute;
    left: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1.6rem;
}

.employer-filter__input {
    width: 100%;
    padding: 1.2rem 1.4rem 1.2rem 4.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    font-size: 1.4rem;
    color: #334155;
    background: #fff;
}

.employer-filter__input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
    outline: none;
}

.employer-filter__select {
    min-width: 180px;
}

/* Job Card in List */
.employer-job-card {
    display: flex;
    background: #fff;
    border-radius: 1.2rem;
    border: 1px solid #e2e8f0;
    margin-bottom: 1.5rem;
    overflow: hidden;
    transition: all 0.2s ease;
}

.employer-job-card:hover {
    border-color: #c7d2fe;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.1);
}

.employer-job-card__main {
    flex: 1;
    padding: 2rem;
}

.employer-job-card__header {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.employer-job-card__title {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0;
}

.employer-job-card__title a {
    color: #0f172a;
    text-decoration: none;
}

.employer-job-card__title a:hover {
    color: #6366f1;
}

.employer-job-card__badges {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
}

.employer-badge {
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: 0.5rem;
}

.employer-badge--urgent {
    background: #fef2f2;
    color: #dc2626;
}

.employer-badge--hot {
    background: #fef3c7;
    color: #d97706;
}

.employer-job-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.2rem;
}

.employer-job-card__meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #64748b;
    font-size: 1.3rem;
}

.employer-job-card__meta i {
    color: #94a3b8;
}

.employer-job-card__stats {
    display: flex;
    gap: 2rem;
}

.employer-job-card__stat {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: #64748b;
    font-size: 1.3rem;
}

.employer-job-card__stat i {
    color: #94a3b8;
}

.employer-job-card__sidebar {
    width: 200px;
    background: #f8fafc;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    border-left: 1px solid #e2e8f0;
}

.employer-job-card__status {
    margin-bottom: 0.5rem;
}

.employer-job-card__actions {
    display: flex;
    gap: 0.8rem;
}

.employer-job-card__date {
    font-size: 1.2rem;
    color: #94a3b8;
}

/* Empty State */
.employer-empty {
    text-align: center;
    padding: 6rem 2rem;
    background: #fff;
    border-radius: 1.2rem;
    border: 2px dashed #e2e8f0;
}

.employer-empty__icon {
    width: 8rem;
    height: 8rem;
    background: linear-gradient(135deg, #e0e7ff, #c7d2fe);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 2rem;
}

.employer-empty__icon i {
    font-size: 3.5rem;
    color: #6366f1;
}

.employer-empty__title {
    font-size: 2rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 1rem;
}

.employer-empty__text {
    color: #64748b;
    font-size: 1.4rem;
    margin-bottom: 2rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Pagination */
.employer-pagination {
    display: flex;
    justify-content: center;
    margin-top: 2.5rem;
}

/* Responsive for Layout */
@media (max-width: 992px) {
    .employer-sidebar {
        transform: translateX(-100%);
    }
    
    .employer-sidebar.open {
        transform: translateX(0);
    }
    
    .employer-sidebar__toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .employer-sidebar__overlay.open {
        display: block;
    }
    
    .employer-main {
        margin-left: 0;
        width: 100%;
    }
    
    .employer-mobile-header {
        display: flex;
    }
    
    .employer-content {
        padding: 1.5rem;
        max-width: 100%;
    }
    
    .employer-job-card {
        flex-direction: column;
    }
    
    .employer-job-card__sidebar {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        border-left: none;
        border-top: 1px solid #e2e8f0;
        padding: 1.5rem 2rem;
    }
}

@media (max-width: 768px) {
    .employer-page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .employer-page-header__title {
        font-size: 2rem;
    }
    
    .employer-tabs {
        gap: 0;
    }
    
    .employer-tab {
        padding: 1rem 1.2rem;
        font-size: 1.3rem;
    }
    
    .employer-filter {
        flex-direction: column;
    }
    
    .employer-filter__search {
        width: 100%;
    }
    
    .employer-filter__select {
        width: 100%;
    }
    
    .employer-job-card__meta {
        gap: 1rem;
    }
    
    .employer-job-card__stats {
        flex-wrap: wrap;
        gap: 1rem;
    }
    
    .employer-job-card__sidebar {
        flex-wrap: wrap;
        gap: 1rem;
    }
}

/* ========================================
   EMPLOYER APPLICATIONS PAGE
   ======================================== */

/* Applications Hero - Synced with other pages */
.applications-hero {
    position: relative;
    background: linear-gradient(135deg, #8B5CF6 0%, #A855F7 50%, #D946EF 100%);
    border-radius: 1.6rem;
    padding: 2.8rem 3rem;
    margin-bottom: 2.4rem;
    overflow: hidden;
}

.applications-hero__bg {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.2) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.applications-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 50rem;
    height: 50rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.applications-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.applications-hero__left {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.applications-hero__icon {
    width: 6.4rem;
    height: 6.4rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.applications-hero__icon i {
    font-size: 2.8rem;
    color: #fff;
}

.applications-hero__text {
    color: #fff;
}

.applications-hero__title {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0 0 0.6rem 0;
    color: #fff;
    letter-spacing: -0.02em;
}

.applications-hero__subtitle {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
}

.applications-hero__subtitle i {
    font-size: 1.2rem;
}

.applications-hero__subtitle strong {
    font-weight: 700;
    color: #fff;
}

/* Applications Stats Cards */
.applications-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.4rem;
    margin-bottom: 2rem;
}

.applications-stat-card {
    background: #fff;
    border-radius: 1.2rem;
    padding: 1.6rem;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    border: 2px solid #e2e8f0;
    transition: all 0.25s ease;
    text-decoration: none;
    cursor: pointer;
}

.applications-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    text-decoration: none;
}

.applications-stat-card.active {
    border-color: #8B5CF6;
    background: linear-gradient(135deg, #FAF5FF 0%, #F3E8FF 100%);
}

.applications-stat-card__icon {
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.applications-stat-card__icon i {
    font-size: 1.8rem;
}

.applications-stat-card__icon--all {
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    color: #4F46E5;
}

.applications-stat-card__icon--pending {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    color: #D97706;
}

.applications-stat-card__icon--shortlisted {
    background: linear-gradient(135deg, #DBEAFE 0%, #BFDBFE 100%);
    color: #2563EB;
}

.applications-stat-card__icon--interview {
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
    color: #059669;
}

.applications-stat-card__icon--rejected {
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    color: #DC2626;
}

.applications-stat-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.applications-stat-card__value {
    font-size: 2rem;
    font-weight: 700;
    color: #1E293B;
    line-height: 1;
}

.applications-stat-card__label {
    font-size: 1.3rem;
    color: #64748B;
}

/* Applications Filter */
.applications-filter {
    background: #fff;
    border-radius: 1.2rem;
    padding: 1.6rem 2rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.04);
    border: 1px solid #e2e8f0;
}

.applications-filter__search {
    flex: 1;
    display: flex;
    align-items: center;
    background: #F8FAFC;
    border: 2px solid #E2E8F0;
    border-radius: 1rem;
    padding: 0 1.4rem;
    transition: all 0.2s ease;
}

.applications-filter__search:focus-within {
    border-color: #8B5CF6;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}

.applications-filter__search i {
    color: #94A3B8;
    font-size: 1.5rem;
}

.applications-filter__input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 1.2rem 1rem;
    font-size: 1.4rem;
    outline: none;
}

.applications-filter__input::placeholder {
    color: #94A3B8;
}

.applications-filter__select-wrap {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 28rem;
}

.applications-filter__select-wrap i {
    position: absolute;
    left: 1.4rem;
    color: #94A3B8;
    font-size: 1.4rem;
    pointer-events: none;
}

.applications-filter__select {
    width: 100%;
    padding: 1.2rem 1.4rem 1.2rem 4rem;
    border: 2px solid #E2E8F0;
    border-radius: 1rem;
    font-size: 1.4rem;
    background: #F8FAFC;
    cursor: pointer;
    transition: all 0.2s ease;
}

.applications-filter__select:focus {
    outline: none;
    border-color: #8B5CF6;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
}

@media (max-width: 1200px) {
    .applications-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 992px) {
    .applications-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .applications-filter {
        flex-direction: column;
    }
    
    .applications-filter__search {
        width: 100%;
    }
    
    .applications-filter__select-wrap {
        width: 100%;
        min-width: auto;
    }
}

@media (max-width: 768px) {
    .applications-hero {
        padding: 2rem 1.6rem;
        border-radius: 1.4rem;
    }
    
    .applications-hero__content {
        flex-direction: column;
        text-align: center;
    }
    
    .applications-hero__left {
        flex-direction: column;
    }
    
    .applications-hero__icon {
        width: 5.6rem;
        height: 5.6rem;
    }
    
    .applications-hero__icon i {
        font-size: 2.4rem;
    }
    
    .applications-hero__title {
        font-size: 1.8rem;
    }
    
    .applications-hero__subtitle {
        font-size: 1.2rem;
        justify-content: center;
    }
    
    .applications-stats {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    
    .applications-stat-card {
        padding: 1.2rem;
    }
    
    .applications-stat-card__icon {
        width: 4rem;
        height: 4rem;
    }
    
    .applications-stat-card__icon i {
        font-size: 1.6rem;
    }
    
    .applications-stat-card__value {
        font-size: 1.6rem;
    }
    
    .applications-stat-card__label {
        font-size: 1.2rem;
    }
}

/* Applications List */
.employer-applications-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.employer-application-card {
    background: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.employer-application-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.employer-application-card__main {
    padding: 2rem;
}

.employer-application-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.employer-application-card__candidate {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.employer-application-card__avatar {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.employer-application-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employer-application-card__avatar span {
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
}

.employer-application-card__name {
    font-size: 1.6rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 0.4rem;
}

.employer-application-card__headline {
    font-size: 1.4rem;
    color: #64748b;
    margin: 0 0 0.8rem;
}

.employer-application-card__meta {
    display: flex;
    gap: 1.5rem;
    font-size: 1.3rem;
    color: #94a3b8;
}

.employer-application-card__meta i {
    margin-right: 0.4rem;
}

.employer-application-card__body {
    padding: 1.5rem 0;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}

.employer-application-card__job {
    margin-bottom: 1rem;
}

.employer-application-card__job-label {
    font-size: 1.3rem;
    color: #94a3b8;
    margin-right: 0.5rem;
}

.employer-application-card__job-title {
    font-size: 1.4rem;
    font-weight: 600;
    color: #0f172a;
}

.employer-application-card__skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.employer-skill-tag {
    background: #f1f5f9;
    color: #475569;
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    font-size: 1.2rem;
    font-weight: 500;
}

.employer-skill-tag--more {
    background: #e0e7ff;
    color: #4338ca;
}

.employer-application-card__match {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.employer-match {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.employer-match__label {
    font-size: 1.3rem;
    color: #64748b;
}

.employer-match__bar {
    width: 12rem;
    height: 0.6rem;
    background: #e2e8f0;
    border-radius: 0.3rem;
    overflow: hidden;
}

.employer-match__fill {
    height: 100%;
    border-radius: 0.3rem;
    transition: width 0.3s ease;
}

.employer-match__fill--high {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.employer-match__fill--medium {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}

.employer-match__fill--low {
    background: linear-gradient(90deg, #ef4444, #dc2626);
}

.employer-match__value {
    font-size: 1.4rem;
    font-weight: 600;
    color: #0f172a;
}

.employer-application-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
}

.employer-application-card__date {
    font-size: 1.3rem;
    color: #94a3b8;
}

.employer-application-card__actions {
    display: flex;
    gap: 1rem;
}

/* Status colors */
.employer-status {
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.employer-status--new {
    background: #fef3c7;
    color: #d97706;
}

.employer-status--viewed {
    background: #dbeafe;
    color: #2563eb;
}

.employer-status--shortlisted {
    background: #d1fae5;
    color: #059669;
}

.employer-status--interview {
    background: #e0e7ff;
    color: #4338ca;
}

.employer-status--offered {
    background: #d1fae5;
    color: #059669;
}

.employer-status--hired {
    background: #bbf7d0;
    color: #16a34a;
}

.employer-status--rejected {
    background: #fee2e2;
    color: #dc2626;
}

/* ========================================
   EMPLOYER CANDIDATES PAGE
   ======================================== */

/* Candidates Hero - Synced with other pages */
.candidates-hero {
    position: relative;
    background: linear-gradient(135deg, #0EA5E9 0%, #06B6D4 50%, #14B8A6 100%);
    border-radius: 1.6rem;
    padding: 2.8rem 3rem;
    margin-bottom: 2.4rem;
    overflow: hidden;
}

.candidates-hero__bg {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.2) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.candidates-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 50rem;
    height: 50rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.candidates-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.candidates-hero__left {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.candidates-hero__icon {
    width: 6.4rem;
    height: 6.4rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.candidates-hero__icon i {
    font-size: 2.8rem;
    color: #fff;
}

.candidates-hero__text {
    color: #fff;
}

.candidates-hero__title {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0 0 0.6rem 0;
    color: #fff;
    letter-spacing: -0.02em;
}

.candidates-hero__subtitle {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
}

.candidates-hero__subtitle i {
    font-size: 1.2rem;
}

.candidates-hero__actions {
    display: flex;
    gap: 1rem;
}

.candidates-hero__btn {
    padding: 1.2rem 2rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 1rem;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    backdrop-filter: blur(10px);
    text-decoration: none;
}

.candidates-hero__btn:hover {
    background: #fff;
    color: #0EA5E9;
    border-color: #fff;
    transform: translateY(-2px);
    text-decoration: none;
}

.candidates-hero__btn i {
    font-size: 1.4rem;
}

/* Candidates Search Box */
.candidates-search {
    background: #fff;
    border-radius: 1.4rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid #e2e8f0;
    padding: 2.4rem;
    margin-bottom: 2.4rem;
}

.candidates-search__form {
    width: 100%;
}

.candidates-search__row {
    display: flex;
    gap: 1.2rem;
    align-items: stretch;
}

.candidates-search__field {
    flex: 1;
}

.candidates-search__field--keyword {
    flex: 1.5;
}

.candidates-search__field--submit {
    flex: 0 0 auto;
}

.candidates-search__input-wrap,
.candidates-search__select-wrap {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.candidates-search__input-wrap i,
.candidates-search__select-wrap i {
    position: absolute;
    left: 1.4rem;
    color: #94A3B8;
    font-size: 1.5rem;
    pointer-events: none;
}

.candidates-search__input,
.candidates-search__select {
    width: 100%;
    padding: 1.4rem 1.4rem 1.4rem 4.2rem;
    border: 2px solid #E2E8F0;
    border-radius: 1rem;
    font-size: 1.4rem;
    transition: all 0.2s ease;
    background: #F8FAFC;
    height: 100%;
}

.candidates-search__input:focus,
.candidates-search__select:focus {
    outline: none;
    border-color: #0EA5E9;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
}

.candidates-search__input::placeholder {
    color: #94A3B8;
}

.candidates-search__btn {
    padding: 1.4rem 2.4rem;
    background: linear-gradient(135deg, #0EA5E9 0%, #06B6D4 100%);
    border: none;
    border-radius: 1rem;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    white-space: nowrap;
    height: 100%;
}

.candidates-search__btn:hover {
    background: linear-gradient(135deg, #0284C7 0%, #0891B2 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
}

.candidates-search__btn i {
    font-size: 1.4rem;
}

@media (max-width: 992px) {
    .candidates-search__row {
        flex-wrap: wrap;
    }
    
    .candidates-search__field {
        flex: 1 1 calc(50% - 0.6rem);
    }
    
    .candidates-search__field--keyword {
        flex: 1 1 100%;
    }
    
    .candidates-search__field--submit {
        flex: 1 1 100%;
    }
    
    .candidates-search__btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .candidates-hero {
        padding: 2rem 1.6rem;
        border-radius: 1.4rem;
    }
    
    .candidates-hero__content {
        flex-direction: column;
        text-align: center;
    }
    
    .candidates-hero__left {
        flex-direction: column;
    }
    
    .candidates-hero__icon {
        width: 5.6rem;
        height: 5.6rem;
    }
    
    .candidates-hero__icon i {
        font-size: 2.4rem;
    }
    
    .candidates-hero__title {
        font-size: 1.8rem;
    }
    
    .candidates-hero__subtitle {
        font-size: 1.2rem;
        justify-content: center;
    }
    
    .candidates-hero__btn {
        padding: 1rem 1.6rem;
        font-size: 1.3rem;
    }
    
    .candidates-search {
        padding: 1.6rem;
    }
    
    .candidates-search__field {
        flex: 1 1 100%;
    }
}

/* Legacy search box - keeping for backward compatibility */
.employer-search-box {
    background: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    padding: 2rem;
    margin-bottom: 2rem;
}

.employer-candidates-count {
    font-size: 1.4rem;
    color: #64748b;
    margin-bottom: 1.5rem;
}

.employer-candidates-count strong {
    color: #0f172a;
}

.employer-candidate-card {
    background: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    padding: 2rem;
    margin-bottom: 1.5rem;
    transition: all 0.3s ease;
}

.employer-candidate-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.employer-candidate-card__header {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    position: relative;
}

.employer-candidate-card__avatar {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.employer-candidate-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employer-candidate-card__avatar span {
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
}

.employer-candidate-card__info {
    flex: 1;
}

.employer-candidate-card__name {
    font-size: 1.6rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 0.4rem;
}

.employer-candidate-card__headline {
    font-size: 1.4rem;
    color: #64748b;
    margin: 0;
}

.employer-candidate-card__save {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    font-size: 1.8rem;
    color: #cbd5e1;
    cursor: pointer;
    transition: color 0.2s ease;
}

.employer-candidate-card__save:hover,
.employer-candidate-card__save.saved {
    color: #ef4444;
}

.employer-candidate-card__body {
    padding-top: 1rem;
    border-top: 1px solid #f1f5f9;
}

.employer-candidate-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 1.3rem;
    color: #64748b;
    margin-bottom: 1rem;
}

.employer-candidate-card__meta span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.employer-candidate-card__status {
    padding: 0.3rem 0.8rem;
    border-radius: 1rem;
    font-size: 1.1rem;
    font-weight: 500;
}

.employer-candidate-card__status--open_to_work {
    background: #d1fae5;
    color: #059669;
}

.employer-candidate-card__status--actively_looking {
    background: #fef3c7;
    color: #d97706;
}

.employer-candidate-card__status--not_looking {
    background: #f1f5f9;
    color: #64748b;
}

.employer-candidate-card__skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.employer-candidate-card__salary {
    font-size: 1.3rem;
    color: #059669;
    font-weight: 500;
    margin-bottom: 1rem;
}

.employer-candidate-card__completion {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.employer-candidate-card__completion-bar {
    flex: 1;
    height: 0.5rem;
    background: #e2e8f0;
    border-radius: 0.25rem;
    overflow: hidden;
}

.employer-candidate-card__completion-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #8b5cf6);
    border-radius: 0.25rem;
}

.employer-candidate-card__completion-text {
    font-size: 1.2rem;
    color: #94a3b8;
}

.employer-candidate-card__footer {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f1f5f9;
}

/* ========================================
   EMPLOYER INTERVIEWS PAGE
   ======================================== */
.employer-interviews-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.employer-interview-card {
    display: flex;
    background: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.employer-interview-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.employer-interview-card__date-col {
    width: 10rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.employer-interview-card__date {
    text-align: center;
    margin-bottom: 1rem;
}

.employer-interview-card__month {
    display: block;
    font-size: 1.2rem;
    text-transform: uppercase;
    opacity: 0.8;
}

.employer-interview-card__day {
    display: block;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1;
}

.employer-interview-card__time {
    font-size: 1.3rem;
    opacity: 0.9;
}

.employer-interview-card__main {
    flex: 1;
    padding: 2rem;
}

.employer-interview-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.employer-interview-card__candidate {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.employer-interview-card__avatar {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    display: flex;
    align-items: center;
    justify-content: center;
}

.employer-interview-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employer-interview-card__avatar span {
    font-size: 1.6rem;
    font-weight: 600;
    color: #fff;
}

.employer-interview-card__name {
    font-size: 1.6rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 0.3rem;
}

.employer-interview-card__position {
    font-size: 1.3rem;
    color: #64748b;
    margin: 0;
}

.employer-interview-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 1.2rem;
    font-weight: 500;
}

.employer-interview-card__badge--online {
    background: #dbeafe;
    color: #2563eb;
}

.employer-interview-card__badge--onsite {
    background: #d1fae5;
    color: #059669;
}

.employer-interview-card__badge--phone {
    background: #fef3c7;
    color: #d97706;
}

.employer-interview-card__details {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.employer-interview-card__detail {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.3rem;
    color: #64748b;
}

.employer-interview-card__detail a {
    color: #6366f1;
}

.employer-interview-card__notes {
    font-size: 1.3rem;
    color: #64748b;
    padding: 1rem;
    background: #f8fafc;
    border-radius: 0.8rem;
}

.employer-interview-card__notes i {
    margin-right: 0.5rem;
    color: #94a3b8;
}

.employer-interview-card__actions {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 2rem;
    border-left: 1px solid #e2e8f0;
    background: #f8fafc;
}

/* ========================================
   EMPLOYER PROFILE PAGE
   ======================================== */
.employer-profile-images {
    position: relative;
}

.employer-profile-cover {
    position: relative;
    margin-bottom: 6rem;
}

.employer-profile-cover__preview {
    width: 100%;
    height: 20rem;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    border-radius: 1rem;
    overflow: hidden;
}

.employer-profile-cover__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employer-profile-cover__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
}

.employer-profile-cover__placeholder i {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.employer-profile-cover__btn {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

.employer-profile-logo {
    position: absolute;
    bottom: -5rem;
    left: 2rem;
    text-align: center;
}

.employer-profile-logo__preview {
    width: 10rem;
    height: 10rem;
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    margin-bottom: 0.5rem;
}

.employer-profile-logo__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employer-profile-logo__preview span {
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
}

.employer-profile-completion {
    text-align: center;
    margin-bottom: 2rem;
}

.employer-profile-completion__circle {
    width: 10rem;
    height: 10rem;
    margin: 0 auto 1.5rem;
    position: relative;
}

.employer-profile-completion__circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.employer-profile-completion__bg {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 3;
}

.employer-profile-completion__fill {
    fill: none;
    stroke: #6366f1;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.employer-profile-completion__value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
}

.employer-profile-completion__text {
    font-size: 1.4rem;
    color: #64748b;
}

.employer-profile-checklist {
    border-top: 1px solid #e2e8f0;
    padding-top: 1.5rem;
}

.employer-profile-checklist__item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 0;
    font-size: 1.4rem;
    color: #64748b;
}

.employer-profile-checklist__item.checked {
    color: #059669;
}

.employer-profile-checklist__item i {
    font-size: 1.6rem;
}

.employer-company-preview {
    text-align: center;
}

.employer-company-preview__logo {
    width: 8rem;
    height: 8rem;
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.employer-company-preview__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employer-company-preview__logo span {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
}

.employer-company-preview__name {
    font-size: 1.8rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 0.5rem;
}

.employer-company-preview__industry {
    font-size: 1.4rem;
    color: #64748b;
    margin: 0 0 1rem;
}

.employer-company-preview__meta {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    font-size: 1.3rem;
    color: #94a3b8;
}

.employer-tips {
    list-style: none;
    padding: 0;
    margin: 0;
}

.employer-tips li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.8rem 0;
    font-size: 1.4rem;
    color: #64748b;
}

.employer-tips li i {
    color: #22c55e;
    margin-top: 0.2rem;
}

.employer-profile-mobile-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    padding: 1.5rem;
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.05);
    z-index: 100;
}

/* ========================================
   EMPLOYER MODAL
   ======================================== */
.employer-modal {
    border-radius: 1.2rem;
    overflow: hidden;
}

.employer-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    border-bottom: 1px solid #e2e8f0;
}

.employer-modal__title {
    font-size: 1.8rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}

.employer-modal__close {
    background: none;
    border: none;
    font-size: 2rem;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.2s ease;
}

.employer-modal__close:hover {
    color: #ef4444;
}

.employer-modal__body {
    padding: 2rem;
}

.employer-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding: 2rem;
    border-top: 1px solid #e2e8f0;
    background: #f8fafc;
}

/* Responsive for new pages */
@media (max-width: 768px) {
    .employer-application-card__header {
        flex-direction: column;
        gap: 1rem;
    }
    
    .employer-application-card__footer {
        flex-direction: column;
        gap: 1rem;
    }
    
    .employer-application-card__actions {
        flex-wrap: wrap;
    }
    
    .employer-interview-card {
        flex-direction: column;
    }
    
    .employer-interview-card__date-col {
        width: 100%;
        flex-direction: row;
        justify-content: space-between;
        padding: 1rem 1.5rem;
    }
    
    .employer-interview-card__date {
        display: flex;
        gap: 0.5rem;
        margin-bottom: 0;
    }
    
    .employer-interview-card__month,
    .employer-interview-card__day {
        font-size: 1.4rem;
    }
    
    .employer-interview-card__actions {
        flex-direction: row;
        flex-wrap: wrap;
        border-left: none;
        border-top: 1px solid #e2e8f0;
    }
    
    .employer-profile-cover__preview {
        height: 15rem;
    }
    
    .employer-profile-logo {
        left: 50%;
        transform: translateX(-50%);
    }
}

/* ==============================================
   EMPLOYER MODAL STYLES
   ============================================== */

.employer-modal .modal-content {
    border: none;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.employer-modal__content {
    border: none;
    border-radius: 2rem;
    overflow: hidden;
}

.employer-modal__header {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 2rem 2.5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    position: relative;
}

.employer-modal__header-icon {
    width: 5rem;
    height: 5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: #fff;
    flex-shrink: 0;
}

.employer-modal__header-text {
    flex: 1;
}

.employer-modal__title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 0.3rem 0;
}

.employer-modal__subtitle {
    font-size: 1.3rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

.employer-modal__close {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 3.2rem;
    height: 3.2rem;
    background: rgba(255, 255, 255, 0.15);
    border: none;
    border-radius: 0.8rem;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: all 0.2s ease;
}

.employer-modal__close:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.employer-modal__body {
    padding: 2.5rem;
    background: #fff;
    max-height: 60vh;
    overflow-y: auto;
}

.employer-modal__body::-webkit-scrollbar {
    width: 6px;
}

.employer-modal__body::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.employer-modal__body::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

.employer-modal__body::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Applicant Card */
.employer-modal__applicant-card {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 1.2rem;
    margin-bottom: 2rem;
    border: 1px solid #e2e8f0;
}

.employer-modal__applicant-avatar {
    width: 5rem;
    height: 5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    border-radius: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.employer-modal__applicant-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.employer-modal__applicant-avatar .applicant-avatar-text {
    font-size: 1.8rem;
    font-weight: 700;
    color: #fff;
}

.employer-modal__applicant-info {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.employer-modal__applicant-info .applicant-name {
    font-size: 1.5rem;
    font-weight: 600;
    color: #0f172a;
}

.employer-modal__applicant-info .applicant-position {
    font-size: 1.3rem;
    color: #64748b;
}

/* Form Fields */
.employer-modal__field {
    margin-bottom: 2rem;
}

.employer-modal__label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.3rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.8rem;
}

.employer-modal__label i {
    color: #3b82f6;
    font-size: 1.2rem;
}

.employer-modal__label .text-danger {
    color: #ef4444;
}

.employer-modal__input,
.employer-modal__select,
.employer-modal__textarea {
    width: 100%;
    padding: 1.2rem 1.5rem;
    font-size: 1.4rem;
    color: #0f172a;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 1rem;
    transition: all 0.2s ease;
}

.employer-modal__input:focus,
.employer-modal__select:focus,
.employer-modal__textarea:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

.employer-modal__input::placeholder,
.employer-modal__textarea::placeholder {
    color: #94a3b8;
}

.employer-modal__select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.2rem center;
    padding-right: 4rem;
}

.employer-modal__textarea {
    resize: vertical;
    min-height: 10rem;
}

/* Input Group */
.employer-modal__input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.employer-modal__input-icon {
    position: absolute;
    left: 1.5rem;
    width: 2.4rem;
    height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 1.4rem;
    z-index: 1;
}

.employer-modal__input--with-icon {
    padding-left: 4.5rem;
}

.employer-modal__hint {
    display: block;
    font-size: 1.2rem;
    color: #94a3b8;
    margin-top: 0.6rem;
}

/* Row Layout */
.employer-modal__row {
    display: flex;
    gap: 2rem;
    margin-bottom: 0;
}

.employer-modal__col {
    flex: 1;
}

/* Type Toggle */
.employer-modal__type-toggle {
    display: flex;
    gap: 1rem;
}

.employer-modal__type-option {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.2rem 1.5rem;
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1.3rem;
    color: #64748b;
    font-weight: 500;
}

.employer-modal__type-option input {
    display: none;
}

.employer-modal__type-option i {
    font-size: 1.4rem;
}

.employer-modal__type-option:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.employer-modal__type-option--active {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #3b82f6;
    color: #1d4ed8;
}

.employer-modal__type-option--active i {
    color: #3b82f6;
}

/* Footer */
.employer-modal__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: 1.5rem 2.5rem;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

/* Responsive */
@media (max-width: 768px) {
    .employer-modal .modal-dialog {
        margin: 1rem;
        max-width: calc(100% - 2rem);
    }
    
    .employer-modal__header {
        padding: 1.5rem 2rem;
    }
    
    .employer-modal__header-icon {
        width: 4rem;
        height: 4rem;
        font-size: 1.8rem;
    }
    
    .employer-modal__title {
        font-size: 1.6rem;
    }
    
    .employer-modal__body {
        padding: 2rem;
    }
    
    .employer-modal__row {
        flex-direction: column;
        gap: 0;
    }
    
    .employer-modal__type-toggle {
        flex-direction: column;
    }
    
    .employer-modal__footer {
        flex-direction: column;
    }
    
    .employer-modal__footer .employer-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ==============================================
   JOB LISTING ITEM - CLEAN DESIGN
   ============================================== */

.job-listing-item {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.2s ease;
}

.job-listing-item:last-child {
    border-bottom: none;
}

.job-listing-item:hover {
    background: #fafbfc;
}

.job-listing-item__content {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1.8rem 2rem;
}

.job-listing-item__left {
    flex: 1;
    min-width: 0;
}

.job-listing-item__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-bottom: 0.6rem;
}

.job-listing-item__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0;
}

.job-listing-item__title a {
    color: inherit;
    text-decoration: none;
}

.job-listing-item__title a:hover {
    color: #3b82f6;
}

.job-listing-item__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    border-radius: 0.4rem;
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.job-listing-item__badge--urgent {
    background: #fef2f2;
    color: #dc2626;
}

.job-listing-item__badge--hot {
    background: #fff7ed;
    color: #ea580c;
}

.job-listing-item__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    font-size: 1.3rem;
    color: #64748b;
}

.job-listing-item__meta span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.job-listing-item__meta i {
    color: #94a3b8;
    font-size: 1.2rem;
}

.job-listing-item__salary {
    color: #059669 !important;
    font-weight: 600;
}

.job-listing-item__salary i {
    color: #10b981 !important;
}

/* Stats */
.job-listing-item__stats {
    display: flex;
    gap: 0.8rem;
    flex-shrink: 0;
}

.job-listing-item__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 7rem;
    padding: 0.8rem 1rem;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.8rem;
    text-align: center;
}

.job-listing-item__stat--highlight {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.job-listing-item__stat--highlight .job-listing-item__stat-value {
    color: #2563eb;
}

.job-listing-item__stat--warning {
    background: #fef2f2;
    border-color: #fecaca;
}

.job-listing-item__stat--warning .job-listing-item__stat-value {
    color: #dc2626;
}

.job-listing-item__stat-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.job-listing-item__stat-label {
    font-size: 1.1rem;
    color: #94a3b8;
    white-space: nowrap;
}

/* Actions */
.job-listing-item__actions {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
}

.job-listing-item__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.2rem;
    border-radius: 0.8rem;
    font-size: 1.3rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.job-listing-item__btn--edit {
    width: 3.6rem;
    height: 3.6rem;
    padding: 0;
    background: #f1f5f9;
    color: #64748b;
}

.job-listing-item__btn--edit:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.job-listing-item__btn--primary {
    background: #0f172a;
    color: #fff;
    padding: 0.8rem 1.4rem;
}

.job-listing-item__btn--primary:hover {
    background: #1e293b;
    color: #fff;
}

/* Responsive */
@media (max-width: 992px) {
    .job-listing-item__content {
        flex-wrap: wrap;
    }
    
    .job-listing-item__left {
        flex: 1 1 100%;
        margin-bottom: 1rem;
    }
    
    .job-listing-item__stats {
        flex: 1;
    }
    
    .job-listing-item__actions {
        flex: 0 0 auto;
    }
}

@media (max-width: 576px) {
    .job-listing-item__content {
        flex-direction: column;
        align-items: stretch;
        gap: 1.2rem;
        padding: 1.5rem;
    }
    
    .job-listing-item__stats {
        justify-content: space-between;
    }
    
    .job-listing-item__stat {
        flex: 1;
        min-width: 0;
    }
    
    .job-listing-item__actions {
        justify-content: flex-end;
    }
}

/* ==============================================
   EMPLOYER JOBS PAGE - ENHANCED DESIGN
   ============================================== */

/* Page Header */
.employer-jobs-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 2.5rem;
    padding: 2.5rem;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    border-radius: 2rem;
    color: #fff;
}

.employer-jobs-header__info {
    flex: 1;
}

.employer-jobs-header__title {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.employer-jobs-header__title i {
    font-size: 2rem;
    opacity: 0.8;
}

.employer-jobs-header__desc {
    font-size: 1.4rem;
    margin: 0;
    opacity: 0.7;
}

.employer-jobs-header__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.2rem 2.4rem;
    background: #fff;
    color: #1e293b;
    font-size: 1.4rem;
    font-weight: 600;
    border-radius: 1.2rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.employer-jobs-header__btn:hover {
    background: #f1f5f9;
    color: #1e293b;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Stats Summary */
.employer-jobs-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.employer-jobs-stat {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.5rem 2rem;
    background: #fff;
    border-radius: 1.2rem;
    border: 1px solid #e2e8f0;
    transition: all 0.2s ease;
}

.employer-jobs-stat:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.employer-jobs-stat__icon {
    width: 4.8rem;
    height: 4.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 1.2rem;
    font-size: 1.8rem;
}

.employer-jobs-stat__icon--total {
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    color: #475569;
}

.employer-jobs-stat__icon--active {
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    color: #16a34a;
}

.employer-jobs-stat__icon--pending {
    background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
    color: #ca8a04;
}

.employer-jobs-stat__icon--draft {
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    color: #6366f1;
}

.employer-jobs-stat__content {
    display: flex;
    flex-direction: column;
}

.employer-jobs-stat__value {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.employer-jobs-stat__label {
    font-size: 1.3rem;
    color: #64748b;
}

/* Filter Section */
.employer-jobs-filter-section {
    background: #fff;
    border-radius: 1.6rem;
    border: 1px solid #e2e8f0;
    margin-bottom: 2rem;
    overflow: hidden;
}

/* Tabs */
.employer-jobs-tabs {
    display: flex;
    border-bottom: 1px solid #e2e8f0;
    overflow-x: auto;
}

.employer-jobs-tab {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1.4rem 2rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: #64748b;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.employer-jobs-tab i {
    font-size: 1.3rem;
}

.employer-jobs-tab:hover {
    color: #3b82f6;
    background: #f8fafc;
}

.employer-jobs-tab--active {
    color: #3b82f6;
    border-bottom-color: #3b82f6;
    background: #eff6ff;
}

/* Filters */
.employer-jobs-filters {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.5rem 2rem;
}

.employer-jobs-filters__search {
    flex: 1;
    position: relative;
    max-width: 40rem;
}

.employer-jobs-filters__search i {
    position: absolute;
    left: 1.4rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 1.4rem;
}

.employer-jobs-filters__input {
    width: 100%;
    padding: 1rem 1.4rem 1rem 4rem;
    font-size: 1.4rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 1rem;
    background: #f8fafc;
    transition: all 0.2s ease;
}

.employer-jobs-filters__input:focus {
    outline: none;
    border-color: #3b82f6;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.employer-jobs-filters__group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.employer-jobs-filters__select {
    padding: 1rem 3rem 1rem 1.4rem;
    font-size: 1.3rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 1rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 1rem center;
    appearance: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.employer-jobs-filters__select:focus {
    outline: none;
    border-color: #3b82f6;
}

.employer-jobs-filters__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem 1.6rem;
    font-size: 1.3rem;
    font-weight: 500;
    color: #fff;
    background: #3b82f6;
    border: none;
    border-radius: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.employer-jobs-filters__btn:hover {
    background: #2563eb;
}

/* Jobs Container */
.employer-jobs-container {
    min-height: 40rem;
}

/* Jobs Grid */
.employer-jobs-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

/* Job Card - New Design */
.emp-job-card {
    background: #fff;
    border-radius: 1.6rem;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.emp-job-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

/* Card Header */
.emp-job-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.5rem;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
}

.emp-job-card__status {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 2rem;
}

.emp-job-card__status i {
    font-size: 0.8rem;
}

.emp-job-card__status--active {
    background: #dcfce7;
    color: #16a34a;
}

.emp-job-card__status--active i {
    animation: pulse 2s infinite;
}

.emp-job-card__status--pending {
    background: #fef9c3;
    color: #ca8a04;
}

.emp-job-card__status--draft {
    background: #e0e7ff;
    color: #6366f1;
}

.emp-job-card__status--paused {
    background: #f1f5f9;
    color: #64748b;
}

.emp-job-card__status--closed {
    background: #fee2e2;
    color: #dc2626;
}

/* Dropdown Menu */
.emp-job-card__menu {
    position: relative;
}

.emp-job-card__menu-btn {
    width: 3.2rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0.8rem;
    color: #64748b;
    cursor: pointer;
    transition: all 0.2s ease;
}

.emp-job-card__menu-btn:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.emp-job-card__dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    width: 18rem;
    background: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid #e2e8f0;
    padding: 0.6rem;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease;
}

.emp-job-card__menu:hover .emp-job-card__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(5px);
}

.emp-job-card__dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    padding: 1rem 1.2rem;
    font-size: 1.3rem;
    color: #374151;
    background: transparent;
    border: none;
    border-radius: 0.8rem;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
}

.emp-job-card__dropdown-item:hover {
    background: #f1f5f9;
}

.emp-job-card__dropdown-item i {
    width: 1.6rem;
    color: #64748b;
}

.emp-job-card__dropdown-item--success {
    color: #16a34a;
}

.emp-job-card__dropdown-item--success i {
    color: #16a34a;
}

.emp-job-card__dropdown-item--danger {
    color: #dc2626;
}

.emp-job-card__dropdown-item--danger i {
    color: #dc2626;
}

.emp-job-card__dropdown-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 0.5rem 0;
}

/* Card Body */
.emp-job-card__body {
    padding: 1.5rem;
}

.emp-job-card__title {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0 0 0.8rem;
    line-height: 1.4;
}

.emp-job-card__title a {
    color: #0f172a;
    text-decoration: none;
    transition: color 0.2s ease;
}

.emp-job-card__title a:hover {
    color: #3b82f6;
}

/* Tags */
.emp-job-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.emp-job-card__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 0.5rem;
}

.emp-job-card__tag i {
    font-size: 1rem;
}

.emp-job-card__tag--urgent {
    background: #fef2f2;
    color: #dc2626;
}

.emp-job-card__tag--hot {
    background: #fff7ed;
    color: #ea580c;
}

.emp-job-card__tag--featured {
    background: #fefce8;
    color: #ca8a04;
}

/* Meta */
.emp-job-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
}

.emp-job-card__meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.3rem;
    color: #64748b;
}

.emp-job-card__meta-item i {
    color: #94a3b8;
    font-size: 1.2rem;
}

.emp-job-card__meta-item--salary {
    color: #059669;
    font-weight: 600;
}

.emp-job-card__meta-item--salary i {
    color: #10b981;
}

/* Stats */
.emp-job-card__stats {
    display: flex;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}

.emp-job-card__stat {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.2rem 1.5rem;
    border-right: 1px solid #f1f5f9;
}

.emp-job-card__stat:last-child {
    border-right: none;
}

.emp-job-card__stat--highlight {
    background: #eff6ff;
}

.emp-job-card__stat--highlight .emp-job-card__stat-value {
    color: #2563eb;
}

.emp-job-card__stat-icon {
    width: 3.2rem;
    height: 3.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border-radius: 0.8rem;
    color: #64748b;
    font-size: 1.3rem;
}

.emp-job-card__stat--highlight .emp-job-card__stat-icon {
    background: #dbeafe;
    color: #2563eb;
}

.emp-job-card__stat-info {
    display: flex;
    flex-direction: column;
}

.emp-job-card__stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.emp-job-card__stat-label {
    font-size: 1.1rem;
    color: #94a3b8;
}

/* Footer */
.emp-job-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.5rem;
}

.emp-job-card__date {
    font-size: 1.2rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.emp-job-card__deadline {
    color: #f59e0b;
}

.emp-job-card__action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.8rem 1.4rem;
    font-size: 1.2rem;
    font-weight: 500;
    border-radius: 0.8rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.emp-job-card__action-btn--primary {
    background: #0f172a;
    color: #fff;
}

.emp-job-card__action-btn--primary:hover {
    background: #1e293b;
    color: #fff;
}

/* Empty State */
.employer-jobs-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem;
    text-align: center;
}

.employer-jobs-empty__illustration {
    margin-bottom: 2rem;
}

.employer-jobs-empty__circle {
    width: 12rem;
    height: 12rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 50%;
    font-size: 4rem;
    color: #94a3b8;
}

.employer-jobs-empty__title {
    font-size: 2rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 0.8rem;
}

.employer-jobs-empty__text {
    font-size: 1.4rem;
    color: #64748b;
    margin: 0 0 2rem;
    max-width: 40rem;
}

.employer-jobs-empty__btn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1.2rem 2.4rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    border-radius: 1.2rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.employer-jobs-empty__btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
}

/* Pagination */
.employer-jobs-pagination {
    display: flex;
    justify-content: center;
    margin-top: 3rem;
}

/* Responsive */
@media (max-width: 1200px) {
    .employer-jobs-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .employer-jobs-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .employer-jobs-header {
        flex-direction: column;
        padding: 2rem;
        text-align: center;
    }
    
    .employer-jobs-header__title {
        justify-content: center;
        font-size: 2rem;
    }
    
    .employer-jobs-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .employer-jobs-stat {
        padding: 1.2rem;
    }
    
    .employer-jobs-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .employer-jobs-filters {
        flex-direction: column;
        align-items: stretch;
    }
    
    .employer-jobs-filters__search {
        max-width: 100%;
    }
    
    .employer-jobs-filters__group {
        flex-wrap: wrap;
    }
    
    .employer-jobs-filters__select {
        flex: 1;
        min-width: 12rem;
    }
    
    .emp-job-card__stats {
        flex-wrap: wrap;
    }
    
    .emp-job-card__stat {
        flex: 1 1 calc(50% - 0.5px);
        border-bottom: 1px solid #f1f5f9;
    }
    
    .emp-job-card__stat:nth-child(2) {
        border-right: none;
    }
    
    .emp-job-card__footer {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    
    .emp-job-card__action-btn {
        justify-content: center;
    }
}

/* ============================================
   Employer Form - Datepicker Custom Styles  
   ============================================ */
.employer-datepicker-wrap {
    position: relative;
}

.employer-datepicker-wrap .employer-datepicker {
    padding-right: 4.5rem;
}

.employer-datepicker-icon {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
    font-size: 1.6rem;
}

.employer-layout .datepicker {
    font-family: inherit;
    font-size: 1.4rem;
    border-radius: 1rem !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1) !important;
    border: 1.5px solid #e2e8f0 !important;
    padding: 1rem !important;
}

.employer-layout .datepicker table {
    width: 100%;
}

.employer-layout .datepicker table thead tr:first-child th {
    cursor: pointer;
    padding: 0.8rem;
    font-weight: 600;
    color: #0f172a;
}

.employer-layout .datepicker table thead tr:first-child th:hover {
    background: #f1f5f9;
    border-radius: 0.6rem;
}

.employer-layout .datepicker .prev,
.employer-layout .datepicker .next {
    color: #64748b;
    font-size: 1.4rem;
}

.employer-layout .datepicker .prev:hover,
.employer-layout .datepicker .next:hover {
    background: #f1f5f9 !important;
    border-radius: 0.6rem;
}

.employer-layout .datepicker .dow {
    color: #94a3b8;
    font-weight: 500;
    font-size: 1.2rem;
    padding: 0.8rem;
}

.employer-layout .datepicker table tr td,
.employer-layout .datepicker table tr th {
    text-align: center;
    width: 36px;
    height: 36px;
    border-radius: 0.6rem;
    transition: all 0.15s ease;
}

.employer-layout .datepicker table tr td.day {
    color: #334155;
}

.employer-layout .datepicker table tr td.day:hover {
    background: #f1f5f9;
}

.employer-layout .datepicker table tr td.old,
.employer-layout .datepicker table tr td.new {
    color: #cbd5e1;
}

.employer-layout .datepicker table tr td.disabled,
.employer-layout .datepicker table tr td.disabled:hover {
    background: transparent;
    color: #e2e8f0;
    cursor: not-allowed;
}

.employer-layout .datepicker table tr td.today {
    background: #dbeafe !important;
    color: #3b82f6 !important;
}

.employer-layout .datepicker table tr td.today:hover {
    background: #bfdbfe !important;
}

.employer-layout .datepicker table tr td.active,
.employer-layout .datepicker table tr td.active:hover,
.employer-layout .datepicker table tr td.active.highlighted {
    background: #3b82f6 !important;
    color: #fff !important;
}

.employer-layout .datepicker table tr td span {
    display: block;
    width: 100%;
    height: 48px;
    line-height: 48px;
    border-radius: 0.6rem;
}

.employer-layout .datepicker table tr td span:hover {
    background: #f1f5f9;
}

.employer-layout .datepicker table tr td span.active {
    background: #3b82f6 !important;
    color: #fff !important;
}

.employer-layout .datepicker .datepicker-switch {
    font-weight: 600;
    font-size: 1.5rem;
}

.employer-layout .datepicker .clear {
    font-size: 1.3rem;
    color: #ef4444;
}

.employer-layout .datepicker .clear:hover {
    background: #fef2f2 !important;
}

/* ============================================
   Saved Candidates Page Styles
   ============================================ */

/* Folders Sidebar */
.saved-folders__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.saved-folders__item {
    border-bottom: 1px solid #f1f5f9;
}

.saved-folders__item:last-child {
    border-bottom: none;
}

.saved-folders__link {
    display: flex;
    align-items: center;
    padding: 1.2rem 1.6rem;
    color: #475569;
    text-decoration: none;
    transition: all 0.2s ease;
    gap: 1rem;
}

.saved-folders__link:hover {
    background-color: #f8fafc;
    color: #0f172a;
}

.saved-folders__item.active .saved-folders__link {
    background-color: #eff6ff;
    color: #3b82f6;
    font-weight: 500;
}

.saved-folders__link i {
    font-size: 1.4rem;
    width: 2rem;
    text-align: center;
}

.saved-folders__link span:first-of-type {
    flex: 1;
    font-size: 1.4rem;
}

.saved-folders__count {
    background: #e2e8f0;
    color: #64748b;
    padding: 0.2rem 0.8rem;
    border-radius: 1rem;
    font-size: 1.2rem;
    font-weight: 500;
}

.saved-folders__item.active .saved-folders__count {
    background: #3b82f6;
    color: #fff;
}

/* Search Form */
.saved-search-input {
    position: relative;
}

.saved-search-input .employer-input {
    padding-right: 4rem;
}

.saved-search-btn {
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #64748b;
    padding: 0.5rem;
    cursor: pointer;
    transition: color 0.2s ease;
}

.saved-search-btn:hover {
    color: #3b82f6;
}

/* Candidates Grid */
/* Saved Candidates Hero - Synced with other pages */
.saved-candidates-hero {
    position: relative;
    background: linear-gradient(135deg, #EC4899 0%, #F43F5E 50%, #EF4444 100%);
    border-radius: 1.6rem;
    padding: 2.8rem 3rem;
    margin-bottom: 2.4rem;
    overflow: hidden;
}

.saved-candidates-hero__bg {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.2) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.saved-candidates-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 50rem;
    height: 50rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.saved-candidates-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.saved-candidates-hero__left {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.saved-candidates-hero__icon {
    width: 6.4rem;
    height: 6.4rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.saved-candidates-hero__icon i {
    font-size: 2.8rem;
    color: #fff;
}

.saved-candidates-hero__text {
    color: #fff;
}

.saved-candidates-hero__title {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0 0 0.6rem 0;
    color: #fff;
    letter-spacing: -0.02em;
}

.saved-candidates-hero__subtitle {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
}

.saved-candidates-hero__subtitle i {
    font-size: 1.2rem;
}

.saved-candidates-hero__subtitle strong {
    font-weight: 700;
    color: #fff;
}

.saved-candidates-hero__actions {
    display: flex;
    gap: 1rem;
}

.saved-candidates-hero__btn {
    padding: 1.2rem 2rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 1rem;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    backdrop-filter: blur(10px);
    text-decoration: none;
}

.saved-candidates-hero__btn:hover {
    background: #fff;
    color: #EC4899;
    border-color: #fff;
    transform: translateY(-2px);
    text-decoration: none;
}

.saved-candidates-hero__btn i {
    font-size: 1.4rem;
}

@media (max-width: 768px) {
    .saved-candidates-hero {
        padding: 2rem 1.6rem;
        border-radius: 1.4rem;
    }
    
    .saved-candidates-hero__content {
        flex-direction: column;
        text-align: center;
    }
    
    .saved-candidates-hero__left {
        flex-direction: column;
    }
    
    .saved-candidates-hero__icon {
        width: 5.6rem;
        height: 5.6rem;
    }
    
    .saved-candidates-hero__icon i {
        font-size: 2.4rem;
    }
    
    .saved-candidates-hero__title {
        font-size: 1.8rem;
    }
    
    .saved-candidates-hero__subtitle {
        font-size: 1.2rem;
        justify-content: center;
    }
    
    .saved-candidates-hero__btn {
        padding: 1rem 1.6rem;
        font-size: 1.3rem;
    }
}

/* ===================================================================
   MESSAGES & NOTIFICATIONS HERO HEADERS
   =================================================================== */

/* Messages Hero */
.messages-hero {
    position: relative;
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 50%, #1E40AF 100%);
    border-radius: 1.6rem;
    padding: 2.8rem 3rem;
    margin-bottom: 2.4rem;
    overflow: hidden;
}

.messages-hero__bg {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.2) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.messages-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 50rem;
    height: 50rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.messages-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.messages-hero__left {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.messages-hero__icon {
    width: 6.4rem;
    height: 6.4rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.messages-hero__icon i {
    font-size: 2.8rem;
    color: #fff;
}

.messages-hero__text {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.messages-hero__title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}

.messages-hero__subtitle {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

/* Notifications Hero */
.notifications-hero {
    position: relative;
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 50%, #B45309 100%);
    border-radius: 1.6rem;
    padding: 2.8rem 3rem;
    margin-bottom: 2.4rem;
    overflow: hidden;
}

.notifications-hero__bg {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.2) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.notifications-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 50rem;
    height: 50rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.notifications-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.notifications-hero__left {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.notifications-hero__icon {
    width: 6.4rem;
    height: 6.4rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.notifications-hero__icon i {
    font-size: 2.8rem;
    color: #fff;
}

.notifications-hero__text {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.notifications-hero__title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}

.notifications-hero__subtitle {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.notifications-hero__actions .employer-btn--outline {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.notifications-hero__actions .employer-btn--outline:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Notification Items */
.notifications-container {
    background: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.notifications-list {
    display: flex;
    flex-direction: column;
}

.notification-item {
    display: flex;
    align-items: center;
    gap: 1.4rem;
    padding: 1.6rem 2rem;
    border-bottom: 1px solid #E2E8F0;
    transition: background 0.2s ease;
    position: relative;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item:hover {
    background: #F8FAFC;
}

.notification-item--unread {
    background: #F0F9FF;
}

.notification-item--unread:hover {
    background: #E0F2FE;
}

.notification-item__icon {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.notification-item__icon i {
    font-size: 1.6rem;
}

.notification-item__icon--application {
    background: #DBEAFE;
    color: #2563EB;
}

.notification-item__icon--interview {
    background: #D1FAE5;
    color: #059669;
}

.notification-item__icon--message {
    background: #FCE7F3;
    color: #DB2777;
}

.notification-item__icon--info {
    background: #FEF3C7;
    color: #D97706;
}

.notification-item__content {
    flex: 1;
    min-width: 0;
}

.notification-item__text {
    font-size: 1.4rem;
    color: #1E293B;
    margin: 0 0 0.4rem;
    line-height: 1.4;
}

.notification-item__time {
    font-size: 1.2rem;
    color: #94A3B8;
}

.notification-item__dot {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: #3B82F6;
    flex-shrink: 0;
}

/* Messages Container */
.messages-container {
    background: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    min-height: 40rem;
}

/* Responsive */
@media (max-width: 768px) {
    .messages-hero,
    .notifications-hero {
        padding: 2rem 1.6rem;
        border-radius: 1.4rem;
    }
    
    .messages-hero__content,
    .notifications-hero__content {
        flex-direction: column;
        text-align: center;
    }
    
    .messages-hero__left,
    .notifications-hero__left {
        flex-direction: column;
    }
    
    .messages-hero__icon,
    .notifications-hero__icon {
        width: 5.6rem;
        height: 5.6rem;
    }
    
    .messages-hero__icon i,
    .notifications-hero__icon i {
        font-size: 2.4rem;
    }
    
    .messages-hero__title,
    .notifications-hero__title {
        font-size: 1.8rem;
    }
    
    .messages-hero__subtitle,
    .notifications-hero__subtitle {
        font-size: 1.2rem;
    }
}

/* Saved Candidates Grid */
.saved-candidates-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Saved Candidate Card */
.saved-candidate-card {
    background: #fff;
    border-radius: 1.2rem;
    border: 1px solid #e2e8f0;
    padding: 1.8rem;
    transition: all 0.2s ease;
}

.saved-candidate-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.saved-candidate-card__header {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.saved-candidate-card__avatar {
    width: 6rem;
    height: 6rem;
    border-radius: 1rem;
    overflow: hidden;
    flex-shrink: 0;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    display: flex;
    align-items: center;
    justify-content: center;
}

.saved-candidate-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.saved-candidate-card__initial {
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
}

.saved-candidate-card__info {
    flex: 1;
    min-width: 0;
}

.saved-candidate-card__name {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0 0 0.4rem;
}

.saved-candidate-card__name a {
    color: #0f172a;
    text-decoration: none;
}

.saved-candidate-card__name a:hover {
    color: #3b82f6;
}

.saved-candidate-card__headline {
    color: #64748b;
    font-size: 1.4rem;
    margin: 0 0 0.8rem;
}

.saved-candidate-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    font-size: 1.3rem;
    color: #94a3b8;
}

.saved-candidate-card__meta span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.saved-candidate-card__actions-top {
    flex-shrink: 0;
}

.saved-candidate-card__menu {
    background: none;
    border: none;
    color: #94a3b8;
    padding: 0.5rem 0.8rem;
    cursor: pointer;
    border-radius: 0.6rem;
    transition: all 0.2s ease;
}

.saved-candidate-card__menu:hover {
    background: #f1f5f9;
    color: #475569;
}

.saved-candidate-card__skills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
}

.saved-candidate-card__notes {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 0.8rem;
    padding: 1rem 1.2rem;
    font-size: 1.3rem;
    color: #92400e;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.saved-candidate-card__notes i {
    color: #f59e0b;
    margin-top: 0.2rem;
}

.saved-candidate-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.2rem;
    border-top: 1px solid #f1f5f9;
    gap: 1rem;
}

.saved-candidate-card__saved-info {
    font-size: 1.2rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.saved-candidate-card__saved-info i {
    margin-right: 0.3rem;
}

.saved-candidate-card__folder {
    background: #f1f5f9;
    padding: 0.3rem 0.8rem;
    border-radius: 0.5rem;
    font-weight: 500;
    color: #475569;
}

.saved-candidate-card__buttons {
    display: flex;
    gap: 0.8rem;
}

/* Folder Options in Modal */
.saved-folder-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
}

.saved-folder-option {
    cursor: pointer;
    margin: 0;
}

.saved-folder-option input {
    display: none;
}

.saved-folder-option__box {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1.2rem;
    border: 1.5px solid #e2e8f0;
    border-radius: 0.8rem;
    font-size: 1.3rem;
    color: #475569;
    transition: all 0.2s ease;
}

.saved-folder-option__box i {
    color: #94a3b8;
}

.saved-folder-option input:checked + .saved-folder-option__box {
    border-color: #3b82f6;
    background: #eff6ff;
    color: #3b82f6;
}

.saved-folder-option input:checked + .saved-folder-option__box i {
    color: #3b82f6;
}

.saved-folder-option:hover .saved-folder-option__box {
    border-color: #cbd5e1;
}

/* Responsive */
@media (max-width: 991px) {
    .saved-candidate-card__footer {
        flex-direction: column;
        align-items: stretch;
    }
    
    .saved-candidate-card__buttons {
        justify-content: stretch;
    }
    
    .saved-candidate-card__buttons .btn {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .saved-candidate-card__header {
        flex-wrap: wrap;
    }
    
    .saved-candidate-card__avatar {
        width: 5rem;
        height: 5rem;
    }
    
    .saved-candidate-card__initial {
        font-size: 1.6rem;
    }
    
    .saved-candidate-card__actions-top {
        position: absolute;
        right: 1rem;
        top: 1rem;
    }
    
    .saved-candidate-card {
        position: relative;
    }
}

/* ============================================
   Reports Page Styles
   ============================================ */

/* Period Selector */
.report-period-selector {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.report-period-selector label {
    font-size: 1.4rem;
    color: #64748b;
    white-space: nowrap;
}

/* Overview Stats */
.report-overview {
    margin-bottom: 1rem;
}

.report-stat-card {
    background: #fff;
    border-radius: 1.2rem;
    padding: 1.8rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    border: 1px solid #e2e8f0;
    height: 100%;
}

.report-stat-card__icon {
    width: 5rem;
    height: 5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
}

.report-stat-card__icon--blue {
    background: #eff6ff;
    color: #3b82f6;
}

.report-stat-card__icon--green {
    background: #ecfdf5;
    color: #10b981;
}

.report-stat-card__icon--purple {
    background: #f5f3ff;
    color: #8b5cf6;
}

.report-stat-card__icon--orange {
    background: #fff7ed;
    color: #f97316;
}

.report-stat-card__icon--teal {
    background: #f0fdfa;
    color: #14b8a6;
}

.report-stat-card__icon--success {
    background: #ecfdf5;
    color: #059669;
}

.report-stat-card__content {
    display: flex;
    flex-direction: column;
}

.report-stat-card__value {
    font-size: 2.4rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.report-stat-card__label {
    font-size: 1.2rem;
    color: #64748b;
    margin-top: 0.3rem;
}

/* Chart Containers */
.report-chart-container {
    height: 30rem;
    position: relative;
}

.report-chart-container--pie {
    height: 20rem;
    margin-bottom: 1.5rem;
}

/* Status Legend */
.report-status-legend {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.report-status-legend__item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.3rem;
}

.report-status-legend__dot {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.report-status-legend__dot--pending { background: #94a3b8; }
.report-status-legend__dot--new { background: #64748b; }
.report-status-legend__dot--reviewed { background: #3b82f6; }
.report-status-legend__dot--shortlisted { background: #8b5cf6; }
.report-status-legend__dot--interview { background: #f59e0b; }
.report-status-legend__dot--offered { background: #10b981; }
.report-status-legend__dot--hired { background: #059669; }
.report-status-legend__dot--rejected { background: #ef4444; }

.report-status-legend__label {
    flex: 1;
    color: #475569;
}

.report-status-legend__value {
    font-weight: 600;
    color: #0f172a;
}

/* Hiring Funnel */
.hiring-funnel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.hiring-funnel__step {
    position: relative;
}

.hiring-funnel__bar {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
    border-radius: 0.6rem;
    padding: 1rem 1.4rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-width: 15rem;
    transition: width 0.5s ease;
}

.hiring-funnel__step--success .hiring-funnel__bar {
    background: linear-gradient(90deg, #059669, #10b981);
}

.hiring-funnel__label {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 500;
}

.hiring-funnel__value {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 700;
}

.hiring-funnel__summary {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e2e8f0;
}

.hiring-funnel__metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hiring-funnel__metric-label {
    font-size: 1.4rem;
    color: #64748b;
}

.hiring-funnel__metric-value {
    font-size: 2rem;
    font-weight: 700;
    color: #059669;
}

/* Top Jobs Table */
.top-jobs-table {
    overflow-x: auto;
}

.top-jobs-table table {
    width: 100%;
    border-collapse: collapse;
}

.top-jobs-table thead th {
    background: #f8fafc;
    padding: 1.2rem 1.5rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.top-jobs-table tbody td {
    padding: 1.2rem 1.5rem;
    font-size: 1.4rem;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
}

.top-jobs-table tbody tr:last-child td {
    border-bottom: none;
}

.top-jobs-table tbody tr:hover {
    background: #f8fafc;
}

.top-jobs-table__title {
    color: #0f172a;
    text-decoration: none;
    font-weight: 500;
}

.top-jobs-table__title:hover {
    color: #3b82f6;
}

.top-jobs-table__rate {
    font-weight: 600;
}

/* Interview Stats Grid */
.interview-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.interview-stat-item {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 1.5rem;
    background: #f8fafc;
    border-radius: 1rem;
}

.interview-stat-item__icon {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
}

.interview-stat-item__icon--scheduled {
    background: #eff6ff;
    color: #3b82f6;
}

.interview-stat-item__icon--confirmed {
    background: #ecfdf5;
    color: #10b981;
}

.interview-stat-item__icon--completed {
    background: #f5f3ff;
    color: #8b5cf6;
}

.interview-stat-item__icon--cancelled {
    background: #fef2f2;
    color: #ef4444;
}

.interview-stat-item__info {
    display: flex;
    flex-direction: column;
}

.interview-stat-item__value {
    font-size: 2rem;
    font-weight: 700;
    color: #0f172a;
}

.interview-stat-item__label {
    font-size: 1.2rem;
    color: #64748b;
}

/* Report Tips */
.report-tips {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.report-tip {
    display: flex;
    gap: 1.2rem;
    padding: 1.5rem;
    background: #f8fafc;
    border-radius: 1rem;
}

.report-tip > i {
    font-size: 1.8rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
}

.report-tip__content {
    flex: 1;
}

.report-tip__content strong {
    display: block;
    font-size: 1.4rem;
    color: #0f172a;
    margin-bottom: 0.4rem;
}

.report-tip__content p {
    font-size: 1.3rem;
    color: #64748b;
    margin: 0;
}

/* Empty State Compact */
.employer-empty--compact {
    padding: 3rem 2rem;
    text-align: center;
}

.employer-empty--compact i {
    font-size: 3rem;
    color: #cbd5e1;
    margin-bottom: 1rem;
}

.employer-empty--compact p {
    font-size: 1.4rem;
    color: #94a3b8;
    margin: 0;
}

/* Responsive */
@media (max-width: 991px) {
    .report-stat-card {
        padding: 1.4rem;
    }
    
    .report-stat-card__icon {
        width: 4rem;
        height: 4rem;
        font-size: 1.6rem;
    }
    
    .report-stat-card__value {
        font-size: 2rem;
    }
    
    .interview-stats-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .report-period-selector {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    
    .employer-page-header__right {
        flex-direction: column;
        gap: 1rem;
    }
    
    .report-chart-container {
        height: 25rem;
    }
}

/* =====================================================
   REPORTS HERO HEADER
   ===================================================== */
.reports-hero {
    position: relative;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 50%, #1e1b4b 100%);
    border-radius: 1.6rem;
    padding: 2.8rem 3rem;
    margin-bottom: 2.4rem;
}

.reports-hero__bg {
    position: absolute;
    inset: 0;
    opacity: 0.15;
}

.reports-hero__pattern {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(6, 182, 212, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(168, 85, 247, 0.2) 0%, transparent 40%);
}

.reports-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 50rem;
    height: 50rem;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%);
    border-radius: 50%;
}

.reports-hero::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: 10%;
    width: 30rem;
    height: 30rem;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.1) 0%, transparent 70%);
    border-radius: 50%;
}

.reports-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.reports-hero__left {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.reports-hero__icon {
    width: 6.4rem;
    height: 6.4rem;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(168, 85, 247, 0.3) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.reports-hero__icon i {
    font-size: 2.8rem;
    background: linear-gradient(135deg, #a5b4fc, #c4b5fd);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.reports-hero__title {
    font-size: 2.4rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.6rem 0;
    letter-spacing: -0.02em;
}

.reports-hero__subtitle {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.reports-hero__subtitle i {
    font-size: 1.2rem;
    color: rgba(99, 102, 241, 0.8);
}

.reports-hero__actions {
    display: flex;
    align-items: center;
    gap: 1.2rem;
}

/* Period Dropdown */
.reports-period-dropdown {
    position: relative;
}

.reports-period-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.6rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 1rem;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    backdrop-filter: blur(10px);
}

.reports-period-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
}

.reports-period-btn i:first-child {
    font-size: 1.5rem;
    color: rgba(165, 180, 252, 0.9);
}

.reports-period-btn i:last-child {
    font-size: 1.1rem;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.reports-period-dropdown.open .reports-period-btn i:last-child {
    transform: rotate(180deg);
}

.reports-period-menu {
    position: absolute;
    top: calc(100% + 0.8rem);
    right: 0;
    min-width: 20rem;
    background: #ffffff;
    border-radius: 1.2rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.05);
    padding: 0.8rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 100;
}

.reports-period-dropdown.open .reports-period-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.reports-period-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.4rem;
    color: #475569;
    font-size: 1.4rem;
    font-weight: 500;
    border-radius: 0.8rem;
    text-decoration: none;
    transition: all 0.15s ease;
}

.reports-period-item:hover {
    background: #f1f5f9;
    color: #1e40af;
    text-decoration: none;
}

.reports-period-item.active {
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    color: #4f46e5;
}

.reports-period-item i {
    font-size: 1.4rem;
    width: 2rem;
    text-align: center;
}

/* Export Button */
.reports-export-btn {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    border-radius: 1rem;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.reports-export-btn:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    color: #ffffff;
    text-decoration: none;
}

.reports-export-btn i {
    font-size: 1.5rem;
}

/* Responsive */
@media (max-width: 991px) {
    .reports-hero {
        padding: 2rem;
    }
    
    .reports-hero__content {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }
    
    .reports-hero__actions {
        width: 100%;
        flex-wrap: wrap;
    }
}

@media (max-width: 575px) {
    .reports-hero {
        padding: 1.6rem;
        border-radius: 1.2rem;
    }
    
    .reports-hero__left {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
    }
    
    .reports-hero__icon {
        width: 5rem;
        height: 5rem;
    }
    
    .reports-hero__icon i {
        font-size: 2.2rem;
    }
    
    .reports-hero__title {
        font-size: 1.8rem;
    }
    
    .reports-hero__subtitle {
        font-size: 1.3rem;
    }
    
    .reports-hero__actions {
        flex-direction: column;
    }
    
    .reports-period-btn,
    .reports-export-btn {
        width: 100%;
        justify-content: center;
    }
    
    .reports-period-menu {
        left: 0;
        right: 0;
    }
}

/* =====================================================
   SETTINGS PAGE
   ===================================================== */

/* Settings Hero */
.settings-hero {
    position: relative;
    background: linear-gradient(135deg, #0f766e 0%, #115e59 50%, #134e4a 100%);
    border-radius: 1.6rem;
    padding: 2.4rem 3rem;
    margin-bottom: 2.4rem;
    overflow: hidden;
}

.settings-hero__bg {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 80% 20%, rgba(45, 212, 191, 0.2) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(20, 184, 166, 0.15) 0%, transparent 40%);
}

.settings-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.settings-hero__icon {
    width: 6rem;
    height: 6rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.settings-hero__icon i {
    font-size: 2.6rem;
    color: #5eead4;
}

.settings-hero__title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.4rem 0;
}

.settings-hero__subtitle {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
}

/* Settings Container */
.settings-container {
    display: flex;
    gap: 2.4rem;
}

/* Settings Tabs (Sidebar) */
.settings-tabs {
    flex-shrink: 0;
    width: 24rem;
    background: #ffffff;
    border-radius: 1.2rem;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    height: fit-content;
    position: sticky;
    top: 2rem;
}

.settings-tab {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    width: 100%;
    padding: 1.2rem 1.4rem;
    background: transparent;
    border: none;
    border-radius: 0.8rem;
    color: #64748b;
    font-size: 1.4rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
}

.settings-tab:hover {
    background: #f1f5f9;
    color: #334155;
}

.settings-tab.active {
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #ffffff;
}

.settings-tab i {
    font-size: 1.6rem;
    width: 2rem;
    text-align: center;
}

/* Settings Content */
.settings-content {
    flex: 1;
    min-width: 0;
}

.settings-panel {
    display: none;
    background: #ffffff;
    border-radius: 1.2rem;
    padding: 2.4rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.settings-panel.active {
    display: block;
}

.settings-panel__header {
    margin-bottom: 2.4rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid #e2e8f0;
}

.settings-panel__title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.6rem 0;
}

.settings-panel__desc {
    font-size: 1.4rem;
    color: #64748b;
    margin: 0;
}

/* Settings Section */
.settings-section {
    margin-bottom: 2.4rem;
}

.settings-section:last-child {
    margin-bottom: 0;
}

.settings-section__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #334155;
    margin: 0 0 1.6rem 0;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.settings-section__title i {
    color: #0d9488;
}

/* Settings Form */
.settings-form__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.6rem;
    margin-bottom: 1.6rem;
}

.settings-form__row:last-child {
    margin-bottom: 0;
}

.settings-form__group--full {
    grid-column: span 2;
}

.settings-form__label {
    display: block;
    font-size: 1.3rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.6rem;
}

.settings-form__input,
.settings-form__select {
    width: 100%;
    padding: 1rem 1.4rem;
    font-size: 1.4rem;
    color: #1e293b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.8rem;
    transition: all 0.2s ease;
}

.settings-form__input:focus,
.settings-form__select:focus {
    outline: none;
    background: #ffffff;
    border-color: #0d9488;
    box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
}

.settings-form__input-wrap {
    position: relative;
}

.settings-form__input-wrap .settings-form__input {
    padding-right: 4rem;
}

.settings-form__toggle-password {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 0.5rem;
    font-size: 1.5rem;
    transition: color 0.2s ease;
}

.settings-form__toggle-password:hover {
    color: #64748b;
}

.settings-form__hint {
    display: block;
    font-size: 1.2rem;
    color: #94a3b8;
    margin-top: 0.4rem;
}

.settings-form__actions {
    margin-top: 2.4rem;
    padding-top: 2rem;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

/* Settings Buttons */
.settings-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 2rem;
    font-size: 1.4rem;
    font-weight: 600;
    border-radius: 0.8rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-btn--primary {
    background: linear-gradient(135deg, #0d9488, #0f766e);
    color: #ffffff;
}

.settings-btn--primary:hover {
    background: linear-gradient(135deg, #0f766e, #115e59);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
}

.settings-btn--danger {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.settings-btn--danger:hover {
    background: #fecaca;
}

/* Settings Toggle */
.settings-toggle-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.settings-toggle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.6rem 0;
    border-bottom: 1px solid #f1f5f9;
}

.settings-toggle-item:last-child {
    border-bottom: none;
}

.settings-toggle-item__info {
    flex: 1;
}

.settings-toggle-item__title {
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 0.3rem;
}

.settings-toggle-item__desc {
    display: block;
    font-size: 1.3rem;
    color: #94a3b8;
}

.settings-toggle {
    position: relative;
    width: 4.8rem;
    height: 2.6rem;
    flex-shrink: 0;
}

.settings-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.settings-toggle__slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #cbd5e1;
    border-radius: 2.6rem;
    transition: all 0.3s ease;
}

.settings-toggle__slider::before {
    content: '';
    position: absolute;
    height: 2rem;
    width: 2rem;
    left: 0.3rem;
    bottom: 0.3rem;
    background: #ffffff;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.settings-toggle input:checked + .settings-toggle__slider {
    background: linear-gradient(135deg, #0d9488, #0f766e);
}

.settings-toggle input:checked + .settings-toggle__slider::before {
    transform: translateX(2.2rem);
}

/* Danger Zone */
.settings-danger-zone {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    padding: 1.6rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 1rem;
}

.settings-danger-zone__info p {
    margin: 0;
    font-size: 1.4rem;
}

.settings-danger-zone__info p:first-child {
    color: #991b1b;
    margin-bottom: 0.3rem;
}

/* Responsive */
@media (max-width: 991px) {
    .settings-container {
        flex-direction: column;
    }
    
    .settings-tabs {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
        position: static;
    }
    
    .settings-tab {
        flex: 1;
        min-width: calc(50% - 0.25rem);
        justify-content: center;
        padding: 1rem;
    }
    
    .settings-tab span {
        display: none;
    }
    
    .settings-tab i {
        margin: 0;
    }
}

@media (max-width: 767px) {
    .settings-hero {
        padding: 2rem;
    }
    
    .settings-hero__content {
        flex-direction: column;
        text-align: center;
    }
    
    .settings-hero__icon {
        width: 5rem;
        height: 5rem;
    }
    
    .settings-hero__title {
        font-size: 1.8rem;
    }
    
    .settings-panel {
        padding: 1.6rem;
    }
    
    .settings-form__row {
        grid-template-columns: 1fr;
    }
    
    .settings-form__group--full {
        grid-column: span 1;
    }
    
    .settings-danger-zone {
        flex-direction: column;
        text-align: center;
    }
}

/* =====================================================
   ANALYTICS PAGE
   ===================================================== */

/* Analytics Hero */
.analytics-hero {
    position: relative;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 50%, #5b21b6 100%);
    border-radius: 1.6rem;
    padding: 2.4rem 3rem;
    margin-bottom: 2.4rem;
    overflow: hidden;
}

.analytics-hero__bg {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 85% 15%, rgba(196, 181, 253, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 15% 85%, rgba(167, 139, 250, 0.2) 0%, transparent 40%);
}

.analytics-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2rem;
}

.analytics-hero__left {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.analytics-hero__icon {
    width: 6rem;
    height: 6rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.analytics-hero__icon i {
    font-size: 2.6rem;
    color: #e9d5ff;
}

.analytics-hero__title {
    font-size: 2.2rem;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 0.4rem 0;
}

.analytics-hero__subtitle {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.analytics-hero__subtitle i {
    color: #fbbf24;
}

/* Quick Stats */
.analytics-quick-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
    margin-bottom: 2.4rem;
}

.analytics-stat-card {
    background: #ffffff;
    border-radius: 1.2rem;
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1.6rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.analytics-stat-card__icon {
    width: 5rem;
    height: 5rem;
    border-radius: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.analytics-stat-card--purple .analytics-stat-card__icon {
    background: linear-gradient(135deg, #ede9fe, #ddd6fe);
    color: #7c3aed;
}

.analytics-stat-card--green .analytics-stat-card__icon {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #16a34a;
}

.analytics-stat-card--blue .analytics-stat-card__icon {
    background: linear-gradient(135deg, #dbeafe, #bfdbfe);
    color: #2563eb;
}

.analytics-stat-card--orange .analytics-stat-card__icon {
    background: linear-gradient(135deg, #ffedd5, #fed7aa);
    color: #ea580c;
}

.analytics-stat-card__value {
    display: block;
    font-size: 2.4rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}

.analytics-stat-card__label {
    display: block;
    font-size: 1.3rem;
    color: #64748b;
    margin-top: 0.2rem;
}

/* Analytics Grid */
.analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.analytics-card {
    background: #ffffff;
    border-radius: 1.2rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.analytics-card--wide {
    grid-column: span 2;
}

.analytics-card--tips {
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-color: #fcd34d;
}

.analytics-card__header {
    padding: 1.6rem 2rem;
    border-bottom: 1px solid #f1f5f9;
}

.analytics-card__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #334155;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.analytics-card__title i {
    color: #7c3aed;
}

.analytics-card__subtitle {
    font-size: 1.2rem;
    color: #94a3b8;
    margin-left: auto;
}

.analytics-card__body {
    padding: 2rem;
}

.analytics-card__body--no-padding {
    padding: 0;
}

/* Chart Container */
.analytics-chart-container {
    height: 28rem;
    position: relative;
}

.analytics-chart-container--sm {
    height: 20rem;
}

/* Sources List */
.analytics-sources {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

.analytics-source-item {
    display: grid;
    grid-template-columns: 1fr 12rem 4rem;
    align-items: center;
    gap: 1.2rem;
}

.analytics-source-item__name {
    font-size: 1.4rem;
    font-weight: 500;
    color: #334155;
}

.analytics-source-item__count {
    font-size: 1.2rem;
    color: #94a3b8;
}

.analytics-source-item__bar {
    height: 0.8rem;
    background: #f1f5f9;
    border-radius: 0.4rem;
    overflow: hidden;
}

.analytics-source-item__progress {
    height: 100%;
    background: linear-gradient(90deg, #a78bfa, #7c3aed);
    border-radius: 0.4rem;
    transition: width 0.5s ease;
}

.analytics-source-item__percent {
    font-size: 1.3rem;
    font-weight: 600;
    color: #7c3aed;
    text-align: right;
}

/* Stage Legend */
.analytics-stage-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid #f1f5f9;
}

.analytics-stage-legend__item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.2rem;
}

.analytics-stage-legend__dot {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #94a3b8;
}

.analytics-stage-legend__dot--pending { background: #94a3b8; }
.analytics-stage-legend__dot--reviewed { background: #3b82f6; }
.analytics-stage-legend__dot--shortlisted { background: #8b5cf6; }
.analytics-stage-legend__dot--interview { background: #f59e0b; }
.analytics-stage-legend__dot--offered { background: #10b981; }
.analytics-stage-legend__dot--hired { background: #059669; }
.analytics-stage-legend__dot--rejected { background: #ef4444; }

.analytics-stage-legend__label {
    color: #64748b;
}

.analytics-stage-legend__value {
    font-weight: 600;
    color: #334155;
}

/* Analytics Table */
.analytics-table-wrap {
    overflow-x: auto;
}

.analytics-table {
    width: 100%;
    border-collapse: collapse;
}

.analytics-table th {
    padding: 1.2rem 1.6rem;
    font-size: 1.2rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

.analytics-table td {
    padding: 1.4rem 1.6rem;
    font-size: 1.4rem;
    color: #334155;
    border-bottom: 1px solid #f1f5f9;
}

.analytics-table tbody tr:hover {
    background: #f8fafc;
}

.analytics-job-link {
    color: #334155;
    font-weight: 500;
    text-decoration: none;
}

.analytics-job-link:hover {
    color: #7c3aed;
}

.analytics-metric {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #64748b;
}

.analytics-metric--primary {
    color: #7c3aed;
    font-weight: 600;
}

.analytics-badge {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 0.6rem;
}

.analytics-badge--success {
    background: #dcfce7;
    color: #16a34a;
}

.analytics-badge--warning {
    background: #fef3c7;
    color: #d97706;
}

.analytics-badge--danger {
    background: #fee2e2;
    color: #dc2626;
}

.analytics-performance {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 1.2rem;
    font-weight: 600;
}

.analytics-performance--excellent {
    color: #16a34a;
}

.analytics-performance--good {
    color: #d97706;
}

.analytics-performance--poor {
    color: #dc2626;
}

/* Peak Hours Heatmap */
.analytics-heatmap {
    padding: 0.5rem;
}

.analytics-heatmap__labels {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0 0.5rem;
}

.analytics-heatmap__labels span {
    font-size: 1.1rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: center;
}

.analytics-heatmap__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.8rem;
}

.analytics-heatmap__cell {
    position: relative;
    padding: 1.2rem 0.8rem;
    border-radius: 1rem;
    text-align: center;
    cursor: default;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.analytics-heatmap__cell:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.analytics-heatmap__cell--level-0 {
    background: linear-gradient(135deg, #f8fafc, #f1f5f9);
    border-color: #e2e8f0;
}

.analytics-heatmap__cell--level-1 {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    border-color: #86efac;
}

.analytics-heatmap__cell--level-2 {
    background: linear-gradient(135deg, #bbf7d0, #86efac);
    border-color: #4ade80;
}

.analytics-heatmap__cell--level-3 {
    background: linear-gradient(135deg, #86efac, #4ade80);
    border-color: #22c55e;
}

.analytics-heatmap__cell--level-4 {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    border-color: #16a34a;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
}

.analytics-heatmap__hour {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 0.3rem;
}

.analytics-heatmap__cell--level-3 .analytics-heatmap__hour,
.analytics-heatmap__cell--level-4 .analytics-heatmap__hour {
    color: #166534;
}

.analytics-heatmap__count {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    color: #334155;
}

.analytics-heatmap__cell--level-3 .analytics-heatmap__count,
.analytics-heatmap__cell--level-4 .analytics-heatmap__count {
    color: #15803d;
}

.analytics-heatmap__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #f1f5f9;
}

.analytics-heatmap__legend {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.analytics-heatmap__legend-label {
    font-size: 1.2rem;
    color: #94a3b8;
    font-weight: 500;
}

.analytics-heatmap__legend-scale {
    display: flex;
    gap: 0.3rem;
}

.analytics-heatmap__legend-item {
    width: 2rem;
    height: 1.4rem;
    border-radius: 0.3rem;
}

.analytics-heatmap__peak {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.3rem;
    color: #64748b;
    padding: 0.8rem 1.4rem;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 2rem;
    border: 1px solid #fcd34d;
}

.analytics-heatmap__peak i {
    color: #f59e0b;
}

.analytics-heatmap__peak strong {
    color: #b45309;
}

/* Interview Stats */
.analytics-interview-stats {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.analytics-interview-stat {
    text-align: center;
}

.analytics-interview-stat__circle {
    position: relative;
    width: 12rem;
    height: 12rem;
}

.analytics-interview-stat__circle svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.analytics-circle-bg {
    fill: none;
    stroke: #e2e8f0;
    stroke-width: 3;
}

.analytics-circle-progress {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.5s ease;
}

.analytics-circle-progress--blue {
    stroke: #7c3aed;
}

.analytics-interview-stat__value {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.4rem;
    font-weight: 700;
    color: #1e293b;
}

.analytics-interview-stat__label {
    display: block;
    margin-top: 1rem;
    font-size: 1.3rem;
    color: #64748b;
}

.analytics-interview-stat-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.analytics-interview-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.4rem;
    background: #f8fafc;
    border-radius: 0.8rem;
}

.analytics-interview-stat-item__label {
    font-size: 1.3rem;
    color: #64748b;
}

.analytics-interview-stat-item__value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #334155;
}

.analytics-interview-stat-item__value--success {
    color: #16a34a;
}

/* Tips */
.analytics-tips {
    display: flex;
    gap: 2rem;
    padding: 2rem;
}

.analytics-tips__icon {
    width: 5rem;
    height: 5rem;
    background: rgba(245, 158, 11, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.analytics-tips__icon i {
    font-size: 2.2rem;
    color: #d97706;
}

.analytics-tips__content h4 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #92400e;
    margin: 0 0 1rem 0;
}

.analytics-tips__content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.analytics-tips__content li {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    font-size: 1.3rem;
    color: #78350f;
    margin-bottom: 0.6rem;
}

.analytics-tips__content li i {
    color: #16a34a;
    margin-top: 0.2rem;
}

/* Responsive */
@media (max-width: 1199px) {
    .analytics-quick-stats {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 991px) {
    .analytics-grid {
        grid-template-columns: 1fr;
    }
    
    .analytics-card--wide {
        grid-column: span 1;
    }
    
    .analytics-heatmap__grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .analytics-heatmap__labels {
        display: none;
    }
}

@media (max-width: 767px) {
    .analytics-hero {
        padding: 2rem;
    }
    
    .analytics-hero__content {
        flex-direction: column;
        text-align: center;
    }
    
    .analytics-hero__left {
        flex-direction: column;
    }
    
    .analytics-quick-stats {
        grid-template-columns: 1fr;
    }
    
    .analytics-stat-card {
        padding: 1.4rem;
    }
    
    .analytics-source-item {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
    
    .analytics-source-item__bar {
        width: 100%;
    }
    
    .analytics-heatmap__grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
    }
    
    .analytics-heatmap__cell {
        padding: 0.8rem 0.5rem;
    }
    
    .analytics-heatmap__footer {
        flex-direction: column;
        gap: 1rem;
    }
    
    .analytics-interview-stats {
        flex-direction: column;
    }
}

/* ============================================
   INTERVIEWS PAGE STYLES
   ============================================ */

/* Interviews Hero - Synced with reports/analytics hero */
.interviews-hero {
    position: relative;
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 50%, #A855F7 100%);
    border-radius: 1.6rem;
    padding: 2.8rem 3rem;
    margin-bottom: 2.4rem;
    overflow: hidden;
}

.interviews-hero__bg {
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 80%, rgba(255,255,255,0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255,255,255,0.2) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.interviews-hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 50rem;
    height: 50rem;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.interviews-hero__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.interviews-hero__left {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.interviews-hero__icon {
    width: 6.4rem;
    height: 6.4rem;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.interviews-hero__icon i {
    font-size: 2.8rem;
    color: #fff;
}

.interviews-hero__text {
    color: #fff;
}

.interviews-hero__title {
    font-size: 2.4rem;
    font-weight: 700;
    margin: 0 0 0.6rem 0;
    color: #fff;
    letter-spacing: -0.02em;
}

.interviews-hero__subtitle {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
}

.interviews-hero__subtitle i {
    font-size: 1.2rem;
}

.interviews-hero__actions {
    display: flex;
    gap: 1rem;
}

.interviews-hero__btn {
    padding: 1.2rem 2rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 1rem;
    color: #fff;
    font-size: 1.4rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    backdrop-filter: blur(10px);
}

.interviews-hero__btn:hover {
    background: #fff;
    color: #4F46E5;
    border-color: #fff;
    transform: translateY(-2px);
}

.interviews-hero__btn i {
    font-size: 1.4rem;
}

/* Interview Stats - Synced with other pages */
.interviews-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 2.4rem;
}

.interviews-stat-card {
    background: #fff;
    border-radius: 1.4rem;
    padding: 2rem;
    display: flex;
    align-items: center;
    gap: 1.6rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    border: 1px solid #e2e8f0;
    transition: all 0.25s ease;
}

.interviews-stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

.interviews-stat-card__icon {
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.interviews-stat-card__icon i {
    font-size: 2.2rem;
}

.interviews-stat-card--upcoming .interviews-stat-card__icon {
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    color: #4F46E5;
}

.interviews-stat-card--today .interviews-stat-card__icon {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    color: #D97706;
}

.interviews-stat-card--completed .interviews-stat-card__icon {
    background: linear-gradient(135deg, #D1FAE5 0%, #A7F3D0 100%);
    color: #059669;
}

.interviews-stat-card--cancelled .interviews-stat-card__icon {
    background: linear-gradient(135deg, #FEE2E2 0%, #FECACA 100%);
    color: #DC2626;
}

.interviews-stat-card__content {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.interviews-stat-card__value {
    font-size: 2.8rem;
    font-weight: 700;
    color: #1E293B;
    line-height: 1;
}

.interviews-stat-card__label {
    font-size: 1.4rem;
    color: #64748B;
}

/* Filter Tabs - Synced */
.interviews-filter {
    background: #fff;
    border-radius: 1.4rem;
    padding: 1.6rem 2rem;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    border: 1px solid #e2e8f0;
}

.interviews-filter__tabs {
    display: flex;
    gap: 0.8rem;
}

.interviews-filter__tab {
    padding: 1rem 1.6rem;
    border-radius: 1rem;
    font-size: 1.4rem;
    font-weight: 500;
    color: #64748B;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    transition: all 0.2s ease;
    text-decoration: none;
}

.interviews-filter__tab i {
    font-size: 1.4rem;
}

.interviews-filter__tab:hover {
    background: #F1F5F9;
    color: #334155;
    text-decoration: none;
}

.interviews-filter__tab.active {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    color: #fff;
}

.interviews-filter__search {
    display: flex;
    align-items: center;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 1rem;
    padding: 0 1.4rem;
    max-width: 32rem;
    flex: 1;
}

.interviews-filter__search i {
    color: #94A3B8;
    font-size: 1.4rem;
}

.interviews-filter__input {
    border: none;
    background: transparent;
    padding: 1rem 1.2rem;
    font-size: 1.4rem;
    width: 100%;
    outline: none;
}

.interviews-filter__input::placeholder {
    color: #94A3B8;
}

/* Interview List */
.interviews-list {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

/* Interview Card */
.interview-card {
    background: #fff;
    border-radius: 1.4rem;
    padding: 2rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 2.4rem;
    align-items: start;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
    border: 1px solid #e2e8f0;
    transition: all 0.25s ease;
}

.interview-card:hover {
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
    border-color: #CBD5E1;
}

/* Schedule Column */
.interview-card__schedule {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    min-width: 10rem;
}

.interview-card__date-box {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    border-radius: 1.2rem;
    padding: 1.4rem 1.6rem;
    text-align: center;
    min-width: 8rem;
}

.interview-card__day {
    display: block;
    font-size: 3.2rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.interview-card__month {
    display: block;
    font-size: 1.4rem;
    color: rgba(255,255,255,0.9);
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 0.4rem;
}

.interview-card__time-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
}

.interview-card__time {
    font-size: 1.4rem;
    font-weight: 600;
    color: #1E293B;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.interview-card__time i {
    font-size: 1.2rem;
    color: #4F46E5;
}

.interview-card__duration {
    font-size: 1.3rem;
    color: #64748B;
}

/* Main Content */
.interview-card__main {
    display: flex;
    flex-direction: column;
    gap: 1.4rem;
}

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

.interview-card__candidate {
    display: flex;
    align-items: center;
    gap: 1.4rem;
}

.interview-card__avatar {
    width: 5.6rem;
    height: 5.6rem;
    border-radius: 1rem;
    overflow: hidden;
    background: linear-gradient(135deg, #E0E7FF 0%, #C7D2FE 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.interview-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.interview-card__avatar span {
    font-size: 2rem;
    font-weight: 600;
    color: #4F46E5;
}

.interview-card__info {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.interview-card__name {
    font-size: 1.6rem;
    font-weight: 600;
    color: #1E293B;
    margin: 0;
}

.interview-card__position {
    font-size: 1.4rem;
    color: #64748B;
    margin: 0;
}

.interview-card__badges {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.interview-card__badge {
    padding: 0.6rem 1.2rem;
    border-radius: 0.8rem;
    font-size: 1.3rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.interview-card__badge i {
    font-size: 1.2rem;
}

.interview-card__badge--type-online {
    background: #DBEAFE;
    color: #1D4ED8;
}

.interview-card__badge--type-onsite {
    background: #D1FAE5;
    color: #059669;
}

.interview-card__badge--type-phone {
    background: #FEF3C7;
    color: #D97706;
}

.interview-card__badge--round {
    background: #F1F5F9;
    color: #475569;
}

/* Meta Info */
.interview-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
}

.interview-card__meta-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.4rem;
    color: #64748B;
}

.interview-card__meta-item i {
    font-size: 1.4rem;
    color: #94A3B8;
}

.interview-card__meta-item--link a {
    color: #4F46E5;
    text-decoration: none;
}

.interview-card__meta-item--link a:hover {
    text-decoration: underline;
}

.interview-card__meta-item--note {
    background: #FFFBEB;
    padding: 0.6rem 1rem;
    border-radius: 0.8rem;
}

.interview-card__meta-item--note i {
    color: #F59E0B;
}

/* Actions */
.interview-card__actions {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.interview-card__action {
    width: 4.4rem;
    height: 4.4rem;
    border-radius: 1rem;
    border: 1px solid #E2E8F0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #64748B;
}

.interview-card__action i {
    font-size: 1.6rem;
}

.interview-card__action:hover {
    transform: scale(1.05);
}

.interview-card__action--primary {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    color: #fff;
    border: none;
    text-decoration: none;
    width: auto;
    height: auto;
    padding: 1rem 1.6rem;
    gap: 0.6rem;
    font-size: 1.4rem;
    font-weight: 500;
}

.interview-card__action--primary span {
    display: inline;
}

.interview-card__action--primary:hover {
    background: linear-gradient(135deg, #4338CA 0%, #6D28D9 100%);
    color: #fff;
}

.interview-card__action--edit:hover {
    background: #EEF2FF;
    color: #4F46E5;
    border-color: #C7D2FE;
}

.interview-card__action--complete:hover {
    background: #D1FAE5;
    color: #059669;
    border-color: #A7F3D0;
}

.interview-card__action--cancel:hover {
    background: #FEE2E2;
    color: #DC2626;
    border-color: #FECACA;
}

/* Empty State */
.interviews-empty {
    background: #fff;
    border-radius: 1.6rem;
    padding: 6rem 3rem;
    text-align: center;
    border: 2px dashed #E2E8F0;
}

.interviews-empty__visual {
    position: relative;
    margin-bottom: 3rem;
}

.interviews-empty__icon {
    width: 12rem;
    height: 12rem;
    margin: 0 auto;
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.interviews-empty__icon i {
    font-size: 4rem;
    color: #4F46E5;
}

.interviews-empty__decoration {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 0.8rem;
    z-index: -1;
}

.interviews-empty__decoration span {
    width: 1rem;
    height: 1rem;
    background: #CBD5E1;
    border-radius: 50%;
    animation: float 2s ease-in-out infinite;
}

.interviews-empty__decoration span:nth-child(1) {
    animation-delay: 0s;
    transform: translate(-5rem, -4rem);
}

.interviews-empty__decoration span:nth-child(2) {
    animation-delay: 0.3s;
    transform: translate(5rem, -3rem);
}

.interviews-empty__decoration span:nth-child(3) {
    animation-delay: 0.6s;
    transform: translate(0, 4.5rem);
}

@keyframes float {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-0.5rem); }
}

.interviews-empty__title {
    font-size: 2rem;
    font-weight: 700;
    color: #1E293B;
    margin-bottom: 1rem;
}

.interviews-empty__text {
    font-size: 1.5rem;
    color: #64748B;
    margin-bottom: 3rem;
    max-width: 48rem;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.interviews-empty__actions {
    display: flex;
    gap: 1.4rem;
    justify-content: center;
}

.interviews-empty__btn {
    padding: 1.2rem 2rem;
    border-radius: 1rem;
    font-size: 1.4rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    transition: all 0.25s ease;
    text-decoration: none;
    border: none;
}

.interviews-empty__btn i {
    font-size: 1.4rem;
}

.interviews-empty__btn--primary {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    color: #fff;
}

.interviews-empty__btn--primary:hover {
    background: linear-gradient(135deg, #4338CA 0%, #6D28D9 100%);
    color: #fff;
    transform: translateY(-2px);
}

.interviews-empty__btn--outline {
    background: #fff;
    color: #4F46E5;
    border: 2px solid #E0E7FF;
}

.interviews-empty__btn--outline:hover {
    background: #EEF2FF;
    color: #4F46E5;
}

/* Interview Modal */
.interview-modal {
    border: none;
    border-radius: 1.6rem;
    overflow: hidden;
}

.interview-modal__header {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    padding: 2.4rem 2.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.interview-modal__header-content {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.interview-modal__header-icon {
    width: 5.6rem;
    height: 5.6rem;
    background: rgba(255,255,255,0.2);
    border-radius: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
}

.interview-modal__header-icon i {
    font-size: 2.4rem;
    color: #fff;
}

.interview-modal__header-text {
    color: #fff;
}

.interview-modal__title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 0.4rem;
    color: #fff;
}

.interview-modal__subtitle {
    font-size: 1.4rem;
    opacity: 0.9;
    margin: 0;
}

.interview-modal__close {
    width: 4.4rem;
    height: 4.4rem;
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 1rem;
    color: #fff;
    font-size: 1.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.interview-modal__close:hover {
    background: rgba(255,255,255,0.25);
}

.interview-modal__body {
    padding: 2.8rem;
    max-height: 60vh;
    overflow-y: auto;
}

/* Form Sections */
.interview-form-section {
    margin-bottom: 2.4rem;
}

.interview-form-section:last-child {
    margin-bottom: 0;
}

.interview-form-section__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1E293B;
    margin-bottom: 1.4rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.interview-form-section__title i {
    color: #4F46E5;
    font-size: 1.6rem;
}

/* Interview Type Options */
.interview-type-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.4rem;
}

.interview-type-option {
    cursor: pointer;
    margin: 0;
}

.interview-type-option input {
    display: none;
}

.interview-type-option__box {
    padding: 1.8rem;
    border: 2px solid #E2E8F0;
    border-radius: 1.2rem;
    text-align: center;
    transition: all 0.25s ease;
    background: #fff;
}

.interview-type-option__box i {
    font-size: 2.8rem;
    color: #94A3B8;
    display: block;
    margin-bottom: 1rem;
    transition: color 0.25s ease;
}

.interview-type-option__label {
    display: block;
    font-weight: 600;
    color: #334155;
    font-size: 1.5rem;
    margin-bottom: 0.4rem;
}

.interview-type-option__desc {
    display: block;
    font-size: 1.3rem;
    color: #94A3B8;
}

.interview-type-option input:checked + .interview-type-option__box {
    border-color: #4F46E5;
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
}

.interview-type-option input:checked + .interview-type-option__box i {
    color: #4F46E5;
}

.interview-type-option__box:hover {
    border-color: #CBD5E1;
    background: #F8FAFC;
}

/* Form Elements */
.interview-label {
    display: block;
    font-size: 1.4rem;
    font-weight: 500;
    color: #334155;
    margin-bottom: 0.8rem;
}

.interview-label.required::after {
    content: ' *';
    color: #DC2626;
}

.interview-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.interview-input-wrap i {
    position: absolute;
    left: 1.4rem;
    color: #94A3B8;
    font-size: 1.5rem;
    pointer-events: none;
}

.interview-input {
    width: 100%;
    padding: 1.2rem 1.4rem 1.2rem 4rem;
    border: 2px solid #E2E8F0;
    border-radius: 1rem;
    font-size: 1.4rem;
    transition: all 0.2s ease;
    background: #fff;
}

.interview-input:focus {
    outline: none;
    border-color: #4F46E5;
    box-shadow: 0 0 0 4px rgba(79,70,229,0.1);
}

.interview-select {
    width: 100%;
    padding: 1.2rem 1.4rem;
    border: 2px solid #E2E8F0;
    border-radius: 1rem;
    font-size: 1.4rem;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.interview-select:focus {
    outline: none;
    border-color: #4F46E5;
    box-shadow: 0 0 0 4px rgba(79,70,229,0.1);
}

.interview-textarea {
    width: 100%;
    padding: 1.2rem 1.4rem;
    border: 2px solid #E2E8F0;
    border-radius: 1rem;
    font-size: 1.4rem;
    resize: vertical;
    min-height: 12rem;
    transition: all 0.2s ease;
}

.interview-textarea:focus {
    outline: none;
    border-color: #4F46E5;
    box-shadow: 0 0 0 4px rgba(79,70,229,0.1);
}

.interview-help-text {
    display: block;
    margin-top: 0.8rem;
    font-size: 1.3rem;
    color: #94A3B8;
}

/* Modal Footer */
.interview-modal__footer {
    padding: 2rem 2.8rem;
    background: #F8FAFC;
    border-top: 1px solid #E2E8F0;
    display: flex;
    justify-content: flex-end;
    gap: 1.4rem;
}

.interview-modal__btn {
    padding: 1.2rem 2rem;
    border-radius: 1rem;
    font-size: 1.4rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    cursor: pointer;
    transition: all 0.25s ease;
    border: none;
}

.interview-modal__btn i {
    font-size: 1.4rem;
}

.interview-modal__btn--cancel {
    background: #fff;
    color: #64748B;
    border: 2px solid #E2E8F0;
}

.interview-modal__btn--cancel:hover {
    background: #F1F5F9;
    border-color: #CBD5E1;
}

.interview-modal__btn--submit {
    background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
    color: #fff;
}

.interview-modal__btn--submit:hover {
    background: linear-gradient(135deg, #4338CA 0%, #6D28D9 100%);
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 992px) {
    .interviews-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .interview-card {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .interview-card__schedule {
        flex-direction: row;
        justify-content: flex-start;
        gap: 2rem;
    }
    
    .interview-card__actions {
        flex-direction: row;
        justify-content: flex-start;
    }
    
    .interview-type-options {
        grid-template-columns: 1fr;
    }
    
    .interviews-hero__title {
        font-size: 2rem;
    }
    
    .interviews-hero__subtitle {
        font-size: 1.3rem;
    }
}

@media (max-width: 768px) {
    .interviews-hero {
        padding: 2rem 1.6rem;
        border-radius: 1.4rem;
    }
    
    .interviews-hero__content {
        flex-direction: column;
        text-align: center;
    }
    
    .interviews-hero__left {
        flex-direction: column;
    }
    
    .interviews-hero__icon {
        width: 5.6rem;
        height: 5.6rem;
    }
    
    .interviews-hero__icon i {
        font-size: 2.4rem;
    }
    
    .interviews-hero__title {
        font-size: 1.8rem;
    }
    
    .interviews-hero__subtitle {
        font-size: 1.2rem;
    }
    
    .interviews-hero__btn {
        padding: 1rem 1.6rem;
        font-size: 1.3rem;
    }
    
    .interviews-filter {
        flex-direction: column;
        gap: 1.4rem;
    }
    
    .interviews-filter__tabs {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .interviews-filter__tab {
        padding: 0.8rem 1.2rem;
        font-size: 1.3rem;
    }
    
    .interviews-filter__search {
        max-width: 100%;
    }
    
    .interviews-stats {
        grid-template-columns: 1fr 1fr;
        gap: 1.4rem;
    }
    
    .interviews-stat-card {
        padding: 1.4rem;
        gap: 1.2rem;
    }
    
    .interviews-stat-card__icon {
        width: 4.8rem;
        height: 4.8rem;
    }
    
    .interviews-stat-card__icon i {
        font-size: 2rem;
    }
    
    .interviews-stat-card__value {
        font-size: 2.2rem;
    }
    
    .interviews-stat-card__label {
        font-size: 1.2rem;
    }
    
    .interview-card {
        padding: 1.6rem;
    }
    
    .interview-card__day {
        font-size: 2.4rem;
    }
    
    .interview-card__month {
        font-size: 1.2rem;
    }
    
    .interview-card__name {
        font-size: 1.5rem;
    }
    
    .interview-card__position {
        font-size: 1.3rem;
    }
    
    .interviews-empty {
        padding: 4rem 2rem;
    }
    
    .interviews-empty__icon {
        width: 10rem;
        height: 10rem;
    }
    
    .interviews-empty__icon i {
        font-size: 3.5rem;
    }
    
    .interviews-empty__title {
        font-size: 1.8rem;
    }
    
    .interviews-empty__text {
        font-size: 1.4rem;
    }
    
    .interviews-empty__actions {
        flex-direction: column;
    }
    
    .interviews-empty__btn {
        justify-content: center;
    }
    
    .interview-modal__header {
        padding: 2rem;
    }
    
    .interview-modal__header-icon {
        width: 4.8rem;
        height: 4.8rem;
    }
    
    .interview-modal__header-icon i {
        font-size: 2rem;
    }
    
    .interview-modal__title {
        font-size: 1.8rem;
    }
    
    .interview-modal__subtitle {
        font-size: 1.3rem;
    }
    
    .interview-modal__body {
        padding: 2rem;
    }
    
    .interview-form-section__title {
        font-size: 1.4rem;
    }
    
    .interview-modal__footer {
        flex-direction: column;
        padding: 1.6rem 2rem;
    }
    
    .interview-modal__btn {
        justify-content: center;
    }
}

/* ============================================
   PACKAGE CHECKOUT
   ============================================ */
.checkout-breadcrumb {
    margin-bottom: 2rem;
}

.checkout-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #64748b;
    font-size: 1.4rem;
    text-decoration: none;
    transition: color 0.2s;
}

.checkout-breadcrumb a:hover {
    color: #0f766e;
}

.checkout-container {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.checkout-summary,
.checkout-payment {
    background: #fff;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.checkout-summary__title,
.checkout-payment__title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e2e8f0;
}

/* Package Card */
.checkout-package {
    display: flex;
    gap: 1.2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.checkout-package__icon {
    width: 5rem;
    height: 5rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
}

.checkout-package__icon--free { background: #f1f5f9; color: #64748b; }
.checkout-package__icon--basic { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: #fff; }
.checkout-package__icon--pro { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #fff; }
.checkout-package__icon--vip { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #fff; }

.checkout-package__name {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 0.25rem;
}

.checkout-package__desc {
    font-size: 1.3rem;
    color: #64748b;
    margin: 0 0 0.5rem;
}

.checkout-package__duration {
    font-size: 1.2rem;
    color: #0f766e;
}

.checkout-package__duration i {
    margin-right: 0.25rem;
}

/* Features */
.checkout-features h4 {
    font-size: 1.4rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 1rem;
}

.checkout-features ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
}

.checkout-features li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
    font-size: 1.3rem;
    color: #475569;
}

.checkout-features li i {
    color: #10b981;
    font-size: 1.2rem;
}

.checkout-features__credits {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    padding: 0.75rem 1rem !important;
    border-radius: 8px;
    margin-top: 0.5rem;
    font-weight: 600;
    color: #92400e !important;
}

.checkout-features__credits i {
    color: #f59e0b !important;
}

/* Pricing */
.checkout-pricing {
    border-top: 1px solid #e2e8f0;
    padding-top: 1.5rem;
}

.checkout-pricing__row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 1.4rem;
    color: #64748b;
}

.checkout-pricing__row--discount span:last-child {
    color: #10b981;
}

.checkout-pricing__total {
    display: flex;
    justify-content: space-between;
    padding: 1rem 0 0;
    margin-top: 0.5rem;
    border-top: 2px solid #e2e8f0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #1e293b;
}

.checkout-pricing__amount {
    font-size: 2rem;
    color: #0f766e;
}

/* Payment Methods */
.checkout-methods {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.checkout-method {
    cursor: pointer;
}

.checkout-method input {
    display: none;
}

.checkout-method__content {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    transition: all 0.2s;
}

.checkout-method:hover .checkout-method__content {
    border-color: #0f766e;
    background: #f0fdfa;
}

.checkout-method input:checked + .checkout-method__content {
    border-color: #0f766e;
    background: #f0fdfa;
}

.checkout-method__icon {
    width: 4rem;
    height: 4rem;
    border-radius: 10px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #0f766e;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.checkout-method__info {
    flex: 1;
}

.checkout-method__name {
    display: block;
    font-size: 1.4rem;
    font-weight: 600;
    color: #1e293b;
}

.checkout-method__badge {
    font-size: 1.1rem;
    color: #64748b;
    background: #e2e8f0;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin-top: 0.25rem;
    display: inline-block;
}

.checkout-method__check {
    font-size: 2rem;
    color: #0f766e;
    opacity: 0;
    transition: opacity 0.2s;
}

.checkout-method input:checked + .checkout-method__content .checkout-method__check {
    opacity: 1;
}

/* Customer Info */
.checkout-customer {
    background: #f8fafc;
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.checkout-customer h4 {
    font-size: 1.3rem;
    font-weight: 600;
    color: #64748b;
    margin: 0 0 0.75rem;
}

.checkout-customer__info p {
    margin: 0 0 0.25rem;
    font-size: 1.4rem;
    color: #1e293b;
}

.checkout-customer__info i {
    width: 1.6rem;
    color: #64748b;
}

/* Terms */
.checkout-terms {
    margin-bottom: 1.5rem;
}

.checkout-terms__label {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1.3rem;
    color: #64748b;
    cursor: pointer;
}

.checkout-terms__label input {
    margin-top: 0.2rem;
    width: 1.6rem;
    height: 1.6rem;
    accent-color: #0f766e;
}

.checkout-terms__label a {
    color: #0f766e;
    text-decoration: underline;
}

/* Submit Button */
.checkout-submit {
    width: 100%;
    padding: 1.25rem 2rem;
    background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-size: 1.6rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.checkout-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 118, 110, 0.3);
}

.checkout-submit:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.checkout-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-size: 1.2rem;
    color: #64748b;
}

.checkout-secure i {
    color: #10b981;
}

/* Responsive */
@media (max-width: 900px) {
    .checkout-container {
        grid-template-columns: 1fr;
        max-width: 500px;
    }
    
    .checkout-summary {
        order: 2;
    }
    
    .checkout-payment {
        order: 1;
    }
}

@media (max-width: 500px) {
    .checkout-summary,
    .checkout-payment {
        padding: 1.5rem;
    }
    
    .checkout-package {
        flex-direction: column;
        text-align: center;
    }
    
    .checkout-package__icon {
        margin: 0 auto;
    }
}