/**
 * ANAS Journey – design system.
 *
 * Brand: Blu Anas #0033A0, Giallo Anas #FFCD00, Grigio Anas #97999B (Manuale d'Identità Visiva);
 * service colours: Blu notte #001C58, Blu chiaro #E6EBF6, Giallo chiaro #FFF8D9.
 * Rule: yellow is never used as text on white; it is a background with blue text, or an accent on blue.
 * Font: Open Sans (SIL OFL 1.1), self-hosted.
 *
 * @copyright  2026 ANAS Journey
 * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

/* ============================================================== Fonts */

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/open-sans-latin-400-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/open-sans-latin-600-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/open-sans-latin-700-normal.woff2") format("woff2");
}

@font-face {
    font-family: "Open Sans";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("fonts/open-sans-latin-800-normal.woff2") format("woff2");
}

/* ============================================================== Tokens */

:root {
    --aj-blue: #0033a0;
    --aj-blue-600: #002b87;
    --aj-blue-400: #3d6bd1;
    --aj-navy: #001c58;
    --aj-navy-900: #00143f;
    --aj-yellow: #ffcd00;
    --aj-yellow-600: #f2c200;
    --aj-gray: #97999b;
    --aj-blue-50: #e6ebf6;
    --aj-blue-25: #f5f8fd;
    --aj-yellow-50: #fff8d9;
    --aj-yellow-100: #fff3c2;
    --aj-text: #424242;
    --aj-text-2: #555;
    --aj-muted: #6b7280;
    --aj-bg: #f2f2f2;
    --aj-bg-cool: #f2f4f8;
    --aj-border: #e1e6ef;
    --aj-border-2: #cbd3e3;
    --aj-green: #1e7b4b;
    --aj-green-50: #e7f4ec;
    --aj-red: #c62828;
    --aj-red-50: #fdecec;
    --aj-amber-text: #6b4a00;
    --aj-radius: 20px;
    --aj-radius-md: 14px;
    --aj-radius-sm: 10px;
    --aj-shadow-sm: 0 1px 2px rgba(0, 28, 88, .06);
    --aj-shadow: 0 1px 2px rgba(0, 28, 88, .05), 0 8px 24px rgba(0, 28, 88, .06);
    --aj-shadow-lg: 0 24px 60px rgba(0, 20, 70, .22);
    --aj-font: "Open Sans", "Segoe UI", Arial, Helvetica, sans-serif;
    --aj-focus: 0 0 0 3px #fff, 0 0 0 6px rgba(0, 51, 160, .55);
    --aj-top: 68px;
}

/* ============================================================== Base */

body.aj-body {
    margin: 0;
    background: var(--aj-bg-cool);
    color: var(--aj-text);
    font-family: var(--aj-font);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body.aj-body #page,
body.aj-body .embedded-main {
    margin: 0;
    padding: 0;
    max-width: none;
    width: auto;
}

body.aj-noscroll {
    overflow: hidden;
}

.aj-root,
.aj-root *,
.aj-root *::before,
.aj-root *::after,
.aj-cel,
.aj-cel *,
.aj-welcome,
.aj-welcome *,
.aj-toasts *,
.aj-dialog,
.aj-dialog * {
    box-sizing: border-box;
}

.aj-root {
    font-family: var(--aj-font);
    color: var(--aj-text);
}

.aj-root h1,
.aj-root h2,
.aj-root h3,
.aj-root h4,
.aj-cel h2,
.aj-welcome h1,
.aj-dialog h2 {
    margin: 0;
    font-family: var(--aj-font);
    color: var(--aj-navy);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.01em;
}

.aj-root p,
.aj-cel p,
.aj-welcome p,
.aj-dialog p {
    margin: 0;
}

.aj-root a {
    color: var(--aj-blue);
    text-decoration: none;
}

.aj-root a:hover {
    text-decoration: underline;
}

.aj-root ul,
.aj-root ol,
.aj-cel ul,
.aj-cel ol,
.aj-welcome ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.aj-root button,
.aj-root input,
.aj-root select,
.aj-root textarea,
.aj-cel button,
.aj-welcome button,
.aj-dialog button,
.aj-dialog input,
.aj-dialog select {
    font-family: inherit;
}

.aj-root img {
    max-width: 100%;
}

.aj-root code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85em;
    color: var(--aj-navy);
    background: var(--aj-blue-50);
    padding: 1px 6px;
    border-radius: 6px;
}

.aj-i {
    width: 1.15em;
    height: 1.15em;
    flex: none;
    vertical-align: -.2em;
}

body.aj-body :focus-visible {
    outline: none;
    box-shadow: var(--aj-focus);
    border-radius: 8px;
}

.aj-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.aj-muted {
    color: var(--aj-muted);
}

.aj-nowrap {
    white-space: nowrap;
}

.aj-spacer {
    flex: 1;
}

.aj-eyebrow {
    font-size: .74rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--aj-blue);
}

.aj-eyebrow--light {
    color: var(--aj-yellow);
}

.aj-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--aj-muted);
    margin-bottom: 6px;
}

.aj-help {
    font-size: .82rem;
    color: var(--aj-muted);
    line-height: 1.45;
}

.aj-ok {
    color: var(--aj-green);
}

.aj-lock {
    color: #9aa3b2;
}

.aj-cur {
    color: var(--aj-navy);
    fill: var(--aj-yellow);
}

.aj-pos {
    color: var(--aj-green);
}

.aj-neg {
    color: var(--aj-red);
}

.aj-error {
    color: var(--aj-red);
    font-size: .76rem;
}

/* ============================================================== Buttons */

.aj-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 42px;
    padding: .55rem 1.15rem;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-family: var(--aj-font);
    font-size: .92rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none !important;
    position: relative;
    transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
}

.aj-btn:active {
    transform: translateY(1px);
}

.aj-btn--primary {
    background: var(--aj-blue);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(0, 51, 160, .22);
}

.aj-btn--primary:hover {
    background: var(--aj-blue-600);
}

.aj-btn--accent {
    background: var(--aj-yellow);
    color: var(--aj-navy) !important;
    box-shadow: 0 4px 14px rgba(229, 168, 0, .28);
}

.aj-btn--accent:hover {
    background: var(--aj-yellow-600);
}

.aj-btn--ghost {
    background: #fff;
    border-color: var(--aj-border-2);
    color: var(--aj-blue) !important;
}

.aj-btn--ghost:hover {
    border-color: var(--aj-blue);
    background: var(--aj-blue-25);
}

.aj-btn--soft {
    background: var(--aj-blue-50);
    color: var(--aj-blue) !important;
}

.aj-btn--soft:hover {
    background: #d8e0f2;
}

.aj-btn--subtle {
    background: transparent;
    color: var(--aj-text-2) !important;
}

.aj-btn--subtle:hover {
    background: #eaedf3;
    color: var(--aj-navy) !important;
}

.aj-btn--danger {
    background: var(--aj-red);
    color: #fff !important;
}

.aj-btn--danger:hover {
    background: #a51f1f;
}

.aj-btn--sm {
    min-height: 34px;
    padding: .3rem .85rem;
    font-size: .82rem;
}

.aj-btn--lg {
    min-height: 50px;
    padding: .75rem 1.5rem;
    font-size: 1rem;
}

.aj-btn--block {
    width: 100%;
}

.aj-btn[disabled],
.aj-btn[aria-disabled="true"] {
    opacity: .45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.aj-btn.is-loading {
    pointer-events: none;
}

.aj-btn.is-loading > * {
    opacity: .25;
}

.aj-btn.is-loading::after {
    content: "";
    position: absolute;
    width: 18px;
    height: 18px;
    border: 2.5px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: aj-spin .7s linear infinite;
}

.aj-iconbtn {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--aj-text-2);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.aj-iconbtn:hover {
    background: #eaedf3;
    color: var(--aj-navy);
}

.aj-iconbtn--danger:hover {
    background: var(--aj-red-50);
    color: var(--aj-red);
}

.aj-linkbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--aj-blue);
    font-weight: 700;
    font-size: .85rem;
    cursor: pointer;
}

.aj-linkbtn:hover {
    text-decoration: underline;
}

.aj-linkbtn--danger {
    color: var(--aj-red);
}

.aj-inline {
    display: inline;
    margin: 0;
}

/* ============================================================== Pills, chips, alerts */

.aj-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    background: #eef1f6;
    color: var(--aj-text-2);
}

.aj-pill--blue {
    background: var(--aj-blue-50);
    color: var(--aj-blue);
}

.aj-pill--green {
    background: var(--aj-green-50);
    color: var(--aj-green);
}

.aj-pill--amber {
    background: var(--aj-yellow-100);
    color: var(--aj-amber-text);
}

.aj-pill--red {
    background: var(--aj-red-50);
    color: #a51f1f;
}

.aj-pill--gold {
    background: var(--aj-yellow);
    color: var(--aj-navy);
}

.aj-pill--navy {
    background: var(--aj-navy);
    color: #fff;
}

.aj-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--aj-blue-50);
    color: var(--aj-blue);
    font-size: .78rem;
    font-weight: 700;
    cursor: pointer;
}

.aj-chip:hover {
    border-color: var(--aj-blue);
}

.aj-chip--xp {
    background: var(--aj-navy);
    color: var(--aj-yellow);
    cursor: default;
}

.aj-chip--xp:hover,
.aj-chip--muted:hover {
    border-color: transparent;
}

.aj-chip--muted {
    background: #eef1f6;
    color: var(--aj-text-2);
    cursor: default;
}

.aj-chips {
    display: grid;
    gap: 6px;
    max-height: 460px;
    overflow: auto;
    padding-right: 4px;
}

.aj-chips .aj-chip {
    display: grid;
    grid-template-columns: minmax(150px, auto) 1fr;
    gap: 10px;
    text-align: left;
    border-radius: 10px;
    border: 1px solid var(--aj-border);
    background: #f7f8fb;
    color: var(--aj-text-2);
    font-weight: 500;
    padding: 7px 10px;
}

.aj-chips .aj-chip:hover {
    border-color: var(--aj-blue);
    background: #fff;
}

.aj-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid transparent;
    border-left-width: 4px;
    font-size: .9rem;
    line-height: 1.45;
}

.aj-alert > .aj-i {
    margin-top: 2px;
    width: 18px;
    height: 18px;
}

.aj-alert--info {
    background: var(--aj-blue-25);
    border-color: #d5def0 #d5def0 #d5def0 var(--aj-blue);
    color: var(--aj-navy);
}

.aj-alert--success {
    background: #eef8f2;
    border-color: #c9e7d5 #c9e7d5 #c9e7d5 var(--aj-green);
    color: #14532d;
}

.aj-alert--warning {
    background: var(--aj-yellow-50);
    border-color: #f3e3a0 #f3e3a0 #f3e3a0 var(--aj-yellow);
    color: var(--aj-amber-text);
}

.aj-alert--error {
    background: var(--aj-red-50);
    border-color: #f5c6c4 #f5c6c4 #f5c6c4 var(--aj-red);
    color: #7f1d1d;
}

.aj-alert a {
    font-weight: 700;
}

/* ============================================================== Cards, KPIs, progress */

.aj-card,
.aj-panel {
    background: #fff;
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius);
    box-shadow: var(--aj-shadow);
    min-width: 0;
}

.aj-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px 0;
}

.aj-card__head h2 {
    font-size: 1rem;
}

.aj-card__actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.aj-card__body {
    padding: 18px 22px 22px;
}

.aj-card--flush .aj-card__body {
    padding: 0;
}

.aj-panel {
    padding: 20px 22px;
}

.aj-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
}

.aj-kpis--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.aj-kpi {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--aj-border);
    border-radius: 18px;
    box-shadow: var(--aj-shadow-sm);
}

.aj-kpi__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 13px;
    background: var(--aj-blue-50);
    color: var(--aj-blue);
}

.aj-kpi__icon .aj-i {
    width: 22px;
    height: 22px;
}

.aj-kpi--gold .aj-kpi__icon {
    background: var(--aj-yellow);
    color: var(--aj-navy);
}

.aj-kpi--amber .aj-kpi__icon {
    background: var(--aj-yellow-100);
    color: var(--aj-amber-text);
}

.aj-kpi--green .aj-kpi__icon {
    background: var(--aj-green-50);
    color: var(--aj-green);
}

.aj-kpi--red .aj-kpi__icon {
    background: var(--aj-red-50);
    color: var(--aj-red);
}

.aj-kpi--neutral .aj-kpi__icon {
    background: #eef1f6;
    color: var(--aj-muted);
}

.aj-kpi--navy .aj-kpi__icon {
    background: var(--aj-navy);
    color: var(--aj-yellow);
}

.aj-kpi__label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--aj-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    line-height: 1.35;
}

.aj-kpi__value {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--aj-navy);
    line-height: 1.15;
    margin-top: 2px;
    letter-spacing: -.02em;
}

.aj-kpi__sub {
    font-size: .78rem;
    color: var(--aj-muted);
    margin-top: 2px;
}

.aj-progress {
    display: block;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: var(--aj-blue-50);
    overflow: hidden;
}

.aj-progress > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--aj-blue), var(--aj-blue-400));
    transition: width .8s cubic-bezier(.2, .8, .2, 1);
}

.aj-progress--green > span {
    background: linear-gradient(90deg, #1e7b4b, #35a56c);
}

.aj-progress--gold > span {
    background: linear-gradient(90deg, #f2b600, var(--aj-yellow));
}

.aj-progress--amber > span {
    background: linear-gradient(90deg, #e09b00, #f5c542);
}

.aj-progress--red > span {
    background: var(--aj-red);
}

/* ============================================================== Tables */

.aj-tablewrap {
    width: 100%;
    overflow-x: auto;
}

.aj-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}

.aj-table th {
    padding: 10px 14px;
    text-align: left;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--aj-muted);
    border-bottom: 1px solid var(--aj-border);
    white-space: nowrap;
    background: #fafbfd;
}

.aj-table td {
    padding: 11px 14px;
    border-bottom: 1px solid #eef1f6;
    vertical-align: middle;
}

.aj-table tbody tr:hover td {
    background: #fafbfd;
}

.aj-table tbody tr:last-child td {
    border-bottom: 0;
}

.aj-table small {
    font-size: .76rem;
}

.aj-table .aj-input {
    min-height: 38px;
    padding: 7px 10px;
}

.aj-card__body > .aj-tablewrap {
    margin: 0 -22px -22px;
    width: calc(100% + 44px);
}

.aj-card > .aj-card__body:first-child > .aj-tablewrap:first-child {
    margin-top: -18px;
}

.aj-card__head + .aj-card__body > .aj-tablewrap:first-child {
    margin-top: -4px;
}

.aj-card--flush .aj-card__body > .aj-tablewrap {
    margin: 0;
    width: 100%;
}

.aj-card__body > .aj-tablewrap + .aj-pager {
    margin: 22px -22px -22px;
}

.aj-card {
    overflow: hidden;
}

.aj-cell2 {
    display: grid;
    line-height: 1.35;
}

.aj-cell2 small {
    color: var(--aj-muted);
}

.aj-cellicon {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--aj-blue-50);
    color: var(--aj-blue);
}

.aj-cellprogress,
.aj-cellbar {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 150px;
}

.aj-cellprogress > span:last-child,
.aj-cellbar > span:last-child {
    font-size: .8rem;
    font-weight: 700;
    color: var(--aj-navy);
    min-width: 36px;
}

.aj-rowactions {
    display: flex;
    gap: 2px;
    justify-content: flex-end;
}

.aj-person {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit !important;
}

.aj-person span:last-child {
    display: grid;
    line-height: 1.3;
}

.aj-person strong {
    color: var(--aj-navy);
}

.aj-person small {
    color: var(--aj-muted);
}

.aj-kvs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.aj-kv {
    display: inline-flex;
    gap: 4px;
    padding: 1px 7px;
    border-radius: 6px;
    background: #f1f3f7;
    font-size: .74rem;
    max-width: 360px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aj-kv b {
    color: var(--aj-muted);
    font-weight: 700;
}

/* ============================================================== Empty, loading, toasts */

.aj-empty {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 34px 20px;
    text-align: center;
}

.aj-empty > .aj-i {
    width: 52px;
    height: 52px;
    padding: 13px;
    border-radius: 50%;
    background: var(--aj-blue-50);
    color: var(--aj-blue);
    margin-bottom: 6px;
}

.aj-empty__title {
    font-weight: 800;
    color: var(--aj-navy);
}

.aj-empty__text {
    font-size: .88rem;
    color: var(--aj-muted);
    max-width: 420px;
}

.aj-loading {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 80px 20px;
    color: var(--aj-muted);
}

.aj-spinner {
    width: 38px;
    height: 38px;
    border: 3.5px solid var(--aj-blue-50);
    border-top-color: var(--aj-blue);
    border-radius: 50%;
    animation: aj-spin .8s linear infinite;
}

.aj-toasts {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 11000;
    display: grid;
    gap: 10px;
    width: min(420px, calc(100vw - 40px));
    font-family: var(--aj-font);
}

.aj-toast {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--aj-border);
    border-left: 4px solid var(--aj-blue);
    border-radius: 14px;
    box-shadow: var(--aj-shadow-lg);
    color: var(--aj-navy);
    font-size: .9rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .25s, transform .25s;
}

.aj-toast.is-in {
    opacity: 1;
    transform: none;
}

