.container{max-width:800px;margin:0 auto;background:linear-gradient(135deg,var(--container-bg-1) 0%,var(--container-bg-2) 100%);border-radius:20px;box-shadow:0 20px 60px var(--shadow-color);overflow:hidden}
@media (min-width:1024px){
    .container{max-width:1280px;border-radius:24px;}
    .header{padding:48px 40px 38px;}
    .content{padding:40px 48px;}
    .tab{padding:18px;font-size:17px;}
    /* Two-column desktop layout: form on the left, live template + actions on the right.
       The form column stays comfortable to read; the picker gets the room to breathe. */
}
@media (min-width:1400px){
    .container{max-width:1440px;}
    .content{padding:44px 56px;}
}
/* Desktop form layout: 2-column grid for inputs, full-width for headings,
   textareas, sections, and other block-level UI. Pure CSS — no HTML change. */
@media (min-width:1024px){
    #cvForm{
        display:grid;
        grid-template-columns:1fr 1fr;
        column-gap:24px;
        row-gap:0;
        align-items:start;
    }
    #cvForm > h3,
    #cvForm > .section-divider,
    #cvForm > .checkbox-group,
    #cvForm > .photo-section,
    #cvForm > .work-experience-section,
    #cvForm > .high-school-section,
    #cvForm > .references-section,
    #cvForm > .legal-footer,
    #cvForm > .form-disclaimer,
    #cvForm > .novara-row{
        grid-column:1 / -1;
    }
    /* Textareas (career objective, courses, skills) breathe across both columns */
    #cvForm > .form-group:has(textarea){
        grid-column:1 / -1;
    }
    /* Action + share buttons: a clean 2x2 grid on desktop, all four equal width.
       Action row + share row share the same gap so the columns line up exactly. */
    .action-buttons{grid-template-columns:repeat(2,1fr);gap:12px;}
    .share-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px;}
    .action-buttons .btn,
    .share-row .btn{margin-top:0;}
}
.header{background:linear-gradient(135deg,var(--header-bg-1) 0%,var(--header-bg-2) 100%);color:white;padding:40px 30px 30px;text-align:center;position:relative;overflow:hidden}
.header::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 50%,rgba(255,255,255,0.1) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(16,185,129,0.2) 0%,transparent 50%);animation:shimmer 8s ease-in-out infinite}
@keyframes shimmer{0%,100%{opacity:1}50%{opacity:0.8}}
.ai-dots{position:absolute;width:100%;height:100%;top:0;left:0;z-index:1}
.dot{position:absolute;width:6px;height:6px;background:rgba(255,255,255,0.6);border-radius:50%;animation:float 6s infinite ease-in-out}
.dot:nth-child(1){left:10%;top:20%;animation-delay:0s}.dot:nth-child(2){left:25%;top:60%;animation-delay:1s}.dot:nth-child(3){left:40%;top:30%;animation-delay:2s}.dot:nth-child(4){left:60%;top:70%;animation-delay:1.5s}.dot:nth-child(5){left:75%;top:25%;animation-delay:3s}.dot:nth-child(6){left:85%;top:55%;animation-delay:0.5s}.dot:nth-child(7){left:15%;top:80%;animation-delay:2.5s}.dot:nth-child(8){left:50%;top:15%;animation-delay:1s}.dot:nth-child(9){left:90%;top:40%;animation-delay:3.5s}.dot:nth-child(10){left:30%;top:85%;animation-delay:2s}
@keyframes float{0%,100%{transform:translate(0,0);opacity:0.6}50%{transform:translate(-5px,-25px);opacity:0.4}}
.header-content{position:relative;z-index:2}
.header h1{font-size:48px;margin-bottom:10px;font-weight:800;letter-spacing:-2px;background:linear-gradient(135deg,#fff 0%,#fef3c7 50%,#a7f3d0 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 4px 20px rgba(255,255,255,0.3));animation:glow 3s ease-in-out infinite}
@keyframes glow{0%,100%{filter:drop-shadow(0 4px 20px rgba(255,255,255,0.3))}50%{filter:drop-shadow(0 6px 30px rgba(255,255,255,0.6))}}
.header p{opacity:0.95;font-size:14px}
.header-divider{width:60px;height:1px;background:rgba(255,255,255,0.35);margin:12px auto 0;animation:fadeInUp 1s ease 0.6s both}
.header-subtitle{font-size:15px;font-style:normal;font-weight:300;font-family:Georgia,serif;color:#000000;letter-spacing:2px;margin-top:12px;opacity:0;text-shadow:none;animation:fadeInUp 1s ease 1s both}
@keyframes fadeInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.tabs{display:flex;background:var(--tab-bg);border-bottom:2px solid var(--border-color)}
.tab{flex:1;padding:16px;text-align:center;background:none;border:none;cursor:pointer;font-size:16px;font-weight:600;color:var(--text-primary);transition:all 0.3s}
.tab.active{background:linear-gradient(135deg,var(--container-bg-1) 0%,var(--container-bg-2) 100%);color:var(--accent-color);border-bottom:3px solid var(--accent-color)}
.content{padding:30px}
.tab-content{display:none}.tab-content.active{display:block}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.section-header h3{color:var(--accent-color);margin:0}
.section-divider{height:2px;background:linear-gradient(90deg,#0ea5e9,#10b981,transparent);margin:25px 0}
.action-buttons{display:grid;gap:10px;margin-top:20px}
.legal-footer{max-width:600px;margin:20px auto 10px;text-align:center;color:#94a3b8;font-size:11px}
.legal-footer a{color:var(--accent-color);text-decoration:none}
.go-back-btn{background:linear-gradient(135deg,#6b7280 0%,#4b5563 100%);color:white;margin-top:20px}

/* ----- In-form disclaimer (replaces inline-styled .legal-footer above the buttons) ----- */
.form-disclaimer{
    display:flex;
    align-items:flex-start;
    gap:12px;
    margin:24px 0 20px;
    padding:14px 18px;
    background:linear-gradient(135deg, rgba(15,23,42,0.45) 0%, rgba(15,23,42,0.65) 100%);
    border:1px solid rgba(56,189,248,0.18);
    border-radius:12px;
    border-left:3px solid var(--accent-color);
}
.form-disclaimer-icon{
    flex-shrink:0;
    width:24px;
    height:24px;
    border-radius:50%;
    background:rgba(56,189,248,0.15);
    color:var(--accent-color);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:700;
    margin-top:1px;
}
.form-disclaimer p{
    margin:0;
    color:var(--text-secondary);
    font-size:12.5px;
    line-height:1.55;
}
.form-disclaimer p strong{color:var(--text-primary);font-weight:700;}

/* ----- Site footer (replaces ugly inline-styled bottom .legal-footer) ----- */
.site-footer{
    margin-top:36px;
    padding:32px 28px 22px;
    background:linear-gradient(180deg, rgba(15,23,42,0.55) 0%, rgba(15,23,42,0.85) 100%);
    border-top:1px solid rgba(56,189,248,0.18);
}
.site-footer-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
    max-width:1200px;
    margin:0 auto;
}
.site-footer-col h5{
    font-size:11px;
    font-weight:800;
    color:var(--accent-color);
    text-transform:uppercase;
    letter-spacing:2px;
    margin:0 0 10px;
}
.site-footer-col p{
    font-size:13px;
    line-height:1.55;
    color:var(--text-secondary);
    margin:0 0 8px;
}
.site-footer-col ul{
    list-style:none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction:column;
    gap:7px;
}
.site-footer-col ul li a{
    font-size:13px;
    color:var(--text-secondary);
    text-decoration:none;
    transition:color .15s ease;
    display:inline-flex;
    align-items:center;
    gap:5px;
}
.site-footer-col ul li a:hover{color:var(--accent-color);}
.site-footer-col ul li a span{font-size:10px;opacity:0.6;}
.site-footer-trademark{
    font-size:11px !important;
    color:#64748b !important;
    margin-top:14px !important;
}
.site-footer-trademark a{color:var(--accent-color);text-decoration:none;}
@media (min-width:768px){
    .site-footer-grid{grid-template-columns:2fr 1fr 1fr;gap:36px;}
}
@media (min-width:1024px){
    .site-footer{padding:40px 48px 28px;}
    .site-footer-grid{grid-template-columns:2.5fr 1fr 1fr;gap:48px;}
}