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

:root{
--atlox-primary:#0e4194;
--atlox-secondary:#f59c00;

--bg:#08090c;

--card-bg:
linear-gradient(180deg,rgba(255,255,255,0.07),rgba(255,255,255,0.025));

--text:#f5f6f8;
--text-muted:rgba(245,246,248,0.72);
}

/* wrapper */

.atscv-container{
max-width:900px;
margin:60px auto;
padding:80px 30px;
border-radius:28px;
background:var(--bg);
position:relative;
font-family:'Montserrat',sans-serif;
color:var(--text);
box-shadow:
0 10px 30px rgba(0,0,0,0.55),
inset 0 1px 0 rgba(255,255,255,0.10),
inset 0 -8px 24px rgba(0,0,0,0.45);
}

/* card */

.atscv-upload{
background:var(--card-bg);
border:1px solid rgba(255,255,255,0.12);
border-radius:22px;
padding:50px;
max-width:720px;
margin:0 auto;
box-shadow:
0 12px 28px rgba(0,0,0,0.45),
inset 0 1px 0 rgba(255,255,255,0.16),
inset 0 -10px 24px rgba(0,0,0,0.32);
text-align:center;
position:relative;
overflow:hidden;
}

/* reflet chrome compact */

.atscv-upload:before{
content:"";
position:absolute;
top:0;
left:0;
right:0;
height:64px;
border-radius:22px 22px 0 0;
background:linear-gradient(
180deg,
rgba(255,255,255,0.22) 0%,
rgba(255,255,255,0.08) 38%,
rgba(255,255,255,0) 100%
);
pointer-events:none;
opacity:.38;
}

.atscv-upload:after{
content:"";
position:absolute;
top:1px;
left:1px;
right:1px;
height:1px;
background:rgba(255,255,255,0.18);
pointer-events:none;
}

/* hero */

.atscv-hero{
text-align:center;
max-width:700px;
margin:0 auto 40px auto;
}

.atscv-title{
font-size:34px;
font-weight:700;
margin-bottom:12px;
letter-spacing:-0.02em;
}

.atscv-subtitle{
font-size:16px;
color:var(--text-muted);
margin-bottom:8px;
}

.atscv-goal{
font-size:15px;
color:var(--text-muted);
}

/* upload */

.atscv-upload-row{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
margin-bottom:20px;
flex-wrap:wrap;
}

/* buttons */

.atscv-btn{
cursor:pointer;
border:0;
border-radius:18px;
padding:16px 26px;
font-size:16px;
font-weight:600;
letter-spacing:-0.005em;
transition:transform 120ms ease,box-shadow 160ms ease,filter 160ms ease;
text-decoration:none;
display:inline-flex;
align-items:center;
justify-content:center;
}

.atscv-btn:active{
transform:translateY(1px);
}

.atscv-btn-select{
background:linear-gradient(180deg,#0e4194,#0a2d6c);
color:#fff;
box-shadow:
0 6px 18px rgba(0,0,0,0.38),
inset 0 1px 0 rgba(255,255,255,0.35);
}

.atscv-btn-select:hover{
box-shadow:
0 8px 22px rgba(0,0,0,0.45),
inset 0 1px 0 rgba(255,255,255,0.45);
filter:brightness(1.03);
}

.atscv-btn-generate{
background:linear-gradient(180deg,#f6a500,#d58500);
color:#000;
box-shadow:
0 6px 18px rgba(0,0,0,0.38),
inset 0 1px 0 rgba(255,255,255,0.35);
}

.atscv-btn-generate:disabled{
background:#666;
color:#ddd;
cursor:default;
box-shadow:none;
}

.atscv-btn-generate:not(:disabled):hover{
box-shadow:
0 8px 22px rgba(0,0,0,0.45),
inset 0 1px 0 rgba(255,255,255,0.45);
filter:brightness(1.03);
}

/* filename */

.atscv-filetext{
font-size:14px;
color:var(--text-muted);
}

/* hint */

.atscv-hint{
font-size:13px;
color:var(--text-muted);
margin-top:8px;
}

/* result */

.atscv-result{
margin-top:40px;
border-top:1px solid rgba(255,255,255,0.15);
padding-top:40px;
}

/* download buttons */

.atscv-download-buttons{
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
margin-top:20px;
}

.atscv-download-btn{
display:block;
width:100%;
max-width:420px;
text-align:center;
}

/* CV OUTPUT */

.atscv-cv-output{
color:#222;
background:#fff;
padding:40px;
border-radius:10px;
}

.atscv-cv-output h2{
font-size:18px;
margin-top:22px;
margin-bottom:6px;
text-transform:uppercase;
color:#0e4194;
}

.atscv-cv-output p{
margin:0 0 10px 0;
}

.atscv-cv-output ul{
list-style:disc;
padding-left:20px;
margin:0 0 10px 0;
}

.atscv-cv-output li{
margin-bottom:4px;
}

/* experiences */

.atscv-exp-item{
margin:0 0 28px 0;
}

.atscv-exp-date{
margin:0 0 2px 0;
font-weight:600;
}

.atscv-exp-title{
margin:0 0 6px 0;
}

.atscv-exp-item ul{
margin:0;
padding-left:20px;
}

.atscv-exp-item li{
margin:0 0 4px 0;
}

/* mobile */

@media(max-width:600px){

.atscv-container{
padding:60px 20px;
}

.atscv-upload{
padding:30px 20px;
}

.atscv-title{
font-size:26px;
}

}