.aj-toast span {
    flex: 1;
}

.aj-toast a {
    font-weight: 800;
    color: var(--aj-blue);
}

.aj-toast button {
    border: 0;
    background: none;
    padding: 0;
    color: var(--aj-muted);
    cursor: pointer;
}

.aj-toast--success {
    border-left-color: var(--aj-green);
}

.aj-toast--success > .aj-i {
    color: var(--aj-green);
}

.aj-toast--error {
    border-left-color: var(--aj-red);
}

.aj-toast--error > .aj-i {
    color: var(--aj-red);
}

.aj-toast--warning {
    border-left-color: var(--aj-yellow);
}

/* ============================================================== Forms */

.aj-form {
    display: grid;
    gap: 16px;
    margin: 0;
}

.aj-form--compact {
    gap: 12px;
}

.aj-form--row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}

.aj-form--row .aj-field {
    flex: 1 1 160px;
}

.aj-form--inline {
    display: block;
}

.aj-field {
    display: grid;
    gap: 6px;
    align-content: start;
    min-width: 0;
    margin: 0;
}

.aj-field > label,
.aj-field legend,
.aj-field__lbl {
    font-size: .84rem;
    font-weight: 700;
    color: var(--aj-navy);
    padding: 0;
}

.aj-field__lbl {
    font-size: .74rem;
    color: var(--aj-muted);
}

.aj-field__labelrow {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.aj-field__labelrow label {
    font-size: .84rem;
    font-weight: 700;
    color: var(--aj-navy);
}

.aj-field__labelrow a {
    font-size: .82rem;
    font-weight: 600;
}

.aj-input {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    border: 1.5px solid var(--aj-border-2);
    border-radius: 12px;
    background: #fff;
    color: var(--aj-text);
    font-size: .95rem;
    line-height: 1.4;
    transition: border-color .15s, box-shadow .15s;
}

.aj-input::placeholder {
    color: #9aa3b2;
}

.aj-input:hover {
    border-color: #aab7d0;
}

.aj-input:focus {
    outline: none;
    border-color: var(--aj-blue);
    box-shadow: 0 0 0 4px rgba(0, 51, 160, .12);
}

.aj-input[readonly],
.aj-field--readonly .aj-input {
    background: #f4f6fa;
    color: var(--aj-muted);
}

.aj-input.is-valid {
    border-color: #7cc49b;
}

.aj-textarea {
    min-height: 0;
    resize: vertical;
}

.aj-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23001C58' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}

.aj-select--sm {
    min-height: 32px;
    padding: 4px 30px 4px 10px;
    font-size: .8rem;
    border-radius: 9px;
    background-position: right 8px center;
    background-size: 14px;
}

.aj-input--num {
    max-width: 120px;
}

.aj-formgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.aj-formgrid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aj-formgrid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.aj-span2 {
    grid-column: span 2;
}

.aj-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
}

.aj-subhead {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    padding-top: 16px;
    margin-top: 6px !important;
    border-top: 1px dashed var(--aj-border-2);
}

.aj-subhead .aj-i {
    color: var(--aj-blue);
}

.aj-switch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-weight: 600;
    color: var(--aj-navy);
    font-size: .92rem;
    position: relative;
}

.aj-switch input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.aj-switch__track {
    position: relative;
    flex: none;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: #cbd3e3;
    transition: background-color .2s;
}

.aj-switch__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
    transition: transform .2s;
}

.aj-switch input:checked + .aj-switch__track {
    background: var(--aj-blue);
}

.aj-switch input:checked + .aj-switch__track::after {
    transform: translateX(18px);
}

.aj-switch input:focus-visible + .aj-switch__track {
    box-shadow: var(--aj-focus);
}

.aj-switch--sm .aj-switch__track {
    width: 36px;
    height: 20px;
}

.aj-switch--sm .aj-switch__track::after {
    width: 14px;
    height: 14px;
}

.aj-switch--sm input:checked + .aj-switch__track::after {
    transform: translateX(16px);
}

.aj-field--toggle {
    gap: 4px;
}

.aj-field--toggle .aj-help {
    padding-left: 56px;
}

.aj-check label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .88rem;
    color: var(--aj-text-2);
    cursor: pointer;
}

.aj-check input {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--aj-blue);
    flex: none;
}

.aj-iconpicker {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.aj-iconpicker legend {
    margin-bottom: 8px;
}

.aj-iconpicker__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    gap: 6px;
    max-height: 196px;
    overflow: auto;
    padding: 6px;
    border: 1.5px solid var(--aj-border);
    border-radius: 14px;
    background: #fafbfd;
}

.aj-iconpicker__grid label {
    position: relative;
    cursor: pointer;
}

.aj-iconpicker__grid input {
    position: absolute;
    opacity: 0;
}

.aj-iconpicker__grid span {
    display: grid;
    place-items: center;
    height: 42px;
    border-radius: 10px;
    color: var(--aj-text-2);
    border: 1.5px solid transparent;
    transition: background-color .15s;
}

.aj-iconpicker__grid span:hover {
    background: var(--aj-blue-50);
    color: var(--aj-blue);
}

.aj-iconpicker__grid input:checked + span {
    background: var(--aj-blue);
    color: #fff;
}

.aj-iconpicker__grid input:focus-visible + span {
    box-shadow: var(--aj-focus);
}

.aj-iconprev {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: var(--aj-blue-50);
    color: var(--aj-blue);
}

.aj-has-iconprev {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.aj-has-iconprev > label,
.aj-has-iconprev > .aj-help {
    flex: 1 0 100%;
}

.aj-has-iconprev > select {
    flex: 1;
    width: auto;
}

.aj-iconsel {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aj-drop {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 26px 18px;
    border: 2px dashed #b8c4dd;
    border-radius: 16px;
    background: #fafbfd;
    text-align: center;
    color: var(--aj-text-2);
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.aj-drop:hover,
.aj-drop.is-over {
    border-color: var(--aj-blue);
    background: var(--aj-blue-25);
}

.aj-drop.has-file {
    border-color: var(--aj-green);
    background: #f2faf5;
}

.aj-drop > .aj-i {
    width: 34px;
    height: 34px;
    color: var(--aj-blue);
}

.aj-drop strong {
    color: var(--aj-navy);
}

.aj-drop small,
.aj-drop span {
    font-size: .82rem;
}

.aj-drop em {
    font-style: normal;
    font-weight: 700;
    color: var(--aj-green);
}

.aj-drop input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.aj-password {
    position: relative;
}

.aj-password .aj-input {
    padding-right: 48px;
}

.aj-password__toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--aj-muted);
    cursor: pointer;
}

.aj-password__toggle:hover,
.aj-password__toggle.is-on {
    color: var(--aj-blue);
    background: var(--aj-blue-50);
}

.aj-pwrules {
    display: grid;
    gap: 4px;
    margin-top: 4px !important;
}

.aj-pwrules li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8rem;
    color: var(--aj-muted);
    transition: color .2s;
}

.aj-pwrules li .aj-i {
    color: #cbd3e3;
    transition: color .2s;
}

.aj-pwrules li.is-ok {
    color: var(--aj-green);
}

.aj-pwrules li.is-ok .aj-i {
    color: var(--aj-green);
}

.aj-segment {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: #eef1f6;
    margin-bottom: 20px;
}

.aj-segment__item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    color: var(--aj-text-2) !important;
    font-weight: 700;
    font-size: .88rem;
    text-decoration: none !important;
    transition: background-color .15s;
}

.aj-segment__item.is-active {
    background: #fff;
    color: var(--aj-blue) !important;
    box-shadow: var(--aj-shadow-sm);
}

/* ============================================================== Tabs, toolbars, chips, pager */

.aj-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--aj-border);
    overflow-x: auto;
}

.aj-tab {
    padding: 10px 16px;
    border-bottom: 3px solid transparent;
    color: var(--aj-text-2) !important;
    font-weight: 700;
    font-size: .9rem;
    white-space: nowrap;
    text-decoration: none !important;
    margin-bottom: -1px;
}

.aj-tab:hover {
    color: var(--aj-navy) !important;
}

.aj-tab.is-active {
    color: var(--aj-blue) !important;
    border-bottom-color: var(--aj-yellow);
}

.aj-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.aj-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.aj-filters .aj-input {
    min-height: 40px;
    width: auto;
    min-width: 200px;
}

.aj-search {
    position: relative;
}

.aj-search > .aj-i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--aj-muted);
}

.aj-search .aj-input {
    padding-left: 38px;
    min-width: 260px;
}

.aj-statuschips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.aj-statuschip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--aj-border);
    color: var(--aj-text-2) !important;
    font-size: .84rem;
    font-weight: 700;
    text-decoration: none !important;
}

.aj-statuschip b {
    padding: 0 7px;
    border-radius: 999px;
    background: #eef1f6;
    font-size: .74rem;
}

.aj-statuschip:hover {
    border-color: var(--aj-blue);
}

.aj-statuschip.is-active {
    background: var(--aj-navy);
    border-color: var(--aj-navy);
    color: #fff !important;
}

.aj-statuschip.is-active b {
    background: rgba(255, 255, 255, .18);
}

.aj-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 22px;
    font-size: .84rem;
    color: var(--aj-muted);
    border-top: 1px solid #eef1f6;
}

.aj-pager div {
    display: flex;
    gap: 6px;
}

.aj-anchors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.aj-anchors a {
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--aj-border);
    background: #fff;
    font-weight: 700;
    font-size: .84rem;
    color: var(--aj-navy) !important;
    text-decoration: none !important;
}

.aj-anchors a:hover {
    border-color: var(--aj-blue);
}

/* ============================================================== Charts */

.aj-bars {
    display: grid;
    gap: 12px;
}

.aj-bars__row {
    display: grid;
    grid-template-columns: minmax(110px, 38%) 1fr auto;
    align-items: center;
    gap: 12px;
    font-size: .86rem;
}

.aj-bars__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--aj-text-2);
    font-weight: 600;
}

.aj-bars__track {
    height: 10px;
    border-radius: 999px;
    background: #eef1f6;
    overflow: hidden;
}

.aj-bars__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--aj-blue);
}

.aj-bars__fill--gold {
    background: var(--aj-yellow);
}

.aj-bars__fill--red {
    background: #e05252;
}

.aj-bars__fill--amber {
    background: #f0b429;
}

.aj-bars__fill--green {
    background: var(--aj-green);
}

.aj-bars__value {
    font-weight: 800;
    color: var(--aj-navy);
    white-space: nowrap;
    font-size: .84rem;
}

.aj-bars__value small {
    font-weight: 600;
    color: var(--aj-muted);
}

.aj-funnel {
    display: grid;
    gap: 10px;
}

.aj-funnel__step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    align-items: center;
    gap: 14px;
}

.aj-funnel__bar {
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--aj-navy), var(--aj-blue));
    display: flex;
    align-items: center;
    padding: 0 12px;
    color: #fff;
    font-weight: 800;
    font-size: .9rem;
    min-width: 52px;
    transition: width .8s;
}

.aj-funnel__step:nth-child(n+4) .aj-funnel__bar {
    background: linear-gradient(90deg, var(--aj-blue), var(--aj-blue-400));
}

.aj-funnel__meta {
    display: grid;
    line-height: 1.3;
}

.aj-funnel__meta strong {
    font-size: .86rem;
    color: var(--aj-navy);
}

.aj-funnel__meta small {
    font-size: .75rem;
    color: var(--aj-muted);
}

.aj-mini3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.aj-mini3 div {
    display: grid;
    padding: 12px 8px;
    border-radius: 12px;
    background: #f7f8fb;
    text-align: center;
}

.aj-mini3 strong {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--aj-navy);
}

.aj-mini3 span {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--aj-muted);
}

/* ============================================================== Avatar, menu, dialogs */

.aj-avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--aj-blue);
    color: #fff;
    font-weight: 800;
    font-size: .88rem;
    letter-spacing: .02em;
}

.aj-avatar--sm {
    width: 32px;
    height: 32px;
    font-size: .74rem;
}

.aj-avatar--lg {
    width: 52px;
    height: 52px;
    font-size: 1.05rem;
    background: linear-gradient(135deg, var(--aj-blue), var(--aj-navy));
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--aj-yellow);
}

.aj-menu {
    position: relative;
}

.aj-menu summary {
    list-style: none;
    cursor: pointer;
}

.aj-menu summary::-webkit-details-marker {
    display: none;
}

.aj-menu summary.aj-avatar {
    background: var(--aj-blue-50);
    color: var(--aj-blue);
    transition: box-shadow .15s;
}

.aj-menu[open] summary.aj-avatar,
.aj-menu summary.aj-avatar:hover {
    box-shadow: 0 0 0 3px var(--aj-yellow);
}

.aj-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 80;
    min-width: 260px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--aj-border);
    border-radius: 16px;
    box-shadow: var(--aj-shadow-lg);
}

.aj-menu__head {
    display: grid;
    padding: 10px 12px 12px;
    margin-bottom: 6px;
    border-bottom: 1px solid #eef1f6;
}

.aj-menu__head strong {
    color: var(--aj-navy);
}

.aj-menu__head span {
    font-size: .8rem;
    color: var(--aj-muted);
    word-break: break-all;
}

.aj-menu__panel a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--aj-navy) !important;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none !important;
}

.aj-menu__panel a:hover {
    background: var(--aj-blue-25);
}

.aj-menu__panel a .aj-i {
    color: var(--aj-blue);
}

.aj-dialog {
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 0;
    border-radius: 22px;
    box-shadow: var(--aj-shadow-lg);
    color: var(--aj-text);
    font-family: var(--aj-font);
    overflow: auto;
}

.aj-dialog::backdrop {
    background: rgba(0, 20, 70, .5);
    backdrop-filter: blur(3px);
}

.aj-dialog__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--aj-border);
}

.aj-dialog__head h2 {
    font-size: 1.15rem;
}

.aj-dialog > form {
    padding: 22px;
}

.aj-dialog--confirm {
    width: min(440px, calc(100vw - 32px));
}

.aj-confirm {
    display: grid;
    justify-items: center;
    gap: 14px;
    padding: 28px 26px 22px;
    text-align: center;
}

.aj-confirm p {
    font-size: 1rem;
    color: var(--aj-navy);
    font-weight: 600;
}

.aj-confirm__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--aj-blue-50);
    color: var(--aj-blue);
}

.aj-confirm__icon .aj-i {
    width: 28px;
    height: 28px;
}

.aj-confirm__icon.is-danger {
    background: var(--aj-red-50);
    color: var(--aj-red);
}

.aj-confirm .aj-form__actions {
    justify-content: center;
    width: 100%;
}

.aj-confirm .aj-btn {
    min-width: 130px;
}

/* ============================================================== Medals (badges and levels) */

.aj-medal {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #fff;
    background: radial-gradient(circle at 32% 26%, #4a78dc 0, var(--aj-blue) 52%, var(--aj-navy) 100%);
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .28), 0 4px 10px rgba(0, 51, 160, .22);
}

.aj-medal .aj-i {
    width: 46%;
    height: 46%;
    vertical-align: 0;
}

.aj-medal--gold {
    color: var(--aj-navy);
    background: radial-gradient(circle at 32% 26%, #fff1a6 0, var(--aj-yellow) 50%, #e3a500 100%);
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .5), 0 4px 12px rgba(227, 165, 0, .35);
}

.aj-medal--navy {
    color: var(--aj-yellow);
    background: radial-gradient(circle at 32% 26%, #1f3f86 0, var(--aj-navy) 60%, #000c2b 100%);
}

.aj-medal--green {
    background: radial-gradient(circle at 32% 26%, #4cbb82 0, var(--aj-green) 60%, #12502f 100%);
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .28), 0 4px 10px rgba(30, 123, 75, .25);
}

.aj-medal--locked {
    color: #9aa3b2;
    background: #e8ecf2;
    box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 3px #d9dee7;
}

.aj-medal--ghost {
    color: var(--aj-muted);
    background: #fff;
    box-shadow: inset 0 0 0 2px var(--aj-border-2);
}

.aj-medal--xs {
    width: 26px;
    height: 26px;
}

.aj-medal--sm {
    width: 36px;
    height: 36px;
}

.aj-medal--lg {
    width: 68px;
    height: 68px;
}

.aj-medal--xl {
    width: 116px;
    height: 116px;
}

.aj-medal--xl::after {
    content: "";
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 3px solid rgba(255, 205, 0, .45);
}

.aj-medal--xl.aj-medal--blue::after {
    border-color: rgba(0, 51, 160, .2);
}

.aj-medal--xl.aj-medal--locked::after {
    border-color: #e1e6ef;
}

/* ============================================================== Public pages (login, activation) */

.aj-auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(380px, 44%) 1fr;
    background: #fff;
}

.aj-auth__brand {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 56px 56px 48px;
    color: #fff;
    background:
        radial-gradient(circle at 18% 12%, rgba(61, 107, 209, .55) 0, rgba(61, 107, 209, 0) 46%),
        radial-gradient(circle at 92% 78%, rgba(255, 205, 0, .16) 0, rgba(255, 205, 0, 0) 40%),
        linear-gradient(160deg, var(--aj-blue) 0%, var(--aj-navy) 62%, var(--aj-navy-900) 100%);
}

.aj-auth__brand::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, #000 0, transparent 75%);
    -webkit-mask-image: linear-gradient(180deg, #000 0, transparent 75%);
}

