/* ===== SALARY SLIP GENERATOR SCOPED STYLES ===== */
    .ssg-page {
        font-family: 'Inter', sans-serif;
        background: #f0f4f8;
        min-height: 100vh;
    }

    /* Hero */
    .ssg-hero {
        background-color: #046ea6;
        padding: 55px 0 45px;
        position: relative;
        overflow: hidden;
    }
    .ssg-hero::before {
        content: '';
        position: absolute;
        top: -50%;
        right: -20%;
        width: 600px;
        height: 600px;
        background: rgba(255,245,214,0.07);
        border-radius: 50%;
    }
    .ssg-hero h1 {
        font-family: 'Poppins', sans-serif;
        font-size: 2.5rem;
        font-weight: 800;
        color: #ffffff;
        margin-bottom: 14px;
        position: relative;
        z-index: 1;
    }
    .ssg-hero h1 span { color: #fff5d6; }
    .ssg-hero p {
        color: rgba(255,255,255,0.9);
        font-size: 1.12rem;
        line-height: 1.7;
        max-width: 720px;
        position: relative;
        z-index: 1;
    }
    .ssg-hero .ssg-rating-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(255,255,255,0.14);
        padding: 10px 20px;
        border-radius: 50px;
        color: #fff;
        font-size: 0.95rem;
        margin-top: 14px;
        position: relative;
        z-index: 1;
    }
    .ssg-hero .ssg-rating-badge .bi-star-fill { color: #ffc107; }
    .ssg-currency-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 10px;
        position: relative;
        z-index: 1;
    }
    .ssg-currency-badge {
        background: #fff5d6;
        color: #92400e;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
    }

    /* Breadcrumb */
    .ssg-breadcrumb-bar {
        background: #ffffff;
        border-bottom: 1px solid #e8e8e8;
        padding: 12px 0;
    }
    .ssg-breadcrumb-bar .breadcrumb { margin: 0; font-size: 0.9rem; }
    .ssg-breadcrumb-bar .breadcrumb-item a { color: #046ea6; text-decoration: none; }
    .ssg-breadcrumb-bar .breadcrumb-item.active { color: #666; }

    /* Trust */
    .ssg-trust-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        justify-content: center;
        margin: 22px 0;
    }
    .ssg-trust-badge {
        display: flex;
        align-items: center;
        gap: 7px;
        background: #dcf3fb;
        padding: 8px 16px;
        border-radius: 50px;
        font-size: 0.87rem;
        font-weight: 600;
        color: #046ea6;
    }
    .ssg-trust-badge .bi { color: #16a34a; }

    /* Ad Space */
    .ssg-ad-space {
        background: #ffffff;
        border: 2px dashed #ddd;
        border-radius: 12px;
        padding: 20px;
        text-align: center;
        min-height: 600px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: sticky;
        top: 20px;
    }
    .ssg-ad-space p { color: #999; font-size: 0.85rem; margin: 0; }
    .ssg-ad-space .bi { font-size: 2rem; color: #ddd; margin-bottom: 10px; }

    /* Tool Card */
    .ssg-tool-card {
        background: #ffffff;
        border-radius: 18px;
        box-shadow: 0 8px 35px rgba(4,110,166,0.1);
        overflow: hidden;
        margin-bottom: 28px;
    }
    .ssg-card-head {
        background-color: #046ea6;
        padding: 24px 28px;
        color: #fff;
    }
    .ssg-card-head h2 {
        font-family: 'Poppins', sans-serif;
        font-size: 1.45rem;
        font-weight: 700;
        margin: 0;
    }
    .ssg-card-head p { margin: 4px 0 0; opacity: 0.9; font-size: 0.94rem; }
    .ssg-card-inside { padding: 28px; }

    /* Section Title */
    .ssg-sec-title {
        font-family: 'Poppins', sans-serif;
        font-size: 1.12rem;
        font-weight: 700;
        color: #046ea6;
        padding-bottom: 10px;
        border-bottom: 3px solid #046ea6;
        margin-bottom: 22px;
        display: flex;
        align-items: center;
        gap: 9px;
    }
    .ssg-sec-title .bi { font-size: 1.2rem; }

    /* Form Controls */
    .ssg-page .ssg-label {
        font-weight: 600;
        color: #333;
        font-size: 0.89rem;
        margin-bottom: 5px;
    }
    .ssg-page .ssg-input {
        border: 2px solid #e0e0e0;
        border-radius: 10px;
        padding: 10px 14px;
        font-size: 0.94rem;
        transition: all 0.3s ease;
        background: #fafafa;
    }
    .ssg-page .ssg-input:focus {
        border-color: #046ea6;
        box-shadow: 0 0 0 3px rgba(4,110,166,0.14);
        background: #fff;
    }
    .ssg-page .ssg-select {
        border: 2px solid #e0e0e0;
        border-radius: 10px;
        padding: 10px 14px;
        font-size: 0.94rem;
        transition: all 0.3s ease;
        background-color: #fafafa;
    }
    .ssg-page .ssg-select:focus {
        border-color: #046ea6;
        box-shadow: 0 0 0 3px rgba(4,110,166,0.14);
    }

    /* Logo Upload */
    .ssg-logo-drop {
        border: 2px dashed #046ea6;
        border-radius: 12px;
        padding: 24px;
        text-align: center;
        background: #dcf3fb;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    .ssg-logo-drop:hover { background: #c8ecf7; }
    .ssg-logo-drop .bi { font-size: 2.4rem; color: #046ea6; }
    .ssg-logo-drop p { color: #046ea6; font-weight: 600; margin: 8px 0 0; }
    .ssg-logo-drop small { color: #666; }
    .ssg-logo-img {
        max-width: 140px;
        max-height: 75px;
        object-fit: contain;
        margin-top: 10px;
        border-radius: 6px;
    }

    /* Earnings/Deductions Boxes */
    .ssg-earn-box {
        background: #f0fdf4;
        border: 1px solid #bbf7d0;
        border-radius: 14px;
        padding: 24px;
    }
    .ssg-ded-box {
        background: #fef2f2;
        border: 1px solid #fca5a5;
        border-radius: 14px;
        padding: 24px;
    }
    .ssg-earn-title {
        color: #16a34a;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 1.08rem;
        margin-bottom: 18px;
    }
    .ssg-ded-title {
        color: #dc2626;
        font-family: 'Poppins', sans-serif;
        font-weight: 700;
        font-size: 1.08rem;
        margin-bottom: 18px;
    }

    /* Summary */
    .ssg-summary {
        background: #fff5d6;
        border: 2px solid #fbbf24;
        border-radius: 14px;
        padding: 24px;
        margin-top: 18px;
    }
    .ssg-sum-row {
        display: flex;
        justify-content: space-between;
        padding: 7px 0;
        font-size: 1rem;
    }
    .ssg-sum-row.ssg-net {
        border-top: 2px solid #046ea6;
        margin-top: 10px;
        padding-top: 14px;
        font-weight: 700;
        font-size: 1.18rem;
        color: #046ea6;
    }

    /* Buttons */
    .ssg-btn-gen {
        background-color: #046ea6;
        color: #fff;
        border: none;
        padding: 13px 36px;
        font-size: 1.08rem;
        font-weight: 700;
        border-radius: 12px;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 9px;
    }
    .ssg-btn-gen:hover { background-color: #035a87; color: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(4,110,166,0.3); }

    .ssg-btn-dl {
        background-color: #16a34a;
        color: #fff;
        border: none;
        padding: 13px 36px;
        font-size: 1.08rem;
        font-weight: 700;
        border-radius: 12px;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 9px;
    }
    .ssg-btn-dl:hover { background-color: #15803d; color: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(22,163,74,0.3); }

    .ssg-btn-pr {
        background-color: #7c3aed;
        color: #fff;
        border: none;
        padding: 13px 36px;
        font-size: 1.08rem;
        font-weight: 700;
        border-radius: 12px;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 9px;
    }
    .ssg-btn-pr:hover { background-color: #6d28d9; color: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(124,58,237,0.3); }

    .ssg-btn-rst {
        background-color: #dc2626;
        color: #fff;
        border: none;
        padding: 13px 36px;
        font-size: 1.08rem;
        font-weight: 700;
        border-radius: 12px;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
        gap: 9px;
    }
    .ssg-btn-rst:hover { background-color: #b91c1c; color: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(220,38,38,0.3); }

    /* ===== SALARY SLIP PREVIEW - PDF SAFE INLINE STYLES USED ===== */

    /* Toast */
    .ssg-toast-box {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 99999;
    }
    .ssg-toast {
        background: #fff;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.15);
        padding: 18px 22px;
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 340px;
        max-width: 440px;
        animation: ssgIn 0.4s ease;
        margin-bottom: 10px;
    }
    .ssg-toast.t-ok { border-left: 5px solid #16a34a; }
    .ssg-toast.t-err { border-left: 5px solid #dc2626; }
    .ssg-toast.t-warn { border-left: 5px solid #f59e0b; }
    .ssg-toast .t-icon { font-size: 1.5rem; flex-shrink: 0; }
    .ssg-toast.t-ok .t-icon { color: #16a34a; }
    .ssg-toast.t-err .t-icon { color: #dc2626; }
    .ssg-toast.t-warn .t-icon { color: #f59e0b; }
    .ssg-toast .t-body h6 { font-family: 'Poppins', sans-serif; font-weight: 700; margin: 0 0 2px; font-size: 0.94rem; }
    .ssg-toast .t-body p { margin: 0; font-size: 0.84rem; color: #666; }
    .ssg-toast .t-close {
        background: none; border: none; font-size: 1.2rem; color: #999;
        cursor: pointer; margin-left: auto; flex-shrink: 0;
    }
    .ssg-toast .t-close:hover { color: #333; }
    @keyframes ssgIn { from { opacity:0; transform:translateX(100%); } to { opacity:1; transform:translateX(0); } }
    @keyframes ssgOut { from { opacity:1; transform:translateX(0); } to { opacity:0; transform:translateX(100%); } }

    /* Stats Banner */
    .ssg-stats { background-color: #046ea6; padding: 38px 0; }
    .ssg-stat { text-align: center; color: #fff; }
    .ssg-stat .num { font-family: 'Poppins', sans-serif; font-size: 2.1rem; font-weight: 800; color: #fff5d6; }
    .ssg-stat .lbl { font-size: 0.94rem; opacity: 0.9; margin-top: 4px; }

    /* Features */
    .ssg-features { padding: 55px 0; }
    .ssg-feat-card {
        background: #fff;
        border-radius: 14px;
        padding: 28px 22px;
        text-align: center;
        box-shadow: 0 4px 18px rgba(0,0,0,0.05);
        transition: all 0.3s ease;
        height: 100%;
        border: 1px solid #e8e8e8;
    }
    .ssg-feat-card:hover { transform: translateY(-5px); box-shadow: 0 12px 35px rgba(4,110,166,0.14); border-color: #046ea6; }
    .ssg-feat-icon {
        width: 66px; height: 66px;
        background: #dcf3fb;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        margin: 0 auto 14px;
    }
    .ssg-feat-icon .bi { font-size: 1.7rem; color: #046ea6; }
    .ssg-feat-card h5 { font-family: 'Poppins', sans-serif; font-weight: 700; color: #333; margin-bottom: 9px; }
    .ssg-feat-card p { color: #666; font-size: 0.91rem; line-height: 1.6; }

    /* How To */
    .ssg-howto { background: #fff; padding: 55px 0; }
    .ssg-step { text-align: center; padding: 22px; }
    .ssg-step-num {
        width: 52px; height: 52px;
        background-color: #046ea6;
        color: #fff;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        font-family: 'Poppins', sans-serif;
        font-size: 1.35rem; font-weight: 800;
        margin: 0 auto 14px;
    }
    .ssg-step h5 { font-family: 'Poppins', sans-serif; font-weight: 700; color: #333; }
    .ssg-step p { color: #666; font-size: 0.91rem; }

    /* Content */
    .ssg-content { padding: 55px 0; }
    .ssg-content h2 { font-family: 'Poppins', sans-serif; font-weight: 800; color: #046ea6; font-size: 1.75rem; margin-bottom: 18px; }
    .ssg-content h3 { font-family: 'Poppins', sans-serif; font-weight: 700; color: #333; font-size: 1.28rem; margin: 24px 0 11px; }
    .ssg-content p { color: #555; font-size: 1rem; line-height: 1.8; }
    .ssg-content ul { color: #555; line-height: 2; }
    .ssg-content ul li { margin-bottom: 4px; }

    /* FAQ */
    .ssg-faq { background: #fff; padding: 55px 0; }
    .ssg-faq .accordion-button { font-family: 'Poppins', sans-serif; font-weight: 600; color: #333; font-size: 1rem; }
    .ssg-faq .accordion-button:not(.collapsed) { background: #dcf3fb; color: #046ea6; }
    .ssg-faq .accordion-button:focus { box-shadow: 0 0 0 3px rgba(4,110,166,0.14); }
    .ssg-faq .accordion-body { color: #555; line-height: 1.7; }

    /* Section Headings */
    .ssg-sec-heading {
        font-family: 'Poppins', sans-serif;
        font-weight: 800;
        color: #046ea6;
        font-size: 1.95rem;
        text-align: center;
        margin-bottom: 14px;
    }
    .ssg-sec-sub {
        text-align: center;
        color: #666;
        font-size: 1.04rem;
        margin-bottom: 38px;
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
    }

    /* Related Tools */
    .ssg-related { padding: 55px 0; background: #fff; }
    .ssg-rel-card {
        background: #dcf3fb;
        border: 2px solid #046ea6;
        border-radius: 14px;
        padding: 18px;
        text-align: center;
        transition: all 0.3s ease;
        height: 100%;
    }
    .ssg-rel-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(4,110,166,0.18); }
    .ssg-rel-card .bi { font-size: 1.9rem; color: #046ea6; margin-bottom: 8px; }
    .ssg-rel-card h6 { font-family: 'Poppins', sans-serif; font-weight: 700; color: #046ea6; margin-bottom: 4px; }
    .ssg-rel-card a { color: #046ea6; text-decoration: none; font-weight: 600; font-size: 0.84rem; }
    .ssg-rel-card a:hover { text-decoration: underline; }

    /* Responsive */
    @media (max-width: 991px) {
        .ssg-ad-space { min-height: 100px; position: relative; top: 0; }
    }
    @media (max-width: 768px) {
        .ssg-hero h1 { font-size: 1.75rem; }
        .ssg-hero p { font-size: 0.98rem; }
        .ssg-card-inside { padding: 18px; }
        .ssg-sec-heading { font-size: 1.45rem; }
        .ssg-toast { min-width: 270px; max-width: 310px; }
    }