:root{
    --bg: #0f172a;
    --bg-soft: #111827;
    --card: rgba(255,255,255,0.96);
    --line: rgba(148,163,184,.22);
    --text: #0f172a;
    --muted: #64748b;
    --primary: #2563eb;
    --primary-2: #4f46e5;
    --success: #10b981;
    --danger: #ef4444;
    --shadow: 0 18px 45px rgba(2,6,23,.16);
    --radius: 22px;
}

body{
    background:
        radial-gradient(circle at top left, rgba(79,70,229,.22), transparent 30%),
        radial-gradient(circle at top right, rgba(37,99,235,.18), transparent 25%),
        linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
    color: var(--text);
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
}

.app-navbar{
    background: linear-gradient(135deg, var(--bg), var(--primary-2));
}

.hero-card,
.form-card,
.dashboard-card{
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.hero-card{
    padding: 28px;
}

.form-card{
    padding: 24px;
    max-width: 560px;
    margin: 0 auto;
}

.dashboard-card{
    padding: 22px;
    height: 100%;
}

.section-title{
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
}

.section-text{
    color: var(--muted);
    font-size: 1rem;
}

.form-label{
    font-weight: 700;
    color: #334155;
    margin-bottom: .35rem;
}

.form-control,
.form-select,
textarea{
    border-radius: 14px !important;
    border: 1px solid #cbd5e1 !important;
    padding: 12px 14px !important;
    min-height: 48px;
}

textarea.form-control{
    min-height: 110px;
}

.btn-main{
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    border: none;
    color: #fff;
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 700;
    box-shadow: 0 12px 28px rgba(37,99,235,.25);
}

.btn-main:hover{
    color: #fff;
    opacity: .96;
}

.btn-soft{
    background: #fff;
    color: var(--primary);
    border: 1px solid rgba(37,99,235,.18);
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 700;
}

.badge-role{
    display: inline-block;
    background: rgba(37,99,235,.12);
    color: var(--primary);
    padding: 8px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .9rem;
}

.quick-actions{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.quick-link{
    display: block;
    text-decoration: none;
    background: linear-gradient(135deg, #ffffff, #f8fafc);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px;
    color: var(--text);
    box-shadow: 0 12px 30px rgba(15,23,42,.06);
}

.quick-link strong{
    display: block;
    margin-bottom: 4px;
}

.quick-link span{
    color: var(--muted);
    font-size: .95rem;
}

.auth-links{
    text-align: center;
    margin-top: 16px;
}

.auth-links a{
    text-decoration: none;
    font-weight: 700;
    color: var(--primary);
}

@media (min-width: 768px){
    .hero-card{
        padding: 42px;
    }

    .section-title{
        font-size: 2.5rem;
    }

    .quick-actions{
        grid-template-columns: repeat(2, 1fr);
    }
}
.job-card{
    background: rgba(255,255,255,.96);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 10px 28px rgba(15,23,42,.06);
    height: 100%;
}

.job-meta{
    color: var(--muted);
    font-size: .95rem;
}

.filter-card{
    background: rgba(255,255,255,.96);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 10px 28px rgba(15,23,42,.06);
    margin-bottom: 20px;
}

.table-card{
    background: rgba(255,255,255,.96);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 10px 28px rgba(15,23,42,.06);
}

.status-badge{
    border-radius: 999px;
    padding: 8px 12px;
    font-size: .82rem;
    font-weight: 700;
    display: inline-block;
}

.status-applied,
.status-published,
.status-active,
.status-shortlisted{
    background: rgba(37,99,235,.12);
    color: #1d4ed8;
}

.status-in_review,
.status-pending,
.status-interviewed{
    background: rgba(245,158,11,.14);
    color: #b45309;
}

.status-hired,
.status-paid{
    background: rgba(16,185,129,.14);
    color: #047857;
}

.status-rejected,
.status-closed,
.status-failed,
.status-withdrawn{
    background: rgba(239,68,68,.14);
    color: #b91c1c;
}
.profile-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:18px;
}

.stat-card{
    background: rgba(255,255,255,.96);
    border:1px solid var(--line);
    border-radius:22px;
    padding:18px;
    box-shadow:0 10px 28px rgba(15,23,42,.06);
    text-align:center;
}

.stat-card .number{
    font-size:2rem;
    font-weight:800;
    color:var(--primary-2);
    line-height:1;
}

.rating-stars{
    font-size:1.1rem;
    letter-spacing:2px;
}

.comment-box{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:16px;
}

@media (min-width: 768px){
    .profile-grid{
        grid-template-columns: repeat(2, 1fr);
    }
}

.mini-stat{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:16px;
    box-shadow:0 10px 28px rgba(15,23,42,.05);
}

.mini-stat .label{
    color:var(--muted);
    font-size:.95rem;
}

.mini-stat .value{
    font-size:1.5rem;
    font-weight:800;
    margin-top:6px;
}

.notice-card{
    background:linear-gradient(135deg, rgba(37,99,235,.08), rgba(79,70,229,.08));
    border:1px solid rgba(37,99,235,.18);
    border-radius:20px;
    padding:18px;
}

.metric-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:16px;
}

.metric-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:22px;
    padding:18px;
    box-shadow:0 10px 28px rgba(15,23,42,.05);
}

.metric-card .title{
    color:var(--muted);
    font-size:.95rem;
    margin-bottom:8px;
}

.metric-card .big{
    font-size:2rem;
    font-weight:800;
    line-height:1;
}

.toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
    justify-content:space-between;
}

@media (min-width: 768px){
    .metric-grid{
        grid-template-columns: repeat(4, 1fr);
    }
}

.hero{

background:linear-gradient(135deg,#0f172a,#1e293b);

color:white;

padding:80px 30px;

border-radius:25px;

text-align:center;

margin-bottom:40px;

}

.hero h1{

font-size:42px;

font-weight:800;

}

.hero-stats{

display:flex;

gap:40px;

justify-content:center;

margin-top:30px;

}

.hero-buttons{

margin-top:30px;

display:flex;

gap:20px;

justify-content:center;

}

.job-card{

background:white;

border-radius:18px;

padding:20px;

box-shadow:0 10px 30px rgba(0,0,0,.06);

margin-bottom:20px;

}