.aj-auth__road {
    position: absolute;
    left: -20%;
    right: -20%;
    top: 30%;
    height: 96px;
    background: rgba(0, 12, 43, .55);
    transform: rotate(-11deg);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .04);
}

.aj-auth__road::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 5px;
    margin-top: -2px;
    background: repeating-linear-gradient(90deg, var(--aj-yellow) 0 34px, transparent 34px 62px);
    animation: aj-road 3.2s linear infinite;
}

.aj-auth__brandinner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 480px;
}

.aj-auth__platform {
    font-size: clamp(2.2rem, 3.6vw, 3.1rem);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -.02em;
}

.aj-auth__tagline {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--aj-yellow);
}

.aj-auth__features {
    display: grid;
    gap: 12px;
    margin-top: 16px !important;
}

.aj-auth__features li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .95rem;
    color: rgba(255, 255, 255, .9);
}

.aj-auth__features .aj-i {
    width: 38px;
    height: 38px;
    padding: 9px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .1);
    color: var(--aj-yellow);
}

.aj-auth__argo {
    align-self: flex-end;
    width: 150px;
    height: auto;
    margin-top: -40px;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .25));
}

.aj-auth__main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px 24px;
}

.aj-auth__card {
    width: 100%;
    max-width: 440px;
    margin: auto 0;
}

.aj-auth__logo {
    min-height: 56px;
    display: flex;
    align-items: center;
}

.aj-auth__logo .aj-logo {
    max-height: 72px;
    max-width: 280px;
    width: auto;
}

.aj-wordmark {
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--aj-blue);
    letter-spacing: -.01em;
}

.aj-auth__title {
    font-size: 1.85rem;
    margin: 26px 0 8px !important;
}

.aj-auth__subtitle {
    color: var(--aj-text-2);
    margin-bottom: 22px !important;
    font-size: 1rem;
}

.aj-auth__card .aj-alert {
    margin-bottom: 16px;
}

.aj-auth__note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 22px !important;
    font-size: .8rem;
    color: var(--aj-muted);
}

.aj-auth__note .aj-i {
    color: var(--aj-green);
    margin-top: 1px;
}

.aj-auth__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    max-width: 440px;
    margin-top: 36px;
    padding-top: 18px;
    border-top: 1px solid #eef1f6;
    font-size: .78rem;
    color: var(--aj-muted);
}

.aj-auth__footer div {
    display: flex;
    gap: 8px;
}

/* Sign-in pages with a background image (plugin setting or site theme): glass card on the right. */
.aj-auth--photo {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 100vh;
    padding: clamp(20px, 4vh, 48px) clamp(16px, 5.5vw, 104px);
    background: var(--aj-navy-900);
}

.aj-auth__photo {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: var(--aj-navy-900);
    background-position: 60% 50%;
    background-repeat: no-repeat;
    background-size: cover;
}

.aj-auth--photo .aj-auth__main {
    width: 100%;
    max-width: 470px;
    padding: 0;
}

.aj-auth--photo .aj-auth__card {
    max-width: none;
    margin: 0;
    padding: 34px 38px 22px;
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 30px;
    background: linear-gradient(165deg, rgba(255, 255, 255, .9) 0%, rgba(230, 236, 249, .84) 100%);
    box-shadow: 0 30px 80px rgba(0, 20, 60, .38), inset 0 1px 0 rgba(255, 255, 255, .9);
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
}

.aj-auth--photo .aj-auth__logo {
    justify-content: center;
}

.aj-auth--photo .aj-auth__logo .aj-logo {
    max-height: 92px;
    max-width: 250px;
}

.aj-auth--photo .aj-auth__title {
    margin: 18px 0 6px !important;
    text-align: center;
    color: var(--aj-blue);
}

.aj-auth--photo .aj-auth__title::after {
    content: "";
    display: block;
    width: 116px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(255, 205, 0, 0), var(--aj-yellow) 18%, var(--aj-yellow) 82%, rgba(255, 205, 0, 0));
}

.aj-auth--photo .aj-auth__subtitle {
    margin-bottom: 20px !important;
    text-align: center;
}

.aj-auth--photo .aj-btn--primary {
    border: 1px solid rgba(255, 255, 255, .65);
    background: linear-gradient(180deg, #0752b3 0%, #00266f 100%);
    box-shadow: 0 5px 0 0 var(--aj-yellow), 0 11px 22px rgba(0, 38, 111, .22);
}

.aj-auth--photo .aj-btn--primary:hover {
    background: linear-gradient(180deg, #0a5fcc 0%, #002d82 100%);
}

.aj-auth--photo .aj-btn--primary:active {
    transform: translateY(3px);
    box-shadow: 0 2px 0 0 var(--aj-yellow), 0 6px 14px rgba(0, 38, 111, .2);
}

.aj-auth--photo .aj-auth__footer {
    max-width: none;
    margin-top: 24px;
    padding-top: 16px;
    border-top-color: rgba(0, 51, 160, .12);
    color: #5b6478;
}

/* Preview of the sign-in background in the settings. */
.aj-bgprev {
    position: relative;
    flex-shrink: 0;
    width: 200px;
    height: 112px;
    overflow: hidden;
    border: 1px solid var(--aj-border);
    border-radius: 14px;
    background: linear-gradient(160deg, var(--aj-blue) 0%, var(--aj-navy-900) 100%);
    background-position: 60% 50%;
    background-size: cover;
}

.aj-bgprev span {
    position: absolute;
    top: 16%;
    right: 9%;
    bottom: 16%;
    width: 27%;
    border-radius: 7px;
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 4px 12px rgba(0, 20, 60, .3);
}

.aj-mailsent {
    display: grid;
    place-items: center;
    width: 76px;
    height: 76px;
    margin: 6px auto 18px;
    border-radius: 50%;
    background: var(--aj-green-50);
    color: var(--aj-green);
}

.aj-mailsent .aj-i {
    width: 36px;
    height: 36px;
}

/* ============================================================== Learner application: header */

.aj-top {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    border-bottom: 1px solid var(--aj-border);
}

.aj-top__inner {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 1360px;
    height: var(--aj-top);
    margin: 0 auto;
    padding: 0 24px;
}

.aj-top__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    color: inherit !important;
    text-decoration: none !important;
}

.aj-top__logo {
    max-height: 44px;
    max-width: 170px;
    width: auto;
}

.aj-top__name {
    display: grid;
    line-height: 1.15;
}

/* The uploaded logo already carries the brand: the name block is shown only with the default mark. */
.aj-top__brand.has-logo .aj-top__name {
    display: none;
}

.aj-top__mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--aj-blue), var(--aj-navy));
    color: var(--aj-yellow);
    box-shadow: 0 4px 10px rgba(0, 51, 160, .25);
}

.aj-top__mark .aj-i {
    width: 22px;
    height: 22px;
}

.aj-top__name strong {
    color: var(--aj-navy);
    font-weight: 800;
    font-size: .98rem;
    white-space: nowrap;
}

.aj-top__name small {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--aj-muted);
}

.aj-nav {
    display: flex;
    gap: 2px;
    flex: 1;
    justify-content: center;
}

.aj-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border-radius: 999px;
    color: var(--aj-text-2) !important;
    font-weight: 700;
    font-size: .88rem;
    white-space: nowrap;
    text-decoration: none !important;
    transition: background-color .15s, color .15s;
}

.aj-nav__link:hover {
    background: #f0f3f9;
    color: var(--aj-navy) !important;
}

.aj-nav__link.is-active {
    background: var(--aj-blue-50);
    color: var(--aj-blue) !important;
}

.aj-top__stats {
    display: flex;
    gap: 8px;
}

.aj-xppill,
.aj-levelchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: .84rem;
    font-weight: 800;
    white-space: nowrap;
}

.aj-xppill {
    background: var(--aj-yellow);
    color: var(--aj-navy);
}

.aj-levelchip {
    background: var(--aj-navy);
    color: #fff;
}

.aj-levelchip .aj-i {
    color: var(--aj-yellow);
}

.aj-main {
    min-height: calc(100vh - var(--aj-top));
    padding: 28px 0 72px;
    outline: none;
}

.aj-container {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================== Learner application: shared */

.aj-sechead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.aj-sechead h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.aj-sechead h2 .aj-i {
    width: 28px;
    height: 28px;
    padding: 6px;
    border-radius: 50%;
    background: var(--aj-navy);
    color: var(--aj-yellow);
}

.aj-sechead > span {
    font-size: .84rem;
}

.aj-more {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: .84rem;
    font-weight: 700;
    white-space: nowrap;
}

.aj-pagehead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.aj-pagehead h1 {
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
    margin: 4px 0 6px;
}

.aj-pagehead p {
    color: var(--aj-text-2);
    max-width: 700px;
}

.aj-pagehead__side {
    min-width: 260px;
}

.aj-pagehead__art .aj-i {
    width: 84px;
    height: 84px;
    padding: 20px;
    border-radius: 26px;
    background: var(--aj-navy);
    color: var(--aj-yellow);
    transform: rotate(-6deg);
}

.aj-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

.aj-hero h1 {
    font-size: clamp(1.7rem, 2.6vw, 2.25rem);
    margin: 6px 0 4px;
}

.aj-hero p {
    color: var(--aj-text-2);
}

.aj-hero__stats {
    display: flex;
    gap: 10px;
}

.aj-hero__stats div {
    display: grid;
    min-width: 96px;
    padding: 10px 16px;
    background: #fff;
    border: 1px solid var(--aj-border);
    border-radius: 16px;
    text-align: center;
    box-shadow: var(--aj-shadow-sm);
}

.aj-hero__stats strong {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--aj-navy);
    line-height: 1.2;
}

.aj-hero__stats span {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--aj-muted);
}

.aj-bubble {
    position: relative;
    padding: 12px 16px;
    border-radius: 18px 18px 18px 4px;
    background: var(--aj-blue-25);
    border: 1px solid #dce4f5;
    color: var(--aj-navy);
}

.aj-bubble strong {
    display: block;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--aj-blue);
    margin-bottom: 2px;
}

.aj-bubble--light {
    background: #fff;
    border-color: #fff;
    color: var(--aj-text);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.aj-bubble--light p {
    font-size: .92rem;
    line-height: 1.5;
    color: var(--aj-navy);
}

.aj-bubble--light a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    font-weight: 800;
    font-size: .86rem;
}

.aj-type--checkpoint {
    background: var(--aj-green-50);
    color: var(--aj-green);
}

.aj-type--content {
    background: var(--aj-blue-50);
    color: var(--aj-blue);
}

.aj-type--game {
    background: var(--aj-yellow);
    color: var(--aj-navy);
}

/* ============================================================== Dashboard */

.aj-dash__grid {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr) 316px;
    gap: 22px;
    align-items: start;
}

.aj-dash__left,
.aj-dash__center,
.aj-dash__right {
    display: grid;
    gap: 22px;
    min-width: 0;
}

.aj-dash__levels {
    grid-column: 1 / -1;
}

.aj-profile__tag {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px;
    background: var(--aj-navy);
    color: #fff;
    font-weight: 700;
    font-style: italic;
}

.aj-profile__tag .aj-i {
    color: var(--aj-yellow);
}

.aj-profile__who {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
}

.aj-profile__who div {
    display: grid;
    line-height: 1.3;
    min-width: 0;
}

.aj-profile__who strong {
    color: var(--aj-navy);
    font-size: 1rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.aj-profile__who small {
    color: var(--aj-muted);
    font-size: .8rem;
}

.aj-profile__level,
.aj-profile__completion {
    display: grid;
    gap: 6px;
    padding: 14px 0;
    border-top: 1px dashed var(--aj-border-2);
}

.aj-profile__levelname {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.aj-profile__levelname strong {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--aj-navy);
}

.aj-profile__levelname > span:last-child {
    color: var(--aj-blue);
    font-weight: 800;
}

.aj-profile__bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.aj-profile__bar .aj-progress {
    height: 10px;
}

.aj-profile__bar strong {
    color: var(--aj-green);
    font-weight: 800;
    min-width: 42px;
    text-align: right;
}

.aj-profile__level small,
.aj-profile__completion small {
    font-size: .78rem;
}

.aj-profile__actions {
    display: grid;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px dashed var(--aj-border-2);
}

.aj-argo-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 18px 18px 0;
    overflow: hidden;
    border: 0;
    color: #fff;
    background:
        radial-gradient(circle at 85% 10%, rgba(61, 107, 209, .55), rgba(61, 107, 209, 0) 55%),
        linear-gradient(160deg, var(--aj-navy) 0, var(--aj-navy-900) 100%);
}

.aj-argo-card::before {
    content: "";
    position: absolute;
    left: -30px;
    right: -30px;
    bottom: 26px;
    height: 38px;
    background: rgba(0, 0, 0, .28);
    transform: rotate(-6deg);
}

.aj-argo-card::after {
    content: "";
    position: absolute;
    left: -30px;
    right: -30px;
    bottom: 44px;
    height: 3px;
    background: repeating-linear-gradient(90deg, var(--aj-yellow) 0 16px, transparent 16px 30px);
    transform: rotate(-6deg);
    opacity: .75;
}

.aj-argo-card .aj-bubble {
    position: relative;
    z-index: 1;
    order: -1;
    border-radius: 18px 18px 18px 4px;
}

.aj-argo-card .aj-bubble::before {
    content: "";
    position: absolute;
    left: 34px;
    bottom: -7px;
    width: 14px;
    height: 14px;
    background: #fff;
    transform: rotate(45deg);
    border-radius: 2px;
}

.aj-argo-card__img {
    position: relative;
    z-index: 1;
    width: 132px;
    height: auto;
    margin: 6px 0 -6px 4px;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .3));
}

.aj-msgcard {
    border-left: 4px solid var(--aj-border-2);
}

.aj-msgcard.is-unread {
    border-left-color: var(--aj-yellow);
}

.aj-msgcard .aj-label .aj-i {
    color: var(--aj-blue);
}

.aj-msgcard blockquote {
    margin: 4px 0 8px;
    font-style: italic;
    color: var(--aj-navy);
    font-weight: 600;
    line-height: 1.5;
}

.aj-msgcard__from {
    font-size: .8rem;
    color: var(--aj-muted);
    margin-bottom: 8px !important;
}

/* Road of the missions. */
.aj-road {
    --node: 58px;
    position: relative;
    display: flex;
    align-items: flex-start;
    padding: 4px 0 0;
}

.aj-road::before,
.aj-road::after {
    content: "";
    position: absolute;
    left: 7%;
    right: 7%;
    top: calc(30px + var(--node) / 2);
    border-radius: 999px;
}

.aj-road::before {
    height: 14px;
    margin-top: -7px;
    background: var(--aj-navy);
}

.aj-road::after {
    height: 3px;
    margin-top: -1.5px;
    background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .85) 0 14px, transparent 14px 26px);
}

.aj-road__stop {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.aj-road__status {
    height: 22px;
    margin-bottom: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: #eef1f6;
    color: var(--aj-muted);
    white-space: nowrap;
}

.aj-road__stop.is-completed .aj-road__status {
    background: var(--aj-green-50);
    color: var(--aj-green);
}

.aj-road__stop.is-current .aj-road__status {
    background: var(--aj-yellow);
    color: var(--aj-navy);
}

.aj-road__node {
    display: grid;
    place-items: center;
    width: var(--node);
    height: var(--node);
    border-radius: 50%;
    border: 4px solid #fff;
    background: #c3c9d3;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(0, 28, 88, .18);
    text-decoration: none !important;
    transition: transform .2s;
}

.aj-road__node:hover {
    transform: scale(1.06);
}

.aj-road__node .aj-i {
    width: 26px;
    height: 26px;
}

.aj-road__stop.is-completed .aj-road__node {
    background: var(--aj-green);
}

.aj-road__stop.is-current .aj-road__node {
    background: var(--aj-yellow);
    color: var(--aj-navy) !important;
    animation: aj-pulse 2.2s ease-out infinite;
}

.aj-road__stop.is-current .aj-road__node .aj-i {
    fill: var(--aj-navy);
}

.aj-road__stop.is-soon .aj-road__node {
    background: var(--aj-blue-50);
    color: var(--aj-blue) !important;
}

.aj-road__code {
    margin-top: 10px;
    font-size: .74rem;
    font-weight: 700;
    color: var(--aj-muted);
}

.aj-road__title {
    font-size: .98rem;
    font-weight: 800;
    color: var(--aj-navy);
    line-height: 1.25;
    padding: 0 6px;
}

.aj-road__stop.is-locked .aj-road__title,
.aj-road__stop.is-soon .aj-road__title {
    color: var(--aj-muted);
}

.aj-road__gate {
    position: relative;
    z-index: 1;
    flex: none;
    margin-top: calc(30px + var(--node) / 2 - 14px);
}

.aj-road__gate span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 800;
    white-space: nowrap;
    background: #fff;
    color: var(--aj-navy);
    border: 2px solid var(--aj-navy);
}

.aj-road__gate.is-passed span {
    background: var(--aj-green-50);
    border-color: var(--aj-green);
    color: var(--aj-green);
}

.aj-road__gate.is-next span {
    background: var(--aj-yellow);
    border-color: var(--aj-yellow);
}

