:root{
	--bg-dark:#000000;
	--text-light:#ffffff;
	--text-muted:#aaaaaa;
	--primary-color:#9f49f4;
	--transition-time:.3s;
	--navbar-height:65px;
	--scroll-offset:100px;
}

/* RESET */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
	background-color:var(--bg-dark);
	color:var(--text-light);
	line-height:1.6;
	scroll-behavior:smooth;
	background-image:url('https://images.unsplash.com/photo-1758876378034-3807ca7c4449?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1332');
	background-size:cover;
	background-attachment:fixed;
	background-position:center;
	overflow-x:hidden;
    padding-top: 55px;
}

/* TYPOGRAPHY */
h1{font-size:3.5rem;line-height:1.1}
h2{font-size:2.5rem;text-align:center;margin-bottom:40px}
h3{font-size:1.75rem}
p{font-size:1.1rem;color:var(--text-muted);margin-bottom:1em}
a{color:var(--primary-color);text-decoration:none;transition:color var(--transition-time)}
a:hover{color:#fff}

/* BUTTONS */
.cta-button,
.cta-button-nav,
.secondary-button{
	border-radius:50px;
	font-weight:600;
	letter-spacing:.05em;
	transition:all var(--transition-time);
	cursor:pointer;
	text-decoration:none;
	display:inline-block;
}

.cta-button{
	padding:12px 25px;
	background-color:var(--primary-color);
	color:var(--text-light);
	border:2px solid var(--primary-color);
	box-shadow:0 4px 15px rgba(159,73,244,.4);
}
.cta-button:hover{
	background-color:#7a38b8;
	border-color:#7a38b8;
	transform:translateY(-2px);
	box-shadow:0 8px 25px rgba(159,73,244,.6);
}

.secondary-button{
	padding:12px 25px;
	background:transparent;
	color:var(--primary-color);
	border:2px solid var(--primary-color);
}
.secondary-button:hover{
	background:var(--primary-color);
	color:var(--text-light);
}

/* SECTIONS */
section{
	min-height:100vh;
	display:flex;
	flex-direction:column;
	justify-content:center;
	align-items:center;
	position:relative;
	transition:opacity .3s;
	scroll-margin-top: 70px;
}

/* NAVBAR */
.navbar{
	position: fixed;
	top:0;
    left: 0;
	z-index:1000;
	width:100%;
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:8px 5%;
	background-color:rgba(0,0,0,.85);
	backdrop-filter:blur(5px);
	border-bottom:1px solid #1a1a1a;
	box-shadow:0 2px 10px rgba(0,0,0,.5);
	transition:background-color var(--transition-time);
}

.navbar .logo{
	font-size:2.5rem;
	font-weight:800;
	color:var(--primary-color);
	letter-spacing:-.05em;
	text-shadow:0 0 10px var(--text-light);
	animation:logoPulse 2s infinite alternate ease-in-out;
}

.navbar nav a{
	color:var(--text-light);
	margin-left:30px;
	font-size:1rem;
	font-weight:500;
	padding:5px 0;
	position:relative;
	transition:color var(--transition-time);
}
.navbar nav a:hover{color:var(--primary-color)}
.navbar nav a::after{
	content:'';
	position:absolute;
	left:0;
	bottom:0;
	width:0;
	height:2px;
	background:var(--primary-color);
	transition:width var(--transition-time);
}
.navbar nav a:hover::after{width:100%}
.navbar nav a.active-nav{color:var(--text-light)!important}
.navbar nav a.active-nav::after{width:100%}

.cta-button-nav{
	background-color:var(--primary-color);
	color:var(--text-light);
	border:none;
	padding:10px 20px;
	font-size:.9rem;
}
.cta-button-nav:hover{
	background-color:#6a2a9e;
	box-shadow:0 0 10px rgba(159,73,244,.5);
	transform:scale(1.03);
}

/* PRICE CARDS */
#pricing{
	background-color:rgba(0,0,0,.4);
	padding:80px 5%;
	text-align:center;
}
.pricing-table{
	display:flex;
	justify-content:center;
	gap:30px;
	flex-wrap:wrap;
}
.plan-card{
	background:#1a1a1a;
	padding:40px;
	border-radius:15px;
	width:320px;
	text-align:left;
	border:1px solid #282828;
	transition:transform .3s,border-color .3s;
}
.plan-card.featured{
	background:#0d0d0d;
	border-color:var(--primary-color);
	transform:scale(1.05);
	box-shadow:0 15px 40px rgba(159,73,244,.5);
}
.plan-card.featured:hover{transform:scale(1.07)}
.plan-card:hover:not(.featured){
	transform:translateY(-5px);
	border-color:#555;
}
.plan-card h3{color:var(--primary-color);margin-bottom:10px}
.price{
	font-size:3rem;
	font-weight:700;
	color:var(--text-light);
	margin-bottom:20px;
	display:flex;
	align-items:baseline;
}
.price span{
	font-size:1.2rem;
	font-weight:400;
	color:var(--text-muted);
	margin-left:5px;
}
.plan-card ul{
	list-style:none;
	padding:0;
	margin-bottom:30px;
}
.plan-card ul li{
	padding:10px 0;
	color:var(--text-light);
	border-bottom:1px dashed #282828;
	font-size:1rem;
}
.plan-card ul li:last-child{border-bottom:none}
.plan-card ul li i{
	color:var(--primary-color);
	margin-right:10px;
}
.plan-card .cta-button{width:100%;text-align:center}

