html{
    scroll-behavior:smooth;
}

*{
    margin:0;
    padding:0;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial, Helvetica, sans-serif;
}

html{
    scroll-behavior: smooth;
}

body{
    background:#f5f7fb;
    color:#333;
}

/* Navigation */

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:rgba(15, 23, 42, 0.95);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(255, 255, 255, 0.08);
    color:white;
    padding:14px 40px;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
    box-sizing:border-box;
}

.logo{
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    color: white;
    text-decoration: none;
    flex-shrink: 0;
}

.logo span {
    background: linear-gradient(135deg, #ffffff 0%, #38bdf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}

.logo img{
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 50%;
}

.nav-links{
    display: flex;
    list-style: none;
    gap: 20px;
    margin-left: auto;
    align-items: center;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.nav-links a{
    text-decoration: none;
    color: #cbd5e1;
    font-size: 15px;
    font-weight: 600;
    transition: 0.25s;
}

.nav-links a:hover{
    color: #38bdf8;
}

.theme-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.25s;
    margin-left: 14px;
    flex-shrink: 0;
}

.theme-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: scale(1.08);
}

/* Hero */

.hero{
    min-height:75vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    background:
        linear-gradient(rgba(11, 15, 25, 0.75), rgba(11, 15, 25, 0.85)),
        url("images/campus.jpg");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    color:white;
    padding:40px 20px;
    margin-top:68px;
}

.hero-tagline {
    display: inline-block;
    padding: 6px 18px;
    background: rgba(56, 189, 248, 0.18);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    color: #38bdf8;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 18px;
}

.hero h1{
    font-size:36px;
    font-weight: 800;
    margin-bottom:18px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-shadow:0 4px 20px rgba(0,0,0,0.6);
    line-height: 1.25;
}

.hero p{
    font-size:16px;
    max-width:760px;
    margin:0 auto 28px auto;
    line-height:1.65;
    color: #cbd5e1;
}

.hero button{

    margin-top:35px;

    padding:16px 40px;

    border:none;

    background:#ffffff;

    color:#2563eb;

    border-radius:50px;

    font-size:20px;

    font-weight:bold;

    cursor:pointer;

    transition:0.3s;

    box-shadow:0 8px 20px rgba(0,0,0,0.25);

}
.hero button:hover{

    transform:translateY(-5px);

    background:#2563eb;

    color:white;

}

/* Search */

.search-section{

    text-align:center;

    padding:70px 20px;

}

.search-section h2{

    margin-bottom:20px;

}

.search-section input{

    width:65%;

    max-width:800px;

    padding:18px 25px;

    border-radius:50px;

    border:none;

    outline:none;

    background:white;

    font-size:18px;

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

    transition:0.3s;

}
.search-section input:focus{

    box-shadow:0 12px 35px rgba(37,99,235,0.35);

}
/* Cards */

.departments{

    padding:80px 10%;

}

.departments h2{

    text-align: center;

    font-size: 42px;

    font-weight: 700;

    color: #0f172a;

    margin-bottom: 20px;

    position: relative;

}
.departments h2::after{

    content: "";

    display: block;

    width: 90px;

    height: 4px;

    background: linear-gradient(90deg,#2563eb,#7c3aed);

    margin: 15px auto 0;

    border-radius: 10px;

}

.cards{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

}

.card{

    background:white;

    padding:30px;

    border-radius:15px;

    text-align:center;

    box-shadow:0 8px 20px rgba(0,0,0,.1);

    transition: 0.3s;

}

 .card:hover{
    transform: translateY(-10px) scale(1.03);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    cursor: pointer;

}
.card h3{

    margin-bottom:15px;

}

.card button{

    margin-top:20px;

    background:linear-gradient(90deg,#2563eb,#4f46e5);

    color:white;

    border:none;

    padding:12px 30px;

    border-radius:30px;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

    box-shadow:0 8px 20px rgba(37,99,235,.30);

}
.card button:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 28px rgba(37,99,235,.45);

}

/* Features */

.features{

    background:white;

    padding:80px 10%;

    text-align:center;

}

.feature-box{

    margin-top:40px;

    display:flex;

    justify-content:center;

    gap:40px;

    flex-wrap:wrap;

}

.feature-box div{

    width:250px;

    padding:30px;

    background:#f0f8ff;

    border-radius:15px;

}

/* Footer */

footer{

    background:#0f172a;

    color:white;

    text-align:center;

    padding:25px;

}
/* Explore Button */

.btn{
    display: inline-block;
    margin-top: 30px;
    padding: 16px 40px;

    background: linear-gradient(90deg,#2563eb,#7c3aed);

    color: white;
    text-decoration: none;

    font-size: 20px;
    font-weight: 600;

    border-radius: 50px;

    transition: all 0.3s ease;

    box-shadow: 0 10px 25px rgba(37,99,235,0.45);
}

.btn:hover{

    transform: translateY(-5px) scale(1.05);

    box-shadow: 0 18px 40px rgba(124,58,237,0.6);

    background: linear-gradient(90deg,#1d4ed8,#9333ea);

}
/* CSE Department Page */

.department-card{

    max-width:700px;

    margin:40px auto;

    background:white;

    padding:35px;

    border-radius:20px;

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

    text-align:left;

}

.department-card h3{

    color:#2563eb;

    margin-top:20px;

}

.department-card p{

    margin-top:8px;

    line-height:1.7;

}
/* Campus Map */

.campus-map{
    padding:80px 10%;
    text-align:center;
    background:#f5f7ff;
}

.campus-map h2{
    font-size:40px;
    color:#16213e;
    margin-bottom:30px;
}

.campus-map img{
    width:100%;
    max-width:1000px;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,0.2);
    transition:.4s;
}

.campus-map img:hover{
    transform:scale(1.02);
}
/* Campus Gallery */

.gallery{
    padding:80px 10%;
    background:#ffffff;
    text-align:center;
}

.gallery h2{
    font-size:40px;
    color:#0f172a;
    margin-bottom:40px;
}

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

.gallery-grid img{
    width:100%;
    height:250px;
    object-fit:cover;
    border-radius:18px;
    box-shadow:0 10px 25px rgba(0,0,0,0.15);
    transition:0.4s;
    cursor:pointer;
}

.gallery-grid img:hover{
    transform:scale(1.05);
    box-shadow:0 18px 35px rgba(0,0,0,0.25);
}
/* About Section */

.about{
    padding:80px 10%;
    text-align:center;
}

.about h2{
    font-size:38px;
    margin-bottom:20px;
    color:#0f172a;
}

.about p{
    max-width:800px;
    margin:auto;
    font-size:20px;
    line-height:1.8;
    color:#555;
}
.about{
    padding:80px 20px;
    text-align:center;
}

.about h2{
    font-size:42px;
    margin-bottom:25px;
    color:#0f172a;
}

.about p{
    max-width:850px;
    margin:auto;
    font-size:20px;
    line-height:1.8;
    color:#555;
}

.about{
    background:#f8fbff;
}

.about p{
    background:white;
    padding:30px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

/* Statistics Section */

.stats{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
    padding:70px 20px;
    background:#f8fbff;
}

.stat-box{
    transition: 0.3s;
    background:white;
    padding:30px;
    width:220px;
    text-align:center;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
    transition:0.3s;
}

.stat-box:hover{
    transform: translateY(-8px);
}

.stat-box h2{
    color:#2563eb;
    font-size:42px;
    margin-bottom:10px;
}

.stat-box p{
    font-size:18px;
    color:#555;
}

#topBtn{
    position: fixed;
    bottom: 30px;
    right: 30px;

    background: #2563eb;
    color: white;

    border: none;
    border-radius: 50%;

    width: 50px;
    height: 50px;

    font-size: 22px;
    cursor: pointer;

    display: none;

    box-shadow: 0 5px 15px rgba(0,0,0,0.3);

    transition: 0.3s;
}

#topBtn:hover{
    background: #1d4ed8;
    transform: scale(1.1);
}

/* ===== Loader ===== */

#loader{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:white;

    display:flex;
    justify-content:center;
    align-items:center;

    z-index:9999;
}

.spinner{
    width:60px;
    height:60px;

    border:6px solid #ddd;
    border-top:6px solid #2563eb;

    border-radius:50%;

    animation:spin 1s linear infinite;
}

@keyframes spin{

    100%{
        transform:rotate(360deg);
    }

}
.menu-toggle{
    display:none;
    font-size:30px;
    cursor:pointer;
    color:white;
}
/* =========================
   Mobile Responsive
========================= */


@media (max-width:768px){
    /* Hamburger Menu */



    .navbar{
    justify-content:space-between;
    align-items:center;
    padding:20px;
    position:relative;
}

    .nav-links{
        flex-direction:column;
        gap:15px;
        margin-top:15px;
    }
    .menu-toggle{
    display:block;
}

.nav-links{
    display:none;
    width:100%;
    text-align:center;
}

.nav-links.active{
    display:flex;
}

    .cards{
        grid-template-columns:1fr;
    }

    .card{
        width:90%;
        margin:auto;
    }

    .stats{
        flex-direction:column;
        align-items:center;
    }

    .feature-box{
    flex-direction:column;
    align-items:center;
}

.hero h1{
    font-size:32px;
}

.hero p{
    font-size:18px;
}

}
/* ==========================
   AI Chatbot
========================== */

#chat-btn{
    position:fixed;
    bottom:30px;
    left:30px;
    width:60px;
    height:60px;
    background:#2563eb;
    color:white;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:28px;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
    z-index:999;
    transition:.3s;
}