.aj-nextstop {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
    padding: 16px 18px;
    border-radius: 18px;
    background: linear-gradient(100deg, var(--aj-yellow-50) 0, #fff 70%);
    border: 1px solid #f3e3a0;
}

.aj-nextstop > div {
    flex: 1;
    min-width: 0;
}

.aj-nextstop__icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex: none;
    border-radius: 15px;
}

.aj-nextstop__icon .aj-i {
    width: 24px;
    height: 24px;
}

.aj-nextstop h3 {
    font-size: 1.12rem;
    margin: 2px 0;
}

.aj-nextstop .aj-eyebrow {
    line-height: 1.4;
}

.aj-nextstop__meta {
    font-size: .84rem;
    color: var(--aj-text-2);
}

.aj-nextstop__meta strong {
    color: var(--aj-navy);
}

.aj-nextstop--done,
.aj-nextstop--soon {
    background: linear-gradient(100deg, var(--aj-blue-25) 0, #fff 70%);
    border-color: #dce4f5;
}

.aj-nextstop--done p:not(.aj-eyebrow),
.aj-nextstop--soon p:not(.aj-eyebrow) {
    font-size: .88rem;
    color: var(--aj-text-2);
}

.aj-areacards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.aj-areacard {
    display: block;
    padding: 14px 16px 16px;
    border: 1.5px solid var(--aj-border);
    border-radius: 16px;
    background: #fff;
    color: var(--aj-text) !important;
    text-decoration: none !important;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.aj-areacard:hover {
    transform: translateY(-2px);
    box-shadow: var(--aj-shadow);
}

.aj-areacard header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.aj-areacard header strong {
    color: var(--aj-navy);
    font-size: .98rem;
    font-weight: 800;
}

.aj-areacard header .aj-i {
    width: 22px;
    height: 22px;
}

.aj-areacard ul {
    display: grid;
    gap: 6px;
}

.aj-areacard li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: .84rem;
    line-height: 1.35;
}

.aj-areacard li .aj-i {
    width: 15px;
    height: 15px;
    margin-top: 2px;
    color: #b8c1cf;
}

.aj-areacard li.is-done .aj-i {
    color: var(--aj-green);
}

.aj-areacard.is-current {
    border-color: var(--aj-yellow);
    box-shadow: 0 0 0 3px rgba(255, 205, 0, .22);
}

.aj-areacard.is-completed {
    border-color: #c4e5d1;
}

.aj-areacard.is-locked {
    border-style: dashed;
    border-color: #c9cfda;
    background: #fafbfc;
    color: var(--aj-muted) !important;
}

.aj-areacard.is-locked header strong {
    color: var(--aj-muted);
}

.aj-libbanner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border-radius: var(--aj-radius);
    color: #fff !important;
    text-decoration: none !important;
    background:
        radial-gradient(circle at 90% 20%, rgba(255, 205, 0, .18), rgba(255, 205, 0, 0) 45%),
        linear-gradient(120deg, var(--aj-navy), #0a2b78);
    box-shadow: var(--aj-shadow);
    transition: transform .2s;
}

.aj-libbanner:hover {
    transform: translateY(-2px);
}

.aj-libbanner__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    flex: none;
    border-radius: 16px;
    background: var(--aj-yellow);
    color: var(--aj-navy);
}

.aj-libbanner__icon .aj-i {
    width: 28px;
    height: 28px;
}

.aj-libbanner > span:nth-child(2) {
    display: grid;
    gap: 2px;
}

.aj-libbanner strong {
    color: var(--aj-yellow);
    font-weight: 800;
    font-size: 1rem;
}

.aj-libbanner > span span {
    color: rgba(255, 255, 255, .88);
    font-size: .9rem;
}

.aj-libbanner__go {
    margin-left: auto;
    width: 24px;
    height: 24px;
    color: var(--aj-yellow);
}

.aj-xprules {
    display: grid;
    gap: 6px;
    margin: 12px 0 4px !important;
}

.aj-xprules li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    background: #f4f6fa;
    font-size: .88rem;
}

.aj-xprules li .aj-i {
    color: var(--aj-blue);
}

.aj-xprules li span {
    flex: 1;
}

.aj-xprules li strong {
    color: var(--aj-blue);
    font-weight: 800;
    font-size: .84rem;
    white-space: nowrap;
}

.aj-engine__title {
    margin: 18px 0 10px !important;
    text-align: center;
    font-weight: 800;
    color: var(--aj-navy);
    font-size: .92rem;
}

.aj-engine {
    display: grid;
    justify-items: center;
}

.aj-engine__step {
    position: relative;
    width: 78%;
    padding: 6px 10px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: var(--aj-blue-50);
    color: var(--aj-navy);
    font-size: .84rem;
    font-weight: 700;
    text-align: center;
}

.aj-engine__step::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 100%;
    width: 2px;
    height: 14px;
    background: var(--aj-border-2);
}

.aj-engine__step:last-child {
    margin-bottom: 0;
}

.aj-engine__step:last-child::after {
    display: none;
}

.aj-engine__step--3 {
    background: var(--aj-navy);
    color: #fff;
}

.aj-engine__step--4 {
    background: var(--aj-yellow);
    color: var(--aj-navy);
    font-weight: 800;
}

.aj-medalgrid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px 8px;
}

.aj-medalgrid li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-align: center;
    font-size: .66rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--aj-navy);
}

.aj-medalgrid li.is-locked {
    color: var(--aj-muted);
}

/* Levels ladder. */
.aj-ladder {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    align-items: end;
}

.aj-ladder__step {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 132px;
    padding: 14px 16px;
    border-radius: 18px;
    background: #f1f3f7;
    color: var(--aj-muted);
    position: relative;
}

.aj-ladder__step--1 {
    min-height: 156px;
}

.aj-ladder__step--2 {
    min-height: 180px;
}

.aj-ladder__step--3 {
    min-height: 204px;
}

.aj-ladder__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: auto;
    padding-bottom: 10px;
}

.aj-ladder__step strong {
    font-size: 1.08rem;
    font-weight: 800;
    color: inherit;
}

.aj-ladder__xp {
    font-size: .8rem;
    font-weight: 700;
}

.aj-ladder__step em {
    font-size: .78rem;
    opacity: .85;
    line-height: 1.35;
}

.aj-ladder__step.is-reached {
    background: #dce4f5;
    color: var(--aj-navy);
}

.aj-ladder__step.is-current {
    background: linear-gradient(160deg, var(--aj-blue) 0, var(--aj-navy) 100%);
    color: #fff;
    box-shadow: 0 12px 26px rgba(0, 51, 160, .28);
}

.aj-ladder__step.is-next {
    background: #fff;
    border: 2px dashed var(--aj-yellow);
    color: var(--aj-navy);
}

.aj-here {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--aj-yellow);
    color: var(--aj-navy);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .02em;
    white-space: nowrap;
}

.aj-ladder__missing {
    align-self: flex-start;
    margin-top: 6px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--aj-yellow-100);
    color: var(--aj-amber-text);
    font-size: .72rem;
    font-weight: 800;
}

.aj-ladder__badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 3px 10px 3px 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .7);
    color: var(--aj-navy);
    font-size: .7rem;
    font-weight: 800;
}

.aj-ladder__step.is-current .aj-ladder__badge {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

/* ============================================================== Missions page */

.aj-panel--road {
    margin-bottom: 22px;
    padding-bottom: 24px;
}

.aj-mlist {
    display: grid;
    gap: 0;
}

.aj-mcard2 {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
}

.aj-mcard2__rail {
    position: relative;
    display: flex;
    justify-content: center;
}

.aj-mcard2__rail::before {
    content: "";
    position: absolute;
    top: 30px;
    bottom: -30px;
    left: 50%;
    width: 4px;
    margin-left: -2px;
    background: repeating-linear-gradient(180deg, var(--aj-border-2) 0 8px, transparent 8px 14px);
}

.aj-mcard2:last-child .aj-mcard2__rail::before {
    display: none;
}

.aj-mcard2.is-completed .aj-mcard2__rail::before {
    background: var(--aj-green);
}

.aj-mcard2__node {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-top: 22px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: #c3c9d3;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 28, 88, .18);
}

.aj-mcard2.is-completed .aj-mcard2__node {
    background: var(--aj-green);
}

.aj-mcard2.is-current .aj-mcard2__node {
    background: var(--aj-yellow);
    color: var(--aj-navy);
}

.aj-mcard2.is-soon .aj-mcard2__node {
    background: var(--aj-blue-50);
    color: var(--aj-blue);
}

.aj-mcard2__body {
    margin-bottom: 18px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius);
    box-shadow: var(--aj-shadow);
}

.aj-mcard2.is-current .aj-mcard2__body {
    border: 2px solid var(--aj-yellow);
}

.aj-mcard2.is-locked .aj-mcard2__body,
.aj-mcard2.is-soon .aj-mcard2__body {
    background: #fafbfc;
    border-style: dashed;
    box-shadow: none;
}

.aj-mcard2__head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
}

.aj-mcard2__head h2 {
    font-size: 1.35rem;
    margin: 2px 0;
}

.aj-mcard2__head p:not(.aj-eyebrow) {
    color: var(--aj-text-2);
    font-size: .92rem;
}

.aj-mcard2__desc {
    margin-top: 12px !important;
    color: var(--aj-text-2);
    font-size: .92rem;
}

.aj-mcard2__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--aj-border-2);
}

.aj-mcard2__stats > div {
    display: grid;
    gap: 4px;
    align-content: start;
}

.aj-mcard2__stats small {
    font-size: .78rem;
    color: var(--aj-muted);
}

.aj-mcard2__stats strong {
    color: var(--aj-navy);
    font-weight: 800;
}

.aj-mcard2__lock {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px !important;
    font-weight: 700;
    font-size: .9rem;
    color: var(--aj-muted);
}

.aj-inline-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    font-size: .86rem;
    color: var(--aj-navy);
}

.aj-areasteps {
    display: grid;
    gap: 12px;
    margin-top: 18px !important;
}

.aj-areastep {
    padding: 14px 16px;
    border: 1px solid var(--aj-border);
    border-radius: 16px;
    background: #fff;
}

.aj-areastep.is-current {
    border-color: #f3dc7a;
    background: #fffdf4;
}

.aj-areastep.is-completed {
    border-color: #cbe8d6;
    background: #f7fcf9;
}

.aj-areastep.is-locked {
    background: #fafbfc;
}

.aj-areastep__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aj-areastep__head > div {
    display: grid;
    line-height: 1.3;
}

.aj-areastep__head strong {
    color: var(--aj-navy);
    font-weight: 800;
}

.aj-areastep__head small {
    color: var(--aj-muted);
    font-size: .78rem;
}

.aj-areastep__n {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: none;
    border-radius: 50%;
    background: var(--aj-blue-50);
    color: var(--aj-blue);
    font-weight: 800;
    font-size: .88rem;
}

.aj-areastep.is-completed .aj-areastep__n {
    background: var(--aj-green);
    color: #fff;
}

.aj-areastep.is-current .aj-areastep__n {
    background: var(--aj-yellow);
    color: var(--aj-navy);
}

.aj-areastep__badge {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: .76rem;
    font-weight: 700;
    color: var(--aj-muted);
}

.aj-areastep__badge.is-earned {
    color: var(--aj-navy);
}

.aj-areastep__lock {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px !important;
    font-size: .84rem;
    color: var(--aj-muted);
}

.aj-actlist {
    display: grid;
    gap: 6px;
    margin-top: 12px !important;
}

.aj-actrow {
    display: grid;
    grid-template-columns: 22px 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: #f6f8fb;
}

.aj-actrow > .aj-i {
    width: 20px;
    height: 20px;
}

.aj-actrow.is-current,
.aj-actrow.is-extra {
    background: var(--aj-yellow-50);
    box-shadow: inset 0 0 0 1.5px #f3dc7a;
}

.aj-actrow.is-locked {
    opacity: .62;
}

.aj-actrow__type {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #fff;
    color: var(--aj-blue);
}

.aj-actrow__type .aj-i {
    width: 17px;
    height: 17px;
}

.aj-actrow__title {
    display: grid;
    line-height: 1.3;
    min-width: 0;
}

.aj-actrow__title strong {
    color: var(--aj-navy);
    font-size: .9rem;
    font-weight: 700;
}

.aj-actrow__title small {
    font-size: .74rem;
    color: var(--aj-muted);
}

.aj-xpdone {
    font-size: .78rem;
    font-weight: 800;
    color: var(--aj-green);
    white-space: nowrap;
}

.aj-xpfut {
    font-size: .78rem;
    font-weight: 700;
    color: var(--aj-muted);
    white-space: nowrap;
}

/* ============================================================== Explore */

.aj-explore {
    margin-bottom: 26px;
}

.aj-explore__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.aj-explore__head h2 {
    font-size: 1.3rem;
    margin: 2px 0;
}

.aj-explore__head p:not(.aj-eyebrow) {
    color: var(--aj-text-2);
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.aj-explore__areas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.aj-xarea {
    padding: 18px;
    background: #fff;
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius);
    box-shadow: var(--aj-shadow-sm);
}

.aj-xarea > header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aj-xarea > header > div {
    flex: 1;
    min-width: 0;
}

.aj-xarea h3 {
    font-size: 1.02rem;
}

.aj-xarea small {
    color: var(--aj-muted);
    font-size: .78rem;
}

.aj-xarea > p {
    margin-top: 10px !important;
    font-size: .88rem;
    color: var(--aj-text-2);
}

.aj-xarea__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
    border-radius: 13px;
    background: var(--aj-blue-50);
    color: var(--aj-blue);
}

.aj-xarea.is-completed .aj-xarea__icon {
    background: var(--aj-green-50);
    color: var(--aj-green);
}

.aj-xarea.is-locked {
    opacity: .72;
}

.aj-explore.is-locked {
    padding: 18px 20px;
    border: 1.5px dashed #c9cfda;
    border-radius: var(--aj-radius);
    background: #fafbfc;
}

.aj-explore.is-locked .aj-explore__head {
    margin-bottom: 12px;
}

.aj-explore__peek {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.aj-explore__peek li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #eef1f6;
    color: var(--aj-muted);
    font-size: .82rem;
    font-weight: 600;
}

/* ============================================================== Library */

.aj-chipbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.aj-chipbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1.5px solid var(--aj-border);
    border-radius: 999px;
    background: #fff;
    color: var(--aj-text-2);
    font-weight: 700;
    font-size: .86rem;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.aj-chipbtn:hover {
    border-color: var(--aj-blue);
}

.aj-chipbtn b {
    padding: 0 7px;
    border-radius: 999px;
    background: #eef1f6;
    font-size: .74rem;
}

.aj-chipbtn.is-active {
    background: var(--aj-navy);
    border-color: var(--aj-navy);
    color: #fff;
}

.aj-chipbtn.is-active .aj-i {
    color: var(--aj-yellow);
}

.aj-chipbtn.is-active b {
    background: rgba(255, 255, 255, .18);
}

.aj-libgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.aj-libcard {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius);
    color: var(--aj-text) !important;
    text-decoration: none !important;
    box-shadow: var(--aj-shadow-sm);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.aj-libcard:hover {
    transform: translateY(-3px);
    box-shadow: var(--aj-shadow);
    border-color: #c9d4ea;
}

.aj-libcard__icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: var(--aj-blue-50);
    color: var(--aj-blue);
}

.aj-libcard__icon .aj-i {
    width: 24px;
    height: 24px;
}

.aj-cat--video {
    background: var(--aj-yellow);
    color: var(--aj-navy);
}

.aj-cat--faq {
    background: #e8eefc;
    color: #1d4fb8;
}

.aj-cat--benefits {
    background: var(--aj-yellow-50);
    color: var(--aj-amber-text);
}

.aj-cat--health {
    background: var(--aj-green-50);
    color: var(--aj-green);
}

.aj-libcard__body {
    display: grid;
    gap: 4px;
    align-content: start;
}

.aj-libcard__cat {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--aj-muted);
}

.aj-new {
    padding: 0 8px;
    border-radius: 999px;
    background: var(--aj-yellow);
    color: var(--aj-navy);
    letter-spacing: .04em;
}

.aj-libcard strong {
    color: var(--aj-navy);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.3;
}

.aj-libcard__desc {
    font-size: .86rem;
    color: var(--aj-text-2);
}

.aj-libcard__action {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-top: 12px;
    border-top: 1px solid #eef1f6;
    color: var(--aj-blue);
    font-weight: 800;
    font-size: .86rem;
}

/* ============================================================== Rewards */

.aj-levelhero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    margin-bottom: 22px;
    padding: 30px 34px;
    border-radius: 26px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 20%, rgba(61, 107, 209, .6), rgba(61, 107, 209, 0) 48%),
        radial-gradient(circle at 92% 90%, rgba(255, 205, 0, .18), rgba(255, 205, 0, 0) 40%),
        linear-gradient(120deg, var(--aj-navy), var(--aj-blue));
    box-shadow: 0 18px 40px rgba(0, 28, 88, .25);
}

.aj-levelhero h1 {
    color: #fff;
    font-size: clamp(1.9rem, 3vw, 2.5rem);
    margin: 4px 0;
}

.aj-levelhero__claim {
    color: var(--aj-yellow);
    font-style: italic;
    font-weight: 600;
    font-size: 1.05rem;
}

.aj-levelhero__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 520px;
    margin-top: 16px;
}

