* { box-sizing: border-box; }

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

a { color: var(--ai-action); }
a:hover { color: var(--ai-actionHover); }

h1:focus { outline: none; }

.page { display: flex; flex-direction: column; min-height: 100vh; overflow-x: clip; }

main { flex: 1; }
article { max-width: var(--ai-contentWidth); margin: 0 auto; padding: 2rem 1.5rem 4rem; }

/**
 * ----------------------------------------
 * =TOPBAR
 * ----------------------------------------
 */
.topbar { position: relative; z-index: 30; background: var(--ai-topbar-bg); color: var(--ai-white); }

.topbar__inner { max-width: var(--ai-contentWidth); margin: 0 auto; padding: 0 1.5rem; min-height: var(--ai-topbarHeight); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.75rem; }

.topbar__brand { display: flex; align-items: center; gap: 1rem; min-width: 0; }

.topbar .logo { display: flex; align-items: center; gap: .6rem; color: var(--ai-white); text-decoration: none; font-weight: 700; font-size: 1.14rem; letter-spacing: -.01em; white-space: nowrap; }
    .topbar .logo:hover { color: var(--ai-white); }
    .topbar .logo i { color: var(--ai-primary); font-size: 1.3rem; }

.logo__ai { color: var(--ai-primary); }

.logo__divider { flex: none; width: 1px; height: 24px; background: rgba(255, 255, 255, .22); }

.topbar__tenant { min-width: 0; max-width: 24rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; font-weight: 600; color: var(--ai-topbar-text); }

.ai-topbar__right { margin-left: auto; display: flex; align-items: center; gap: .6rem; }

.ai-topbar-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 44px; padding: 0 1.1rem; border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--ai-borderRadius); background: transparent; color: var(--ai-topbar-text); font: 600 1rem var(--ai-fontFamily); white-space: nowrap; cursor: pointer; }
    .ai-topbar-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .08); color: var(--ai-white); }
    .ai-topbar-btn:focus-visible { outline: 2px solid var(--ai-white); outline-offset: 2px; }
    .ai-topbar-btn:disabled { cursor: progress; opacity: .8; }

.ai-topbar-btn--icon { width: 44px; padding: 0; }

/**
 * ----------------------------------------
 * =BUTTONS
 * ----------------------------------------
 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 40px; border: 1px solid transparent; border-radius: var(--ai-borderRadius); padding: 0 1.1rem; font: 600 1rem var(--ai-fontFamily); line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; background: var(--ai-gray2); color: var(--ai-textColor); transition: background-color .12s ease, border-color .12s ease, color .12s ease; }
    .btn:hover:not(:disabled) { background: var(--ai-gray3); color: var(--ai-textColor); }
    .btn:focus-visible { outline: 2px solid var(--ai-action); outline-offset: 2px; box-shadow: none; }
    .btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary { background: var(--ai-action); color: var(--ai-white); font-weight: 700; }
    .btn-primary:hover:not(:disabled) { background: var(--ai-actionHover); color: var(--ai-white); }

.btn-outline { background: var(--ai-surface); border-color: var(--ai-borderStrong); color: var(--ai-textSoft); }
    .btn-outline:hover:not(:disabled) { background: var(--ai-gray1); border-color: #C3CADB; color: var(--ai-textColor); }

.btn-hero { min-height: 44px; background: var(--ai-primary); border-color: var(--ai-primary); color: var(--ai-topbar-bg); font-weight: 700; }
    .btn-hero:hover:not(:disabled) { background: #7CC8F0; border-color: #7CC8F0; color: var(--ai-topbar-bg); }
    .btn-hero:focus-visible { outline-color: var(--ai-white); }

/**
 * ----------------------------------------
 * =HERO
 * ----------------------------------------
 */
.ai-hero { margin: -2rem calc(50% - 50vw) 0; padding: 3rem calc(50vw - 50%) 6.5rem; background: var(--ai-topbar-bg); color: var(--ai-white); border-top: 1px solid rgba(255, 255, 255, .08); }

.ai-hero__inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.75rem 2.5rem; }

.ai-hero__text { flex: 1 1 520px; max-width: 720px; min-width: 0; display: flex; flex-direction: column; gap: .6rem; }