#chat-btn:hover{
    transform:scale(1.1);
}

#chat-box{
    position:fixed;
    bottom:100px;
    left:30px;
    width:320px;
    background:white;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.2);
    overflow:hidden;
    display:none;
    z-index:999;
}

.chat-header{
    background:#2563eb;
    color:white;
    padding:15px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-weight:bold;
}

.chat-body{
    height:250px;
    overflow-y:auto;
    padding:15px;
    background:#f8f9fc;
}

.chat-footer{
    display:flex;
}

.chat-footer input{
    flex:1;
    border:none;
    outline:none;
    padding:12px;
}

.chat-footer button{
    border:none;
    background:#2563eb;
    color:white;
    padding:12px 18px;
    cursor:pointer;
}

#close-chat{
    cursor:pointer;
}
/* ==========================
   Future AI Section
========================== */

.future-ai{
    padding:80px 10%;
    background:linear-gradient(135deg,#0f172a,#1e3a8a);
    text-align:center;
    color:white;
}

.future-ai h2{
    font-size:42px;
    margin-bottom:45px;
}

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

.future-card{
    background:rgba(255,255,255,0.12);
    padding:30px;
    border-radius:20px;
    backdrop-filter:blur(10px);
    transition:.35s;
}

.future-card:hover{
    transform:translateY(-8px) scale(1.03);
    background:rgba(255,255,255,0.2);
}

.future-card h3{
    margin-bottom:15px;
    color:#38bdf8;
}

.future-card p{
    line-height:1.6;
}
.live-status{
    padding:70px 10%;
    text-align:center;
    background:#f8fafc;
}

.live-status h2{
    font-size:40px;
    margin-bottom:40px;
}

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

.status-card{
    background:white;
    padding:30px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.1);
}

.green{
    color:#16a34a;
    font-weight:bold;
}

.yellow{
    color:#ca8a04;
    font-weight:bold;
}

.red{
    color:#dc2626;
    font-weight:bold;
}
.voice-btn{
    margin-top:15px;
    padding:12px 24px;
    border:none;
    border-radius:30px;
    background:#2563eb;
    color:white;
    font-size:16px;
    cursor:pointer;
    transition:0.3s;
}

.voice-btn:hover{
    background:#1d4ed8;
    transform:scale(1.05);
}
.sos-btn{
    position:fixed;
    bottom:90px;
    right:20px;
    width:70px;
    height:70px;
    border:none;
    border-radius:50%;
    background:#e11d48;
    color:white;
    font-size:20px;
    font-weight:bold;
    cursor:pointer;
    box-shadow:0 8px 20px rgba(0,0,0,.3);
    z-index:9999;
    transition:.3s;
}

.sos-btn:hover{
    transform:scale(1.1);
    background:#be123c;
}
/* ================= AI Route Recommendation ================= */

.ai-route{
    padding:60px 20px;
    text-align:center;
    background:#f8fbff;
}

.ai-route h2{
    font-size:40px;
    margin-bottom:35px;
    color:#222;
}

.route-card{
    max-width:700px;
    margin:auto;
    background:#fff;
    padding:30px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

.route-card label{
    display:block;
    text-align:left;
    margin-top:15px;
    margin-bottom:8px;
    font-size:18px;
}

.route-card select{
    width:100%;
    padding:12px;
    border-radius:10px;
    border:1px solid #ccc;
    margin-bottom:15px;
    font-size:16px;
}

.route-btn{
    background:linear-gradient(90deg,#2563eb,#7c3aed);
    color:white;
    border:none;
    padding:14px 30px;
    border-radius:30px;
    cursor:pointer;
    font-size:18px;
    margin-top:10px;
    transition:0.3s;
}

.route-btn:hover{
    transform:scale(1.05);
}

.route-result{
    margin-top:25px;
    padding:20px;
    background:#eef6ff;
    border-radius:15px;
    font-size:18px;
    font-weight:bold;
    line-height:1.8;
}
/* ==========================
   Dark / Light Mode Button
========================== */

.theme-btn{
    background:white;
    color:#2563eb;
    border:none;
    width:45px;
    height:45px;
    border-radius:50%;
    font-size:22px;
    cursor:pointer;
    margin-left:20px;
    transition:0.3s;
}

.theme-btn:hover{
    transform:scale(1.1);
    background:#2563eb;
    color:white;
}
/* ==========================
   Dark Mode
========================== */

.dark-mode{
    background:#121212;
    color:white;
}

/* Navbar */
.dark-mode .navbar{
    background:#1e1e1e;
}

/* Cards */
.dark-mode .card,
.dark-mode .department-card,
.dark-mode .stat-box,
.dark-mode .future-card,
.dark-mode .status-card,
.dark-mode .route-card{
    background:#1f1f1f;
    color:white;
}

/* Sections */
.dark-mode .features,
.dark-mode .about,
.dark-mode .campus-map,
.dark-mode .live-status,
.dark-mode .search-section{
    background:#181818;
    color:white;
}

/* Headings */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode p{
    color:white;
}

/* Input & Select */
.dark-mode input,
.dark-mode select{
    background:#2b2b2b;
    color:white;
    border:1px solid #555;
}

/* Footer */
.dark-mode footer{
    background:#000;
}

/* AI Route Result */
.dark-mode .route-result{
    background:#2b2b2b;
    color:white;
}

/* Theme Button */
.dark-mode .theme-btn{
    background:#2563eb;
    color:white;
}
/* About Section Dark Mode */

.dark-mode .about{
    background:#121212 !important;
}

.dark-mode .about h2{
    color:white !important;
}

.dark-mode .about p{
    background:#1f1f1f !important;
    color:white !important;
    box-shadow:none;
}
/* Stats Section Dark Mode */

.dark-mode .stats{
    background:#121212 !important;
}

.dark-mode .stat-card{
    background:#1f1f1f !important;
    color:white !important;
}

.dark-mode .stat-card h3,
.dark-mode .stat-card p{
    color:white !important;
}

/* =========================================================
   CERTIFICATE PLATFORM & VERIFICATION PORTAL DESIGN SYSTEM
   ========================================================= */

/* Hero Action Group & Nav highlights */
.hero-btn-group {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 25px;
}

.btn-cert-hero {
    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%) !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4) !important;
}