.aj-levelhero__bar .aj-progress {
    height: 10px;
    background: rgba(255, 255, 255, .18);
}

.aj-levelhero__bar span:last-child {
    font-size: .86rem;
    white-space: nowrap;
    opacity: .92;
}

.aj-levelhero__stats {
    display: flex;
    gap: 10px;
    margin: 0;
}

.aj-levelhero__stats div {
    min-width: 92px;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .1);
    text-align: center;
}

.aj-levelhero__stats dt {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    opacity: .8;
}

.aj-levelhero__stats dd {
    margin: 2px 0 0;
    font-size: 1.5rem;
    font-weight: 800;
}

.aj-grid2 {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 22px;
    margin-top: 22px;
    align-items: start;
}

.aj-grid2 > div {
    display: grid;
    gap: 22px;
}

.aj-badgegroup + .aj-badgegroup {
    margin-top: 22px;
}

.aj-badgegroup h3 {
    margin-bottom: 12px !important;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--aj-muted);
}

.aj-badgegroup ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: 12px;
}

.aj-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 18px 12px 16px;
    border: 1px solid var(--aj-border);
    border-radius: 18px;
    background: #f7f8fb;
    text-align: center;
}

.aj-badge.is-earned {
    background: #fff;
    border-color: #d6dff1;
    box-shadow: var(--aj-shadow-sm);
}

.aj-badge--mission.is-earned {
    background: linear-gradient(180deg, var(--aj-yellow-50), #fff 70%);
    border-color: #f3e3a0;
}

.aj-badge strong {
    margin-top: 4px;
    color: var(--aj-navy);
    font-size: .9rem;
    font-weight: 800;
    line-height: 1.25;
}

.aj-badge small {
    font-size: .72rem;
    color: var(--aj-muted);
}

.aj-badge p {
    font-size: .76rem;
    color: var(--aj-text-2);
    line-height: 1.4;
}

.aj-badge__state {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .72rem;
    font-weight: 800;
    color: var(--aj-muted);
}

.aj-badge.is-earned .aj-badge__state {
    color: var(--aj-green);
}

.aj-badge.is-locked strong {
    color: var(--aj-muted);
}

.aj-xplog {
    display: grid;
    gap: 6px;
    max-height: 520px;
    overflow: auto;
}

.aj-xplog li {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #f7f8fb;
}

.aj-xplog li > span:nth-child(2) {
    display: grid;
    line-height: 1.3;
    min-width: 0;
}

.aj-xplog strong {
    color: var(--aj-navy);
    font-size: .88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aj-xplog small {
    font-size: .74rem;
    color: var(--aj-muted);
}

.aj-xplog b {
    font-weight: 800;
    white-space: nowrap;
}

.aj-xplog__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: var(--aj-yellow);
    color: var(--aj-navy);
}

/* ============================================================== Player */

.aj-container--player {
    max-width: 1280px;
}

.aj-player {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 22px;
    align-items: start;
}

.aj-stage {
    padding: 22px 32px 28px;
    background: #fff;
    border: 1px solid var(--aj-border);
    border-radius: 24px;
    box-shadow: var(--aj-shadow);
    min-width: 0;
}

.aj-stage__crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 14px;
    margin-bottom: 22px;
    border-bottom: 1px dashed var(--aj-border-2);
    font-size: .82rem;
    font-weight: 600;
    color: var(--aj-muted);
}

.aj-stage__crumbs > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.aj-stage__crumbs > .aj-i {
    width: 14px;
    height: 14px;
}

.aj-stage__crumbs .aj-iconbtn {
    width: 32px;
    height: 32px;
    margin-left: -6px;
}

.aj-stage__pos {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--aj-blue-50);
    color: var(--aj-blue);
    font-weight: 800;
    white-space: nowrap;
}

.aj-readbanner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding: 10px 14px;
    border-radius: 12px;
    background: var(--aj-blue-25);
    border: 1px solid #dce4f5;
    color: var(--aj-blue);
    font-weight: 700;
    font-size: .88rem;
}

.aj-stage__head {
    margin-bottom: 20px;
}

.aj-stage__type {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.aj-stage__head .aj-chip {
    margin-left: 6px;
    vertical-align: 1px;
}

.aj-stage__head h1 {
    font-size: clamp(1.6rem, 2.6vw, 2.2rem);
    margin-top: 14px;
}

.aj-stage__sub {
    margin-top: 6px !important;
    font-size: 1.06rem;
    color: var(--aj-text-2);
}

.aj-stage__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px dashed var(--aj-border-2);
}

.aj-stage__foot > .aj-muted {
    flex: 1;
    font-size: .88rem;
}

.aj-argotip {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin: 4px 0 22px;
}

.aj-argotip img {
    width: 76px;
    height: auto;
    flex: none;
}

.aj-argotip .aj-bubble p {
    font-size: 1rem;
    line-height: 1.55;
}

.aj-checkpoint {
    padding: 6px 0 0;
}

.aj-checkpoint .aj-argotip {
    padding: 18px 20px;
    border-radius: 20px;
    background: linear-gradient(120deg, var(--aj-blue-25), #fff);
}

.aj-checkpoint .aj-argotip img {
    width: 120px;
}

.aj-checkpoint .aj-bubble {
    background: #fff;
}

.aj-prose {
    font-size: 1.02rem;
    line-height: 1.72;
    color: var(--aj-text);
}

.aj-prose p {
    margin: 0 0 14px;
}

.aj-prose strong {
    color: var(--aj-navy);
}

.aj-prose ul,
.aj-prose ol {
    margin: 0 0 14px;
    padding-left: 22px;
}

.aj-prose ul {
    list-style: disc;
}

.aj-prose ol {
    list-style: decimal;
}

.aj-prose li {
    margin-bottom: 6px;
}

.aj-prose h2,
.aj-prose h3 {
    margin: 22px 0 8px;
    font-size: 1.2rem;
}

.aj-prose img {
    border-radius: 14px;
    height: auto;
}

.aj-prose blockquote {
    margin: 0 0 14px;
    padding: 12px 16px;
    border-left: 4px solid var(--aj-yellow);
    border-radius: 0 12px 12px 0;
    background: var(--aj-yellow-50);
    color: var(--aj-navy);
}

.aj-prose--intro {
    margin-bottom: 18px;
}

.aj-tl {
    position: relative;
    margin: 10px 0 0 !important;
}

.aj-tl::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--aj-blue), var(--aj-yellow));
}

.aj-tl__item {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
    margin-bottom: 14px;
    animation: aj-fadeup .5s both;
    animation-delay: calc(var(--i, 0) * 70ms);
}

.aj-tl__dot {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid var(--aj-blue);
    color: var(--aj-blue);
}

.aj-tl__card {
    padding: 14px 18px;
    border-radius: 16px;
    background: #f7f8fb;
    border: 1px solid #eef1f6;
}

.aj-tl__label {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 12px;
    border-radius: 999px;
    background: var(--aj-navy);
    color: var(--aj-yellow);
    font-weight: 800;
    font-size: .82rem;
}

.aj-tl__card h3 {
    font-size: 1.04rem;
}

.aj-tl__card p {
    margin-top: 4px !important;
    font-size: .93rem;
    color: var(--aj-text-2);
    line-height: 1.6;
}

.aj-infocards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 14px;
    margin-top: 6px;
}

.aj-infocard {
    position: relative;
    padding: 20px 18px 18px;
    border: 1px solid var(--aj-border);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    animation: aj-fadeup .5s both;
    animation-delay: calc(var(--i, 0) * 80ms);
}

.aj-infocard::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--aj-blue), var(--aj-blue-400));
}

.aj-infocard:nth-child(even)::before {
    background: var(--aj-yellow);
}

.aj-infocard__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--aj-blue-50);
    color: var(--aj-blue);
    margin-bottom: 12px;
}

.aj-infocard h3 {
    font-size: 1.02rem;
    margin: 4px 0 6px;
}

.aj-infocard p {
    font-size: .9rem;
    color: var(--aj-text-2);
    line-height: 1.55;
}

.aj-locked {
    display: grid;
    justify-items: center;
    gap: 12px;
    max-width: 560px;
    margin: 30px auto;
    padding: 40px 28px;
    text-align: center;
}

.aj-locked > .aj-i {
    width: 56px;
    height: 56px;
    padding: 14px;
    border-radius: 50%;
    background: #eef1f6;
    color: var(--aj-muted);
}

.aj-locked h1 {
    font-size: 1.4rem;
}

.aj-locked p {
    color: var(--aj-text-2);
    margin-bottom: 8px !important;
}

/* Mini-dashboard. */
.aj-dock {
    position: sticky;
    top: calc(var(--aj-top) + 20px);
    display: grid;
    gap: 14px;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--aj-border);
    border-radius: 22px;
    box-shadow: var(--aj-shadow);
}

.aj-dock__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--aj-navy);
}

.aj-dock__title .aj-i {
    color: var(--aj-blue);
}

.aj-dock__xp {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 16px;
    background: linear-gradient(120deg, var(--aj-navy), var(--aj-blue));
    color: #fff;
}

.aj-dock__xp .aj-label {
    width: 100%;
    margin: 0;
    color: rgba(255, 255, 255, .75);
}

.aj-dock__xp strong {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    transition: color .2s;
}

.aj-dock__xp strong.is-counting {
    color: var(--aj-yellow);
}

.aj-dock__unit {
    font-weight: 800;
    color: var(--aj-yellow);
}

.aj-dock__level {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    background: var(--aj-yellow-50);
}

.aj-dock__level > div {
    display: grid;
}

.aj-dock__level .aj-label {
    margin: 0;
}

.aj-dock__level strong {
    color: var(--aj-navy);
    font-weight: 800;
    font-size: 1.05rem;
}

.aj-dock__next {
    display: grid;
    gap: 6px;
}

.aj-dock__next small {
    font-size: .8rem;
    color: var(--aj-text-2);
}

.aj-dock__mission {
    display: grid;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px dashed var(--aj-border-2);
}

.aj-dock__mission > .aj-label {
    justify-content: space-between;
    margin: 0;
    color: var(--aj-navy);
}

.aj-dock__mission > .aj-label b {
    color: var(--aj-blue);
}

.aj-dock__areas {
    display: grid;
    gap: 10px;
}

.aj-dock__area p {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .84rem;
    font-weight: 700;
    color: var(--aj-navy);
}

.aj-dock__area p .aj-i {
    width: 16px;
    height: 16px;
    color: var(--aj-blue);
}

.aj-dock__area p span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aj-dock__area p small {
    color: var(--aj-muted);
    font-weight: 700;
}

.aj-dock__area.is-completed p .aj-i {
    color: var(--aj-green);
}

.aj-dock__area.is-locked p {
    color: var(--aj-muted);
}

.aj-dock__area.is-locked p .aj-i {
    color: #b8c1cf;
}

.aj-dock__area ol {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px !important;
    padding-left: 24px !important;
}

.aj-dock__area ol li {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #dde2ea;
}

.aj-dock__area ol li.is-completed {
    background: var(--aj-green);
}

.aj-dock__area ol li.is-current {
    background: var(--aj-yellow);
    box-shadow: 0 0 0 3px rgba(255, 205, 0, .35);
}

.aj-dock__area ol li.is-extra {
    background: var(--aj-blue-50);
    box-shadow: inset 0 0 0 1.5px var(--aj-blue-400);
}

.aj-dock__area ol li.is-now {
    outline: 2px solid var(--aj-navy);
    outline-offset: 2px;
}

/* ============================================================== Games */

.aj-game {
    margin-top: 6px;
}

.aj-game__bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--aj-blue-25);
    border: 1px solid #dce4f5;
}

.aj-game__instr {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--aj-navy);
    font-weight: 600;
    font-size: .94rem;
}

.aj-game__instr .aj-i {
    color: var(--aj-blue);
    margin-top: 2px;
}

.aj-game__attempts {
    font-size: .78rem;
    font-weight: 700;
    color: var(--aj-muted);
    white-space: nowrap;
}

.aj-token {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 50px;
    padding: 10px 14px 10px 10px;
    border: 1.5px solid var(--aj-border-2);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 2px 0 #e1e6ef;
    color: var(--aj-navy);
    font-weight: 700;
    font-size: .92rem;
    line-height: 1.3;
    text-align: left;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    transition: border-color .15s, background-color .15s, box-shadow .15s, transform .15s, opacity .15s;
}

.aj-token:hover {
    border-color: var(--aj-blue);
}

.aj-token__grip {
    display: grid;
    place-items: center;
    color: #a9b2c2;
}

.aj-token__label {
    flex: 1;
    min-width: 0;
}

.aj-token__reveal {
    padding: 2px 9px;
    border-radius: 999px;
    background: #fff;
    color: var(--aj-green);
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}

.aj-token.is-selected {
    border-color: var(--aj-blue);
    background: var(--aj-blue-25);
    box-shadow: 0 0 0 3px rgba(0, 51, 160, .18);
    transform: translateY(-1px);
}

.aj-token.is-dragging {
    opacity: .3;
}

.aj-token.is-correct {
    border-color: #8fd0ac;
    background: #eef8f2;
    color: #14532d;
    box-shadow: none;
    cursor: default;
}

.aj-token.is-correct .aj-token__grip {
    color: var(--aj-green);
}

.aj-token.is-wrong {
    border-color: var(--aj-red);
    background: var(--aj-red-50);
    color: #7f1d1d;
    animation: aj-shake .45s;
}

.aj-token.was-wrong {
    border-style: dashed;
    border-color: #f2a7a4;
}

.aj-token.is-dropped {
    animation: aj-pop .3s;
}

.aj-dragghost {
    position: fixed !important;
    top: 0;
    left: 0;
    z-index: 12000;
    margin: 0;
    pointer-events: none;
    box-shadow: 0 18px 40px rgba(0, 28, 88, .28);
    border-color: var(--aj-blue);
    opacity: .96;
    font-family: var(--aj-font);
}

.aj-game.is-dragging,
.aj-game.is-dragging * {
    cursor: grabbing !important;
}

.aj-pool {
    padding: 14px;
    border: 2px dashed var(--aj-border-2);
    border-radius: 18px;
    background: #fafbfd;
    transition: border-color .15s, background-color .15s;
}

.aj-pool.is-over {
    border-color: var(--aj-blue);
    background: var(--aj-blue-25);
}

.aj-pool__label {
    margin-bottom: 10px !important;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--aj-muted);
}

.aj-pool__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
    min-height: 50px;
}

.aj-pool.is-empty {
    padding: 10px 14px;
}

.aj-pool.is-empty .aj-pool__items {
    min-height: 12px;
}

.aj-seq {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.aj-seq .aj-pool {
    position: sticky;
    top: calc(var(--aj-top) + 16px);
}

.aj-seq .aj-pool__items {
    grid-template-columns: 1fr;
}

.aj-seq__slots {
    position: relative;
    display: grid;
    gap: 10px;
}

.aj-seq__slots::before {
    content: "";
    position: absolute;
    left: 19px;
    top: 14px;
    bottom: 14px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, var(--aj-blue), var(--aj-yellow));
}

.aj-slot {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 54px;
}

.aj-slot__n {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--aj-navy);
    color: var(--aj-yellow);
    font-weight: 800;
    border: 3px solid #fff;
}