.ai-hero__eyebrow { margin: 0; font-size: 1.14rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ai-primary); }

.ai-hero h1 { margin: 0; padding-bottom: .12em; font-size: clamp(1.29rem, 2.8vw, 2.29rem); font-weight: 800; line-height: 1.25; letter-spacing: -.025em; color: var(--ai-white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.ai-hero__actions { display: flex; flex-wrap: wrap; gap: .85rem; }

/**
 * ----------------------------------------
 * =STATS
 * ----------------------------------------
 */
.ai-stats { position: relative; margin: -4.5rem 0 1.7rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1.4rem; }

.ai-stat { display: flex; flex-direction: column; gap: .55rem; padding: 1.55rem 1.7rem; background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: var(--ai-radiusLg); box-shadow: var(--ai-shadowCard); }

.ai-stat__label { display: flex; align-items: center; gap: .55rem; font-size: .93rem; font-weight: 700; color: var(--ai-textSoft); }
    .ai-stat__label i { color: var(--ai-action); }

.ai-stat__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .55rem; }

.ai-stat__value { font-size: 2.43rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ai-stat__of { font-size: 1rem; font-weight: 600; color: var(--ai-muted); }
.ai-stat__hint { font-size: .93rem; color: var(--ai-muted); }
.ai-stat__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .7rem; }

.ai-key { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.ai-key__value { flex: 1 1 auto; min-width: 0; font-family: var(--ai-monoFamily); font-size: 1rem; font-weight: 500; line-height: 1.45; color: var(--ai-textColor); overflow-wrap: break-word; }
.ai-key__copy { flex: none; width: 40px; padding: 0; }
    .ai-key__copy .fa-check { color: var(--ai-success); }
    .ai-key__copy .fa-triangle-exclamation { color: var(--ai-danger); }

.ai-stat__tags { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }

.ai-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ai-stat > .ai-pill { align-self: flex-start; }

/**
 * ----------------------------------------
 * =CARDS & PANELS
 * ----------------------------------------
 */
.ai-card { background: var(--ai-surface); border: 1px solid var(--ai-border); border-radius: var(--ai-radiusLg); box-shadow: 0 1px 2px rgba(11, 15, 58, .05); padding: 1.7rem; }

.ai-split { display: flex; flex-wrap: wrap; align-items: stretch; gap: 1.7rem; margin-bottom: 1.7rem; }
    .ai-split > .ai-card { flex: 1 1 520px; min-width: 0; }

.ai-panel { display: flex; flex-direction: column; gap: 1.3rem; }

.ai-panel__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .7rem; }

.ai-panel__title { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
    .ai-panel__title h2 { margin: 0; font-size: 1.43rem; font-weight: 800; letter-spacing: -.01em; }
    .ai-panel__title p { margin: 0; font-size: 1rem; color: var(--ai-muted); }

.ai-badge { display: inline-flex; align-items: center; gap: .45rem; min-height: 30px; padding: 0 .85rem; border: 1px solid var(--ai-border); border-radius: 999px; background: var(--ai-surfaceAlt); color: var(--ai-muted); font-size: .93rem; font-weight: 600; white-space: nowrap; }
    .ai-badge strong { font-size: 1.07rem; font-weight: 800; color: var(--ai-action); font-variant-numeric: tabular-nums; }

.ai-empty { margin: 0; padding: 1rem 0; color: var(--ai-muted); font-size: 1rem; }

.ai-pill { display: inline-flex; align-items: center; gap: .4rem; padding: 2px 10px; border-radius: 999px; font-size: .86rem; font-weight: 700; white-space: nowrap; }
    .ai-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.ai-pill--active { background: #E8F4EE; color: var(--ai-success); }
.ai-pill--soon { background: #FFF4E0; color: var(--ai-warning); }
.ai-pill--expired { background: var(--ai-gray2); color: var(--ai-muted); }

.ai-chip { display: inline-block; max-width: 100%; padding: 2px 10px; border: 1px solid var(--ai-borderStrong); border-radius: 999px; background: var(--ai-surface); color: var(--ai-textSoft); font-size: .86rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }

.ai-category { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ai-action); }
.ai-category--crm { color: #A3245F; }
.ai-category--erp { color: var(--ai-success); }
.ai-category--custom { color: var(--ai-warning); }

.ai-mono { font-family: var(--ai-monoFamily); font-size: 12.5px; color: var(--ai-textSoft); }

.ai-meter { height: 6px; border-radius: 999px; background: var(--ai-gray2); overflow: hidden; }
    .ai-meter span { display: block; height: 100%; border-radius: inherit; background: var(--ai-action); transition: width .4s ease; }

/**
 * ----------------------------------------
 * =BUNDLES
 * ----------------------------------------
 */
.ai-bundle-list { display: flex; flex-direction: column; }

.ai-bundle { display: flex; flex-direction: column; gap: .7rem; padding: 1.15rem 0; }
    .ai-bundle + .ai-bundle { border-top: 1px solid var(--ai-gray2); }
    .ai-bundle-list > .ai-bundle:first-child { padding-top: .3rem; }

.ai-bundle__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem .85rem; }
.ai-bundle__name { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; min-width: 0; }
    .ai-bundle__name strong { font-size: 1.07rem; font-weight: 700; }

.ai-bundle__credits { font-size: 1rem; color: var(--ai-muted); font-variant-numeric: tabular-nums; }
    .ai-bundle__credits strong { font-size: 1.14rem; font-weight: 800; color: var(--ai-textColor); }

.ai-bundle__dates { display: flex; flex-wrap: wrap; gap: .3rem 1.3rem; font-size: .93rem; color: var(--ai-muted); }

.ai-bundle--soon .ai-meter span { background: #C77D00; }
.ai-bundle--expired { opacity: .75; }
    .ai-bundle--expired .ai-meter span { background: #B4BBCC; }

.ai-bundle-more { align-self: flex-start; min-height: 44px; margin-top: -.4rem; color: var(--ai-action); font-weight: 700; }
    .ai-bundle-more:hover:not(:disabled) { background: var(--ai-tint); border-color: #BFDDF1; color: var(--ai-action); }

.ai-bundle-past { margin-top: auto; border: 1px solid var(--ai-border); border-radius: 12px; background: var(--ai-surfaceAlt); }
    .ai-bundle-past summary { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .7rem; min-height: 48px; padding: .4rem 1.15rem; list-style: none; cursor: pointer; font-size: 1rem; font-weight: 700; color: var(--ai-textSoft); }
        .ai-bundle-past summary::-webkit-details-marker { display: none; }
        .ai-bundle-past summary:hover { color: var(--ai-textColor); }
        .ai-bundle-past summary:focus-visible { outline: 2px solid var(--ai-action); outline-offset: 2px; border-radius: 12px; }
        .ai-bundle-past summary > i:first-child { color: var(--ai-muted); }
    .ai-bundle-past[open] .ai-bundle-past__chevron { transform: rotate(180deg); }

.ai-bundle-past__hint { font-size: .93rem; font-weight: 500; color: var(--ai-muted); }
.ai-bundle-past__chevron { margin-left: auto; font-size: .8rem; color: var(--ai-muted); transition: transform .15s ease; }
.ai-bundle-past__list { padding: 0 1.15rem; background: var(--ai-surface); border-top: 1px solid var(--ai-border); border-radius: 0 0 12px 12px; }
    .ai-bundle-past__list > .ai-bundle:first-child { padding-top: 1.15rem; }

.ai-count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--ai-border); color: var(--ai-textSoft); font-size: .86rem; font-weight: 800; }

/**
 * ----------------------------------------
 * =CONSUMPTION BARS
 * ----------------------------------------
 */
.ai-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1rem; }

.ai-bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .4rem 1rem; }

.ai-bar-row__name { display: flex; align-items: baseline; gap: .55rem; min-width: 0; }
.ai-bar-row__label { font-size: 1rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-bar-row__value { text-align: right; font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.ai-bar-row__track { grid-column: 1 / -1; height: 10px; border-radius: 4px; background: var(--ai-bodyBG); overflow: hidden; }
.ai-bar-row__fill { display: block; height: 100%; border-radius: 4px; background: var(--ai-action); transition: width .4s ease; }
.ai-bar-row__fill--crm { background: #A3245F; }
.ai-bar-row__fill--erp { background: var(--ai-success); }
.ai-bar-row__fill--custom { background: var(--ai-warning); }

/**
 * ----------------------------------------
 * =USAGE GRID
 * ----------------------------------------
 */
.ai-usage-grid.k-grid { border-color: var(--ai-border); border-radius: 12px; overflow: hidden; font-family: var(--ai-fontFamily); font-size: 14px; color: var(--ai-textColor); }
    .ai-usage-grid .k-grid-header { border-color: var(--ai-border); background: var(--ai-surfaceAlt); }
    .ai-usage-grid .k-table-th { padding-block: .8rem; border-color: var(--ai-border); background: var(--ai-surfaceAlt); color: var(--ai-muted); font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
    .ai-usage-grid .k-table-th.k-sorted,
    .ai-usage-grid .k-table-th.k-sorted .k-sort-icon { color: var(--ai-action); }
    .ai-usage-grid .k-table-td { padding-block: .7rem; border-color: var(--ai-gray2); vertical-align: middle; }
    .ai-usage-grid .k-table-row { background: var(--ai-surface); }
    .ai-usage-grid .k-table-row.k-table-alt-row { background: #FCFCFE; }
    .ai-usage-grid .k-table-row:hover { background: var(--ai-gray1); }
    .ai-usage-grid .k-pager { border-color: var(--ai-border); background: var(--ai-surfaceAlt); color: var(--ai-muted); font-size: 13px; }
    .ai-usage-grid .k-pager-numbers .k-button { min-width: 32px; border-radius: 8px; color: var(--ai-textSoft); font-weight: 700; }
        .ai-usage-grid .k-pager-numbers .k-button.k-selected { background: var(--ai-action); color: var(--ai-white); }
            .ai-usage-grid .k-pager-numbers .k-button.k-selected::before { opacity: 0; }
    .ai-usage-grid .k-pager-nav { border-radius: 8px; }
    .ai-usage-grid .k-grid-stack-row { gap: .5rem; padding: .5rem; }

.ai-usage-grid__stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ai-usage-grid__strong { font-weight: 700; }
.ai-usage-grid__mono { font-family: var(--ai-monoFamily); font-size: 11.5px; color: var(--ai-muted); }
.ai-usage-grid__credits { font-weight: 800; font-variant-numeric: tabular-nums; }

/**
 * ----------------------------------------
 * =SKELETONS
 * ----------------------------------------
 */
.ai-skeleton { display: block; height: .8rem; border-radius: 6px; background: linear-gradient(90deg, var(--ai-gray2) 25%, var(--ai-gray1) 50%, var(--ai-gray2) 75%); background-size: 200% 100%; animation: ai-skeleton-shimmer 1.4s ease-in-out infinite; }

.ai-skeleton--value { width: 9rem; height: 2.4rem; }
.ai-skeleton--text { width: 13rem; max-width: 100%; }
.ai-skeleton--meter { width: 100%; height: 6px; border-radius: 999px; }
.ai-skeleton--hero { width: 22rem; max-width: 100%; height: 3.2rem; opacity: .18; }

@keyframes ai-skeleton-shimmer {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

/**
 * ----------------------------------------
 * =FORMS (dev login)
 * ----------------------------------------
 */
.form-control:focus { border-color: var(--ai-action); outline: 0; box-shadow: 0 0 0 3px rgba(26, 108, 166, .18); }

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

.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 }
}

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

/**
 * ----------------------------------------
 * =RESPONSIVE
 * ----------------------------------------
 */
@media (max-width: 700px) {
    .topbar__inner { padding: .5rem 1rem; gap: .5rem 1rem; }
    .topbar__brand { flex: 1 1 100%; gap: .7rem; }
    .topbar__tenant { max-width: none; }
    .ai-topbar__right { margin-left: 0; }
    .ai-topbar-btn { padding: 0 .85rem; }
    .ai-topbar-btn--icon { padding: 0; }
    article { padding: 1.5rem 1rem 3rem; }
    .ai-hero { margin-top: -1.5rem; padding-top: 2.2rem; }
    .ai-card, .ai-stat { padding: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ai-skeleton { animation: none; }
    .ai-meter span, .ai-bar-row__fill { transition: none; }
}