.btn-cert-hero:hover {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%) !important;
    transform: translateY(-3px) !important;
}

.btn-verify-hero {
    background: #0ea5e9 !important;
    color: white !important;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4) !important;
}

.btn-verify-hero:hover {
    background: #0284c7 !important;
    transform: translateY(-3px) !important;
}

.highlight-nav-btn {
    background: rgba(56, 189, 248, 0.15);
    border: 1px solid rgba(56, 189, 248, 0.4);
    border-radius: 20px;
    padding: 6px 14px !important;
    color: #38bdf8 !important;
}

.highlight-nav-btn:hover {
    background: #38bdf8 !important;
    color: #0f172a !important;
    border-color: #38bdf8 !important;
}

.active-nav {
    color: #38bdf8 !important;
    font-weight: bold !important;
    border-bottom: 2px solid #38bdf8;
    padding-bottom: 4px;
}

/* -----------------------------------------
   HOME PAGE CERTIFICATE HUB SECTION
   ----------------------------------------- */
.cert-hub-section {
    padding: 80px 40px;
    background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
    text-align: center;
}

.cert-hub-header {
    max-width: 850px;
    margin: 0 auto 40px auto;
}

.hub-pill {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
    font-weight: 700;
    border-radius: 30px;
    font-size: 14px;
    margin-bottom: 14px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.cert-hub-header h2 {
    font-size: 34px;
    color: #0f172a;
    margin-bottom: 14px;
    font-weight: 800;
}

.cert-hub-header p {
    font-size: 16px;
    color: #475569;
    line-height: 1.6;
}

.home-verify-box {
    max-width: 650px;
    margin: 0 auto 50px auto;
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
    border: 1px solid #e2e8f0;
}

.home-verify-box h3 {
    font-size: 19px;
    margin-bottom: 16px;
    color: #1e293b;
}

.home-verify-form {
    display: flex;
    gap: 10px;
}

.home-verify-form input {
    flex: 1;
    padding: 14px 18px;
    border: 2px solid #cbd5e1;
    border-radius: 12px;
    font-size: 15px;
    outline: none;
    transition: 0.3s;
}

.home-verify-form input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.home-sample-tags {
    margin-top: 14px;
    font-size: 13px;
    color: #64748b;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.sample-tag-link {
    display: inline-block;
    padding: 3px 10px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    color: #4f46e5;
    text-decoration: none;
    font-family: monospace;
    font-weight: 600;
    transition: 0.2s;
}

.sample-tag-link:hover {
    background: #e0e7ff;
    border-color: #6366f1;
}

.cert-portal-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1050px;
    margin: 0 auto;
    text-align: left;
}

.portal-card {
    background: white;
    padding: 36px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    transition: 0.3s;
}

.portal-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.1);
    border-color: #cbd5e1;
}

.portal-card-icon {
    font-size: 40px;
    margin-bottom: 18px;
}

.portal-card h3 {
    font-size: 22px;
    color: #0f172a;
    margin-bottom: 12px;
}

.portal-card p {
    font-size: 15px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1;
}

.portal-feature-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.portal-feature-list li {
    font-size: 14px;
    color: #334155;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-portal {
    width: 100%;
    text-align: center;
    padding: 14px 20px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    box-sizing: border-box;
}

/* -----------------------------------------
   CERTIFICATE STUDIO & VERIFY PAGE COMMON
   ----------------------------------------- */
.cert-body, .verify-body {
    background: #0b0f19;
    color: #f1f5f9;
    min-height: 100vh;
}

.cert-studio-wrapper, .verify-page-wrapper {
    max-width: 1280px;
    margin: 110px auto 60px auto;
    padding: 0 24px;
}

.cert-hero, .verify-hero {
    text-align: center;
    margin-bottom: 40px;
}

.cert-hero-badge {
    display: inline-block;
    background: rgba(56, 189, 248, 0.12);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.3);
    padding: 6px 18px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.cert-hero h1, .verify-hero h1 {
    font-size: 38px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 14px;
    letter-spacing: -0.5px;
}

.cert-hero p, .verify-hero p {
    font-size: 16px;
    color: #94a3b8;
    max-width: 800px;
    margin: 0 auto 24px auto;
    line-height: 1.6;
}

.cert-quick-stats {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.stat-pill {
    background: rgba(30, 41, 59, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 22px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.stat-pill .stat-num {
    font-size: 18px;
    font-weight: 800;
    color: #38bdf8;
}

.stat-pill .stat-lbl {
    font-size: 13px;
    color: #cbd5e1;
}

/* -----------------------------------------
   STEPPER NAVIGATION
   ----------------------------------------- */
.stepper-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 14px 24px;
    margin-bottom: 35px;
    overflow-x: auto;
}

.step-item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    opacity: 0.6;
    transition: 0.3s;
    white-space: nowrap;
}

.step-item:hover {
    opacity: 0.9;
}

.step-item.active {
    opacity: 1;
}

.step-item.active .step-num {
    background: #6366f1;
    color: white;
    box-shadow: 0 0 15px rgba(99, 102, 241, 0.6);
}

.step-item.active .step-title {
    color: #ffffff;
    font-weight: 700;
}

.step-item.completed .step-num {
    background: #10b981;
    color: white;
}

.step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #334155;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    transition: 0.3s;
}

.step-title {
    font-size: 14px;
    color: #94a3b8;
    font-weight: 500;
}

.step-connector {
    flex: 1;
    height: 2px;
    background: #334155;
    margin: 0 14px;
    min-width: 20px;
}

/* -----------------------------------------
   PANEL CARDS & WORKSPACE
   ----------------------------------------- */
.step-section {
    display: none;
}

.step-section.active-step {
    display: block;
    animation: fadeInStep 0.4s ease forwards;
}

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

.panel-card {
    background: #131b2e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 18px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 10px;
}

.panel-header h2, .panel-header h3 {
    font-size: 20px;
    color: #ffffff;
    font-weight: 700;
    margin: 0;
}

.panel-subtitle {
    font-size: 13px;
    color: #94a3b8;
}

.split-layout {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 28px;
}

/* Form inputs & controls */
.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #cbd5e1;
    margin-bottom: 6px;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 16px;
    background: #0b0f19;
    border: 1px solid #334155;
    border-radius: 10px;
    color: #ffffff;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
}

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

/* Action Footer */
.action-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 22px;
    margin-top: 26px;
    gap: 14px;
    flex-wrap: wrap;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: 0.25s;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary {
    background: #6366f1;
    color: white;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

.btn-primary:hover:not(:disabled) {
    background: #4f46e5;
    transform: translateY(-2px);
}

.btn-secondary {
    background: #1e293b;
    color: #e2e8f0;
    border: 1px solid #334155;
}

.btn-secondary:hover:not(:disabled) {
    background: #334155;
}

.btn-success {
    background: #10b981;
    color: white;
}

.btn-success:hover:not(:disabled) {
    background: #059669;
}

.btn-outline-primary {
    background: transparent;
    border: 1px solid #6366f1;
    color: #818cf8;
}

.btn-outline-primary:hover:not(:disabled) {
    background: rgba(99, 102, 241, 0.15);
}

.btn-outline-secondary {
    background: transparent;
    border: 1px solid #475569;
    color: #cbd5e1;
}

.btn-outline-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.05);
}

.btn-outline-success {
    background: transparent;
    border: 1px solid #10b981;
    color: #34d399;
}

.btn-outline-success:hover {
    background: rgba(16, 185, 129, 0.15);
}

.btn-outline-danger {
    background: transparent;
    border: 1px solid #ef4444;
    color: #f87171;
}

.btn-outline-danger:hover {
    background: rgba(239, 68, 68, 0.15);
}