/* FINAL CTA */
#final-cta-banner {
    /* Use the primary color as the background, instead of the green in the image */
    background-color: var(--primary-color); 
    padding: 20px 5%;
    /* Keep the existing display properties which center the flex items */
    opacity: 1 !important; 
    min-height: auto;
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    /* ADDED: Explicitly center the text inside the section for maximum compatibility */
    text-align: center;
}

#final-cta-banner h2 {
    color: var(--text-light); /* White text for contrast */
    margin-bottom: 50px;
    font-size: 2.2rem;
}

#final-cta-banner p {
    color: var(--text-light); /* White text for contrast */
    margin-bottom:11px;
    font-size: 1.2rem;
    opacity: 0.9;
}

#final-cta-banner .cta-button {
    /* --- CHANGE: WHITE BG, PURPLE TEXT, PURPLE BORDER --- */
    background-color: var(--text-light); /* White background */
    border-color: var(--primary-color); /* Purple border for definition */
    color: var(--primary-color); /* Purple text */
    /* (Existing styles below) */
    padding: 15px 35px;
    font-size: 1.1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    /* Ensure default hover transition still works */
    transition: background-color var(--transition-time), color var(--transition-time), transform 0.2s, box-shadow var(--transition-time); 
}

#final-cta-banner .cta-button:hover {
    /* --- NEW CHANGE: HOVER TO BLACK BG, PURPLE TEXT, ENHANCED SHADOW --- */
    background-color: var(--bg-dark); /* Black background */
    color: var(--primary-color); /* Purple text on hover */
    border-color: var(--primary-color); /* Purple border */
    /* Add a bright purple glow to emphasize the dark button on the purple banner */
    box-shadow: 0 0 10px var(--text-light), 0 0 20px var(--primary-color); 
    transform: translateY(-2px);
}

/* remove bottom white/gap */
#final-cta-banner{
	min-height:auto !important;
	padding-bottom:20px !important;
}

/* FOOTER */
.minimal-footer{
	padding:14px 5%;
	background-color:var(--bg-dark);
	border-top:1px solid #1a1a1a;
	color:var(--text-muted);
	text-align:center;
	font-size:.9rem;
}
.minimal-footer .footer-content{
	display:flex;
	justify-content:space-between;
	align-items:center;
	max-width:1200px;
	margin:0 auto;
	flex-wrap:wrap;
}
.minimal-footer .footer-links a{
	color:var(--text-muted);
	margin-left:20px;
	transition:color var(--transition-time);
}
.minimal-footer .footer-links a:hover{
	color:var(--primary-color);
}
footer.minimal-footer{
	
	bottom:0;
	left:0;
	width:100%;
}

/* UPLOAD BOX */
.resume-box{
	width:100%;
	max-width:860px;
	background:rgba(0,0,0,.35);
	backdrop-filter:blur(10px);
	border:1px solid var(--primary-color);
	border-radius:18px;
	padding:18px 22px;
	margin-top:6px;
	text-align:center;
}
.resume-box h3{
	color:#fff;
	font-size:2rem;
	margin-bottom:8px;
}
.resume-box .sub{
	opacity:.8;
	margin-bottom:32px;
}
.drag-area{
	border:2px dashed var(--primary-color);
	padding:12px;
	border-radius:15px;
	margin-bottom:25px;
}
.drag-area p{
	margin-bottom:18px;
	font-size:1.1rem;
	color:#fff;
}
.select-btn{
	background-color:var(--primary-color);
	color:#fff;
	padding:10px 26px;
	border:none;
	border-radius:50px;
	font-weight:600;
	cursor:pointer;
}

