.spatium-dashboard {
    --lx-shell-max: 1280px;
    --lx-gap: 18px;
    --lx-radius: 22px;
    --lx-bg-top: #0a0f18;
    --lx-bg-bottom: #09101b;
    font-family: "Open Sans", sans-serif;
    color: #fff;
    width: 100%;
}

.spatium-dashboard * {
    box-sizing: border-box;
}

.lxk-dashboard-shell {
    width: 100%;
    max-width: var(--lx-shell-max);
    margin: 0 auto;
    padding: 24px 14px;
}

.lxk-dashboard-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 auto 18px;
    padding: 18px 14px 0;
}

.lxk-brand-mark {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
    flex: 0 0 54px;
}

.lxk-brand-mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lxk-brand-copy h2 {
    margin: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 30px;
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -.02em;
    color: #fff;
}

.lxk-brand-copy p {
    margin: 5px 0 0;
    max-width: 860px;
    font-size: 13.4px;
    line-height: 1.55;
    color: rgba(255,255,255,.72);
}

.lxk-grid-wrap {
    width: 100%;
    max-width: var(--lx-shell-max);
    margin: 0 auto;
    padding: 0 14px;
    position: relative;
}

.lxk-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--lx-gap);
    align-items: stretch;
}

.lxk-card {
    --accent: 86,156,255;
    position: relative;
    overflow: hidden;
    min-height: 188px;
    padding: 16px 17px 15px;
    border-radius: var(--lx-radius);
    color: #fff;
    display: grid;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 7px;
    background: linear-gradient(180deg, rgba(12,18,34,.76) 0%, rgba(5,9,18,.95) 100%);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 40px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
    isolation: isolate;
}

.lxk-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 88% 12%, rgba(var(--accent), .18) 0%, rgba(var(--accent), 0) 42%),
      linear-gradient(135deg, rgba(255,72,72,.08) 0%, rgba(255,72,72,0) 42%);
    z-index: 0;
    pointer-events: none;
}

.lxk-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 17px;
    right: 17px;
    height: 2px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(var(--accent), .96) 52%, rgba(255,112,112,.74) 100%);
    z-index: 1;
}

.lxk-card:hover {
    transform: translateY(-5px);
    border-color: rgba(var(--accent), .34);
    box-shadow: 0 24px 52px rgba(0,0,0,.34), 0 0 0 1px rgba(var(--accent), .08), 0 0 28px rgba(var(--accent), .14);
}

.lxk-card > * {
    position: relative;
    z-index: 2;
}

.lxk-kicker,
.lxk-meta,
.lxk-wallet-btn {
    font-family: "Montserrat", sans-serif;
}

.lxk-kicker {
    margin: 0;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255,255,255,.58);
}

.lxk-title {
    margin: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.04;
    letter-spacing: -.02em;
    color: #fff;
}

.lxk-desc {
    margin: 0;
    font-size: 12.8px;
    font-weight: 400;
    line-height: 1.48;
    color: rgba(255,255,255,.79);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lxk-value-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 4px;
    min-height: 54px;
}

.lxk-value {
    margin: 0;
    font-family: "Montserrat", sans-serif;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -.02em;
    color: #fff;
    word-break: break-word;
}

.lxk-subvalue,
.lxk-wallet-status {
    margin: 0;
    font-size: 12px;
    line-height: 1.45;
    color: rgba(255,255,255,.66);
}

.lxk-wallet-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 11px 16px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background: rgba(255,255,255,.06);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.lxk-wallet-btn:hover,
.lxk-wallet-btn:focus {
    transform: translateY(-2px);
    border-color: rgba(255,255,255,.24);
    box-shadow: 0 12px 28px rgba(0,0,0,.22);
    outline: none;
}

.lxk-wallet-btn[disabled] {
    opacity: .72;
    cursor: wait;
}

.lxk-meta {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-top: 4px;
    font-size: 9px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.46);
}


.lxk-dashboard-footer {
    padding: 18px 14px 0;
    font-size: 12px;
    color: rgba(255,255,255,.5);
}

.lxk-blue { --accent: 86,156,255; }
.lxk-violet { --accent: 142,108,255; }
.lxk-red { --accent: 255,92,122; }
.lxk-cyan { --accent: 0,212,201; }
.lxk-gold { --accent: 255,210,84; }
.lxk-orange { --accent: 255,156,92; }
.lxk-green { --accent: 123,217,142; }
.lxk-ruby { --accent: 255,84,120; }

@media (max-width: 1180px) {
    .lxk-brand-copy h2 { font-size: 27px; }
    .lxk-title { font-size: 21px; }
    .lxk-card { min-height: 176px; }
}

@media (max-width: 860px) {
    .lxk-dashboard-shell,
    .lxk-grid-wrap { padding-left: 10px; padding-right: 10px; }
    .lxk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
    .lxk-title { font-size: 20px; }
}

@media (max-width: 560px) {
    .lxk-dashboard-header { padding-left: 10px; padding-right: 10px; }
    .lxk-brand-copy h2 { font-size: 23px; }
    .lxk-grid { grid-template-columns: 1fr; gap: 12px; }
    .lxk-card { min-height: 160px; padding: 15px 15px 14px; border-radius: 18px; }
    .lxk-title { font-size: 20px; }
    .lxk-desc { font-size: 12.5px; }
    .lxk-value { font-size: 20px; }
}

.lxk-card[data-link-enabled="0"] .lxk-arrow {
    display: none;
}

.lxk-card.lxk-card-linkable {
    cursor: pointer;
}

.lxk-card.lxk-card-linkable:focus-visible {
    outline: 2px solid rgba(255,255,255,.35);
    outline-offset: 2px;
}