.btn-lg {
    padding: 16px 32px;
    font-size: 16px;
    border-radius: 12px;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 6px;
}

.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.badge-accent { background: rgba(99, 102, 241, 0.2); color: #818cf8; border: 1px solid rgba(99, 102, 241, 0.3); }
.badge-clean { background: rgba(16, 185, 129, 0.2); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); }
.badge-fixed { background: rgba(245, 158, 11, 0.2); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.3); }
.badge-dup { background: rgba(239, 68, 68, 0.2); color: #f87171; border: 1px solid rgba(239, 68, 68, 0.3); }
.badge-approved { background: rgba(59, 130, 246, 0.2); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.3); }

/* -----------------------------------------
   CANVAS CERTIFICATE TEMPLATE & THEMES
   ----------------------------------------- */
.cert-preview-container {
    background: #070a12;
    padding: 16px;
    border-radius: 14px;
    overflow-x: auto;
    display: flex;
    justify-content: center;
}

.cert-canvas-frame {
    width: 680px;
    height: 480px;
    background: #ffffff;
    color: #0f172a;
    box-sizing: border-box;
    padding: 24px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    font-family: 'Montserrat', sans-serif;
    user-select: none;
}

.cert-border-outer {
    width: 100%;
    height: 100%;
    border: 4px solid #1e293b;
    box-sizing: border-box;
    padding: 6px;
    position: relative;
}

.cert-border-inner {
    width: 100%;
    height: 100%;
    border: 1.5px solid #64748b;
    box-sizing: border-box;
    padding: 18px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
}

/* Certificate Header */
.cert-header-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cert-logo-img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.cert-org-details {
    flex: 1;
    padding: 0 12px;
}

.cert-org-name {
    font-family: 'Cinzel', serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 1px;
    margin: 0;
    color: #0f172a;
}

.cert-org-sub {
    font-size: 10px;
    font-weight: 600;
    color: #64748b;
    margin: 2px 0 0 0;
    letter-spacing: 0.5px;
}

.seal-emblem {
    font-size: 11px;
    font-weight: bold;
    color: #d97706;
    border: 1px dashed #d97706;
    padding: 4px 8px;
    border-radius: 4px;
}

/* Certificate Type */
.cert-type-area {
    margin-top: 6px;
}

.cert-main-title {
    font-family: 'Cinzel', serif;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 2px;
    margin: 0;
    color: #1e1b4b;
}

.cert-title-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 4px 0;
}

.divider-line {
    width: 60px;
    height: 1.5px;
    background: #cbd5e1;
}

.divider-gem {
    font-size: 10px;
    color: #6366f1;
}

.cert-intro {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #64748b;
    margin: 4px 0 0 0;
}

/* Recipient Section */
.cert-recipient-area {
    margin: 10px 0;
}

.cert-name {
    font-family: 'Great Vibes', cursive;
    font-size: 38px;
    color: #1e1b4b;
    line-height: 1.1;
    margin: 4px 0;
}

.cert-recipient-dept {
    font-size: 11px;
    font-weight: 700;
    color: #4f46e5;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.cert-body-text {
    font-size: 11px;
    color: #334155;
    line-height: 1.5;
    max-width: 500px;
    margin: 0 auto;
}

/* Footer Section */
.cert-footer-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 8px;
}

.cert-sign-col {
    width: 170px;
    text-align: center;
}

.signature-line {
    border-bottom: 1.5px solid #0f172a;
    padding-bottom: 2px;
    margin-bottom: 4px;
}

.signature-font {
    font-family: 'Great Vibes', cursive;
    font-size: 20px;
    color: #1e293b;
}

.sign-title {
    font-size: 9px;
    font-weight: 700;
    color: #475569;
    margin: 0;
}

.cert-date-text {
    font-size: 8px;
    color: #64748b;
    display: block;
    margin-top: 2px;
}

.cert-qr-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.cert-qr-box {
    background: white;
    padding: 2px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
}

.cert-id-tag {
    font-family: monospace;
    font-size: 9px;
    font-weight: bold;
    color: #0f172a;
}

.cert-verify-hint {
    font-size: 7px;
    color: #64748b;
}

/* -----------------------------------------
   THEME STYLING
   ----------------------------------------- */