.aj-slot__target {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    min-height: 50px;
    padding: 0 14px;
    border: 2px dashed var(--aj-border-2);
    border-radius: 14px;
    background: #fafbfd;
    color: #9aa3b2;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}

.aj-slot > .aj-token {
    grid-column: 2;
    grid-row: 1;
    z-index: 2;
}

.aj-slot.is-over .aj-slot__target,
.aj-game.has-selection .aj-slot__target:hover {
    border-color: var(--aj-blue);
    background: var(--aj-blue-25);
    color: var(--aj-blue);
}

.aj-game.has-selection .aj-slot__target {
    border-color: #9db2e0;
}

.aj-cls {
    display: grid;
    grid-template-columns: minmax(220px, 290px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.aj-cls .aj-pool {
    position: sticky;
    top: calc(var(--aj-top) + 16px);
    max-height: calc(100vh - var(--aj-top) - 32px);
    overflow-y: auto;
}

.aj-cls .aj-pool__items {
    grid-template-columns: 1fr;
}

.aj-bins {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.aj-bin {
    display: flex;
    flex-direction: column;
    min-height: 210px;
    border: 2px solid var(--aj-border);
    border-radius: 18px;
    background: #fff;
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}

.aj-bin > header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: var(--aj-blue-50);
}

.aj-bin--1 > header {
    background: var(--aj-yellow-50);
}

.aj-bin--2 > header {
    background: var(--aj-green-50);
}

.aj-bin--3 > header {
    background: #eef1f6;
}

.aj-bin > header strong {
    color: var(--aj-navy);
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.3;
}

.aj-bin__n {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    background: var(--aj-navy);
    color: var(--aj-yellow);
    font-weight: 800;
    font-size: .82rem;
}

.aj-bin__items {
    order: 2;
    display: grid;
    gap: 8px;
    padding: 10px 10px 0;
}

.aj-bin__target {
    order: 3;
    margin: 10px;
    min-height: 46px;
    border: 2px dashed var(--aj-border-2);
    border-radius: 12px;
    background: transparent;
    color: #9aa3b2;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    flex: 1;
}

.aj-bin.is-over {
    border-color: var(--aj-blue);
    box-shadow: 0 0 0 4px rgba(0, 51, 160, .12);
}

.aj-bin.is-over .aj-bin__target,
.aj-game.has-selection .aj-bin__target:hover {
    border-color: var(--aj-blue);
    background: var(--aj-blue-25);
    color: var(--aj-blue);
}

.aj-game.has-selection .aj-bin__target {
    border-color: #9db2e0;
}

.aj-quiz {
    display: grid;
    gap: 16px;
}

.aj-q {
    margin: 0;
    padding: 16px 18px;
    border: 1.5px solid var(--aj-border);
    border-radius: 18px;
    min-width: 0;
}

.aj-q legend {
    float: left;
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    padding: 0;
    color: var(--aj-navy);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.4;
}

.aj-q__n {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    border-radius: 50%;
    background: var(--aj-navy);
    color: var(--aj-yellow);
    font-size: .82rem;
    font-weight: 800;
}

.aj-q__opts {
    clear: both;
    display: grid;
    gap: 8px;
}

.aj-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border: 1.5px solid var(--aj-border);
    border-radius: 12px;
    cursor: pointer;
    font-size: .94rem;
    transition: border-color .15s, background-color .15s;
}

.aj-opt:hover {
    border-color: #9db2e0;
    background: var(--aj-blue-25);
}

.aj-opt input {
    width: 18px;
    height: 18px;
    accent-color: var(--aj-blue);
    flex: none;
}

.aj-opt:has(input:checked) {
    border-color: var(--aj-blue);
    background: var(--aj-blue-25);
}

.aj-opt.is-wrongpick {
    border-color: #f2b8b5;
    background: #fff6f6;
    color: #9b2c2c;
}

.aj-q.is-correct {
    border-color: #8fd0ac;
    background: #f6fbf8;
}

.aj-q.is-correct .aj-opt {
    cursor: default;
}

.aj-q.is-wrong {
    border-color: #f2b8b5;
}

.aj-q__explain {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 10px !important;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--aj-yellow-50);
    color: var(--aj-navy);
    font-size: .88rem;
}

.aj-q__explain[hidden] {
    display: none;
}

.aj-game__feedback {
    margin-top: 16px;
}

.aj-game__feedback:empty {
    display: none;
}

.aj-game__feedback.is-success,
.aj-game__feedback.is-error {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 16px;
}

.aj-game__feedback > .aj-i {
    width: 30px;
    height: 30px;
    flex: none;
}

.aj-game__feedback div {
    display: grid;
}

.aj-game__feedback strong {
    font-weight: 800;
}

.aj-game__feedback span {
    font-size: .9rem;
}

.aj-game__feedback.is-success {
    background: #eef8f2;
    border: 1px solid #c4e5d1;
    color: #14532d;
}

.aj-game__feedback.is-success > .aj-i {
    color: var(--aj-green);
}

.aj-game__feedback.is-error {
    background: var(--aj-red-50);
    border: 1px solid #f5c6c4;
    color: #7f1d1d;
}

.aj-game__feedback.is-error > .aj-i {
    color: var(--aj-red);
}

.aj-game__feedback.is-shake {
    animation: aj-shake .5s;
}

.aj-game.is-solved .aj-token {
    cursor: default;
}

/* ============================================================== Celebrations */

.aj-cel {
    position: fixed;
    inset: 0;
    z-index: 10500;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(0, 20, 70, .58);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-family: var(--aj-font);
    opacity: 0;
    transition: opacity .22s;
}

.aj-cel.is-in {
    opacity: 1;
}

.aj-cel.is-out {
    opacity: 0;
}

.aj-cel__card {
    position: relative;
    overflow: hidden;
    width: min(470px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 34px 30px 26px;
    border-radius: 28px;
    background: #fff;
    text-align: center;
    color: var(--aj-text);
    box-shadow: 0 30px 80px rgba(0, 10, 40, .4);
    transform: translateY(16px) scale(.94);
    transition: transform .4s cubic-bezier(.2, .9, .3, 1.25);
}

.aj-cel.is-in .aj-cel__card {
    transform: none;
}

.aj-cel__card > * {
    position: relative;
    z-index: 1;
}

.aj-cel__card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 190px;
    background: linear-gradient(180deg, var(--aj-blue-50), rgba(230, 235, 246, 0));
    z-index: 0;
}

.aj-cel--level::before,
.aj-cel--mission::before,
.aj-cel--journey::before {
    background: linear-gradient(180deg, var(--aj-yellow-50), rgba(255, 248, 217, 0));
}

.aj-cel__rays {
    position: absolute !important;
    z-index: 0 !important;
    top: -150px;
    left: 50%;
    width: 560px;
    height: 560px;
    margin-left: -280px;
    background: repeating-conic-gradient(from 0deg, rgba(255, 205, 0, .2) 0 9deg, rgba(255, 205, 0, 0) 9deg 18deg);
    mask-image: radial-gradient(circle, #000 0, transparent 62%);
    -webkit-mask-image: radial-gradient(circle, #000 0, transparent 62%);
    animation: aj-spin 24s linear infinite;
}

.aj-cel__burst {
    display: grid;
    place-items: center;
    width: 100px;
    height: 100px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--aj-navy);
    color: var(--aj-yellow);
    box-shadow: 0 0 0 10px rgba(0, 28, 88, .08);
    animation: aj-pop .55s cubic-bezier(.2, .9, .3, 1.4);
}

.aj-cel__burst .aj-i {
    width: 50px;
    height: 50px;
    fill: var(--aj-yellow);
}

.aj-cel__burst--gold {
    background: var(--aj-yellow);
    color: var(--aj-navy);
    box-shadow: 0 0 0 10px rgba(255, 205, 0, .2);
}

.aj-cel__burst--gold .aj-i {
    fill: none;
}

.aj-cel__eyebrow {
    margin-bottom: 4px !important;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--aj-blue);
}

.aj-cel__xp {
    font-size: 3.6rem;
    font-weight: 800;
    color: var(--aj-navy);
    line-height: 1;
    letter-spacing: -.03em;
}

.aj-cel__xp small {
    font-size: 1.3rem;
    color: var(--aj-blue);
}

.aj-cel__xp--sm {
    margin-top: 10px !important;
    font-size: 2.2rem;
}

.aj-cel h2 {
    font-size: 1.65rem;
    margin: 2px 0 6px;
}

.aj-cel__text {
    margin-top: 8px !important;
    font-size: 1rem;
    color: var(--aj-text-2);
    line-height: 1.55;
}

.aj-cel__claim {
    color: var(--aj-blue);
    font-style: italic;
    font-weight: 700;
    font-size: 1.05rem;
}

.aj-cel__total {
    margin-top: 10px !important;
    font-size: .86rem;
    font-weight: 700;
    color: var(--aj-muted);
}

.aj-cel__ctx--soon {
    background: var(--aj-blue-50) !important;
    color: var(--aj-blue) !important;
}

.aj-cel__ctx {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px !important;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--aj-green-50);
    color: var(--aj-green);
    font-size: .86rem;
    font-weight: 700;
}

.aj-cel__medal,
.aj-cel__flag,
.aj-cel__unlock,
.aj-cel__level {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 8px auto 20px;
}

.aj-cel__medal .aj-medal,
.aj-cel__flag .aj-medal,
.aj-cel__unlock .aj-medal,
.aj-cel__level > .aj-medal {
    animation: aj-medal .8s cubic-bezier(.2, .9, .3, 1.3);
}

.aj-cel__prev {
    display: grid;
    justify-items: center;
    gap: 4px;
    opacity: .75;
}

.aj-cel__prev small {
    font-size: .72rem;
    font-weight: 700;
    color: var(--aj-muted);
}

.aj-cel__arrow {
    width: 26px;
    height: 26px;
    color: var(--aj-muted);
}

.aj-cel__unlock {
    position: relative;
    width: fit-content;
}

.aj-cel__lock {
    position: absolute;
    right: -6px;
    bottom: -4px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid #fff;
    background: var(--aj-yellow);
    color: var(--aj-navy);
    animation: aj-pop .5s .3s both;
}

.aj-cel__badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 16px !important;
}

.aj-cel__badges li {
    display: grid;
    justify-items: center;
    gap: 5px;
    max-width: 92px;
    font-size: .7rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--aj-navy);
}

.aj-cel__argo {
    display: block;
    width: 150px;
    height: auto;
    margin: 0 auto 6px;
    animation: aj-bounce 1.6s ease-in-out infinite;
}

.aj-cel__dots {
    display: flex !important;
    justify-content: center;
    gap: 6px;
    margin: 22px 0 0 !important;
}

.aj-cel__dots li {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #dde2ea;
    transition: width .2s, background-color .2s;
}

.aj-cel__dots li.is-on {
    width: 22px;
    background: var(--aj-blue);
}

.aj-cel__dots li.is-done {
    background: #9db2e0;
}

.aj-cel__cta {
    width: 100%;
    margin-top: 20px;
}

.aj-confetti {
    position: fixed;
    inset: 0;
    z-index: 10600;
    pointer-events: none;
    overflow: hidden;
}

.aj-confetti i {
    position: absolute;
    top: -24px;
    width: 9px;
    height: 15px;
    border-radius: 2px;
    animation-name: aj-confetti;
    animation-timing-function: cubic-bezier(.3, .6, .5, 1);
    animation-fill-mode: forwards;
}

/* ============================================================== Welcome */

.aj-welcome {
    position: fixed;
    inset: 0;
    z-index: 10400;
    display: grid;
    place-items: center;
    padding: 20px;
    overflow-y: auto;
    background: rgba(0, 20, 70, .62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: var(--aj-font);
    opacity: 0;
    transition: opacity .3s;
}

.aj-welcome.is-in {
    opacity: 1;
}

.aj-welcome.is-out {
    opacity: 0;
}

.aj-welcome__card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    width: min(1000px, 100%);
    border-radius: 30px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 30px 90px rgba(0, 10, 40, .45);
    transform: translateY(18px);
    transition: transform .45s cubic-bezier(.2, .9, .3, 1.1);
}

.aj-welcome.is-in .aj-welcome__card {
    transform: none;
}

.aj-welcome__art {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 440px;
    padding: 36px 28px;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 25% 15%, rgba(61, 107, 209, .7), rgba(61, 107, 209, 0) 50%),
        radial-gradient(circle at 85% 85%, rgba(255, 205, 0, .22), rgba(255, 205, 0, 0) 42%),
        linear-gradient(160deg, var(--aj-blue), var(--aj-navy) 60%, var(--aj-navy-900));
}

.aj-welcome__road {
    position: absolute;
    left: -25%;
    right: -25%;
    bottom: 96px;
    height: 74px;
    background: rgba(0, 10, 40, .5);
    transform: rotate(-8deg);
}

.aj-welcome__road::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 4px;
    margin-top: -2px;
    background: repeating-linear-gradient(90deg, var(--aj-yellow) 0 28px, transparent 28px 52px);
    animation: aj-road 2.6s linear infinite;
}

.aj-welcome__art img {
    position: relative;
    z-index: 1;
    width: 230px;
    height: auto;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .3));
    animation: aj-float 4s ease-in-out infinite;
}

.aj-welcome__brand {
    position: relative;
    z-index: 1;
    display: grid;
    margin-top: 14px !important;
    font-size: 1.7rem;
    font-weight: 800;
    text-align: center;
    letter-spacing: -.01em;
}

.aj-welcome__brand small {
    font-size: 1rem;
    font-weight: 600;
    color: var(--aj-yellow);
    letter-spacing: 0;
}

.aj-welcome__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 46px 46px 38px;
}

.aj-welcome__body h1 {
    font-size: clamp(1.7rem, 3vw, 2.25rem);
}

.aj-welcome__text {
    font-size: 1.03rem;
    color: var(--aj-text-2);
    line-height: 1.65;
}

.aj-welcome__list {
    display: grid;
    gap: 12px;
    width: 100%;
    margin: 6px 0 10px !important;
}

.aj-welcome__list li {
    display: flex;
    align-items: center;
    gap: 14px;
}

.aj-welcome__list li > span {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: none;
    border-radius: 14px;
    background: var(--aj-blue-50);
    color: var(--aj-blue);
}

.aj-welcome__list li:nth-child(2) > span {
    background: var(--aj-yellow);
    color: var(--aj-navy);
}

.aj-welcome__list li:nth-child(3) > span {
    background: var(--aj-navy);
    color: var(--aj-yellow);
}

.aj-welcome__list div {
    display: grid;
    line-height: 1.35;
}

.aj-welcome__list strong {
    color: var(--aj-navy);
    font-weight: 800;
}

.aj-welcome__list small {
    color: var(--aj-muted);
    font-size: .86rem;
}

/* ============================================================== Back-office shell */

.aj-bo {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    min-height: 100vh;
    background: var(--aj-bg-cool);
}

.aj-side {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    padding: 18px 14px 14px;
    color: #c9d3e8;
    background:
        radial-gradient(circle at 0 0, rgba(61, 107, 209, .35), rgba(61, 107, 209, 0) 40%),
        linear-gradient(180deg, var(--aj-navy) 0, var(--aj-navy-900) 100%);
}

.aj-side__brand {
    display: grid;
    flex-shrink: 0;
    gap: 10px;
    padding: 0 4px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.aj-side__brand a {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 58px;
    padding: 10px 14px;
    border-radius: 14px;
    background: #fff;
    text-decoration: none !important;
}

.aj-side__logo {
    max-height: 50px;
    max-width: 100%;
    width: auto;
}

.aj-side__tag {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--aj-yellow);
    text-align: center;
}

/* Only the menu scrolls: brand and footer (preview, Moodle, user and logout) always stay visible. */
.aj-side__nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .22) transparent;
}

.aj-side__nav.has-more {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 44px), transparent);
}

.aj-side__group {
    margin-bottom: 10px;
}

.aj-side__group p {
    margin-bottom: 4px !important;
    padding: 0 12px;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #7f8fb3;
}

.aj-side__link,
.aj-side__foot-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 12px;
    border-radius: 11px;
    color: #d5ddee !important;
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none !important;
    transition: background-color .15s, color .15s;
}

.aj-side__link .aj-i,
.aj-side__foot-link .aj-i {
    color: #8fa3cc;
}

.aj-side__link:hover,
.aj-side__foot-link:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff !important;
}

.aj-side__link.is-active {
    background: rgba(255, 255, 255, .11);
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--aj-yellow);
}

.aj-side__link.is-active .aj-i {
    color: var(--aj-yellow);
}

.aj-side__foot {
    display: grid;
    flex-shrink: 0;
    gap: 2px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .1);
}

.aj-side__foot-link {
    font-size: .84rem;
}

.aj-side__user {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
}

.aj-side__user .aj-avatar {
    background: var(--aj-yellow);
    color: var(--aj-navy);
}

.aj-side__user > span:nth-child(2) {
    flex: 1;
    min-width: 0;
    color: #fff;
    font-size: .84rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aj-side__logout {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 10px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .08);
    color: #e3e9f6 !important;
    font-size: .8rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: background-color .15s, color .15s;
}

.aj-side__logout:hover,
.aj-side__logout:focus-visible {
    background: var(--aj-yellow);
    color: var(--aj-navy) !important;
}

.aj-bo__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.aj-bo__top {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 32px 18px;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--aj-border);
}

.aj-bo__top h1 {
    font-size: 1.45rem;
}

.aj-bo__top p {
    margin-top: 3px !important;
    color: var(--aj-muted);
    font-size: .9rem;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.aj-bo__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.aj-bo__content {
    display: grid;
    gap: 20px;
    align-content: start;
    width: 100%;
    max-width: 1520px;
    padding: 24px 32px 56px;
}

.aj-grid {
    display: grid;
    gap: 20px;
    align-items: start;
}

.aj-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.aj-grid--2-1 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

.aj-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aj-grid--main-side {
    grid-template-columns: minmax(0, 1fr) 360px;
}

.aj-grid--editor {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 46%);
}

.aj-grid > div {
    display: grid;
    gap: 20px;
    min-width: 0;
}

.aj-sticky {
    position: sticky;
    top: 104px;
}

.aj-rules {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 14px;
    background: var(--aj-blue-25);
    border: 1px solid #dce4f5;
    color: var(--aj-navy);
    font-size: .9rem;
}

.aj-rules > .aj-i {
    color: var(--aj-blue);
    margin-top: 2px;
}

.aj-tips {
    display: grid;
    gap: 12px;
}

.aj-tips li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .88rem;
    color: var(--aj-text-2);
}

.aj-tips li .aj-i {
    color: var(--aj-blue);
    margin-top: 2px;
}

.aj-balance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    white-space: nowrap;
}

.aj-balance.is-ok {
    background: var(--aj-green-50);
    color: var(--aj-green);
}

.aj-balance.is-warn {
    background: var(--aj-yellow-100);
    color: var(--aj-amber-text);
}

.aj-card .aj-balance {
    margin-top: 14px;
}

.aj-pagefoot {
    display: flex;
    justify-content: flex-end;
}