#fileStatus{
	color:#fff !important;
}


.job-desc{
	width:100%;
	height:58px;
	background:rgba(0,0,0,.45);
	border:1px solid #555;
	border-radius:12px;
	padding:15px;
	color:#fff;
	margin-bottom:25px;
	font-size:1rem;
	resize:none;
}
.analyze-btn{
	width:100%;
	background-color:var(--primary-color);
	color:#fff;
	padding:7px 0;
	border:none;
	border-radius:50px;
	font-weight:600;
	font-size:1rem;
	cursor:pointer;
	margin-bottom:18px;
}
.support{opacity:.7;margin-bottom:6px}
.signin{opacity:.7;margin-bottom:2px}
.signin a{color:var(--primary-color)}
.signin a{transition:all .25s ease;}

/* sign in link hover */
.signin a:hover{
	color:#fff !important;
	text-decoration:underline;
	text-underline-offset:3px;
}

/* upload module buttons hover */
.select-btn:hover,
.analyze-btn:hover{
	background-color:#7a38b8;
	transform:translateY(-2px);
	box-shadow:0 0 12px rgba(159,73,244,0.7);
}

/* upload spacing */
#upload{
	padding-top:10px;
	padding-bottom:40px;
	background:rgba(0,0,0,0.8);
}

#upload h2{margin-bottom:0}
#upload h2 + p{margin-top:0;margin-bottom:0}
#upload .container > p{margin-bottom:0}
#upload .resume-box{margin-top:6px}

/* ACCESSIBILITY */
.navbar nav a:focus{outline:none;animation:linkPulse 1.5s 1 ease-in-out}

/* RESPONSIVE */
@media(max-width:900px){
	.pricing-table{flex-direction:column;align-items:center}
	.navbar nav a{margin-left:16px;font-size:.95rem}
	.navbar .logo{font-size:2rem}
	h1{font-size:2.4rem}
	h2{font-size:1.9rem}
	.plan-card{width:100%;max-width:520px}
}

/* KEYFRAMES */
@keyframes logoPulse{
	0%{text-shadow:0 0 5px var(--text-light),0 0 10px rgba(159,73,244,.5)}
	50%{text-shadow:0 0 10px var(--text-light),0 0 20px var(--text-light),0 0 25px var(--primary-color),0 0 35px rgba(159,73,244,.5)}
	100%{text-shadow:0 0 5px var(--text-light),0 0 10px rgba(159,73,244,.5)}
}
@keyframes linkPulse{
	0%{color:var(--text-light);text-shadow:none}
	10%{color:var(--primary-color);text-shadow:0 0 5px var(--text-light),0 0 15px white,0 0 25px rgba(255,255,255,.5)}
	100%{color:var(--text-light);text-shadow:none}
}

/* TRACK DASHBOARD */
.application-dashboard{
	width:90%;
	max-width:1200px;
	background:rgba(0,0,0,0.55);
	backdrop-filter:blur(10px);
	border:1px solid var(--primary-color);
	border-radius:14px;
	padding:24px;
}

.dash-head{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-bottom:22px;
}

.new-app-btn{
	background:var(--primary-color);
	border:none;
	color:#fff;
	padding:8px 20px;
	border-radius:50px;
	cursor:pointer;
	font-weight:600;
	transition:.2s;
}
.new-app-btn:hover{
	background:#7a38b8;
}

.app-table{
	width:100%;
	border-collapse:collapse;
	text-align:left;
	color:#fff;
	font-size:1rem;
}
.app-table th{
	color:#fff;
	font-weight:700;
	padding:12px 14px;
	border-bottom:1px solid #333;
}
.app-table td{
	padding:12px 14px;
	border-bottom:1px solid #222;
}

