@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Hind+Vadodara:wght@300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css?family=Josefin+Sans:100,300,400,600,700|Work+Sans:100,200,300,400,500,600");
@import url('https://fonts.googleapis.com/css?family=Merriweather+Sans:400,700');
@import url("https://fonts.googleapis.com/css?family=Hind+Siliguri:400,300,500,600,700");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap");

:root {
    --agora-red: #CE3C17;
    --agora-yellow: #F7AF0F;
    --agora-purple: #560F3B;

    --agora-red-3: #F9D7CF;
    --agora-red-2: #F47C60;
    --agora-red-1: #A43114;
    --agora-red-0: #8E2B12;

    --orange:#ec5a2e;
    --orange-dark:#d94a20;
    --gold:#f4a93a;
    --cream-bg:#f6f7fb;

    --agora-yellow-3: #F4F2D4;
    --agora-yellow-2: #F7E99A;
    --agora-yellow-1 :#D1952A;
    --agora-yellow-0: #976B1E;

    --agora-purple-3: #F1DBF9;
    --agora-purple-2: #CCB2D6;
    --agora-purple-1: #765285;
    --agora-purple-0: #4F2D5D;

    --agora-blue-3:  #D7F1F9;
    --agora-blue-2:  #4866EB;
    --agora-blue-1a: #006CBA;
    --agora-blue-1:  #2B3F97;
    --agora-blue-0:  #152050;
    --agora-blue-950: #080b2c;
    --agora-blue-900: #0d1442;

    --agora-teal-3: #9FE9DD;
    --agora-teal-2: #00B294;
    --agora-teal-1: #008272;
    --agora-teal-0: #004B50;


    --agora-green-3:#E9F1BE;
    --agora-green-2:#BAD80A;
    --agora-green-1:#107C10;
    --agora-green-0:#004B1C;


    --agora-gray-C: #212121;
    --agora-gray-B: #333333;
    --agora-gray-A: #3C3C3C;
    --agora-gray-9: #666666;
    --agora-gray-8: #767676;
    --agora-gray-7: #A6A6A6;
    --agora-gray-6: #C8C8C8;
    --agora-gray-5: #DODODO;
    --agora-gray-4: #DADADA;
    --agora-gray-3: #EAEAEA;
    --agora-gray-2: #F4F4F4;
    --agora-gray-1: #F8F8F8;

    --progress-0: var(--agora-red-1);
    --progress-1: var(--agora-yellow);
    --progress-2: var(--agora-green-2);
    --progress-3: var(--agora-green-1);

    --font: 'Monserrat', sans-serif;

    --paper:var(--agora-gray-2);
    --text-main-foreground: black;
    --text-main-background: white;
    --text-highlighted-foreground: var(--agora-blue-2);
    --text-highlighted-background: white;
    --text-selected-foreground:white;
    --text-selected-background:var(--agora-green-0);
    --text-muted-foreground: var(--agora-gray-8);

    --mobile-font-size:30px;


    --soft-gradient-0: 135deg, #ffffff 0%, #f1f5f9 100%;
    --soft-gradient-1: 135deg, #ffffff 0%, #e2e8f0 100%;
    --blue-gradient-0: var(--agora-blue-0) 0%, var(--agora-blue-3) 100%;
    --blue-gradient-1: var(--agora-blue-1) 0%, var(--agora-blue-3) 100%;
    --blue-gradient-2: var(--agora-blue-0) 0%, var(--agora-blue-1) 100%;
    --purple-gradient-0: var(--agora-purple-0) 0% var(--agora-purple-3) 100%;
    --teal-gradient-0: var(--agora-teal-0) 0%, var(--agora-teal-2) 100%;
    --yellow-gradient-0: var(--agora-yellow) 0%, var(--agora-yellow-3) 100%;
    --brown-gradient-0: var(--agora-yellow-0) 0%, var(--agora-yellow-1) 100%;
    --green-gradient-0: var(--agora-green-0) 0%, var(--agora-green-2) 100%;
    --green-gradient-1: var(--agora-green-2) 0%, var(--agora-teal-2) 100%;
    --green-gradient-2: var(--agora-green-2) 0%, var(--agora-yellow-3) 100%;
    --red-gradient-1: var(--agora-red-3) 0%, var(--agora-red-2) 100%;
    --agora-gradient: var(--agora-red-1) 0%, var(--agora-yellow-2) 100%;
    --deep-gradient: #080b2c 0%, #0A2267 100%;
}

html {
    font-family: var(--font);
}

.center {
    text-align: center;
}

.right {
    text-align: right;
}

.error, .ko {
    color: var(--agora-red);
}

.info {
    color: var(--agora-blue-2);
}
.warning {
    color: var(--agora-yellow);
}
.ok {
    color: var(--agora-green-1);
}

/* === Badge / pill labels === */
.badge {
    display: inline-block;
    padding: 0.2em 0.75em;
    border-radius: 1em;
    font-size: 0.82em;
    font-weight: 600;
    white-space: nowrap;
}
.modern-badge {
    display: inline-block;
    font-size: 0.72em;
    padding: 0.25em 0.65em;
    border-radius: 4px; /* Slightly squarer modern pill look */
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.badge-red   { background: var(--agora-red-1);   color: white; }
.badge-blue   { background: var(--agora-blue-2);   color: white; }
.badge-purple { background: var(--agora-purple-1); color: white; }
.badge-orange { background: var(--agora-yellow-1); color: white; }
.badge-green  { background: var(--agora-green-1);  color: white; }

/* Wraps several .badge elements rendered together (e.g. one per spoken language). */
.badge-group {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.3em;
}