.aj-btnrow {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

/* Control room. */
.aj-attnlist {
    display: grid;
    gap: 8px;
}

.aj-attn {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: .88rem;
    background: var(--aj-blue-25);
    color: var(--aj-navy);
}

.aj-attn > .aj-i {
    width: 30px;
    height: 30px;
    padding: 6px;
    border-radius: 9px;
    background: #fff;
    color: var(--aj-blue);
}

.aj-attn a {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
}

.aj-attn--red {
    background: var(--aj-red-50);
    color: #7f1d1d;
}

.aj-attn--red > .aj-i,
.aj-attn--red a {
    color: var(--aj-red);
}

.aj-attn--amber {
    background: var(--aj-yellow-50);
    color: var(--aj-amber-text);
}

.aj-attn--amber > .aj-i,
.aj-attn--amber a {
    color: var(--aj-amber-text);
}

.aj-feed {
    display: grid;
    gap: 12px;
}

.aj-feed li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: .86rem;
    line-height: 1.4;
}

.aj-feed strong {
    color: var(--aj-navy);
}

.aj-feed em {
    font-style: normal;
    font-weight: 700;
    color: var(--aj-blue);
}

.aj-feed small {
    display: block;
    color: var(--aj-muted);
    font-size: .74rem;
}

/* Users. */
.aj-bulkbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--aj-border);
    background: #fafbfd;
    border-radius: var(--aj-radius) var(--aj-radius) 0 0;
    transition: background-color .2s;
}

.aj-bulkbar > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: .86rem;
    color: var(--aj-navy);
}

.aj-bulkbar .aj-input {
    width: auto;
    min-width: 230px;
    min-height: 38px;
}

.aj-bulkbar.is-active {
    background: var(--aj-yellow-50);
}

.aj-table input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--aj-blue);
}

.aj-mcards {
    display: grid;
    gap: 12px;
}

.aj-mcard {
    padding: 14px 16px;
    border: 1px solid var(--aj-border);
    border-radius: 16px;
}

.aj-mcard__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.aj-mcard__head > div {
    display: grid;
    line-height: 1.3;
}

.aj-mcard__head strong {
    color: var(--aj-navy);
}

.aj-mcard__head small {
    color: var(--aj-muted);
    font-size: .78rem;
}

.aj-mcard__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--aj-blue-50);
    color: var(--aj-blue);
}

.aj-mcard__pct {
    margin-left: auto;
    font-weight: 800;
    color: var(--aj-navy);
}

.aj-arealist {
    display: grid;
    gap: 4px;
    margin-top: 10px !important;
    font-size: .83rem;
}

.aj-arealist li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aj-timeline-mini {
    display: grid;
    gap: 0;
}

.aj-timeline-mini li {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: .86rem;
    color: var(--aj-muted);
}

.aj-timeline-mini li::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 30px;
    bottom: -8px;
    width: 2px;
    background: var(--aj-border);
}

.aj-timeline-mini li:last-child::before {
    display: none;
}

.aj-timeline-mini li > .aj-i {
    position: relative;
    z-index: 1;
    width: 30px;
    height: 30px;
    padding: 6px;
    border-radius: 50%;
    background: #eef1f6;
    color: #9aa3b2;
}

.aj-timeline-mini li.is-done {
    color: var(--aj-navy);
}

.aj-timeline-mini li.is-done > .aj-i {
    background: var(--aj-blue);
    color: #fff;
}

.aj-timeline-mini strong {
    font-size: .8rem;
    font-weight: 700;
}

.aj-badgelist {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

.aj-badgeitem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    font-size: .72rem;
    font-weight: 700;
    color: var(--aj-navy);
    opacity: .5;
}

.aj-badgeitem.is-earned {
    opacity: 1;
}

.aj-statrow {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 14px 0;
}

.aj-statrow > div {
    display: grid;
    padding: 10px;
    border-radius: 12px;
    background: #f7f8fb;
    text-align: center;
}

.aj-statrow strong {
    font-size: 1rem;
    font-weight: 800;
    color: var(--aj-navy);
    overflow-wrap: anywhere;
    line-height: 1.25;
}

.aj-statrow span {
    font-size: .72rem;
    color: var(--aj-muted);
}

.aj-persondetail__head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.aj-persondetail__head h3 {
    font-size: 1.05rem;
}

.aj-persondetail__head p {
    font-size: .85rem;
    color: var(--aj-muted);
}

.aj-minimission {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.aj-minimission > div {
    display: grid;
    gap: 4px;
}

.aj-minimission strong {
    color: var(--aj-navy);
    font-size: .88rem;
}

.aj-minimission small {
    color: var(--aj-muted);
    font-size: .75rem;
}

.aj-minimission__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--aj-blue-50);
    color: var(--aj-blue);
}

.aj-persondetail form {
    margin-top: 12px;
}

.aj-footnote {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px !important;
    font-size: .8rem;
    color: var(--aj-muted);
}

.aj-footnote .aj-i {
    color: var(--aj-green);
}

/* Import. */
.aj-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.aj-steps > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--aj-border);
    background: #fff;
    font-weight: 700;
    font-size: .85rem;
    color: var(--aj-muted);
}

.aj-steps > span.is-active {
    background: var(--aj-navy);
    border-color: var(--aj-navy);
    color: #fff;
}

.aj-steps > span.is-active .aj-i {
    color: var(--aj-yellow);
}

.aj-collist {
    display: grid;
    gap: 6px;
    margin-top: 10px !important;
}

.aj-collist li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 9px;
    background: #f7f8fb;
}

.aj-notes {
    display: grid;
    gap: 3px;
}

.aj-notes li {
    font-size: .76rem;
    line-height: 1.35;
    color: var(--aj-amber-text);
}

.aj-notes li::before {
    content: "• ";
}

/* Journey builder. */
.aj-sortable {
    display: grid;
    gap: 18px;
}

.aj-sortable.is-sorting {
    user-select: none;
    -webkit-user-select: none;
    cursor: grabbing;
}

.is-sorting > .is-sorting,
.aj-sortable > .is-sorting {
    position: relative;
    z-index: 5;
    box-shadow: 0 16px 36px rgba(0, 28, 88, .2);
    background: #fff;
}

.aj-grip {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 30px;
    border-radius: 7px;
    color: #a9b2c2;
    cursor: grab;
    touch-action: none;
}

.aj-grip:hover {
    background: #eef1f6;
    color: var(--aj-navy);
}

.aj-mission {
    background: #fff;
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius);
    box-shadow: var(--aj-shadow);
    overflow: hidden;
}

.aj-mission__head {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--aj-border);
    background: linear-gradient(90deg, var(--aj-blue-25), #fff);
}

.aj-mission__icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: var(--aj-blue);
    color: #fff;
}

.aj-mission__icon .aj-i {
    width: 24px;
    height: 24px;
}

.aj-mission__head h2 {
    font-size: 1.18rem;
    margin: 2px 0;
}

.aj-mission__head p:not(.aj-eyebrow) {
    font-size: .86rem;
    color: var(--aj-muted);
}

.aj-mission__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.aj-mission__actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.aj-areas {
    padding: 16px 20px 6px;
    gap: 12px;
}

.aj-area {
    border: 1px solid var(--aj-border);
    border-radius: 16px;
    background: #fafbfd;
}

.aj-area__head {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}

.aj-area__head > div {
    display: grid;
    line-height: 1.3;
}

.aj-area__head strong {
    color: var(--aj-navy);
}

.aj-area__head small {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--aj-muted);
    font-size: .76rem;
}

.aj-area__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--aj-blue-50);
    color: var(--aj-blue);
}

.aj-acts {
    display: grid;
    gap: 6px;
    padding: 0 14px 4px;
}

.aj-act {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto auto auto;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: 1px solid #eef1f6;
    border-radius: 12px;
    background: #fff;
}

.aj-act__type {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
}

.aj-act__type--checkpoint {
    background: var(--aj-green-50);
    color: var(--aj-green);
}

.aj-act__type--content {
    background: var(--aj-blue-50);
    color: var(--aj-blue);
}

.aj-act__type--game {
    background: var(--aj-yellow);
    color: var(--aj-navy);
}

.aj-act__title {
    font-weight: 700;
    color: var(--aj-navy) !important;
    font-size: .9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aj-act__meta {
    font-size: .76rem;
    color: var(--aj-muted);
    white-space: nowrap;
}

.aj-xp {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--aj-yellow-100);
    color: var(--aj-navy);
    font-size: .76rem;
    font-weight: 800;
    white-space: nowrap;
}

.aj-xp--area {
    background: var(--aj-blue-50);
    color: var(--aj-blue);
}

.aj-addrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 14px 12px;
    font-size: .8rem;
    color: var(--aj-muted);
    font-weight: 600;
}

.aj-addrow a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border: 1px dashed var(--aj-border-2);
    border-radius: 999px;
    background: #fff;
    font-weight: 700;
}

.aj-addrow a:hover {
    border-color: var(--aj-blue);
    text-decoration: none !important;
}

.aj-addarea {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 12px 20px 18px;
    padding: 11px;
    border: 2px dashed var(--aj-border-2);
    border-radius: 14px;
    font-weight: 800;
    font-size: .88rem;
}

.aj-addarea:hover {
    border-color: var(--aj-blue);
    background: var(--aj-blue-25);
    text-decoration: none !important;
}

/* Game and layout editors. */
.aj-gameeditor,
.aj-layouteditor {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--aj-border);
    border-radius: 16px;
    background: #f7f8fb;
}

.aj-layouteditor[hidden] {
    display: none;
}

.aj-ge__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px !important;
    font-weight: 800;
    color: var(--aj-navy);
}

.aj-ge__title .aj-i {
    color: var(--aj-blue);
}

.aj-ge__list {
    display: grid;
    gap: 10px;
}

.aj-ge__row {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--aj-border);
    border-radius: 14px;
    background: #fff;
}

.aj-ge__row--q {
    align-items: flex-start;
}

.aj-ge__row .aj-field {
    flex: 1 1 140px;
}

.aj-ge__grow {
    flex: 3 1 220px !important;
    min-width: 0;
}

.aj-ge__n {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    flex: none;
    align-self: center;
    border-radius: 50%;
    background: var(--aj-navy);
    color: var(--aj-yellow);
    font-size: .8rem;
    font-weight: 800;
}

.aj-ge__row--q .aj-ge__n {
    align-self: flex-start;
    margin-top: 26px;
}

.aj-rowtools {
    display: flex;
    gap: 2px;
    align-self: center;
}

.aj-rowtools .aj-iconbtn {
    width: 32px;
    height: 32px;
}

.aj-ge__pair {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.aj-ge__opts {
    display: grid;
    gap: 6px;
    margin: 10px 0 6px !important;
}

.aj-ge__opt {
    display: flex;
    align-items: center;
    gap: 8px;
}

.aj-ge__correct {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: none;
    font-size: .74rem;
    font-weight: 800;
    color: var(--aj-green);
    cursor: pointer;
}

.aj-ge__correct input {
    width: 17px;
    height: 17px;
    accent-color: var(--aj-green);
}

.aj-ge__row--q .aj-linkbtn {
    margin-bottom: 8px;
}

.aj-medialist {
    display: grid;
    gap: 10px;
    margin-bottom: 14px !important;
}

.aj-medialist li {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.aj-medialist img {
    width: 56px;
    height: 56px;
    object-fit: cover;
    border-radius: 10px;
    background: #eef1f6;
}

.aj-medialist div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.aj-medialist strong {
    font-size: .82rem;
    color: var(--aj-navy);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aj-card .aj-form input[type="file"].aj-input {
    padding: 8px;
}

/* Rewards (back-office). */
.aj-badgegrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 14px;
}

.aj-badgecard {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--aj-border);
    border-radius: 16px;
    background: #fafbfd;
}

.aj-badgecard h3 {
    font-size: 1rem;
    margin: 2px 0 4px;
}

.aj-badgecard p {
    font-size: .86rem;
    color: var(--aj-text-2);
}

.aj-badgecard__meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px !important;
    font-size: .78rem !important;
    color: var(--aj-muted) !important;
}

.aj-edit {
    margin-top: 10px;
}

.aj-edit summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: .85rem;
    color: var(--aj-blue);
    cursor: pointer;
    list-style: none;
}

.aj-edit summary::-webkit-details-marker {
    display: none;
}

.aj-edit[open] summary {
    margin-bottom: 12px;
}

/* ARGO (back-office). */
.aj-argohero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 26px;
    border-radius: var(--aj-radius);
    color: #fff;
    background:
        radial-gradient(circle at 10% 20%, rgba(61, 107, 209, .55), rgba(61, 107, 209, 0) 50%),
        linear-gradient(120deg, var(--aj-navy), var(--aj-blue));
}

.aj-argohero .aj-argo {
    width: 120px;
    height: auto;
    flex: none;
}

.aj-argohero h2 {
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 4px;
}

.aj-argohero p {
    color: #d5ddee;
    max-width: 760px;
}

.aj-argogrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
    gap: 16px;
}

.aj-argocard {
    display: grid;
    gap: 12px;
    padding: 18px;
    background: #fff;
    border: 1px solid var(--aj-border);
    border-radius: 18px;
    box-shadow: var(--aj-shadow-sm);
    scroll-margin-top: 110px;
}

.aj-argocard > header {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
}

.aj-argocard h3 {
    font-size: 1rem;
}

.aj-argocard header p {
    font-size: .8rem;
    color: var(--aj-muted);
}

.aj-argocard__preview {
    padding: 12px;
    border-radius: 14px;
    background: var(--aj-blue-25);
}

.aj-argocard__preview .aj-bubble {
    display: inline-block;
    background: #fff;
    font-size: .92rem;
}

.aj-argocard .aj-help .aj-chip {
    margin: 2px 2px 0 0;
}

/* Materials. */
.aj-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(250px, 1fr));
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
}

.aj-board__col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 320px;
    padding: 12px;
    border-radius: 18px;
    background: #e9edf4;
    border-top: 4px solid var(--aj-yellow);
}

.aj-board__col--blue {
    border-top-color: var(--aj-blue);
}

.aj-board__col--navy {
    border-top-color: var(--aj-navy);
}

.aj-board__col--green {
    border-top-color: var(--aj-green);
}

.aj-board__col > header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 4px;
    color: var(--aj-navy);
}

.aj-board__col > header h2 {
    flex: 1;
    font-size: .9rem;
}

.aj-count {
    padding: 0 9px;
    border-radius: 999px;
    background: #fff;
    font-size: .76rem;
    font-weight: 800;
    color: var(--aj-navy);
}

.aj-board__list {
    display: grid;
    gap: 10px;
    align-content: start;
}

.aj-board__empty {
    padding: 20px 10px;
    text-align: center;
    font-size: .82rem;
    color: var(--aj-muted);
}

.aj-kcard {
    display: grid;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid var(--aj-border);
    box-shadow: var(--aj-shadow-sm);
}

.aj-kcard.is-late {
    border-left: 4px solid var(--aj-red);
}

.aj-kcard__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.aj-kcard__src {
    color: var(--aj-muted);
}

.aj-kcard__title {
    font-weight: 700;
    color: var(--aj-navy) !important;
    font-size: .9rem;
    line-height: 1.35;
}

.aj-kcard__note {
    font-size: .76rem;
    color: var(--aj-muted);
}

.aj-kcard__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: .74rem;
    color: var(--aj-muted);
}

.aj-kcard__meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.aj-kcard__meta .is-late {
    color: var(--aj-red);
    font-weight: 700;
}

.aj-kcard__warn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    background: var(--aj-yellow-50);
    color: var(--aj-amber-text);
    font-size: .74rem;
    font-weight: 600;
}

.aj-kcard__move {
    margin: 0;
}

.aj-vsteps {
    display: grid;
    counter-reset: ajstep;
}

.aj-vsteps li {
    position: relative;
    display: grid;
    padding: 0 0 18px 36px;
    counter-increment: ajstep;
}

.aj-vsteps li::before {
    content: counter(ajstep);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #eef1f6;
    color: var(--aj-muted);
    font-size: .74rem;
    font-weight: 800;
}

.aj-vsteps li::after {
    content: "";
    position: absolute;
    left: 11px;
    top: 26px;
    bottom: 2px;
    width: 2px;
    background: var(--aj-border);
}

.aj-vsteps li:last-child::after {
    display: none;
}

.aj-vsteps li.is-done::before {
    background: var(--aj-green);
    color: #fff;
}

.aj-vsteps li.is-current::before {
    background: var(--aj-yellow);
    color: var(--aj-navy);
}

.aj-vsteps strong {
    color: var(--aj-navy);
    font-size: .9rem;
}

.aj-vsteps span {
    font-size: .8rem;
    color: var(--aj-muted);
}

.aj-filebox {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--aj-blue-25);
    border: 1px solid #dce4f5;
}

.aj-filebox > div {
    display: grid;
    flex: 1;
    min-width: 0;
}

.aj-filebox small {
    color: var(--aj-muted);
    font-size: .76rem;
}

/* Emails. */
.aj-identity {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--aj-border);
}

.aj-identity > .aj-i {
    width: 40px;
    height: 40px;
    padding: 9px;
    border-radius: 12px;
    background: var(--aj-blue-50);
    color: var(--aj-blue);
}

.aj-identity > div {
    flex: 1;
    min-width: 0;
}

.aj-identity p:not(.aj-eyebrow) {
    color: var(--aj-text-2);
    font-size: .92rem;
    word-break: break-word;
}

.aj-identity strong {
    color: var(--aj-navy);
}

.aj-flow {
    display: flex;
    overflow-x: auto;
    padding: 4px 0 8px;
}