.status-badge{
	padding:4px 10px;
	border-radius:6px;
	font-weight:600;
	font-size:.9rem;
	text-transform:capitalize;
}
.status-applied{background:#4a66ff}
.status-interview{background:#9f49f4}
.status-selected{background:#15b355}
.status-rejected{background:#c72727}

/* reduce top and bottom padding for AI Assist section */
#track.section{
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

#assist{
    background:rgba(0,0,0,0.8);
    backdrop-filter:blur(8px);
}

#track{
    background:rgba(0,0,0,0.4);
    backdrop-filter:blur(8px);
}

#result{
    background:rgba(0,0,0,0.4);
    backdrop-filter:blur(8px);
}

/* MODERN RESULTS SECTION STYLES */
.results-header {
    text-align: center;
    margin-bottom: 40px;
}

.overall-score {
    display: inline-block;
    background: linear-gradient(135deg, rgba(159,73,244,0.2), rgba(0,0,0,0.8));
    border: 2px solid var(--primary-color);
    border-radius: 20px;
    padding: 30px;
    backdrop-filter: blur(10px);
}

.score-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: conic-gradient(var(--primary-color) 0deg, var(--primary-color) calc(var(--score, 0) * 3.6deg), rgba(255,255,255,0.1) calc(var(--score, 0) * 3.6deg));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    position: relative;
}

.score-circle::before {
    content: '';
    position: absolute;
    width: 90px;
    height: 90px;
    background: var(--bg-dark);
    border-radius: 50%;
}

.score-circle span {
    position: relative;
    z-index: 1;
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--primary-color);
}

.score-circle small {
    position: relative;
    z-index: 1;
    font-size: 1rem;
    color: var(--text-muted);
}

.overall-score h3 {
    color: #fff;
    margin-bottom: 10px;
}

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

.score-breakdown {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

.score-item {
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(159,73,244,0.3);
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: transform 0.3s, border-color 0.3s;
}

.score-item:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
}

.score-item i {
    font-size: 2rem;
    color: var(--primary-color);
    min-width: 40px;
}

.score-info {
    flex: 1;
}

.score-info h4 {
    color: #fff;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.progress-bar {
    width: 100%;
    height: 8px;
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress {
    height: 100%;
    border-radius: 4px;
    transition: width 1s ease-in-out;
}

.progress.excellent { background: linear-gradient(90deg, #4CAF50, #8BC34A); }
.progress.good { background: linear-gradient(90deg, #2196F3, #03DAC6); }
.progress.average { background: linear-gradient(90deg, #FF9800, #FFC107); }
.progress.poor { background: linear-gradient(90deg, #F44336, #FF5722); }

.score-info span {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 1.1rem;
}

.feedback-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
}

.feedback-card {
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(159,73,244,0.3);
    border-radius: 15px;
    padding: 0;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.feedback-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(159,73,244,0.3);
}

.card-header {
    background: linear-gradient(135deg, var(--primary-color), rgba(159,73,244,0.8));
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.card-header i {
    font-size: 1.3rem;
    color: #fff;
}

.card-header h4 {
    color: #fff;
    margin: 0;
    font-size: 1.1rem;
}

.feedback-card ul {
    list-style: none;
    padding: 20px;
    margin: 0;
}

.feedback-card li {
    background: rgba(255,255,255,0.05);
    margin-bottom: 12px;
    padding: 15px;
    border-radius: 8px;
    color: #fff;
    border-left: 3px solid var(--primary-color);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    transition: background 0.3s;
}

.feedback-card li:hover {
    background: rgba(159,73,244,0.1);
}

.feedback-card li:last-child {
    margin-bottom: 0;
}

.feedback-card li i {
    color: var(--primary-color);
    margin-top: 2px;
    font-size: 0.9rem;
}

.strengths-card .card-header { background: linear-gradient(135deg, #4CAF50, #8BC34A); }
.improvements-card .card-header { background: linear-gradient(135deg, #FF9800, #FFC107); }
.suggestions-card .card-header { background: linear-gradient(135deg, #2196F3, #03DAC6); }
.keywords-card .card-header { background: linear-gradient(135deg, #9C27B0, #E91E63); }

#loadingMessage {
    color: var(--primary-color);
    font-size: 1.2rem;
    font-weight: 600;
    background: rgba(0,0,0,0.8);
    border: 1px solid var(--primary-color);
    border-radius: 15px;
    padding: 30px;
    backdrop-filter: blur(10px);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#resultsContainer {
    animation: fadeInUp 0.6s ease-out;
}