/* FULL CSS FROM ORIGINAL FILE */
/* Paste-ready production CSS */


        /* -------------------------------------------------
           ALL YOUR ORIGINAL CSS (unchanged)
        ------------------------------------------------- */
        :root{--primary-blue:#0d47a1;--accent-blue:#1976d2;--text-dark:#111;--bg-light:#fafafa;--white:#fff;--card-bg:#fff;--card-shadow:0 2px 6px rgba(0,0,0,.1);--hover-shadow:0 10px 20px rgba(13,71,161,.25);--border-light:#e3f2fd;--text-muted:#666;--input-bg:#fff;--modal-bg:#fff;--footer-bg:#111;--footer-text:#ddd;--auth-btn-bg:rgba(255,255,255,.2);--auth-btn-text:#fff;--auth-btn-border:rgba(255,255,255,.3);--close-btn-color:#999;--close-btn-hover:#d32f2f}
        [data-theme="dark"]{--primary-blue:#1e88e5;--accent-blue:#42a5f5;--text-dark:#e0e0e0;--bg-light:#121212;--white:#1e1e1e;--card-bg:#1e1e1e;--card-shadow:0 2px 6px rgba(0,0,0,.3);--hover-shadow:0 10px 20px rgba(66,165,245,.3);--border-light:#333;--text-muted:#aaa;--input-bg:#2d2d2d;--modal-bg:#1e1e1e;--footer-bg:#0a0a0a;--footer-text:#bbb;--auth-btn-bg:rgba(255,255,255,.15);--auth-btn-text:#fff;--auth-btn-border:rgba(255,255,255,.2);--close-btn-color:#bbb;--close-btn-hover:#ff5252}
        *{box-sizing:border-box;margin:0;padding:0}
        body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:var(--bg-light);color:var(--text-dark);line-height:1.7;transition:background .4s ease,color .4s ease;min-height:100vh}
        header{background:linear-gradient(135deg,var(--primary-blue),var(--accent-blue));color:var(--white);padding:35px 20px;text-align:center;box-shadow:0 6px 15px rgba(13,71,161,.2);position:relative}
        header h1{font-size:2.5rem;font-weight:800;letter-spacing:-.5px}
        header p{margin-top:12px;font-size:1.15rem;opacity:.95;font-weight:300}
        .auth-btn{background:var(--auth-btn-bg);color:var(--auth-btn-text);border:1px solid var(--auth-btn-border);padding:8px 16px;border-radius:8px;cursor:pointer;font-size:.9rem;font-weight:500;transition:all .3s;margin-left:8px;display:inline-flex;align-items:center;gap:6px}
        .auth-btn:hover{background:rgba(255,255,255,.35);transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.15)}
        .auth-btn.signup{background:#fff;color:var(--primary-blue);font-weight:600}
        .auth-btn.signup:hover{background:#e3f2fd;color:#0d47a1}
        nav{display:flex;justify-content:center;gap:25px;margin:20px 0;flex-wrap:wrap}
        nav a{color:var(--primary-blue);text-decoration:none;font-weight:600;font-size:1.1rem;padding:10px 20px;border-radius:8px;background:var(--card-bg);box-shadow:var(--card-shadow);transition:all .35s}
        nav a:hover{background:var(--accent-blue);color:#fff;transform:translateY(-3px);box-shadow:0 6px 12px rgba(25,118,210,.3)}
        .container{max-width:1200px;margin:0 auto;padding:25px;padding-bottom:100px}
        .search-bar{display:flex;margin-bottom:30px;border-radius:12px;overflow:hidden;box-shadow:var(--card-shadow)}
        .search-bar input{flex:1;padding:16px;border:none;font-size:1.05rem;background:var(--input-bg);color:var(--text-dark);outline:none}
        .search-bar button{padding:16px 28px;background:var(--primary-blue);color:#fff;border:none;font-weight:600;cursor:pointer;transition:all .35s}
        .search-bar button:hover{background:#0b3a80;transform:scale(1.03)}
        .section{margin-bottom:60px}
        h2{color:var(--primary-blue);font-weight:700;font-size:1.8rem;margin-bottom:20px;padding-bottom:10px;border-bottom:3px solid #bbdefb;display:inline-block}
        .card{background:var(--card-bg);border-radius:14px;box-shadow:var(--card-shadow);transition:all .35s;cursor:pointer;overflow:hidden;border:1px solid var(--border-light);height:320px;display:flex;flex-direction:column}
        .card-img{height:160px;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;transition:transform .4s}
        .card-img::after{content:'';position:absolute;bottom:0;left:0;width:100%;height:80px;background:linear-gradient(to top,var(--card-bg) 0%,transparent 100%);pointer-events:none}
        .card-content{padding:18px;flex:1;display:flex;flex-direction:column;justify-content:space-between}
        .card h3{margin:0 0 8px;color:var(--primary-blue);font-size:1.25rem;font-weight:600}
        .card p{margin:4px 0;color:var(--text-dark);font-size:.95rem}
        .card p strong{color:var(--text-dark)}
        .card p:last-child{color:var(--accent-blue);font-weight:500;font-size:.9rem}
        .card:hover{transform:translateY(-10px) scale(1.02);box-shadow:var(--hover-shadow);border-color:var(--accent-blue)}
        .card:hover .card-img{transform:scale(1.05)}
        .card:hover .card-img::after{height:100px}
        .user-grid,.job-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px}
        #job-form{display:flex;flex-direction:column;gap:16px;max-width:520px;margin:0 auto 35px;padding:25px;background:var(--card-bg);border-radius:14px;box-shadow:var(--card-shadow);border:1px solid var(--border-light)}
        #job-form input,#job-form textarea{padding:14px;border:1px solid #ddd;border-radius:10px;font-size:1rem;background:var(--input-bg);color:var(--text-dark);transition:all .3s}
        #job-form input:focus,#job-form textarea:focus{outline:none;border-color:var(--accent-blue);box-shadow:0 0 0 4px rgba(25,118,210,.15)}
        #job-form button{padding:14px;background:var(--primary-blue);color:#fff;border:none;border-radius:10px;font-weight:600;font-size:1.05rem;cursor:pointer;transition:all .35s}
        #job-form button:hover{background:#0b3a80;transform:translateY(-2px);box-shadow:0 6px 12px rgba(13,71,161,.3)}
        .modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.7);backdrop-filter:blur(8px);justify-content:center;align-items:center;z-index:1000}
        .modal-content{background:var(--modal-bg);padding:40px;border-radius:18px;max-width:480px;width:92%;text-align:center;box-shadow:0 15px 40px rgba(13,71,161,.2);position:relative;border:1px solid var(--border-light);color:var(--text-dark)}
        #my-profile-modal .modal-content{max-width:800px;height:90vh;padding:0;display:flex;flex-direction:column;overflow:hidden}
        #profile-scroll-area{overflow-y:auto;padding:0 20px 40px;flex:1}
        .profile-section-card{background:var(--card-bg);border-radius:14px;box-shadow:var(--card-shadow);padding:25px;margin-bottom:20px;border:1px solid var(--border-light)}
        .profile-section-card h3{color:var(--primary-blue);font-size:1.5rem;font-weight:700;margin-bottom:15px;padding-bottom:8px;border-bottom:1px solid var(--border-light)}
        .profile-header-card{background:var(--card-bg);padding-bottom:0;margin-bottom:20px;border-radius:18px 18px 0 0;position:relative;z-index:10}
        .profile-cover-photo{height:150px;background:linear-gradient(90deg,var(--accent-blue),var(--primary-blue));border-radius:18px 18px 0 0}
        .profile-avatar{width:120px;height:120px;border-radius:50%;border:4px solid var(--card-bg);object-fit:cover;position:absolute;top:90px;left:30px;box-shadow:0 0 0 4px var(--primary-blue)}
        .profile-intro-details{padding:80px 30px 20px;position:relative}
        .profile-intro-details h1{font-size:2rem;margin:0 0 8px;color:var(--text-dark)}
        .profile-intro-details p{margin:4px 0;font-size:1.1rem;color:var(--text-dark)}
        .profile-intro-details .location{color:var(--text-muted);font-size:.95rem;margin-top:10px}
        .social-links-profile{display:flex;gap:15px;margin-top:15px}
        .social-links-profile a{color:var(--primary-blue);font-size:1.8rem;transition:color .3s,transform .3s;text-decoration:none}
        .social-links-profile a:hover{color:var(--accent-blue);transform:translateY(-2px)}
        .experience-item,.education-item{margin-bottom:20px;border-left:3px solid var(--accent-blue);padding-left:15px}
        .experience-item h4,.education-item h4{font-size:1.15rem;color:var(--text-dark);margin-bottom:5px}
        .experience-item p,.education-item p{font-size:.95rem;color:var(--text-muted);margin:2px 0}
        .skill-tags{display:flex;flex-wrap:wrap;gap:10px}
        .skill-tag{background:#e3f2fd;color:var(--primary-blue);padding:8px 15px;border-radius:20px;font-size:.9rem;font-weight:600;transition:background .3s}
        [data-theme="dark"] .skill-tag{background:#2d2d2d;color:var(--accent-blue)}
        .edit-profile-btn{background:var(--accent-blue);color:#fff;border:none;padding:10px 20px;border-radius:8px;font-weight:600;cursor:pointer;transition:all .3s;margin-top:15px;display:inline-flex;align-items:center;gap:8px}
        .edit-profile-btn:hover{background:#1565c0;transform:translateY(-2px);box-shadow:0 4px 10px rgba(25,118,210,.4)}
        .close{position:absolute;top:18px;right:22px;font-size:32px;color:var(--close-btn-color);cursor:pointer;transition:all .3s;font-weight:300;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%}
        .close:hover{color:var(--close-btn-hover);background:rgba(211,47,47,.1);transform:scale(1.15) rotate(90deg)}
        .modal-content input{background:var(--input-bg);color:var(--text-dark);border:1px solid #ddd;width:100%;padding:14px;margin:12px 0;border-radius:10px;font-size:1rem}
        .modal-content button{background:var(--accent-blue);width:100%;padding:14px;margin:10px 0;border:none;border-radius:10px;font-weight:600;cursor:pointer;transition:all .35s;color:#fff}
        .modal-content button:hover{background:#1565c0;transform:translateY(-2px)}
        .modal-content .switch a{color:var(--accent-blue)}
        .about-content{background:var(--card-bg);padding:35px;border-radius:16px;box-shadow:var(--card-shadow);line-height:1.8;font-size:1.05rem;color:var(--text-dark)}
        .about-content h3{color:var(--primary-blue)}
        .footer{background:var(--footer-bg);color:var(--footer-text);text-align:center;padding:30px 20px;font-size:.95rem;margin-top:50px}
        .social-links-footer a{color:var(--footer-text);font-size:1.6rem;margin:0 14px;transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:inline-block;position:relative}
        .social-links-footer a::before{content:'';position:absolute;top:50%;left:50%;width:0;height:0;background:var(--accent-blue);border-radius:50%;transform:translate(-50%,-50%);transition:width .4s,height .4s;z-index:-1;opacity:.3}
        .social-links-footer a:hover{color:#fff;transform:translateY(-6px) scale(1.3)}
        .social-links-footer a:hover::before{width:50px;height:50px}
        #back-to-top{position:fixed;bottom:30px;right:30px;background:var(--accent-blue);color:#fff;border:none;width:50px;height:50px;border-radius:50%;font-size:1.5rem;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.3);opacity:0;visibility:hidden;transition:all .4s;z-index:999;display:flex;align-items:center;justify-content:center}
        #back-to-top.show{opacity:1;visibility:visible}
        #back-to-top:hover{background:#1565c0;transform:translateY(-5px);box-shadow:0 8px 20px rgba(25,118,210,.4)}
        .theme-toggle{position:absolute;top:20px;left:20px;background:rgba(255,255,255,.2);color:#fff;border:1px solid rgba(255,255,255,.3);width:44px;height:44px;border-radius:50%;font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s;z-index:100}
        .theme-toggle:hover{background:rgba(255,255,255,.4);transform:scale(1.1)}
        @media (max-width:768px){
            header h1{font-size:2rem}
            .user-grid,.job-grid{grid-template-columns:1fr}
            nav{gap:12px}
            nav a{padding:10px 14px;font-size:1rem}
            .search-bar{flex-direction:column}
            .search-bar button{border-radius:0 0 12px 12px}
            .modal-content{padding:30px 20px}
            #back-to-top{width:45px;height:45px;font-size:1.3rem;bottom:20px;right:20px}
            .theme-toggle{top:15px;left:15px;width:40px;height:40px;font-size:1.1rem}
            .auth-btn{font-size:.85rem;padding:6px 12px}
            .card{height:300px}
            .card-img{height:140px}
            .close{font-size:28px;top:15px;right:18px}
            #my-profile-modal .modal-content{height:100vh;width:100%;border-radius:0}
            .profile-avatar{top:100px;left:20px}
            .profile-intro-details{padding:70px 20px 20px}
            .profile-intro-details h1{font-size:1.5rem}
            .profile-section-card{padding:20px}
            .edit-profile-btn{font-size:.9rem;padding:8px 15px}
        }
        @keyframes notifSlide{0%{transform:translateX(100%)}100%{transform:translateX(0)}}

/* AI Agent Styles */
#ai-toggle {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background: var(--primary-blue);
    color: #fff;
    border: none;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    font-size: 1.8rem;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(13, 71, 161, 0.4);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

#ai-toggle:hover {
    transform: scale(1.1) rotate(5deg);
    background: var(--accent-blue);
}

#ai-chat-window {
    position: fixed;
    bottom: 100px;
    left: 30px;
    width: 350px;
    height: 500px;
    background: var(--card-bg);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    display: none;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
}

#ai-chat-header {
    background: linear-gradient(135deg, var(--primary-blue), var(--accent-blue));
    color: #fff;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

#ai-chat-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ai-message {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.ai-message.user {
    align-self: flex-end;
    background: var(--accent-blue);
    color: #fff;
    border-bottom-right-radius: 2px;
}

.ai-message.bot {
    align-self: flex-start;
    background: var(--bg-light);
    color: var(--text-dark);
    border: 1px solid var(--border-light);
    border-bottom-left-radius: 2px;
}

#ai-chat-input-area {
    padding: 15px;
    border-top: 1px solid var(--border-light);
    display: flex;
    gap: 10px;
}

#ai-chat-input {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text-dark);
    outline: none;
}

#ai-chat-send {
    background: var(--primary-blue);
    color: #fff;
    border: none;
    padding: 0 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

#ai-chat-send:hover {
    background: var(--accent-blue);
}

@media (max-width: 768px) {
    #ai-chat-window {
        width: calc(100% - 40px);
        bottom: 80px;
        left: 20px;
        height: 400px;
    }

    #ai-toggle {
        bottom: 20px;
        left: 20px;
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
}