html, body { font-family: var(--ai-fontFamily); font-size: var(--ai-fontSize); }
body { margin: 0; line-height: 1.5; color: var(--ai-textColor); background-color: var(--ai-bodyBG); }

.page { position: relative; display: flex; flex-direction: column; height: 100vh; max-width: 1200px; margin: 0 auto; }

main { flex: 1; }
article { padding: 1rem; }

.topbar { /*background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);*/ background: var(--ai-topbar-bg); display: flex; width: calc(100% - 2rem); height: 50px; position: sticky; top: 0; margin: 1rem; border-radius: 16px; padding-inline: 1rem; z-index: 1; }



.logo { font-size: 1.5rem; display: flex; gap: .5rem; align-items: center; color: var(--ai-gray1); margin-right: 2rem; }
    .logo i { color: var(--ai-primary); }
.ai-header-actions { display: flex; gap: 1rem; flex-direction: row-reverse }

.ai-logo { height: 40px; }
.ai-robot__eye { fill: #fff }
.ai-robot__face { fill: #fff; opacity: .4; }
.ai-robot__outerface { fill: var(--ai-secondary); }
.ai-robot__ears { fill: var(--ai-secondary); opacity: .8; }



.nav-item { font-size: 0.9rem; }

    .nav-item .nav-link { color: var(--ai-gray1); background: none; border: none; border-bottom: 5px solid transparent; border-radius: 0; height: calc(100%); display: flex; align-items: center; line-height: 3rem; width: 100%; padding-block: 0; gap: .5rem;  }
        .nav-item .nav-link > i { font-size: 1.2rem; color: var(--ai-gray2); transition: color .15s ease-in-out; }


    .nav-item a.active { border-bottom: 5px solid var(--ai-primary); color: var(--ai-primary); background: hsla( var(--ai-primaryH), var(--ai-primaryS), var(--ai-primaryL), 0 ); }
    .nav-item a.active > i { color: var(--ai-primary); }

    .nav-item .nav-link:hover { background: hsla( var(--ai-primaryH), var(--ai-primaryS), var(--ai-primaryL), 0.2 ); color: #fff; }
    .nav-item .nav-link:hover > i  { color: white; }


.ai-user { color: var(--ai-gray2); display: flex; gap: .5rem; align-items: center; cursor: pointer; }
    .ai-user > span { font-weight: 600; }
    .ai-user > i { font-size: 2rem; color: var(--ai-primary); }

.ai-card.ai-user-menu { position: absolute; top: 60px; right: 0; animation: slide-in-bottom-little .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; gap: 1rem; padding: 1rem; }
.ai-user-menu ul { list-style: none; margin: 0 0 0 0; padding: 0; color: var(--ai-primaryHover); display: flex; flex-direction: column; gap: .5rem; }
.ai-user-menu-link { padding: 2px 8px; border-radius: 6px; color: var(--ai-primaryHover); transition: background-color .15s ease-in-out; }
.ai-user-menu-link:hover { background: var(--ai-gray2); color: var(--ai-primaryHover); }
.ai-topbar__right { margin-left: auto; display: flex; gap: .5rem; align-items: center; }

h1 { font-size: 1.5rem; font-weight: 600; }

.ai-page-content.-grid { display: grid; grid-template-columns: repeat(2, minmax(300px, 1fr)); gap: 2rem; padding-block: 1rem; }

.ai-card { box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; background: #fff; border-radius: 12px; padding: 2rem; display: flex; flex-direction: column; gap: 1.5rem; animation: fade-in .75s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; justify-content: center; }
.ai-card.-hidden { display: none; }

.ai-bundle-history { margin-bottom: 2rem; animation: fade-in .75s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; }
.ai-bundle-history.-hidden { display: none;  }


/* =skeletons */
.ai-skeleton { animation: ai-skeleton-pulse 1.5s ease-in-out .5s infinite; border-radius: 10px; }

.ai-card.ai-skeleton { box-shadow: none; background: #fff; }
h1.ai-skeleton { background: var(--ai-gray4); width: 20%; height: 3rem; border-radius: 10px; }
h2.ai-skeleton { background: var(--ai-gray2); width: 100%; height: 3rem; border-radius: 10px; }
h3.ai-skeleton { background: var(--ai-gray2); width: 50%; height: 2rem; border-radius: 10px; }
h5.ai-skeleton { background: var(--ai-gray2); width: 50%; height: 1rem; border-radius: 10px; }
.btn.ai-skeleton { background: var(--ai-gray2); width: 50%; height: 2rem; border-radius: 10px; }

.ai-skeleton .ai-card-key { text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 1rem; align-items: center; }

.ai-chart-skeleton { display: flex; justify-content: space-around; align-items: flex-end; }

.ai-bar.ai-skeleton { width: 5rem; height: 25rem; background: var(--ai-gray2); }
    .ai-bar.ai-skeleton:first-child { height: 10rem; }
    .ai-bar.ai-skeleton:nth-col(2) { height: 14rem; }
    .ai-bar.ai-skeleton:nth-child(3) { height: 18rem; }


    @keyframes ai-skeleton-pulse { 0% { opacity: 1; }
    50% { opacity: .4; }
    100% { opacity: 1; }
}


/**
 * ----------------------------------------
 * =animation =fade-in
 * ----------------------------------------
 */

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/**
 * ----------------------------------------
 * =animation =slide-in-bottom
 * ----------------------------------------
 */
@keyframes slide-in-bottom {
    0% { transform: translateY(1000px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes slide-in-bottom-little {
    0% { transform: translateY(10px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}




.ai-card__header { margin: 0; font-size: 1.5rem; display: flex; justify-content: space-between; align-items: center; }
.ai-card-close { display: flex; width: 30px; height: 30px; border-radius: 100px; justify-content: center; align-items: center; cursor: pointer; transition: all .25s ease-in-out; }
.ai-card-close:hover { background: var(--ai-gray2); }

.ai-card__content { flex: 1; }

.ai-card-key { text-align: center; }
    .ai-card-key h3 { margin: 0; font-size: 2rem; word-break: break-word; }
.ai-card-key h5 { font-weight: 300; font-size: 1rem; margin: 0; }

.btn-primary {
    --bs-btn-bg: var(--ai-primary);
    --bs-btn-border-color: var(--ai-primary);
    --bs-btn-hover-bg: var(--ai-primaryHover);
    --bs-btn-hover-border-color: var(--ai-primaryHover);
    --bs-btn-active-bg: var(--ai-primaryHover);
    --bs-btn-active-border-color: var(--ai-primaryHover);
    --bs-btn-disabled-bg: hsla( var(--ai-primaryH), var(--ai-primaryS), var(--ai-primaryL), 0.8 );
    --bs-btn-disabled-border-color: hsla( var(--ai-primaryH), var(--ai-primaryS), var(--ai-primaryL), 0.8 );
}

.btn-secondary {
    --bs-btn-color: #fff;
    --bs-btn-bg: hsl(210 23% 59%);
    --bs-btn-border-color: hsl(210 23% 59%);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: hsl(210 23% 49%);
    --bs-btn-hover-border-color: hsl(210 23% 49%);
    --bs-btn-active-bg: hsl(210 23% 49%);
    --bs-btn-active-border-color: hsl(210 23% 49%);
    --bs-btn-disabled-bg: hsl(210 23% 79%);
    --bs-btn-disabled-border-color: hsl(210 23% 79%);
}

.btn.btn-icon { border-radius: 100px; color: var(--ai-primary); transition: color .15s ease-in-out; }
.btn.btn-icon:hover { background: hsla( var(--ai-primaryH), var(--ai-primaryS), var(--ai-primaryL), 0.1 ); }

.ai-card__buttons { display: flex; align-items: center; gap: .5rem; }
.ai-card__buttons .alert { background: none; padding: 0; margin: 0; padding-inline: 0;  border: none; }
    .ai-card__buttons .alert.-success { color: var(--ai-primary); }
    .ai-card__buttons .alert.-danger { color: var(--ai-assistant); }

    .ai-card__buttons .alert .fa-circle-success { --fa: "\f06a"; }
    .ai-card__buttons .alert .fa-circle-danger { --fa: "\f058"; }

.ai-card:has(.alert.-success) { outline: 2px solid var(--ai-primary); }
.ai-card:has(.alert.-danger) { outline: 2px solid var(--ai-assistant); }

.ai-card-grid.-bundles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; padding: 0 0 2rem 0; }


.ai-card.-welcome { background: #060637; color: #fff; }
    .ai-card.-welcome h2 { font-size: 1.7rem; font-weight: 400; margin-bottom: 2rem; }
    .ai-card.-welcome h3 { font-size: 1.5rem; margin: 0 0 1rem 0; }
    .ai-card.-welcome h3 > i { float: right; font-size: 5rem; margin-left: 2rem; }
    .ai-card.-welcome h3 > span { color: var(--ai-primary); font-weight: 600; }

.ai-grid-card { margin-bottom: 2rem; }



    /* =FORMS*/
    .form-control:focus { border-color: var(--ai-primary); outline: 0; box-shadow: none; }
.form-control:focus-visible { border-color: var(--ai-primary); background-color: hsla( var(--ai-primaryH), var(--ai-primaryS), var(--ai-primaryL), 0.05 ); }

:root {
    --select-arrow-color: var(--ai-textColor);
    --select-color: var(--ai-textColor);
    --select-bg: var(--ai-gray3);
    --select-bg-hover: var(--ai-gray4);
    --select-border-color: var(--ai-gray3);
}

select.form-control { background-image: linear-gradient(45deg, transparent 50%, var(--select-arrow-color) 50%), linear-gradient(135deg, var(--select-arrow-color) 50%, transparent 50%); background-position: calc(100% - 18px) calc(1em + 0px), calc(100% - 13px) calc(1em + 0px); background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; background-color: var(--select-bg); color: var(--select-color); border: 1px solid var(--select-border-color); transition: all .15s ease-in-out; }

    select.form-control:hover { background-color: var(--select-bg-hover); border-color: var(--select-bg-hover); cursor: pointer; }


/**
 * ----------------------------------------
 * =GRID
 * ----------------------------------------
 */
.k-grid-stack-row { gap: .5rem; padding: .5rem; }

/**
 * ----------------------------------------
 * =LOADERS
 * ----------------------------------------
 */

.loader-wrapper { height: 100vh; display: flex; justify-content: center; align-items: center; }

/* HTML: <div class="loader"></div> */
.loader { width: fit-content; font-weight: bold; font-family: monospace; font-size: 30px; background: linear-gradient(90deg,var(--ai-assistant) 50%,#0000 0) right / 200% 100%; animation: l21 1s infinite linear; border-radius: 10px; }
    .loader::before { content: "Redirecting..."; color: #0000; padding: 0 5px; background: inherit; background-image: linear-gradient(90deg, #fff 50%, var(--ai-assistant) 0); -webkit-background-clip: text; background-clip: text; }

@keyframes l21 {
    100% { background-position: left }
}

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

    @media (max-width: 768px) {
        .topbar {  padding-block: 1rem; }
        .nav { position: fixed; bottom: 0; background: var(--ai-topbar-bg); width: 100%; left: 0; justify-content: space-around; }
        .ai-page-content.-grid { display: grid; grid-template-columns: repeat(1, minmax(300px, 1fr)); gap: 2rem; padding-block: 1rem; }
        .ai-card-grid.-bundles { grid-template-columns: 1fr; }
        .ai-bundle-history { margin: 0; position: fixed; bottom: 47px; left: 0; width: 100%;  height: 100%; display: flex; flex-direction: column; justify-content: flex-end; z-index: 1; }
        .ai-bundle-history::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: hsl(240deg 80% 12% / 44%); z-index: -1;}
        .ai-bundle-history .ai-card { animation: slide-in-bottom .5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both; }
    }



.donut-ring { stroke: var(--ai-gray2); }

.donut-segment { transform-origin: center; stroke: var(--ai-primary); }

.segment-bundle { stroke: var(--ai-primary); animation: donut1 3s; }

.donut-item.-bundle { color: var(--ai-primary); height: 200px; }
.donut-item h2 { font-size: 2em; font-weight: 600; line-height: 1; margin: 0; }
.donut-item h3 { font-size: .9em; font-weight: 400; line-height: 1; margin: 0; color: var(--textDefault); color: #000; }

.donut-hole,
.donut-ring,
.donut-segment { fill: transparent; stroke-linecap: round; }

.donut-segment { transition: .2s ease-in-out stroke-dasharray; }

.donut-item { position: relative; transition: .25s transform ease-in-out; cursor: pointer; }
    /*.donut-item:hover { transform: scale(1.05); }*/
    .donut-item .donut-text { position: absolute; top: 50%; left: 0; text-align: center; width: 100%; margin: 0; padding: 0; line-height: 1; transform: translateY(-50%); display: flex; justify-content: center; flex-direction: column; gap: 5px; }

    .donut-expiration { text-align:center; font-size: .9rem; color: var(--ai-gray-dark); margin: 0; }

.ai-card-grid.-bundles .ai-card { gap: 0; }

@keyframes donut1 { 
        from   { stroke-dasharray: 0, 100; }
    }