@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
    --font-main:'Plus Jakarta Sans',sans-serif;

    --primary:#2563eb;
    --primary-hover:#1d4ed8;

    --success:#16a34a;
    --success-light:#45c171;
    --success-bg:#f0fdf4;

    --danger:#dc2626;
    --danger-bg:#fef2f2;
    
    --warning:#f59e0b;
    --warning-bg:#fffbeb;

    --bg:#f8fafc;
    --surface:#ffffff;

    --text:#0f172a;
    --text-light:#64748b;

    --border:#e2e8f0;

    --shadow-sm:
        0 1px 2px rgba(0,0,0,.05);

    --shadow-md:
        0 4px 10px rgba(0,0,0,.08);

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

    --radius-sm:10px;
    --radius-md:18px;
    --radius-lg:28px;

    --container:1280px;

    --transition:.25s ease;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    font-family:var(--font-main);
    background:var(--bg);
    color:var(--text);
}

a{
    text-decoration:none;
    color:inherit;
}

button,
input,
textarea,
select{
    font:inherit;
    border:none;
    outline:none;
}

h1{
    font-size:40px;
    font-weight:900;
    letter-spacing:-1px;
}

h2{
    font-size:32px;
    font-weight:800;
}

/* h3{
    font-size:22px;
    font-weight:500;
} */

p{
    line-height:1.7;
    color:var(--text-light);
}

.container{
    width:100%;
    max-width:var(--container);
    margin:auto;
    padding-inline:20px;
}

.flex{
    display:flex;
}

.items-center{
    align-items:center;
}

.justify-between{
    justify-content:space-between;
}

.text-center{
    text-align:center;
}

.w-full{
    width:100%;
}

.mt-1{
    margin-top:10px;
}

.mt-2{
    margin-top:20px;
}

.mt-3{
    margin-top:30px;
}

.mb-1{
    margin-bottom:10px;
}

.mb-2{
    margin-bottom:20px;
}

.mb-3{
    margin-bottom:30px;
}

.gap-1{
    gap:10px;
}

.gap-2{
    gap:20px;
}

.card{
    background:var(--surface);
    border-radius:var(--radius-md);
    padding:28px;
    box-shadow:var(--shadow-md);
}

.icon{
    width:18px;
    height:18px;
    flex-shrink:0;
}

a:focus-visible,
button:focus-visible{
    outline:2px solid var(--primary);
    outline-offset:2px;
    border-radius:4px;
}

.empty-state{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    min-height:500px;

    padding:48px 32px;

    text-align:center;

    background:#fff;

    border:1px solid #eef2f7;

    border-radius:28px;

    box-shadow:var(--shadow-sm);
}

.empty-state-content{

    max-width:460px;
}

.empty-state-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:20px;

    font-size:64px;

    line-height:1;
}

.empty-state-icon svg{

    width:64px;

    height:64px;

    color:#cbd5e1;
}

.empty-state-title{

    margin-bottom:12px;

    color:var(--text-primary);

    font-size:22px;

    font-weight:700;

    line-height:1.3;
}

.empty-state-text{

    margin:0 auto 28px;

    color:var(--text-secondary);

    font-size:15px;

    line-height:1.7;
}

.empty-state--compact{

    min-height:auto;

    padding:16px;

    border:none;

    border-radius:0;

    background:transparent;

    box-shadow:none;
}

.empty-state--compact .empty-state-content{

    max-width:280px;
}

.empty-state--compact .empty-state-icon{

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:8px;

    font-size:clamp(28px,3vw,30px);

    line-height:1;
}

.empty-state--compact .empty-state-icon svg{

    width:clamp(28px,3vw,30px);

    height:clamp(28px,3vw,30px);
}

.empty-state--compact .empty-state-title{

    margin-bottom:4px;

    color:var(--text-primary);

    font-size:clamp(15px,1.8vw,16px);

    font-weight:700;

    line-height:1.3;
}

.empty-state--compact .empty-state-text{

    margin:0;

    color:var(--text-secondary);

    font-size:clamp(12px,1.5vw,13px);

    line-height:1.5;
}

@media (prefers-reduced-motion: reduce){
    *{
        transition:none !important;
        animation:none !important;
    }
}