.aj-flow__step {
    position: relative;
    flex: 1 1 0;
    min-width: 128px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    text-align: center;
    color: var(--aj-text) !important;
    text-decoration: none !important;
}

.aj-flow__step::after {
    content: "";
    position: absolute;
    top: 23px;
    left: calc(50% + 28px);
    right: calc(-50% + 28px);
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--aj-border-2) 0 6px, transparent 6px 10px);
}

.aj-flow__step:last-child::after {
    display: none;
}

.aj-flow__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--aj-blue-50);
    color: var(--aj-blue);
    border: 3px solid #fff;
    box-shadow: 0 3px 10px rgba(0, 28, 88, .12);
    transition: background-color .15s, color .15s;
}

.aj-flow__step:first-child .aj-flow__icon {
    background: var(--aj-navy);
    color: var(--aj-yellow);
}

.aj-flow__step:last-child .aj-flow__icon {
    background: var(--aj-yellow);
    color: var(--aj-navy);
}

a.aj-flow__step:hover .aj-flow__icon {
    background: var(--aj-blue);
    color: #fff;
}

.aj-flow__step strong {
    font-size: .82rem;
    color: var(--aj-navy);
    line-height: 1.25;
}

.aj-flow__step small {
    font-size: .72rem;
    color: var(--aj-muted);
    line-height: 1.3;
}

.aj-flow__step.is-off {
    opacity: .5;
}

.aj-flow__step.is-off .aj-flow__icon {
    background: #eef1f6;
    color: #9aa3b2;
}

.aj-table--tpl td:first-child {
    width: 64px;
}

.aj-mailpreview__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.aj-mailpreview__meta {
    display: grid;
    min-width: 0;
}

.aj-mailpreview__meta span {
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--aj-muted);
}

.aj-mailpreview__meta strong {
    color: var(--aj-navy);
    font-size: .92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aj-seg {
    display: inline-flex;
    flex: none;
    gap: 2px;
    padding: 3px;
    border-radius: 11px;
    background: #eef1f6;
}

.aj-seg button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--aj-muted);
    cursor: pointer;
}

.aj-seg button.is-active {
    background: #fff;
    color: var(--aj-blue);
    box-shadow: var(--aj-shadow-sm);
}

.aj-mailpreview__frame {
    display: flex;
    justify-content: center;
    padding: 14px;
    border-radius: 16px;
    background: #e9edf4;
}

.aj-mailpreview__frame iframe {
    width: 100%;
    height: 680px;
    border: 0;
    border-radius: 12px;
    background: #eef1f6;
    transition: width .3s, opacity .2s;
}

.aj-mailpreview.is-mobile iframe {
    width: 390px;
}

.aj-mailpreview.is-stale iframe {
    opacity: .55;
}

.aj-mailpreview .aj-help {
    margin-top: 10px !important;
}

/* Reports. */
.aj-exports {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.aj-export {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--aj-border);
    border-radius: 16px;
    color: var(--aj-text) !important;
    text-decoration: none !important;
    transition: border-color .15s, background-color .15s;
}

.aj-export:hover {
    border-color: var(--aj-blue);
    background: var(--aj-blue-25);
}

.aj-export > span:nth-child(2) {
    display: grid;
    line-height: 1.35;
}

.aj-export strong {
    color: var(--aj-navy);
    font-size: .92rem;
}

.aj-export small {
    color: var(--aj-muted);
    font-size: .78rem;
}

.aj-export__icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--aj-blue-50);
    color: var(--aj-blue);
}

.aj-export__dl {
    color: var(--aj-blue);
}

/* Settings. */
.aj-logoprev {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.aj-logoprev__light {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
    min-height: 76px;
    padding: 14px 18px;
    border: 1px solid var(--aj-border);
    border-radius: 14px;
    background: #fff;
}

.aj-logoprev__light .aj-logo {
    max-height: 48px;
    max-width: 240px;
}

.aj-logoprev__meta {
    display: grid;
    gap: 6px;
    justify-items: start;
}

.aj-logoprev__meta strong {
    color: var(--aj-navy);
}

.aj-logoprev__meta small {
    color: var(--aj-muted);
}

.aj-status {
    display: grid;
}

.aj-status__row {
    display: grid;
    grid-template-columns: 14px 230px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--aj-border);
    font-size: .9rem;
}

.aj-status__row strong {
    color: var(--aj-navy);
    font-weight: 600;
    word-break: break-all;
}

.aj-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--aj-blue);
}

.aj-dot--green {
    background: var(--aj-green);
    box-shadow: 0 0 0 3px var(--aj-green-50);
}

.aj-dot--red {
    background: var(--aj-red);
    box-shadow: 0 0 0 3px var(--aj-red-50);
}

.aj-dot--amber {
    background: #e0a100;
    box-shadow: 0 0 0 3px var(--aj-yellow-100);
}

.aj-dot--blue {
    background: var(--aj-blue);
    box-shadow: 0 0 0 3px var(--aj-blue-50);
}

/* Manager area. */
.aj-managerpage .aj-kpis {
    margin-bottom: 22px;
}

.aj-managerpage .aj-grid {
    margin-top: 0;
}

/* ============================================================== Animations */

@keyframes aj-spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes aj-road {
    to {
        background-position: 62px 0;
    }
}

@keyframes aj-pulse {
    0% {
        box-shadow: 0 6px 16px rgba(0, 28, 88, .18), 0 0 0 0 rgba(255, 205, 0, .55);
    }

    70% {
        box-shadow: 0 6px 16px rgba(0, 28, 88, .18), 0 0 0 16px rgba(255, 205, 0, 0);
    }

    100% {
        box-shadow: 0 6px 16px rgba(0, 28, 88, .18), 0 0 0 0 rgba(255, 205, 0, 0);
    }
}

@keyframes aj-fadeup {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes aj-pop {
    0% {
        transform: scale(.6);
        opacity: 0;
    }

    70% {
        transform: scale(1.08);
        opacity: 1;
    }

    100% {
        transform: scale(1);
    }
}

@keyframes aj-shake {
    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-6px);
    }

    40% {
        transform: translateX(6px);
    }

    60% {
        transform: translateX(-4px);
    }

    80% {
        transform: translateX(4px);
    }
}

@keyframes aj-medal {
    0% {
        transform: scale(.3) rotate(-30deg);
        opacity: 0;
    }

    60% {
        transform: scale(1.12) rotate(6deg);
        opacity: 1;
    }

    100% {
        transform: scale(1) rotate(0);
    }
}

@keyframes aj-bounce {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

@keyframes aj-float {
    0%,
    100% {
        transform: translateY(0) rotate(-1deg);
    }

    50% {
        transform: translateY(-10px) rotate(1deg);
    }
}

@keyframes aj-confetti {
    0% {
        transform: translate(0, 0) rotate(0);
        opacity: 1;
    }

    100% {
        transform: translate(var(--dx, 0), 110vh) rotate(var(--r, 360deg));
        opacity: .9;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================== Responsive */

@media (max-width: 1280px) {
    .aj-dash__grid {
        grid-template-columns: 290px minmax(0, 1fr);
    }

    .aj-dash__right {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aj-kpis--5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .aj-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aj-grid--editor {
        grid-template-columns: minmax(0, 1fr);
    }

    .aj-sticky {
        position: static;
    }
}

@media (max-width: 1100px) {
    .aj-nav__link span {
        display: none;
    }

    .aj-nav__link {
        padding: 9px 11px;
    }

    .aj-bo {
        grid-template-columns: 1fr;
    }

    .aj-side {
        position: static;
        height: auto;
        padding: 12px 14px;
    }

    .aj-side__brand {
        grid-template-columns: auto 1fr;
        align-items: center;
        border-bottom: 0;
        padding-bottom: 6px;
    }

    .aj-side__brand a {
        min-height: 44px;
        padding: 6px 12px;
    }

    .aj-side__tag {
        text-align: left;
    }

    .aj-side__nav {
        display: flex;
        gap: 4px;
        overflow-x: auto;
        padding: 6px 0;
    }

    .aj-side__group {
        display: flex;
        gap: 2px;
        margin: 0;
    }

    .aj-side__group p {
        display: none;
    }

    .aj-side__link {
        white-space: nowrap;
        font-size: .84rem;
    }

    .aj-side__foot {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        padding-top: 6px;
    }

    .aj-side__foot-link {
        padding: 7px 10px;
    }

    .aj-side__user {
        margin: 0 0 0 auto;
        padding: 4px 4px 4px 8px;
    }

    .aj-bo__top {
        position: static;
        padding: 18px 20px;
    }

    .aj-bo__content {
        padding: 18px 20px 48px;
    }

    .aj-grid--main-side,
    .aj-grid--2-1,
    .aj-grid--2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .aj-player {
        grid-template-columns: minmax(0, 1fr);
    }

    .aj-dock {
        order: -1;
        position: sticky;
        top: calc(var(--aj-top) + 8px);
        z-index: 20;
        grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.2fr);
        align-items: center;
        gap: 12px;
        padding: 10px 12px;
        border-radius: 18px;
    }

    .aj-dock__title,
    .aj-dock__mission {
        display: none;
    }

    .aj-dock__xp {
        padding: 8px 12px;
    }

    .aj-dock__xp .aj-label {
        display: none;
    }

    .aj-dock__xp strong {
        font-size: 1.35rem;
    }

    .aj-dock__level {
        padding: 6px 10px;
    }

    .aj-levelhero {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .aj-levelhero__stats {
        grid-column: 1 / -1;
    }

    .aj-grid2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    :root {
        --aj-top: 60px;
    }

    .aj-auth {
        grid-template-columns: 1fr;
    }

    .aj-auth__brand {
        padding: 26px 24px;
        min-height: 0;
    }

    .aj-auth__features,
    .aj-auth__argo {
        display: none;
    }

    .aj-auth__platform {
        font-size: 1.8rem;
    }

    .aj-auth__road {
        top: 40%;
        height: 60px;
    }

    .aj-auth__main {
        padding-top: 28px;
    }

    .aj-auth--photo {
        justify-content: center;
        padding: 18px 14px;
    }

    .aj-auth__photo {
        background-position: 20% 50%;
    }

    .aj-auth__photo::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 18, 60, .12) 0%, rgba(0, 18, 60, .5) 100%);
    }

    .aj-auth--photo .aj-auth__card {
        padding: 26px 20px 16px;
        border-radius: 24px;
    }

    .aj-auth--photo .aj-auth__logo .aj-logo {
        max-height: 72px;
    }

    .aj-top__inner {
        padding: 0 16px;
        gap: 10px;
    }

    .aj-top {
        background: #fff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .aj-top__name small,
    .aj-levelchip {
        display: none;
    }

    .aj-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 70;
        justify-content: space-around;
        gap: 0;
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
        background: #fff;
        border-top: 1px solid var(--aj-border);
        box-shadow: 0 -6px 20px rgba(0, 28, 88, .08);
    }

    .aj-nav__link {
        flex-direction: column;
        gap: 2px;
        padding: 6px 4px;
        border-radius: 12px;
        font-size: .66rem;
        flex: 1;
        min-width: 0;
    }

    .aj-nav__link span {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .aj-nav__link .aj-i {
        width: 22px;
        height: 22px;
    }

    .aj-learner .aj-main {
        padding-bottom: 110px;
    }

    .aj-container {
        padding: 0 16px;
    }

    .aj-dash__grid,
    .aj-dash__right {
        grid-template-columns: minmax(0, 1fr);
    }

    .aj-hero,
    .aj-pagehead {
        flex-direction: column;
        align-items: stretch;
    }

    .aj-hero__stats div {
        flex: 1;
        min-width: 0;
    }

    .aj-areacards {
        grid-template-columns: minmax(0, 1fr);
    }

    .aj-ladder {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aj-ladder__step {
        min-height: 0 !important;
    }

    .aj-welcome__card {
        grid-template-columns: minmax(0, 1fr);
    }

    .aj-welcome__art {
        min-height: 230px;
        padding: 22px;
    }

    .aj-welcome__art img {
        width: 130px;
    }

    .aj-welcome__brand {
        font-size: 1.3rem;
    }

    .aj-welcome__road {
        bottom: 60px;
        height: 50px;
    }

    .aj-welcome__body {
        padding: 26px 22px 24px;
    }

    .aj-welcome__body .aj-btn {
        width: 100%;
    }

    .aj-stage {
        padding: 16px 18px 22px;
        border-radius: 20px;
    }

    .aj-seq,
    .aj-cls,
    .aj-bins {
        grid-template-columns: minmax(0, 1fr);
    }

    .aj-seq .aj-pool,
    .aj-cls .aj-pool {
        position: static;
        max-height: none;
    }

    .aj-mcard2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .aj-mcard2__rail {
        display: none;
    }

    .aj-mcard2__head {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .aj-mcard2__cta {
        grid-column: 1 / -1;
    }

    .aj-mcard2__cta .aj-btn {
        width: 100%;
    }

    .aj-mcard2__stats {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .aj-nextstop {
        flex-wrap: wrap;
    }

    .aj-nextstop .aj-btn {
        width: 100%;
    }

    .aj-formgrid,
    .aj-formgrid--3,
    .aj-formgrid--2 {
        grid-template-columns: minmax(0, 1fr);
    }

    .aj-span2 {
        grid-column: auto;
    }

    .aj-kpis--5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aj-grid--3 {
        grid-template-columns: minmax(0, 1fr);
    }

    .aj-mission__head {
        grid-template-columns: auto auto minmax(0, 1fr);
    }

    .aj-mission__side,
    .aj-mission__actions {
        grid-column: 1 / -1;
        align-items: flex-start;
    }

    .aj-act {
        grid-template-columns: auto auto minmax(0, 1fr) auto;
    }

    .aj-act__meta {
        display: none;
    }

    .aj-argogrid,
    .aj-badgegrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .aj-status__row {
        grid-template-columns: 14px minmax(0, 1fr);
    }

    .aj-status__row strong {
        grid-column: 2;
    }

    .aj-dock {
        top: calc(var(--aj-top) + 6px);
        grid-template-columns: auto minmax(0, 1fr);
    }

    .aj-dock__next {
        grid-column: 1 / -1;
    }

    .aj-levelhero {
        grid-template-columns: minmax(0, 1fr);
        padding: 24px 22px;
        text-align: center;
        justify-items: center;
    }

    .aj-levelhero__bar {
        margin-left: auto;
        margin-right: auto;
        flex-direction: column;
    }
}

@media (max-width: 640px) {
    .aj-top__name {
        display: none;
    }

    .aj-road {
        flex-direction: column;
        gap: 12px;
        padding-left: 4px;
    }

    .aj-road::before,
    .aj-road::after {
        left: 31px;
        right: auto;
        top: 30px;
        bottom: 30px;
        width: 12px;
        height: auto;
        margin: 0 0 0 -6px;
    }

    .aj-road::after {
        width: 3px;
        margin-left: -1.5px;
        background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .85) 0 12px, transparent 12px 22px);
    }

    .aj-road__stop {
        display: grid;
        grid-template-columns: var(--node) minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        column-gap: 14px;
        text-align: left;
        align-items: center;
    }

    .aj-road__node {
        grid-row: 1 / span 3;
        grid-column: 1;
    }

    .aj-road__status {
        grid-column: 2;
        justify-self: start;
        margin: 0;
    }

    .aj-road__code {
        grid-column: 2;
        margin: 2px 0 0;
    }

    .aj-road__title {
        grid-column: 2;
        padding: 0;
    }

    .aj-road__gate {
        display: none;
    }

    .aj-medalgrid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .aj-board {
        grid-template-columns: repeat(4, 260px);
    }

    .aj-funnel__step {
        grid-template-columns: minmax(0, 1fr);
        gap: 4px;
    }

    .aj-hero__stats {
        gap: 6px;
    }

    .aj-cel__card {
        padding: 28px 20px 20px;
    }

    .aj-cel__xp {
        font-size: 2.8rem;
    }

    .aj-kpis--5 {
        grid-template-columns: minmax(0, 1fr);
    }

    .aj-search .aj-input {
        min-width: 0;
    }
}

/* ============================================================== Additions: user profile dots and locked medals */

.aj-arealist .aj-dot {
    width: 8px;
    height: 8px;
    flex: none;
    background: #cbd3e3;
    box-shadow: none;
}

.aj-arealist .aj-dot--completed {
    background: var(--aj-green);
}

.aj-arealist .aj-dot--current {
    background: var(--aj-yellow);
}

.aj-arealist li small {
    margin-left: auto;
    color: var(--aj-muted);
}

.aj-medal.is-locked {
    filter: grayscale(1);
    opacity: .4;
}

.aj-badgeitem > span:last-child small {
    display: block;
    font-weight: 600;
    color: var(--aj-muted);
}

.aj-toolbar .aj-field {
    min-width: 170px;
}

.aj-toolbar > .aj-search {
    flex: 1 1 260px;
}

/* Staff preview bar. */
.aj-previewbar {
    background: var(--aj-yellow-50);
    border-bottom: 1px solid #f3e3a0;
    color: var(--aj-amber-text);
    font-size: .84rem;
    font-weight: 600;
}

.aj-previewbar .aj-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.aj-previewbar span {
    flex: 1;
    min-width: 220px;
}

.aj-previewbar a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--aj-navy) !important;
    font-weight: 800;
}