:root {

    --primary: #4f46e5;
    --primary-dark: #4338ca;
    --secondary: #64748b;

    --dark: #172033;
    --text: #334155;
    --muted: #64748b;

    --background: #f6f8fc;
    --card: #ffffff;

    --border: #e6eaf0;

    --success: #16a34a;
    --warning: #f59e0b;
    --danger: #dc2626;

    --radius: 16px;

    --shadow:
        0 10px 30px rgba(15, 23, 42, 0.06);

}


/* ==========================================
   GLOBAL
========================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    margin: 0;

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: var(--background);

    color: var(--text);

    line-height: 1.6;

}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}


/* ==========================================
   BUTTONS
========================================== */

.btn {

    border-radius: 10px;

    font-weight: 600;

    padding:
        10px 18px;

    transition:
        all .2s ease;

}

.btn-primary {

    background:
        var(--primary);

    border-color:
        var(--primary);

}

.btn-primary:hover {

    background:
        var(--primary-dark);

    border-color:
        var(--primary-dark);

    transform:
        translateY(-1px);

}


/* ==========================================
   CARDS
========================================== */

.custom-card {

    background:
        var(--card);

    border:
        1px solid var(--border);

    border-radius:
        var(--radius);

    box-shadow:
        var(--shadow);

}


/* ==========================================
   FORMS
========================================== */

.form-control,
.form-select {

    min-height:
        46px;

    border:
        1px solid var(--border);

    border-radius:
        10px;

    padding:
        10px 14px;

}

.form-control:focus,
.form-select:focus {

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(79, 70, 229, .10);

}


/* ==========================================
   SITE HEADER
========================================== */

.site-header {

    background:
        rgba(255, 255, 255, .94);

    border-bottom:
        1px solid var(--border);

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

    backdrop-filter:
        blur(12px);

}

.site-logo {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    font-size:
        20px;

    font-weight:
        700;

    color:
        var(--dark);

}

.site-logo img {

    width:
        42px;

    height:
        42px;

    object-fit:
        contain;

    border-radius:
        8px;

}

.logo-placeholder {

    width:
        42px;

    height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        10px;

    background:
        #eef2ff;

    color:
        var(--primary);

    font-size:
        22px;

}


/* ==========================================
   FOOTER
========================================== */

.site-footer {

    margin-top:
        60px;

    padding:
        25px 0;

    background:
        #ffffff;

    border-top:
        1px solid var(--border);

    color:
        var(--muted);

    font-size:
        14px;

}


/* ==========================================
   BADGES
========================================== */

.status-badge {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        5px;

    padding:
        5px 10px;

    border-radius:
        30px;

    font-size:
        12px;

    font-weight:
        700;

}

.status-pending {

    background:
        #fff7ed;

    color:
        #c2410c;

}

.status-approved {

    background:
        #f0fdf4;

    color:
        #15803d;

}

.status-rejected {

    background:
        #fef2f2;

    color:
        #b91c1c;

}


/* ==========================================
   PAGE HERO
========================================== */

.page-hero {

    padding:
        90px 0;

    background:
        linear-gradient(
            135deg,
            #eef2ff 0%,
            #f8fafc 55%,
            #ffffff 100%
        );

}

.page-hero h1 {

    color:
        var(--dark);

    font-size:
        clamp(36px, 5vw, 58px);

    font-weight:
        800;

    line-height:
        1.15;

}

.page-hero p {

    color:
        var(--muted);

    font-size:
        18px;

    max-width:
        650px;

}


/* ==========================================
   SECTION
========================================== */

.section {

    padding:
        70px 0;

}

.section-title {

    color:
        var(--dark);

    font-weight:
        800;

}


/* ==========================================
   ICON BOX
========================================== */

.icon-box {

    width:
        52px;

    height:
        52px;

    border-radius:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        #eef2ff;

    color:
        var(--primary);

    font-size:
        25px;

}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 767px) {

    .page-hero {

        padding:
            60px 0;

    }

    .section {

        padding:
            50px 0;

    }

}
body {
    background:
        radial-gradient(
            circle at 10% 10%,
            rgba(99, 102, 241, 0.15),
            transparent 32%
        ),
        radial-gradient(
            circle at 90% 15%,
            rgba(14, 165, 233, 0.15),
            transparent 32%
        ),
        radial-gradient(
            circle at 50% 100%,
            rgba(168, 85, 247, 0.12),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #eef5ff 50%,
            #faf5ff 100%
        );

    min-height: 100vh;
}

.card {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.85) !important;
    box-shadow:
        0 15px 40px rgba(30, 41, 59, 0.08) !important;
}

.page-title h3 {
    font-weight: 700;
}

.btn-primary {
    background: linear-gradient(
        135deg,
        #4f46e5,
        #2563eb
    );
    border: 0;
}

.btn-primary:hover {
    background: linear-gradient(
        135deg,
        #4338ca,
        #1d4ed8
    );
}