/* 1. Tech Modern */
.theme-tech-modern .cert-border-outer { border-color: #3b82f6; }
.theme-tech-modern .cert-border-inner { border-color: #93c5fd; }
.theme-tech-modern .cert-main-title { color: #1e3a8a; }
.theme-tech-modern .cert-name { color: #1e40af; }
.theme-tech-modern .seal-emblem { color: #2563eb; border-color: #2563eb; }

/* 2. Royal Gold Academic */
.theme-royal-gold .cert-border-outer { border-color: #b45309; }
.theme-royal-gold .cert-border-inner { border-color: #f59e0b; }
.theme-royal-gold .cert-main-title { color: #78350f; }
.theme-royal-gold .cert-name { color: #92400e; }
.theme-royal-gold .seal-emblem { color: #d97706; border-color: #d97706; }
.theme-royal-gold .divider-gem { color: #d97706; }

/* 3. Imperial Crimson */
.theme-imperial-crimson .cert-border-outer { border-color: #881337; }
.theme-imperial-crimson .cert-border-inner { border-color: #f43f5e; }
.theme-imperial-crimson .cert-main-title { color: #4c0519; }
.theme-imperial-crimson .cert-name { color: #881337; }
.theme-imperial-crimson .seal-emblem { color: #e11d48; border-color: #e11d48; }

/* 4. Emerald Luxury */
.theme-emerald-luxury .cert-border-outer { border-color: #065f46; }
.theme-emerald-luxury .cert-border-inner { border-color: #10b981; }
.theme-emerald-luxury .cert-main-title { color: #064e3b; }
.theme-emerald-luxury .cert-name { color: #047857; }
.theme-emerald-luxury .seal-emblem { color: #059669; border-color: #059669; }

/* 5. Cyber Dark */
.theme-cyber-dark { background: #090d16; color: #f8fafc; }
.theme-cyber-dark .cert-border-outer { border-color: #6366f1; }
.theme-cyber-dark .cert-border-inner { border-color: #818cf8; }
.theme-cyber-dark .cert-org-name { color: #ffffff; }
.theme-cyber-dark .cert-org-sub { color: #94a3b8; }
.theme-cyber-dark .cert-main-title { color: #a5b4fc; }
.theme-cyber-dark .cert-name { color: #38bdf8; }
.theme-cyber-dark .cert-body-text { color: #cbd5e1; }
.theme-cyber-dark .signature-line { border-bottom-color: #cbd5e1; }
.theme-cyber-dark .signature-font { color: #f1f5f9; }
.theme-cyber-dark .sign-title { color: #94a3b8; }
.theme-cyber-dark .cert-id-tag { color: #e2e8f0; }

.preview-actions {
    margin-top: 14px;
    text-align: center;
}

.preview-note {
    font-size: 12px;
    color: #94a3b8;
}

/* -----------------------------------------
   STEP 2: INGESTION UI
   ----------------------------------------- */
.upload-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.drop-zone {
    border: 2px dashed #475569;
    border-radius: 16px;
    padding: 36px 20px;
    text-align: center;
    background: rgba(15, 23, 42, 0.4);
    transition: 0.3s;
    cursor: pointer;
}

.drop-zone:hover, .drop-zone.drag-over {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.08);
}

.drop-icon {
    font-size: 44px;
    margin-bottom: 12px;
}

.drop-zone h3 {
    font-size: 17px;
    color: #ffffff;
    margin-bottom: 8px;
}

.drop-zone p {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 18px;
}

.demo-data-box {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
}

.demo-data-box h3 {
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 8px;
}

.demo-data-box p {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 16px;
    line-height: 1.5;
}

.demo-btn-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn-demo, .btn-demo-clean {
    text-align: left;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid;
    cursor: pointer;
    transition: 0.25s;
    display: flex;
    flex-direction: column;
}

.btn-demo {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
    color: #fbbf24;
}

.btn-demo:hover {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
}

.btn-demo-clean {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: #34d399;
}

.btn-demo-clean:hover {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
}

.btn-demo span, .btn-demo-clean span {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 4px;
}

.btn-demo small, .btn-demo-clean small {
    font-size: 11px;
    opacity: 0.8;
}

.download-template-link {
    margin-top: 14px;
    text-align: right;
}

.link-btn {
    font-size: 12px;
    color: #38bdf8;
    text-decoration: none;
}

.link-btn:hover {
    text-decoration: underline;
}

.manual-add-wrapper {
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 18px;
}

.manual-add-wrapper h4 {
    font-size: 14px;
    margin: 0 0 12px 0;
    color: #e2e8f0;
}

.manual-form-inline {
    display: grid;
    grid-template-columns: 1.5fr 1.5fr 1fr 1fr auto;
    gap: 10px;
}

.manual-form-inline input {
    padding: 10px 14px;
    background: #0b0f19;
    border: 1px solid #334155;
    border-radius: 8px;
    color: white;
    font-size: 13px;
}

/* -----------------------------------------
   STEP 3: AI VALIDATION
   ----------------------------------------- */
.ai-control-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.ai-status-indicator {
    display: flex;
    align-items: center;
    gap: 16px;
}

.pulsing-brain {
    font-size: 36px;
    animation: pulseGlow 2s infinite ease-in-out;
}

@keyframes pulseGlow {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.ai-status-indicator h3 {
    font-size: 18px;
    color: #ffffff;
    margin: 0 0 4px 0;
}

.ai-status-indicator p {
    font-size: 13px;
    color: #cbd5e1;
    margin: 0;
}

.btn-ai-action {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 10px;
    border: none;
    box-shadow: 0 4px 15px rgba(139, 92, 246, 0.4);
    cursor: pointer;
    transition: 0.3s;
}

.btn-ai-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.6);
}

.ai-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.ai-stat-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 18px;
    text-align: center;
}

.ai-stat-value {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 4px;
}

.total-card .ai-stat-value { color: #f8fafc; }
.clean-card .ai-stat-value { color: #34d399; }
.fixed-card .ai-stat-value { color: #fbbf24; }
.dup-card .ai-stat-value { color: #f87171; }
.missing-card .ai-stat-value { color: #a78bfa; }

.ai-stat-label {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 600;
}

.ai-log-wrapper {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 20px;
}

.ai-log-wrapper h3 {
    font-size: 15px;
    color: #ffffff;
    margin-bottom: 12px;
}

.ai-log-content {
    max-height: 280px;
    overflow-y: auto;
    padding-right: 8px;
}

.ai-log-item {
    background: #0b0f19;
    border: 1px solid #1e293b;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 10px;
}

.ai-log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    margin-bottom: 6px;
}

.diff-fixes, .diff-warnings {
    margin: 4px 0 0 0;
    padding-left: 20px;
    font-size: 12px;
}

.diff-fixes li { color: #fbbf24; margin-bottom: 2px; }
.diff-warnings li { color: #f87171; margin-bottom: 2px; }
.clean-pass { font-size: 12px; color: #34d399; margin: 4px 0 0 0; }
.ai-log-placeholder { color: #64748b; font-size: 13px; font-style: italic; text-align: center; padding: 20px; }

/* -----------------------------------------
   STEP 4: TABLE REVIEW & EDITOR
   ----------------------------------------- */
.table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
}

.filter-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.filter-btn {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid #334155;
    color: #94a3b8;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.filter-btn:hover, .filter-btn.active {
    background: #6366f1;
    color: white;
    border-color: #6366f1;
}

.table-responsive {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    text-align: left;
}

.data-table th {
    background: #0f172a;
    color: #cbd5e1;
    padding: 14px 16px;
    font-weight: 700;
    border-bottom: 1px solid #334155;
}

.data-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #f1f5f9;
}

.data-table tr:hover td {
    background: rgba(255, 255, 255, 0.03);
}

.editable-name {
    cursor: pointer;
    color: #38bdf8;
    text-decoration: underline dotted;
}

.raw-hint {
    display: block;
    font-size: 11px;
    color: #94a3b8;
}

.role-pill {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.row-actions {
    display: flex;
    gap: 6px;
}

.btn-icon {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    cursor: pointer;
    color: white;
    font-size: 12px;
    transition: 0.2s;
}

.btn-icon:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* -----------------------------------------
   STEP 5: BULK GENERATOR DASHBOARD
   ----------------------------------------- */
.generation-dashboard {
    margin-bottom: 30px;
}

.gen-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 30px;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.gen-card h3 {
    font-size: 22px;
    color: #ffffff;
    margin-bottom: 10px;
}

.gen-card p {
    font-size: 14px;
    color: #94a3b8;
    margin-bottom: 24px;
    line-height: 1.6;
}

.gen-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.progress-wrapper {
    margin-top: 20px;
    text-align: left;
}

.progress-bar-container {
    width: 100%;
    height: 12px;
    background: #1e293b;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1 0%, #10b981 100%);
    border-radius: 20px;
    transition: width 0.2s ease;
}

.progress-status-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #cbd5e1;
}

.generated-grid-wrapper h3 {
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 18px;
}

.cert-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.cert-item-card {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    transition: 0.3s;
}

.cert-item-card:hover {
    transform: translateY(-4px);
    border-color: #6366f1;
}

.cert-card-preview img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    display: block;
}

.cert-card-info {
    padding: 14px;
}

.cert-card-info h4 {
    font-size: 15px;
    color: #ffffff;
    margin: 0 0 4px 0;
}

.cert-card-info p {
    font-size: 12px;
    color: #94a3b8;
    margin: 0 0 12px 0;
}

.cert-card-actions {
    display: flex;
    gap: 8px;
}

/* -----------------------------------------
   PUBLIC VERIFICATION PORTAL
   ----------------------------------------- */
.verify-card-container {
    max-width: 780px;
    margin: 0 auto 40px auto;
    background: #131b2e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.search-tabs {
    display: flex;
    border-bottom: 1px solid #334155;
    margin-bottom: 24px;
    gap: 8px;
}

.tab-btn {
    background: transparent;
    border: none;
    padding: 12px 18px;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: 0.2s;
}

.tab-btn:hover {
    color: #cbd5e1;
}

.tab-btn.active {
    color: #38bdf8;
    border-bottom-color: #38bdf8;
}

.tab-content {
    display: none;
}

.tab-content.active-tab {
    display: block;
    animation: fadeInStep 0.3s ease;
}

.verify-search-box {
    display: flex;
    gap: 12px;
}

.search-input-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    background: #0b0f19;
    border: 2px solid #334155;
    border-radius: 12px;
    padding: 0 16px;
    transition: 0.2s;
}

.search-input-wrapper:focus-within {
    border-color: #38bdf8;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

.search-icon {
    font-size: 18px;
    margin-right: 10px;
}

.search-input-wrapper input {
    width: 100%;
    background: transparent;
    border: none;
    color: white;
    font-size: 15px;
    outline: none;
    padding: 14px 0;
}

.quick-demo-samples {
    margin-top: 18px;
    font-size: 12px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sample-tag {
    background: rgba(56, 189, 248, 0.1);
    border: 1px solid rgba(56, 189, 248, 0.3);
    color: #38bdf8;
    padding: 4px 10px;
    border-radius: 6px;
    font-family: monospace;
    font-size: 11px;
    cursor: pointer;
    transition: 0.2s;
}

.sample-tag:hover {
    background: rgba(56, 189, 248, 0.2);
}

/* Camera Scanner */
.camera-scanner-wrapper {
    text-align: center;
}

.scan-instructions {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 16px;
}

.qr-camera-box {
    width: 100%;
    max-width: 360px;
    margin: 0 auto 16px auto;
    border-radius: 12px;
    overflow: hidden;
}

.camera-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
}

/* Results Section */
.verify-results-wrapper {
    margin-top: 40px;
}

.result-banner {
    display: flex;
    align-items: center;
    padding: 24px 30px;
    border-radius: 16px;
    margin-bottom: 28px;
    position: relative;
    overflow: hidden;
}

.result-banner.verified {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.25) 100%);
    border: 1px solid #10b981;
}

.result-banner.invalid {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(185, 28, 28, 0.25) 100%);
    border: 1px solid #ef4444;
}

.banner-icon {
    font-size: 42px;
    margin-right: 20px;
}

.banner-text h2 {
    font-size: 20px;
    margin: 0 0 6px 0;
}

.result-banner.verified h2 { color: #34d399; }
.result-banner.invalid h2 { color: #f87171; }

.banner-text p {
    font-size: 14px;
    color: #cbd5e1;
    margin: 0;
}

.stamp-seal {
    margin-left: auto;
    border: 3px double #10b981;
    color: #10b981;
    font-weight: 900;
    font-size: 14px;
    letter-spacing: 2px;
    padding: 6px 14px;
    transform: rotate(-10deg);
    border-radius: 6px;
}

.verify-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 28px;
}

.detail-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}

.detail-item {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 10px;
}

.detail-label {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 600;
    margin-bottom: 4px;
}

.detail-val {
    font-size: 15px;
    color: #ffffff;
    font-weight: 600;
}

.code-val {
    font-family: monospace;
    font-size: 11px;
    color: #38bdf8;
    word-break: break-all;
}

.action-buttons-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.invalid-help-card {
    background: #131b2e;
    border: 1px solid #ef4444;
    border-radius: 16px;
    padding: 24px;
}

.invalid-help-card h3 {
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 12px;
}

.invalid-help-card ul {
    margin: 0;
    padding-left: 20px;
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.7;
}

.invalid-help-card a {
    color: #38bdf8;
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-card {
    background: #131b2e;
    border: 1px solid #334155;
    border-radius: 18px;
    width: 90%;
    max-width: 480px;
    padding: 24px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.modal-header h3 {
    font-size: 18px;
    color: white;
    margin: 0;
}

.modal-close {
    cursor: pointer;
    font-size: 18px;
    color: #94a3b8;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

/* Toast */
.toast-notification {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: #10b981;
    color: white;
    padding: 12px 20px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(20px);
    transition: 0.3s;
    pointer-events: none;
    z-index: 10000;
}

.toast-notification.show {
    opacity: 1;
    transform: translateY(0);
}

/* -----------------------------------------
   CAMPUSCONTENT AI STUDIO DESIGN SYSTEM
   ----------------------------------------- */
.content-body {
    background: #0b0f19;
    color: #f1f5f9;
    min-height: 100vh;
    font-family: 'Outfit', sans-serif;
}

.studio-wrapper {
    max-width: 1360px;
    margin: 100px auto 60px auto;
    padding: 0 24px;
}

.studio-hero {
    text-align: center;
    margin-bottom: 35px;
}

.studio-hero h1 {
    font-size: 38px;
    font-weight: 900;
    color: #ffffff;
    margin: 10px 0 12px 0;
    letter-spacing: -0.5px;
}

.studio-hero p {
    font-size: 16px;
    color: #94a3b8;
    max-width: 820px;
    margin: 0 auto 24px auto;
    line-height: 1.6;
}

.quick-preset-bar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 12px 20px;
    border-radius: 50px;
    max-width: 960px;
    margin: 0 auto;
}

.preset-label {
    font-size: 13px;
    font-weight: 700;
    color: #cbd5e1;
}

.preset-pill {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #e2e8f0;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.25s;
}

.preset-pill:hover, .preset-pill.active {
    background: #6366f1;
    color: white;
    border-color: #6366f1;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.5);
}

/* Studio Two-Column Grid */
.studio-grid {
    display: grid;
    grid-template-columns: 460px 1fr;
    gap: 28px;
    margin-bottom: 40px;
}

.brief-panel, .output-panel {
    background: #131b2e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 26px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.header-icon-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-icon {
    font-size: 26px;
}

.btn-text-action {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 13px;
    cursor: pointer;
    transition: 0.2s;
}

.btn-text-action:hover {
    color: #e2e8f0;
}

.btn-generate-all {
    width: 100%;
    margin-top: 10px;
    padding: 15px;
    font-size: 15px;
    font-weight: 800;
    border-radius: 12px;
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.btn-generate-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(99, 102, 241, 0.6);
}

.req {
    color: #f43f5e;
}

/* Channel Tabs Bar */
.channel-tabs-bar {
    display: flex;
    gap: 6px;
    border-bottom: 1px solid #334155;
    padding-bottom: 14px;
    margin-bottom: 20px;
    overflow-x: auto;
}

.channel-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid #334155;
    color: #94a3b8;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.2s;
}

.channel-tab:hover {
    color: #cbd5e1;
    border-color: #475569;
}

.channel-tab.active {
    background: #6366f1;
    color: white;
    border-color: #6366f1;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
}

/* Channel Header Row */
.channel-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 12px;
}

.badge-platform {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    margin-right: 8px;
}

.badge-opt {
    font-size: 12px;
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
}

.channel-action-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.action-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #cbd5e1;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

.action-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.action-btn.btn-copy {
    background: #10b981;
    color: white;
    border-color: #10b981;
}

.action-btn.btn-copy:hover {
    background: #059669;
}

/* Channel Mockup Container */
.channel-mockup-container {
    background: #070a12;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    min-height: 420px;
    margin-bottom: 20px;
}

.platform-mockup {
    display: none;
}

.platform-mockup.active-mockup {
    display: block;
    animation: fadeInStep 0.3s ease;
}

.editable-content {
    outline: none;
    white-space: pre-wrap;
    font-family: inherit;
    line-height: 1.6;
}

.editable-content:focus {
    background: rgba(99, 102, 241, 0.08);
    border-radius: 6px;
    padding: 4px;
}

/* 1. Instagram Mockup */
.mockup-insta-card {
    max-width: 520px;
    margin: 0 auto;
    background: #000000;
    border: 1px solid #262626;
    border-radius: 12px;
    overflow: hidden;
    color: #ffffff;
    font-size: 13px;
}

.mockup-insta-header {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    gap: 10px;
}

.insta-avatar, .linkedin-avatar, .tweet-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f59e0b 0%, #ec4899 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 12px;
    color: white;
}

.insta-user-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.insta-user-info span {
    font-size: 11px;
    color: #a8a8a8;
}

.insta-post-graphic {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);
    padding: 40px 24px;
    text-align: center;
    border-top: 1px solid #262626;
    border-bottom: 1px solid #262626;
}

.graphic-badge {
    display: inline-block;
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid #f59e0b;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
    margin-bottom: 12px;
}

.insta-post-graphic h3 {
    font-size: 24px;
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 8px;
}

.insta-post-graphic p {
    font-size: 13px;
    color: #cbd5e1;
    margin-bottom: 14px;
}

.graphic-cta {
    font-size: 12px;
    font-weight: 700;
    color: #38bdf8;
}

.mockup-insta-actions {
    display: flex;
    justify-content: space-between;
    padding: 10px 14px;
    font-size: 16px;
}

.mockup-insta-caption {
    padding: 0 14px 14px 14px;
    font-size: 13px;
    color: #f1f5f9;
}

.caption-author {
    color: white;
    margin-right: 6px;
}

/* 2. LinkedIn Mockup */
.mockup-linkedin-card {
    background: #1b1f23;
    border: 1px solid #38434f;
    border-radius: 10px;
    padding: 16px;
    color: #e1e9ee;
    font-size: 14px;
}

.linkedin-author-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 14px;
}

.linkedin-avatar {
    background: #0a66c2;
}

.linkedin-author-row h4 {
    font-size: 14px;
    margin: 0 0 2px 0;
    color: white;
}

.linkedin-author-row p {
    font-size: 11px;
    color: #94a3b8;
    margin: 0;
}

.linkedin-body {
    border-top: 1px solid #2d3748;
    padding-top: 12px;
    line-height: 1.6;
}

.linkedin-footer-bar {
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #2d3748;
    margin-top: 16px;
    padding-top: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
}

/* 3. WhatsApp Mockup */
.mockup-whatsapp-card {
    max-width: 500px;
    margin: 0 auto;
    background: #0b141a;
    border-radius: 12px;
    padding: 16px;
}

.wa-chat-header {
    background: #1f2c34;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 13px;
    color: #8696a0;
    margin-bottom: 14px;
}

.wa-message-bubble {
    background: #005c4b;
    color: #e9edef;
    padding: 14px 16px;
    border-radius: 10px 0 10px 10px;
    font-size: 13.5px;
    line-height: 1.5;
    position: relative;
    margin-bottom: 12px;
}

.wa-time {
    display: block;
    text-align: right;
    font-size: 10px;
    color: #8696a0;
    margin-top: 6px;
}

.wa-quick-forward {
    text-align: center;
}

/* 4. Email Mockup */
.mockup-email-card {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 10px;
    padding: 16px;
}

.email-envelope-bar, .email-sender-bar {
    font-size: 13px;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid #334155;
}

.email-label {
    color: #94a3b8;
    margin-right: 8px;
    font-weight: 600;
}

.email-body-content {
    padding-top: 10px;
    font-size: 14px;
    color: #e2e8f0;
    line-height: 1.6;
}

/* 5. Website Copy */
.mockup-web-card {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 10px;
    overflow: hidden;
}

.browser-fake-bar {
    background: #1e293b;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.browser-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.browser-dot.red { background: #ef4444; }
.browser-dot.yellow { background: #f59e0b; }
.browser-dot.green { background: #10b981; }

.browser-url {
    margin-left: 10px;
    font-size: 11px;
    color: #94a3b8;
    background: #0b0f19;
    padding: 2px 12px;
    border-radius: 4px;
    flex: 1;
}

.web-hero-rendered {
    padding: 20px;
    font-size: 14px;
    color: #f1f5f9;
}

/* 6. Poster Notice */
.mockup-poster-card {
    background: #0f172a;
    border: 2px dashed #6366f1;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 13px;
    color: #38bdf8;
}

.poster-notice-badge {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-weight: 700;
    margin-bottom: 16px;
}

/* 7. Twitter / X */
.mockup-tweet-card {
    background: #000000;
    border: 1px solid #2f3336;
    border-radius: 12px;
    padding: 16px;
}

.tweet-author-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
}

.tweet-author-row span {
    color: #71767b;
}

.tweet-body {
    font-size: 14px;
    color: #e7e9ea;
    line-height: 1.5;
}

/* 8. Discord */
.mockup-discord-card {
    background: #313338;
    border-radius: 8px;
    padding: 16px;
    color: #dbdee1;
}

.discord-header {
    border-bottom: 1px solid #3f4147;
    padding-bottom: 8px;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    color: #949ba4;
}

.discord-msg-row {
    display: flex;
    gap: 12px;
}

.discord-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #5865f2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.discord-user-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.user-name {
    font-weight: 700;
    color: #ffffff;
    font-size: 14px;
}

.bot-badge {
    background: #5865f2;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
}

.msg-date {
    font-size: 11px;
    color: #949ba4;
}

/* Quality Analytics Row */
.quality-analytics-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}

.metric-box {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px;
    text-align: center;
}

.metric-title {
    display: block;
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 4px;
    font-weight: 600;
}

.metric-val {
    font-size: 14px;
}

.text-green { color: #34d399; }
.text-accent { color: #818cf8; }
.text-yellow { color: #fbbf24; }

/* -----------------------------------------
   CONSISTENCY SHIELD SECTION
   ----------------------------------------- */
.consistency-shield-section {
    margin-bottom: 40px;
}

.shield-card {
    background: #131b2e;
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.1);
}

.shield-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 20px;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.shield-title-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.shield-shield-icon {
    font-size: 38px;
}

.shield-title-group h2 {
    font-size: 22px;
    color: #ffffff;
    margin: 0 0 4px 0;
}

.shield-title-group p {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
    max-width: 680px;
}

.shield-score-box {
    text-align: center;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid #10b981;
    border-radius: 14px;
    padding: 10px 22px;
}

.shield-score-number {
    font-size: 26px;
    font-weight: 900;
    color: #34d399;
}

.shield-score-label {
    font-size: 11px;
    font-weight: 700;
    color: #a7f3d0;
}

.audit-matrix-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.audit-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #0b0f19;
    border: 1px solid #1e293b;
    border-radius: 12px;
    padding: 14px;
}

.audit-icon {
    font-size: 22px;
}

.audit-text {
    flex: 1;
}

.audit-text strong {
    display: block;
    font-size: 13px;
    color: #ffffff;
    margin-bottom: 2px;
}

.audit-detail {
    display: block;
    font-size: 11px;
    color: #94a3b8;
}

.badge-status-clean {
    font-size: 11px;
    font-weight: 700;
    color: #34d399;
    background: rgba(16, 185, 129, 0.12);
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
}

.shield-footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

/* -----------------------------------------
   EXPORT SUITE SECTION
   ----------------------------------------- */
.export-campaign-section {
    margin-bottom: 40px;
}

.export-card {
    background: #131b2e;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 30px;
}

.export-header h2 {
    font-size: 20px;
    color: #ffffff;
    margin: 0 0 6px 0;
}

.export-header p {
    font-size: 13px;
    color: #94a3b8;
    margin: 0 0 20px 0;
}

.export-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
}

.btn-export-tile {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 20px;
    text-align: left;
    color: #ffffff;
    cursor: pointer;
    transition: 0.25s;
    display: flex;
    flex-direction: column;
}

.btn-export-tile:hover {
    background: rgba(99, 102, 241, 0.15);
    border-color: #6366f1;
    transform: translateY(-3px);
}

.export-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.btn-export-tile strong {
    font-size: 14px;
    margin-bottom: 4px;
}

.btn-export-tile small {
    font-size: 11px;
    color: #94a3b8;
}

/* Social Banner Canvas Render Frame */
.social-banner-canvas {
    width: 1080px;
    height: 1080px;
    background: linear-gradient(135deg, #090d16 0%, #1e1b4b 50%, #4338ca 100%);
    box-sizing: border-box;
    padding: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Outfit', sans-serif;
}

.banner-overlay {
    width: 100%;
    height: 100%;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-sizing: border-box;
    background: rgba(15, 23, 42, 0.6);
}

.banner-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.banner-org {
    font-size: 22px;
    font-weight: 700;
    color: #cbd5e1;
    letter-spacing: 1px;
}

.banner-badge {
    background: #f59e0b;
    color: #0f172a;
    font-weight: 900;
    font-size: 16px;
    padding: 6px 18px;
    border-radius: 30px;
}

.banner-title {
    font-size: 52px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.15;
    margin: 30px 0;
}

.banner-pills {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.pill-item {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 10px 22px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 700;
}

.banner-footer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 24px;
}

.banner-cta {
    font-size: 22px;
    font-weight: 800;
    color: #38bdf8;
}

.banner-deadline {
    font-size: 18px;
    color: #fca5a5;
}

/* Brand Context Accordion */
.brand-context-box {
    background: rgba(15, 23, 42, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    margin-bottom: 18px;
    overflow: hidden;
}

.brand-context-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #cbd5e1;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.03);
    transition: 0.2s;
}

.brand-context-header:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
}

.brand-context-body {
    padding: 14px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* Version History Manager */
.version-history-box {
    margin-top: 24px;
    background: rgba(15, 23, 42, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 16px;
}

.version-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.version-header h4 {
    font-size: 13px;
    color: #e2e8f0;
    margin: 0;
}

.version-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.version-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #0b0f19;
    border: 1px solid #1e293b;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    cursor: pointer;
    transition: 0.2s;
}

.version-item:hover {
    border-color: #6366f1;
    background: rgba(99, 102, 241, 0.1);
}

.version-item.active-version {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.version-item span {
    color: #ffffff;
    font-weight: 600;
}

.version-item small {
    color: #94a3b8;
}

.btn-share {
    background: #0ea5e9 !important;
    color: white !important;
    border-color: #0ea5e9 !important;
}

.btn-share:hover {
    background: #0284c7 !important;
}

/* -----------------------------------------
   NOTIFICATION BELL
   ----------------------------------------- */
.nav-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.notification-bell {
    position: relative;
    cursor: pointer;
    font-size: 20px;
    user-select: none;
    transition: transform 0.2s;
}

.notification-bell:hover {
    transform: scale(1.1);
}

.notification-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: #ef4444;
    color: white;
    font-size: 10px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 12px;
    border: 2px solid #0f172a;
}

.notification-dropdown {
    position: absolute;
    top: 150%;
    right: -10px;
    width: 280px;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    display: none;
    flex-direction: column;
    z-index: 1000;
    overflow: hidden;
}

.notification-bell.show-dropdown .notification-dropdown {
    display: flex;
    animation: fadeInStep 0.2s ease-out;
}

.notif-header {
    background: #0f172a;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 700;
    color: #cbd5e1;
    border-bottom: 1px solid #334155;
}

.notif-item {
    padding: 12px 16px;
    border-bottom: 1px solid #334155;
    transition: background 0.2s;
    font-size: 13px;
}

.notif-item:last-child {
    border-bottom: none;
}

.notif-item:hover {
    background: #334155;
}

.notif-item strong {
    display: block;
    color: #f1f5f9;
    margin-bottom: 4px;
}

.notif-item span {
    display: block;
    color: #94a3b8;
    font-size: 11px;
}

/* -----------------------------------------
   RESPONSIVE ADAPTATIONS
   ----------------------------------------- */
@media (max-width: 1024px) {
    .studio-grid {
        grid-template-columns: 1fr;
    }
}

/* -----------------------------------------
   CAMPUS & VENUES GALLERY SECTION
   ----------------------------------------- */
.btn-gallery-hero {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #f8fafc;
    padding: 14px 28px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(8px);
}

.btn-gallery-hero:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    color: #ffffff;
}

.gallery-section {
    padding: 90px 6%;
    background: #f8fafc;
    position: relative;
}

body.dark-mode .gallery-section {
    background: #0b1120;
}

.gallery-container {
    max-width: 1280px;
    margin: 0 auto;
}

.gallery-header {
    text-align: center;
    margin-bottom: 50px;
}

.gallery-header h2 {
    font-size: 38px;
    font-weight: 800;
    color: #0f172a;
    margin: 14px 0;
    letter-spacing: -0.5px;
}

body.dark-mode .gallery-header h2 {
    color: #f8fafc;
}

.gallery-header p {
    font-size: 16px;
    color: #64748b;
    max-width: 720px;
    margin: 0 auto 30px auto;
    line-height: 1.6;
}

body.dark-mode .gallery-header p {
    color: #94a3b8;
}

/* Filter Bar */
.gallery-filter-bar {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 25px;
}

.gallery-filter-btn {
    padding: 10px 22px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.gallery-filter-btn:hover {
    border-color: #38bdf8;
    color: #0284c7;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(56, 189, 248, 0.15);
}

.gallery-filter-btn.active {
    background: linear-gradient(135deg, #0284c7, #2563eb);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35);
}

body.dark-mode .gallery-filter-btn {
    background: #1e293b;
    border-color: #334155;
    color: #cbd5e1;
}

body.dark-mode .gallery-filter-btn.active {
    background: linear-gradient(135deg, #38bdf8, #2563eb);
    color: #ffffff;
}

/* Cards Grid */
.gallery-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 28px;
}

.gallery-card {
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    border: 1px solid #e2e8f0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

body.dark-mode .gallery-card {
    background: #1e293b;
    border-color: #334155;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.gallery-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.16);
    border-color: #38bdf8;
}

body.dark-mode .gallery-card:hover {
    box-shadow: 0 20px 40px rgba(56, 189, 248, 0.2);
}

.gallery-img-wrap {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.gallery-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.gallery-card:hover .gallery-img-wrap img {
    transform: scale(1.08);
}

.gallery-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    color: #38bdf8;
    border: 1px solid rgba(56, 189, 248, 0.35);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    z-index: 2;
}

.gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(15, 23, 42, 0.8) 0%, rgba(15, 23, 42, 0.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-card:hover .gallery-overlay {
    opacity: 1;
}

.view-icon {
    background: rgba(255, 255, 255, 0.95);
    color: #0f172a;
    padding: 8px 18px;
    border-radius: 24px;
    font-size: 13px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    transform: translateY(10px);
    transition: transform 0.3s ease;
}

.gallery-card:hover .view-icon {
    transform: translateY(0);
}

.gallery-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.gallery-info h3 {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 8px;
}

body.dark-mode .gallery-info h3 {
    color: #f8fafc;
}

.gallery-info p {
    font-size: 13px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 14px;
    flex-grow: 1;
}

body.dark-mode .gallery-info p {
    color: #94a3b8;
}

.gallery-venue-tag {
    font-size: 12px;
    font-weight: 600;
    color: #0284c7;
    background: #e0f2fe;
    padding: 4px 10px;
    border-radius: 6px;
    align-self: flex-start;
}

body.dark-mode .gallery-venue-tag {
    background: rgba(56, 189, 248, 0.15);
    color: #38bdf8;
}

/* Lightbox Modal */
.gallery-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(11, 15, 25, 0.92);
    backdrop-filter: blur(12px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-lightbox.active {
    display: flex;
    opacity: 1;
}

.lightbox-content {
    position: relative;
    max-width: 900px;
    width: 100%;
    background: #1e293b;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
    animation: zoomIn 0.3s ease;
}

@keyframes zoomIn {
    from {
        transform: scale(0.92);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.lightbox-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
    z-index: 10;
}

.lightbox-close:hover {
    background: #ef4444;
    border-color: #ef4444;
    transform: scale(1.1);
}

.lightbox-content img {
    width: 100%;
    max-height: 520px;
    object-fit: cover;
    display: block;
}

.lightbox-caption {
    padding: 22px 28px;
    background: #0f172a;
    color: #ffffff;
}

.lightbox-caption h3 {
    font-size: 20px;
    font-weight: 700;
    color: #38bdf8;
    margin-bottom: 6px;
}

.lightbox-caption p {
    font-size: 14px;
    color: #cbd5e1;
    line-height: 1.5;
}

/* Main Footer */
.main-footer {
    background: #0f172a;
    color: #ffffff;
    padding: 70px 6% 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-container {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 50px;
    margin-bottom: 50px;
}

.footer-brand p {
    color: #94a3b8;
    font-size: 14px;
    line-height: 1.6;
    margin-top: 16px;
    max-width: 420px;
}

.footer-links-group h4 {
    font-size: 16px;
    font-weight: 700;
    color: #f8fafc;
    margin-bottom: 20px;
}

.footer-links-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links-group li {
    margin-bottom: 12px;
}

.footer-links-group a {
    color: #94a3b8;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.footer-links-group a:hover {
    color: #38bdf8;
}

.footer-bottom {
    max-width: 1280px;
    margin: 0 auto;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    font-size: 13px;
    color: #64748b;
}

@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}