/* Postbit card */

.vbb-awards-card {
    width: 100%;
    padding: 10px;
    background:
        radial-gradient(circle at top center, rgba(240,178,50,0.10), transparent 58%),
        var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    border-radius: var(--vbb-radius-md);
    overflow: hidden;
}
.vbb-awards-head {
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 9px;
}
.vbb-awards-title {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: var(--vbb-text-main);
    font-size: 12px;
    line-height: 1;
    font-weight: 950;
}
.vbb-awards-title i {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: rgba(240,178,50,0.12);
    color: var(--vbb-warning);
    font-size: 12px;
}
.vbb-awards-count {
    min-width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    padding: 0 7px;
    border-radius: var(--vbb-radius-pill);
    background: var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
    color: var(--vbb-warning);
    font-size: 10px;
    font-weight: 950;
}
.vbb-awards-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}
.vbb-award-item {
    width: 100%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    background: rgba(9,11,16,0.72);
    border: 1px solid var(--vbb-border);
    border-radius: 10px;
    color: var(--vbb-warning);
    transition: 180ms ease;
}
.vbb-award-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(255,255,255,0.08), transparent);
    opacity: 0;
    transform: translateX(-100%);
    transition: 260ms ease;
}
.vbb-award-item:hover {
    border-color: rgba(240,178,50,0.32);
    background: rgba(240,178,50,0.08);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}
.vbb-award-item:hover::before {
    opacity: 1;
    transform: translateX(100%);
}
.vbb-award-item img {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
}
.vbb-awards-empty {
    min-height: 74px;
    display: grid;
    place-items: center;
    padding: 12px;
    background: rgba(9,11,16,0.55);
    border: 1px dashed var(--vbb-border-2);
    border-radius: 10px;
    color: var(--vbb-text-muted);
    font-size: 11px;
    line-height: 1.45;
    font-weight: 800;
    text-align: center;
}
.vbb-award-inline-span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 22px;
    padding: 0 8px;
    border-radius: var(--vbb-radius-pill);
    background: rgba(240,178,50,0.10);
    border: 1px solid rgba(240,178,50,0.24);
    color: var(--vbb-warning);
    font-size: 11px;
    font-weight: 950;
}
@media (max-width: 820px) {
    .vbb-awards-card {
        display: none;
    }
}


/* Uploaded VantaBB award pages */
.vbb-award-profile-card,
.vbb-award-profile-card * {
    box-sizing: border-box;
    min-width: 0;
}

.vbb-award-profile-card {
    width: 100%;
    overflow: hidden;
    background:
        radial-gradient(circle at top center, rgba(240,178,50,0.13), transparent 48%),
        radial-gradient(circle at bottom left, rgba(31,205,118,0.10), transparent 42%),
        var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
    border-radius: var(--vbb-radius-md);
    color: var(--vbb-text-main);
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
}

.vbb-award-profile-cover {
    position: relative;
    min-height: 96px;
    display: grid;
    place-items: end center;
    padding-top: 18px;
    background:
        linear-gradient(180deg, rgba(9,11,16,0.24), rgba(9,11,16,0.90)),
        var(--vbb-award-cover);
    background-size: cover;
    background-position: center;
}

.vbb-award-profile-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at top center, rgba(240,178,50,0.22), transparent 46%),
        linear-gradient(135deg, rgba(255,255,255,0.055), transparent 50%);
    pointer-events: none;
}

.vbb-award-profile-rank {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border-radius: var(--vbb-radius-pill);
    background: rgba(9,11,16,0.72);
    border: 1px solid rgba(240,178,50,0.26);
    color: var(--vbb-warning);
    font-size: 10px;
    line-height: 1;
    font-weight: 950;
    backdrop-filter: blur(12px);
}

.vbb-award-profile-rank i {
    font-size: 11px;
}

.vbb-award-profile-avatar {
    position: relative;
    z-index: 2;
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    margin-bottom: -34px;
    overflow: hidden;
    background: var(--vbb-bg-card-2);
    border: 3px solid var(--vbb-bg-card);
    border-radius: 24px;
    box-shadow: 0 16px 34px rgba(0,0,0,0.38);
}

.vbb-award-profile-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 21px;
}

.vbb-award-profile-body {
    padding: 45px 13px 13px;
    text-align: center;
}

.vbb-award-profile-name {
    color: var(--vbb-text-main);
    font-size: 15px;
    line-height: 1.2;
    font-weight: 950;
    overflow-wrap: anywhere;
}

.vbb-award-profile-name a {
    color: inherit;
    text-decoration: none;
}

.vbb-award-profile-role {
    margin-top: 5px;
    color: var(--vbb-text-muted);
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
}

.vbb-award-profile-progress {
    margin-top: 13px;
    padding: 10px;
    background: rgba(13,16,22,0.74);
    border: 1px solid var(--vbb-border);
    border-radius: 13px;
}

.vbb-award-profile-progress-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 7px;
    color: var(--vbb-text-muted);
    font-size: 11px;
    font-weight: 850;
}

.vbb-award-profile-progress-top strong {
    color: var(--vbb-warning);
    font-size: 11px;
    font-weight: 950;
}

.vbb-award-profile-progress-bar {
    height: 8px;
    overflow: hidden;
    background: var(--vbb-bg-card-3);
    border: 1px solid var(--vbb-border);
    border-radius: var(--vbb-radius-pill);
}

.vbb-award-profile-progress-fill {
    width: 45%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--vbb-accent), var(--vbb-warning));
    box-shadow: 0 0 16px rgba(240,178,50,0.25);
}

.vbb-award-profile-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
}

.vbb-award-profile-stat {
    min-height: 55px;
    display: grid;
    place-items: center;
    gap: 4px;
    padding: 8px 6px;
    background: var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    border-radius: 12px;
}

.vbb-award-profile-stat i {
    color: var(--vbb-warning);
    font-size: 14px;
}

.vbb-award-profile-stat strong {
    color: var(--vbb-text-main);
    font-size: 14px;
    line-height: 1;
    font-weight: 950;
}

.vbb-award-profile-stat span {
    color: var(--vbb-text-dark);
    font-size: 10px;
    line-height: 1;
    font-weight: 850;
}

.vbb-award-showcase {
    margin-top: 11px;
    padding: 10px;
    background: rgba(13,16,22,0.60);
    border: 1px solid var(--vbb-border);
    border-radius: 13px;
}

.vbb-award-showcase-head {
    min-height: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.vbb-award-showcase-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--vbb-text-main);
    font-size: 11px;
    line-height: 1;
    font-weight: 950;
}

.vbb-award-showcase-title i {
    color: var(--vbb-warning);
}

.vbb-award-showcase-link {
    color: var(--vbb-text-dark);
    font-size: 10px;
    font-weight: 900;
    text-decoration: none;
}

.vbb-award-showcase-link:hover {
    color: var(--vbb-accent);
}

.vbb-award-showcase-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.vbb-award-showcase-item {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at center, rgba(240,178,50,0.10), transparent 62%),
        var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    border-radius: 10px;
    transition: 180ms ease;
}

.vbb-award-showcase-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(255,255,255,0.08), transparent);
    opacity: 0;
    transform: translateX(-100%);
    transition: 260ms ease;
}

.vbb-award-showcase-item:hover {
    border-color: rgba(240,178,50,0.34);
    background-color: rgba(240,178,50,0.07);
    transform: translateY(-2px);
}

.vbb-award-showcase-item:hover::before {
    opacity: 1;
    transform: translateX(100%);
}

.vbb-award-showcase-item img {
    width: 26px;
    height: 26px;
    display: block;
    object-fit: contain;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 5px 9px rgba(0,0,0,0.38));
}

.vbb-award-showcase-empty {
    min-height: 72px;
    display: grid;
    place-items: center;
    padding: 12px;
    background: var(--vbb-bg-card-2);
    border: 1px dashed var(--vbb-border-2);
    border-radius: 10px;
    color: var(--vbb-text-muted);
    font-size: 11px;
    line-height: 1.45;
    font-weight: 800;
    text-align: center;
}

.vbb-award-profile-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 11px;
}

.vbb-award-profile-btn {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    background: var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    border-radius: 10px;
    color: var(--vbb-text-soft);
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    text-decoration: none;
    white-space: nowrap;
    transition: 180ms ease;
}

.vbb-award-profile-btn:hover {
    color: var(--vbb-text-main);
    background: var(--vbb-bg-card-3);
    border-color: var(--vbb-border-2);
    transform: translateY(-1px);
}

.vbb-award-profile-btn.is-main {
    background: rgba(240,178,50,0.10);
    border-color: rgba(240,178,50,0.26);
    color: var(--vbb-warning);
}

@media (max-width: 820px) {
    .vbb-award-profile-card {
        border-radius: 14px;
    }

    .vbb-award-profile-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .vbb-award-profile-actions {
        grid-template-columns: 1fr;
    }

    .vbb-award-showcase-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.vbb-awards-main-page,
.vbb-awards-main-page * {
    box-sizing: border-box;
    min-width: 0;
}

.vbb-awards-main-page {
    width: 100%;
    padding: 16px 0 42px;
    color: var(--vbb-text-main);
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
}

.vbb-awards-main-page a {
    color: inherit;
    text-decoration: none;
}

.vbb-awards-main-hero {
    position: relative;
    overflow: hidden;
    min-height: 178px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: 18px;
    align-items: center;
    padding: 20px;
    margin-bottom: 14px;
    background:
        radial-gradient(circle at top left, rgba(240,178,50,0.18), transparent 38%),
        radial-gradient(circle at top right, rgba(31,205,118,0.11), transparent 36%),
        radial-gradient(circle at bottom center, rgba(122,85,255,0.10), transparent 42%),
        var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
    border-radius: var(--vbb-radius-md);
}

.vbb-awards-main-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: 0.32;
    pointer-events: none;
}

.vbb-awards-main-hero::after {
    content: "";
    position: absolute;
    width: 320px;
    height: 320px;
    right: -130px;
    top: -150px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(240,178,50,0.16), transparent 70%);
    pointer-events: none;
}

.vbb-awards-main-hero-content,
.vbb-awards-main-hero-art {
    position: relative;
    z-index: 2;
}

.vbb-awards-main-kicker {
    min-height: 27px;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    margin-bottom: 11px;
    border-radius: var(--vbb-radius-pill);
    background: rgba(240,178,50,0.10);
    border: 1px solid rgba(240,178,50,0.24);
    color: var(--vbb-warning);
    font-size: 11px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.vbb-awards-main-title {
    margin: 0;
    color: var(--vbb-text-main);
    font-size: 28px;
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -0.055em;
}

.vbb-awards-main-desc {
    max-width: 650px;
    margin: 8px 0 0;
    color: var(--vbb-text-muted);
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
}

.vbb-awards-main-hero-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.vbb-awards-main-btn {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    border-radius: var(--vbb-radius-pill);
    background: var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    color: var(--vbb-text-soft);
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
    transition: 180ms ease;
}

.vbb-awards-main-btn:hover {
    color: var(--vbb-text-main);
    background: var(--vbb-bg-card-3);
    border-color: var(--vbb-border-2);
    transform: translateY(-1px);
}

.vbb-awards-main-btn.is-main {
    background: rgba(240,178,50,0.10);
    border-color: rgba(240,178,50,0.26);
    color: var(--vbb-warning);
}

.vbb-awards-main-hero-art {
    width: 142px;
    height: 142px;
    display: grid;
    place-items: center;
    justify-self: end;
    border-radius: 36px;
    background:
        linear-gradient(135deg, rgba(240,178,50,0.16), rgba(31,205,118,0.08)),
        var(--vbb-bg-card-2);
    border: 1px solid rgba(240,178,50,0.26);
    box-shadow: 0 22px 54px rgba(0,0,0,0.35);
}

.vbb-awards-main-hero-art i {
    color: var(--vbb-warning);
    font-size: 60px;
    filter: drop-shadow(0 0 24px rgba(240,178,50,0.30));
}

.vbb-awards-main-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.vbb-awards-main-stat {
    min-height: 82px;
    display: grid;
    gap: 8px;
    padding: 13px;
    background: var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
    border-radius: var(--vbb-radius-md);
}

.vbb-awards-main-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.vbb-awards-main-stat-label {
    color: var(--vbb-text-muted);
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.vbb-awards-main-stat-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(240,178,50,0.10);
    border: 1px solid rgba(240,178,50,0.18);
    color: var(--vbb-warning);
    font-size: 14px;
}

.vbb-awards-main-stat strong {
    color: var(--vbb-text-main);
    font-size: 22px;
    line-height: 1;
    font-weight: 950;
}

.vbb-awards-main-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 292px;
    gap: 14px;
    align-items: start;
}

.vbb-awards-main-content {
    display: grid;
    gap: 14px;
}

.vbb-awards-main-sidebar {
    position: sticky;
    top: 82px;
    display: grid;
    gap: 14px;
}

.vbb-awards-main-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 10px;
    align-items: center;
    padding: 10px;
    background: var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
    border-radius: var(--vbb-radius-md);
}

.vbb-awards-main-tabs {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.vbb-awards-main-tab {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid var(--vbb-border);
    border-radius: var(--vbb-radius-pill);
    background: var(--vbb-bg-card-2);
    color: var(--vbb-text-muted);
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    cursor: pointer;
    transition: 180ms ease;
}

.vbb-awards-main-tab:hover,
.vbb-awards-main-tab.is-active {
    background: rgba(240,178,50,0.10);
    border-color: rgba(240,178,50,0.25);
    color: var(--vbb-warning);
}

.vbb-awards-main-search {
    min-height: 34px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    background: var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    border-radius: var(--vbb-radius-pill);
    color: var(--vbb-text-dark);
}

.vbb-awards-main-search i {
    justify-self: center;
    font-size: 13px;
}

.vbb-awards-main-search input {
    width: 100%;
    height: 32px;
    padding: 0 11px 0 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--vbb-text-main);
    font-size: 12px;
    font-weight: 750;
}

.vbb-awards-main-search input::placeholder {
    color: var(--vbb-text-dark);
}

.vbb-awards-main-block {
    overflow: hidden;
    background: var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
    border-radius: var(--vbb-radius-md);
}

.vbb-awards-main-block-head {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background:
        linear-gradient(90deg, rgba(240,178,50,0.08), transparent 62%),
        var(--vbb-bg-card-2);
    border-bottom: 1px solid var(--vbb-border);
}

.vbb-awards-main-block-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--vbb-text-main);
    font-size: 13px;
    line-height: 1;
    font-weight: 950;
}

.vbb-awards-main-block-title i {
    color: var(--vbb-warning);
}

.vbb-awards-main-block-meta {
    color: var(--vbb-text-dark);
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
}

.vbb-awards-main-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
}

.vbb-awards-main-card {
    position: relative;
    overflow: hidden;
    min-height: 172px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 11px;
    padding: 13px;
    background:
        radial-gradient(circle at top center, rgba(240,178,50,0.09), transparent 48%),
        var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    border-radius: var(--vbb-radius-md);
    transition: 180ms ease;
}

.vbb-awards-main-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(255,255,255,0.075), transparent);
    opacity: 0;
    transform: translateX(-100%);
    transition: 260ms ease;
}

.vbb-awards-main-card:hover {
    border-color: rgba(240,178,50,0.30);
    transform: translateY(-2px);
    box-shadow: 0 16px 38px rgba(0,0,0,0.24);
}

.vbb-awards-main-card:hover::before {
    opacity: 1;
    transform: translateX(100%);
}

.vbb-awards-main-card-top,
.vbb-awards-main-card-body,
.vbb-awards-main-card-foot {
    position: relative;
    z-index: 2;
}

.vbb-awards-main-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.vbb-awards-main-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    background: rgba(9,11,16,0.72);
    border: 1px solid var(--vbb-border);
}

.vbb-awards-main-icon img {
    width: 36px;
    height: 36px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 7px 12px rgba(0,0,0,0.38));
}

.vbb-awards-main-badges {
    display: grid;
    gap: 5px;
    justify-items: end;
}

.vbb-awards-main-badge {
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    border-radius: var(--vbb-radius-pill);
    background: rgba(240,178,50,0.10);
    border: 1px solid rgba(240,178,50,0.22);
    color: var(--vbb-warning);
    font-size: 10px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

.vbb-awards-main-badge.is-owned {
    background: var(--vbb-accent-soft);
    border-color: var(--vbb-border-accent);
    color: var(--vbb-accent);
}

.vbb-awards-main-badge.is-locked {
    background: rgba(237,66,69,0.12);
    border-color: rgba(237,66,69,0.25);
    color: #ff9ca0;
}

.vbb-awards-main-name {
    margin: 0;
    color: var(--vbb-text-main);
    font-size: 14px;
    line-height: 1.25;
    font-weight: 950;
}

.vbb-awards-main-desc-small {
    margin: 6px 0 0;
    color: var(--vbb-text-muted);
    font-size: 11px;
    line-height: 1.5;
    font-weight: 700;
}

.vbb-awards-main-card-foot {
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding-top: 10px;
    border-top: 1px solid var(--vbb-border);
}

.vbb-awards-main-users {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--vbb-text-muted);
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
}

.vbb-awards-main-users i {
    color: var(--vbb-accent);
}

.vbb-awards-main-view {
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    border-radius: var(--vbb-radius-pill);
    background: var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
    color: var(--vbb-text-muted);
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    transition: 180ms ease;
}

.vbb-awards-main-view:hover {
    color: var(--vbb-accent);
    border-color: var(--vbb-border-accent);
    background: var(--vbb-accent-soft);
}

.vbb-awards-main-side-card {
    overflow: hidden;
    background: var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
    border-radius: var(--vbb-radius-md);
}

.vbb-awards-main-side-head {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    background: var(--vbb-bg-card-2);
    border-bottom: 1px solid var(--vbb-border);
    color: var(--vbb-text-main);
    font-size: 13px;
    font-weight: 950;
}

.vbb-awards-main-side-head i {
    color: var(--vbb-warning);
}

.vbb-awards-main-profile {
    padding: 14px;
    text-align: center;
    background:
        radial-gradient(circle at top center, rgba(240,178,50,0.12), transparent 52%),
        var(--vbb-bg-card);
}

.vbb-awards-main-profile-avatar {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    margin: 0 auto 10px;
    overflow: hidden;
    border-radius: 22px;
    background: var(--vbb-bg-card-2);
    border: 2px solid rgba(255,255,255,0.12);
    box-shadow: 0 14px 34px rgba(0,0,0,0.30);
}

.vbb-awards-main-profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vbb-awards-main-profile-name {
    color: var(--vbb-text-main);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 950;
}

.vbb-awards-main-profile-role {
    margin-top: 4px;
    color: var(--vbb-text-muted);
    font-size: 11px;
    font-weight: 850;
}

.vbb-awards-main-progress {
    margin-top: 13px;
}

.vbb-awards-main-progress-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--vbb-text-muted);
    font-size: 11px;
    font-weight: 850;
    margin-bottom: 7px;
}

.vbb-awards-main-progress-top strong {
    color: var(--vbb-warning);
}

.vbb-awards-main-progress-bar {
    height: 8px;
    overflow: hidden;
    background: var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    border-radius: var(--vbb-radius-pill);
}

.vbb-awards-main-progress-fill {
    width: 45%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--vbb-accent), var(--vbb-warning));
}

.vbb-awards-main-rank-list {
    display: grid;
    gap: 8px;
    padding: 10px;
}

.vbb-awards-main-rank {
    min-height: 44px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 7px;
    background: var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    border-radius: 11px;
}

.vbb-awards-main-rank-num {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(240,178,50,0.10);
    color: var(--vbb-warning);
    font-size: 11px;
    font-weight: 950;
}

.vbb-awards-main-rank-name {
    color: var(--vbb-text-main);
    font-size: 12px;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vbb-awards-main-rank-meta {
    margin-top: 2px;
    color: var(--vbb-text-dark);
    font-size: 10px;
    font-weight: 850;
}

.vbb-awards-main-rank-count {
    color: var(--vbb-accent);
    font-size: 12px;
    font-weight: 950;
}

.vbb-awards-main-recent-list {
    display: grid;
    gap: 8px;
    padding: 10px;
}

.vbb-awards-main-recent {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    padding: 8px;
    background: var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    border-radius: 11px;
}

.vbb-awards-main-recent img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    border-radius: 10px;
    background: var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
    padding: 5px;
}

.vbb-awards-main-recent-title {
    color: var(--vbb-text-main);
    font-size: 12px;
    line-height: 1.25;
    font-weight: 950;
}

.vbb-awards-main-recent-meta {
    margin-top: 3px;
    color: var(--vbb-text-dark);
    font-size: 10px;
    font-weight: 850;
}

.vbb-awards-main-empty {
    min-height: 190px;
    display: none;
    place-items: center;
    padding: 26px;
    color: var(--vbb-text-muted);
    font-size: 12px;
    font-weight: 850;
    text-align: center;
}

.vbb-awards-main-grid.is-empty {
    display: none;
}

.vbb-awards-main-empty.is-visible {
    display: grid;
}

@media (max-width: 1180px) {
    .vbb-awards-main-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vbb-awards-main-layout {
        grid-template-columns: minmax(0, 1fr) 270px;
    }
}

@media (max-width: 920px) {
    .vbb-awards-main-hero,
    .vbb-awards-main-layout,
    .vbb-awards-main-toolbar {
        grid-template-columns: 1fr;
    }

    .vbb-awards-main-hero-art {
        display: none;
    }

    .vbb-awards-main-sidebar {
        position: static;
    }

    .vbb-awards-main-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .vbb-awards-main-page {
        padding-top: 12px;
    }

    .vbb-awards-main-hero {
        padding: 16px;
        min-height: 0;
    }

    .vbb-awards-main-title {
        font-size: 23px;
    }

    .vbb-awards-main-stats,
    .vbb-awards-main-grid {
        grid-template-columns: 1fr;
    }

    .vbb-awards-main-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vbb-awards-main-tab,
    .vbb-awards-main-btn {
        width: 100%;
    }

    .vbb-awards-main-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }
}

.vbb-award-view-page,
.vbb-award-view-page * {
    box-sizing: border-box;
    min-width: 0;
}

.vbb-award-view-page {
    width: 100%;
    padding: 16px 0 42px;
    color: var(--vbb-text-main);
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
}

.vbb-award-view-page a {
    color: inherit;
    text-decoration: none;
}

.vbb-award-view-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 18px;
    margin-bottom: 14px;
    background:
        radial-gradient(circle at top left, rgba(240,178,50,0.18), transparent 40%),
        radial-gradient(circle at bottom right, rgba(31,205,118,0.10), transparent 42%),
        var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
    border-radius: var(--vbb-radius-md);
}

.vbb-award-view-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: 0.28;
    pointer-events: none;
}

.vbb-award-view-icon,
.vbb-award-view-info,
.vbb-award-view-actions {
    position: relative;
    z-index: 2;
}

.vbb-award-view-icon {
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    border-radius: 30px;
    background:
        radial-gradient(circle at center, rgba(240,178,50,0.14), transparent 60%),
        var(--vbb-bg-card-2);
    border: 1px solid rgba(240,178,50,0.28);
    box-shadow: 0 20px 46px rgba(0,0,0,0.34);
}

.vbb-award-view-icon img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    filter: drop-shadow(0 10px 18px rgba(0,0,0,0.42));
}

.vbb-award-view-kicker {
    min-height: 27px;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    margin-bottom: 10px;
    border-radius: var(--vbb-radius-pill);
    background: rgba(240,178,50,0.10);
    border: 1px solid rgba(240,178,50,0.25);
    color: var(--vbb-warning);
    font-size: 11px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.vbb-award-view-title {
    margin: 0;
    color: var(--vbb-text-main);
    font-size: 28px;
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -0.055em;
    overflow-wrap: anywhere;
}

.vbb-award-view-desc {
    max-width: 720px;
    margin: 8px 0 0;
    color: var(--vbb-text-muted);
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
}

.vbb-award-view-tags {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 12px;
}

.vbb-award-view-tag {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border-radius: var(--vbb-radius-pill);
    background: var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    color: var(--vbb-text-muted);
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
}

.vbb-award-view-tag.is-rare {
    background: rgba(240,178,50,0.10);
    border-color: rgba(240,178,50,0.25);
    color: var(--vbb-warning);
}

.vbb-award-view-tag.is-owned {
    background: var(--vbb-accent-soft);
    border-color: var(--vbb-border-accent);
    color: var(--vbb-accent);
}

.vbb-award-view-actions {
    display: grid;
    gap: 8px;
    justify-items: end;
}

.vbb-award-view-btn {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    border-radius: var(--vbb-radius-pill);
    background: var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    color: var(--vbb-text-soft);
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
    transition: 180ms ease;
}

.vbb-award-view-btn:hover {
    color: var(--vbb-text-main);
    background: var(--vbb-bg-card-3);
    border-color: var(--vbb-border-2);
    transform: translateY(-1px);
}

.vbb-award-view-btn.is-main {
    background: rgba(240,178,50,0.10);
    border-color: rgba(240,178,50,0.26);
    color: var(--vbb-warning);
}

.vbb-award-view-btn.is-green {
    background: var(--vbb-accent-soft);
    border-color: var(--vbb-border-accent);
    color: var(--vbb-accent);
}

.vbb-award-view-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.vbb-award-view-stat {
    min-height: 78px;
    display: grid;
    gap: 7px;
    padding: 13px;
    background: var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
    border-radius: var(--vbb-radius-md);
}

.vbb-award-view-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.vbb-award-view-stat-label {
    color: var(--vbb-text-muted);
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.vbb-award-view-stat-icon {
    width: 29px;
    height: 29px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(240,178,50,0.10);
    border: 1px solid rgba(240,178,50,0.18);
    color: var(--vbb-warning);
    font-size: 13px;
}

.vbb-award-view-stat strong {
    color: var(--vbb-text-main);
    font-size: 21px;
    line-height: 1;
    font-weight: 950;
}

.vbb-award-view-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 14px;
    align-items: start;
}

.vbb-award-view-main {
    display: grid;
    gap: 14px;
}

.vbb-award-view-side {
    position: sticky;
    top: 82px;
    display: grid;
    gap: 14px;
}

.vbb-award-view-block {
    overflow: hidden;
    background: var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
    border-radius: var(--vbb-radius-md);
}

.vbb-award-view-block-head {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background:
        linear-gradient(90deg, rgba(240,178,50,0.08), transparent 62%),
        var(--vbb-bg-card-2);
    border-bottom: 1px solid var(--vbb-border);
}

.vbb-award-view-block-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--vbb-text-main);
    font-size: 13px;
    line-height: 1;
    font-weight: 950;
}

.vbb-award-view-block-title i {
    color: var(--vbb-warning);
}

.vbb-award-view-block-meta {
    color: var(--vbb-text-dark);
    font-size: 11px;
    font-weight: 850;
}

.vbb-award-view-body {
    padding: 14px;
    color: var(--vbb-text-soft);
    font-size: 13px;
    line-height: 1.65;
    font-weight: 700;
}

.vbb-award-view-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.vbb-award-view-info-card {
    min-height: 70px;
    display: grid;
    gap: 6px;
    padding: 12px;
    background: var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    border-radius: 12px;
}

.vbb-award-view-info-card span {
    color: var(--vbb-text-muted);
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vbb-award-view-info-card strong {
    color: var(--vbb-text-main);
    font-size: 14px;
    line-height: 1.25;
    font-weight: 950;
}

.vbb-award-view-requirements {
    display: grid;
    gap: 8px;
}

.vbb-award-view-requirement {
    min-height: 42px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 9px;
    background: var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    border-radius: 11px;
}

.vbb-award-view-requirement i {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--vbb-accent-soft);
    border: 1px solid var(--vbb-border-accent);
    color: var(--vbb-accent);
    font-size: 12px;
}

.vbb-award-view-requirement span {
    color: var(--vbb-text-soft);
    font-size: 12px;
    font-weight: 800;
}

.vbb-award-view-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 10px;
    align-items: center;
    padding: 10px;
    background: var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
    border-radius: var(--vbb-radius-md);
}

.vbb-award-view-tabs {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.vbb-award-view-tab {
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    border-radius: var(--vbb-radius-pill);
    background: var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    color: var(--vbb-text-muted);
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    cursor: pointer;
    transition: 180ms ease;
}

.vbb-award-view-tab:hover,
.vbb-award-view-tab.is-active {
    background: rgba(240,178,50,0.10);
    border-color: rgba(240,178,50,0.25);
    color: var(--vbb-warning);
}

.vbb-award-view-search {
    min-height: 33px;
    display: grid;
    grid-template-columns: 33px minmax(0, 1fr);
    align-items: center;
    background: var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    border-radius: var(--vbb-radius-pill);
    color: var(--vbb-text-dark);
}

.vbb-award-view-search i {
    justify-self: center;
    font-size: 12px;
}

.vbb-award-view-search input {
    width: 100%;
    height: 31px;
    padding: 0 10px 0 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--vbb-text-main);
    font-size: 12px;
    font-weight: 750;
}

.vbb-award-view-search input::placeholder {
    color: var(--vbb-text-dark);
}

.vbb-award-view-holders {
    display: grid;
    gap: 9px;
    padding: 12px;
}

.vbb-award-view-holder {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 9px;
    background: var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    border-radius: 12px;
}

.vbb-award-view-holder-avatar {
    width: 46px;
    height: 46px;
    overflow: hidden;
    border-radius: 15px;
    background: var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
}

.vbb-award-view-holder-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vbb-award-view-holder-name {
    color: var(--vbb-text-main);
    font-size: 13px;
    line-height: 1.2;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vbb-award-view-holder-meta {
    margin-top: 3px;
    color: var(--vbb-text-dark);
    font-size: 10px;
    font-weight: 850;
}

.vbb-award-view-holder-date {
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: var(--vbb-radius-pill);
    background: var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
    color: var(--vbb-text-muted);
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
}

.vbb-award-view-side-card {
    overflow: hidden;
    background: var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
    border-radius: var(--vbb-radius-md);
}

.vbb-award-view-side-head {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    background: var(--vbb-bg-card-2);
    border-bottom: 1px solid var(--vbb-border);
    color: var(--vbb-text-main);
    font-size: 13px;
    font-weight: 950;
}

.vbb-award-view-side-head i {
    color: var(--vbb-warning);
}

.vbb-award-view-rarity {
    padding: 14px;
    text-align: center;
}

.vbb-award-view-ring {
    width: 108px;
    height: 108px;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: conic-gradient(var(--vbb-warning) 0 18%, var(--vbb-bg-card-2) 18% 100%);
    position: relative;
}

.vbb-award-view-ring::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
}

.vbb-award-view-ring strong {
    position: relative;
    z-index: 2;
    color: var(--vbb-warning);
    font-size: 20px;
    font-weight: 950;
}

.vbb-award-view-ring-label {
    color: var(--vbb-text-muted);
    font-size: 11px;
    font-weight: 850;
}

.vbb-award-view-side-list {
    display: grid;
    gap: 8px;
    padding: 10px;
}

.vbb-award-view-side-line {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 10px;
    background: var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    border-radius: 10px;
    color: var(--vbb-text-muted);
    font-size: 11px;
    font-weight: 850;
}

.vbb-award-view-side-line strong {
    color: var(--vbb-text-main);
    font-size: 11px;
    font-weight: 950;
}

.vbb-award-view-related {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    padding: 8px;
    background: var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    border-radius: 11px;
}

.vbb-award-view-related img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    padding: 5px;
    border-radius: 10px;
    background: var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
}

.vbb-award-view-related-title {
    color: var(--vbb-text-main);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 950;
}

.vbb-award-view-related-meta {
    margin-top: 3px;
    color: var(--vbb-text-dark);
    font-size: 10px;
    font-weight: 850;
}

.vbb-award-view-empty {
    min-height: 150px;
    display: none;
    place-items: center;
    padding: 24px;
    color: var(--vbb-text-muted);
    font-size: 12px;
    font-weight: 850;
    text-align: center;
}

.vbb-award-view-holders.is-empty {
    display: none;
}

.vbb-award-view-empty.is-visible {
    display: grid;
}

@media (max-width: 1050px) {
    .vbb-award-view-layout {
        grid-template-columns: minmax(0, 1fr) 270px;
    }

    .vbb-award-view-hero {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .vbb-award-view-actions {
        grid-column: 1 / -1;
        justify-items: start;
        display: flex;
        flex-wrap: wrap;
    }

    .vbb-award-view-icon {
        width: 96px;
        height: 96px;
        border-radius: 26px;
    }

    .vbb-award-view-icon img {
        width: 66px;
        height: 66px;
    }
}

@media (max-width: 820px) {
    .vbb-award-view-layout,
    .vbb-award-view-toolbar {
        grid-template-columns: 1fr;
    }

    .vbb-award-view-side {
        position: static;
    }

    .vbb-award-view-stats,
    .vbb-award-view-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .vbb-award-view-hero {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .vbb-award-view-icon {
        width: 86px;
        height: 86px;
    }

    .vbb-award-view-icon img {
        width: 58px;
        height: 58px;
    }

    .vbb-award-view-title {
        font-size: 23px;
    }

    .vbb-award-view-stats,
    .vbb-award-view-info-grid {
        grid-template-columns: 1fr;
    }

    .vbb-award-view-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vbb-award-view-tab {
        width: 100%;
        justify-content: center;
    }

    .vbb-award-view-holder {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .vbb-award-view-holder-date {
        grid-column: 2;
        justify-self: start;
    }
}

.vbb-my-awards-page,
.vbb-my-awards-page * {
    box-sizing: border-box;
    min-width: 0;
}

.vbb-my-awards-page {
    width: 100%;
    padding: 16px 0 42px;
    color: var(--vbb-text-main);
    font-family: "Inter", "Segoe UI", Arial, sans-serif;
}

.vbb-my-awards-page a {
    color: inherit;
    text-decoration: none;
}

.vbb-my-awards-hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 18px;
    margin-bottom: 14px;
    background:
        radial-gradient(circle at top left, rgba(240,178,50,0.18), transparent 38%),
        radial-gradient(circle at bottom right, rgba(31,205,118,0.11), transparent 42%),
        var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
    border-radius: var(--vbb-radius-md);
}

.vbb-my-awards-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: 0.28;
    pointer-events: none;
}

.vbb-my-awards-avatar,
.vbb-my-awards-hero-main,
.vbb-my-awards-hero-actions {
    position: relative;
    z-index: 2;
}

.vbb-my-awards-avatar {
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 24px;
    background: var(--vbb-bg-card-2);
    border: 2px solid rgba(255,255,255,0.13);
    box-shadow: 0 16px 38px rgba(0,0,0,0.34);
}

.vbb-my-awards-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.vbb-my-awards-kicker {
    min-height: 27px;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 11px;
    margin-bottom: 10px;
    border-radius: var(--vbb-radius-pill);
    background: rgba(240,178,50,0.10);
    border: 1px solid rgba(240,178,50,0.25);
    color: var(--vbb-warning);
    font-size: 11px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.vbb-my-awards-title {
    margin: 0;
    color: var(--vbb-text-main);
    font-size: 27px;
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -0.055em;
    overflow-wrap: anywhere;
}

.vbb-my-awards-desc {
    max-width: 660px;
    margin: 7px 0 0;
    color: var(--vbb-text-muted);
    font-size: 13px;
    line-height: 1.6;
    font-weight: 700;
}

.vbb-my-awards-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.vbb-my-awards-btn {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    border-radius: var(--vbb-radius-pill);
    background: var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    color: var(--vbb-text-soft);
    font-size: 12px;
    line-height: 1;
    font-weight: 900;
    white-space: nowrap;
    cursor: pointer;
    transition: 180ms ease;
}

.vbb-my-awards-btn:hover {
    color: var(--vbb-text-main);
    background: var(--vbb-bg-card-3);
    border-color: var(--vbb-border-2);
    transform: translateY(-1px);
}

.vbb-my-awards-btn.is-main {
    background: rgba(240,178,50,0.10);
    border-color: rgba(240,178,50,0.26);
    color: var(--vbb-warning);
}

.vbb-my-awards-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.vbb-my-awards-stat {
    min-height: 82px;
    display: grid;
    gap: 8px;
    padding: 13px;
    background: var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
    border-radius: var(--vbb-radius-md);
}

.vbb-my-awards-stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.vbb-my-awards-stat-label {
    color: var(--vbb-text-muted);
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.vbb-my-awards-stat-icon {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: rgba(240,178,50,0.10);
    border: 1px solid rgba(240,178,50,0.18);
    color: var(--vbb-warning);
    font-size: 14px;
}

.vbb-my-awards-stat strong {
    color: var(--vbb-text-main);
    font-size: 22px;
    line-height: 1;
    font-weight: 950;
}

.vbb-my-awards-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 14px;
    align-items: start;
}

.vbb-my-awards-main {
    display: grid;
    gap: 14px;
}

.vbb-my-awards-side {
    position: sticky;
    top: 82px;
    display: grid;
    gap: 14px;
}

.vbb-my-awards-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 250px;
    gap: 10px;
    align-items: center;
    padding: 10px;
    background: var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
    border-radius: var(--vbb-radius-md);
}

.vbb-my-awards-tabs {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.vbb-my-awards-tab {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    border-radius: var(--vbb-radius-pill);
    background: var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    color: var(--vbb-text-muted);
    font-size: 11px;
    line-height: 1;
    font-weight: 900;
    cursor: pointer;
    transition: 180ms ease;
}

.vbb-my-awards-tab:hover,
.vbb-my-awards-tab.is-active {
    background: rgba(240,178,50,0.10);
    border-color: rgba(240,178,50,0.25);
    color: var(--vbb-warning);
}

.vbb-my-awards-search {
    min-height: 34px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: center;
    background: var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    border-radius: var(--vbb-radius-pill);
    color: var(--vbb-text-dark);
}

.vbb-my-awards-search i {
    justify-self: center;
    font-size: 13px;
}

.vbb-my-awards-search input {
    width: 100%;
    height: 32px;
    padding: 0 11px 0 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--vbb-text-main);
    font-size: 12px;
    font-weight: 750;
}

.vbb-my-awards-search input::placeholder {
    color: var(--vbb-text-dark);
}

.vbb-my-awards-block {
    overflow: hidden;
    background: var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
    border-radius: var(--vbb-radius-md);
}

.vbb-my-awards-block-head {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    background:
        linear-gradient(90deg, rgba(240,178,50,0.08), transparent 62%),
        var(--vbb-bg-card-2);
    border-bottom: 1px solid var(--vbb-border);
}

.vbb-my-awards-block-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--vbb-text-main);
    font-size: 13px;
    line-height: 1;
    font-weight: 950;
}

.vbb-my-awards-block-title i {
    color: var(--vbb-warning);
}

.vbb-my-awards-block-meta {
    color: var(--vbb-text-dark);
    font-size: 11px;
    font-weight: 850;
}

.vbb-my-awards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
}

.vbb-my-award-card {
    position: relative;
    overflow: hidden;
    min-height: 180px;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 11px;
    padding: 13px;
    background:
        radial-gradient(circle at top center, rgba(240,178,50,0.09), transparent 48%),
        var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    border-radius: var(--vbb-radius-md);
    transition: 180ms ease;
}

.vbb-my-award-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(255,255,255,0.075), transparent);
    opacity: 0;
    transform: translateX(-100%);
    transition: 260ms ease;
}

.vbb-my-award-card:hover {
    border-color: rgba(240,178,50,0.30);
    transform: translateY(-2px);
    box-shadow: 0 16px 38px rgba(0,0,0,0.24);
}

.vbb-my-award-card:hover::before {
    opacity: 1;
    transform: translateX(100%);
}

.vbb-my-award-card-top,
.vbb-my-award-card-body,
.vbb-my-award-card-foot {
    position: relative;
    z-index: 2;
}

.vbb-my-award-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.vbb-my-award-icon {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    background: rgba(9,11,16,0.72);
    border: 1px solid var(--vbb-border);
}

.vbb-my-award-icon img {
    width: 38px;
    height: 38px;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 7px 12px rgba(0,0,0,0.38));
}

.vbb-my-award-badges {
    display: grid;
    gap: 5px;
    justify-items: end;
}

.vbb-my-award-badge {
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    border-radius: var(--vbb-radius-pill);
    background: var(--vbb-accent-soft);
    border: 1px solid var(--vbb-border-accent);
    color: var(--vbb-accent);
    font-size: 10px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

.vbb-my-award-badge.is-rare {
    background: rgba(240,178,50,0.10);
    border-color: rgba(240,178,50,0.22);
    color: var(--vbb-warning);
}

.vbb-my-award-badge.is-staff {
    background: rgba(122,85,255,0.12);
    border-color: rgba(122,85,255,0.28);
    color: #a996ff;
}

.vbb-my-award-name {
    margin: 0;
    color: var(--vbb-text-main);
    font-size: 14px;
    line-height: 1.25;
    font-weight: 950;
}

.vbb-my-award-desc {
    margin: 6px 0 0;
    color: var(--vbb-text-muted);
    font-size: 11px;
    line-height: 1.5;
    font-weight: 700;
}

.vbb-my-award-card-foot {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    padding-top: 10px;
    border-top: 1px solid var(--vbb-border);
}

.vbb-my-award-date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--vbb-text-muted);
    font-size: 11px;
    line-height: 1;
    font-weight: 850;
}

.vbb-my-award-date i {
    color: var(--vbb-warning);
}

.vbb-my-award-view {
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0 8px;
    border-radius: var(--vbb-radius-pill);
    background: var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
    color: var(--vbb-text-muted);
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    transition: 180ms ease;
}

.vbb-my-award-view:hover {
    color: var(--vbb-accent);
    border-color: var(--vbb-border-accent);
    background: var(--vbb-accent-soft);
}

.vbb-my-awards-side-card {
    overflow: hidden;
    background: var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
    border-radius: var(--vbb-radius-md);
}

.vbb-my-awards-side-head {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    background: var(--vbb-bg-card-2);
    border-bottom: 1px solid var(--vbb-border);
    color: var(--vbb-text-main);
    font-size: 13px;
    font-weight: 950;
}

.vbb-my-awards-side-head i {
    color: var(--vbb-warning);
}

.vbb-my-awards-progress-box {
    padding: 14px;
    text-align: center;
    background:
        radial-gradient(circle at top center, rgba(240,178,50,0.12), transparent 52%),
        var(--vbb-bg-card);
}

.vbb-my-awards-ring {
    width: 112px;
    height: 112px;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: conic-gradient(var(--vbb-warning) 0 45%, var(--vbb-bg-card-2) 45% 100%);
    position: relative;
}

.vbb-my-awards-ring::before {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
}

.vbb-my-awards-ring strong {
    position: relative;
    z-index: 2;
    color: var(--vbb-warning);
    font-size: 21px;
    font-weight: 950;
}

.vbb-my-awards-progress-title {
    color: var(--vbb-text-main);
    font-size: 13px;
    font-weight: 950;
}

.vbb-my-awards-progress-sub {
    margin-top: 4px;
    color: var(--vbb-text-muted);
    font-size: 11px;
    font-weight: 800;
}

.vbb-my-awards-progress-list {
    display: grid;
    gap: 8px;
    padding: 10px;
}

.vbb-my-awards-line {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 10px;
    background: var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    border-radius: 10px;
    color: var(--vbb-text-muted);
    font-size: 11px;
    font-weight: 850;
}

.vbb-my-awards-line strong {
    color: var(--vbb-text-main);
    font-size: 11px;
    font-weight: 950;
}

.vbb-my-awards-next-list {
    display: grid;
    gap: 8px;
    padding: 10px;
}

.vbb-my-awards-next {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    padding: 8px;
    background: var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    border-radius: 11px;
}

.vbb-my-awards-next img {
    width: 40px;
    height: 40px;
    display: block;
    object-fit: contain;
    padding: 5px;
    border-radius: 11px;
    background: var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
    opacity: 0.72;
    filter: grayscale(0.35);
}

.vbb-my-awards-next-title {
    color: var(--vbb-text-main);
    font-size: 12px;
    line-height: 1.25;
    font-weight: 950;
}

.vbb-my-awards-next-meta {
    margin-top: 3px;
    color: var(--vbb-text-dark);
    font-size: 10px;
    line-height: 1;
    font-weight: 850;
}

.vbb-my-awards-timeline {
    display: grid;
    gap: 9px;
    padding: 12px;
}

.vbb-my-awards-timeline-item {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 9px;
    background: var(--vbb-bg-card-2);
    border: 1px solid var(--vbb-border);
    border-radius: 12px;
}

.vbb-my-awards-timeline-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: rgba(240,178,50,0.10);
    border: 1px solid rgba(240,178,50,0.20);
    color: var(--vbb-warning);
    font-size: 14px;
}

.vbb-my-awards-timeline-title {
    color: var(--vbb-text-main);
    font-size: 12px;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vbb-my-awards-timeline-meta {
    margin-top: 3px;
    color: var(--vbb-text-dark);
    font-size: 10px;
    font-weight: 850;
}

.vbb-my-awards-timeline-date {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border-radius: var(--vbb-radius-pill);
    background: var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
    color: var(--vbb-text-muted);
    font-size: 10px;
    font-weight: 900;
    white-space: nowrap;
}

.vbb-my-awards-empty {
    min-height: 190px;
    display: none;
    place-items: center;
    padding: 26px;
    color: var(--vbb-text-muted);
    font-size: 12px;
    font-weight: 850;
    text-align: center;
}

.vbb-my-awards-grid.is-empty {
    display: none;
}

.vbb-my-awards-empty.is-visible {
    display: grid;
}

@media (max-width: 1180px) {
    .vbb-my-awards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vbb-my-awards-layout {
        grid-template-columns: minmax(0, 1fr) 280px;
    }
}

@media (max-width: 920px) {
    .vbb-my-awards-hero,
    .vbb-my-awards-layout,
    .vbb-my-awards-toolbar {
        grid-template-columns: 1fr;
    }

    .vbb-my-awards-hero-actions {
        justify-content: flex-start;
    }

    .vbb-my-awards-side {
        position: static;
    }

    .vbb-my-awards-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .vbb-my-awards-page {
        padding-top: 12px;
    }

    .vbb-my-awards-hero {
        padding: 16px;
    }

    .vbb-my-awards-avatar {
        width: 70px;
        height: 70px;
        border-radius: 21px;
    }

    .vbb-my-awards-title {
        font-size: 23px;
    }

    .vbb-my-awards-stats,
    .vbb-my-awards-grid {
        grid-template-columns: 1fr;
    }

    .vbb-my-awards-tabs {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .vbb-my-awards-tab,
    .vbb-my-awards-btn {
        width: 100%;
        justify-content: center;
    }

    .vbb-my-awards-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .vbb-my-awards-timeline-item {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .vbb-my-awards-timeline-date {
        grid-column: 2;
        justify-self: start;
    }
}
/* VantaBB Awards extras: award likes + MyAlerts icons */
.vbb-awards-liked,
.vbb-award-view-btn.vbb-awards-liked {
    background: rgba(255,92,138,0.12);
    border-color: rgba(255,92,138,0.30);
    color: #ff5c8a;
}

.vbb-alert-sub-icon.award,
.vbb-alerts-sub-icon.award,
.vbb-alerts-setting-icon.award {
    background: #f0b232;
    color: #1b1305;
}

.vbb-alert-sub-icon.award-approved,
.vbb-alerts-sub-icon.award-approved,
.vbb-alerts-setting-icon.award-approved {
    background: #1fcd76;
    color: #06130c;
}

.vbb-alert-sub-icon.award-denied,
.vbb-alerts-sub-icon.award-denied,
.vbb-alerts-setting-icon.award-denied {
    background: #ed4245;
    color: #ffffff;
}

.vbb-alert-sub-icon.award-request,
.vbb-alerts-sub-icon.award-request,
.vbb-alerts-setting-icon.award-request {
    background: #9b6cff;
    color: #ffffff;
}


/* 1.1.3 row-structure fixes: holder rows and recent award rows keep valid HTML. */
.vbb-award-view-holder {
    width: 100%;
    min-height: 66px;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 11px;
    border-radius: 13px;
    color: inherit;
    text-decoration: none;
    transition: 180ms ease;
}

.vbb-award-view-holder:hover {
    background: var(--vbb-bg-card-3);
    border-color: rgba(240,178,50,0.28);
    transform: translateY(-1px);
}

.vbb-award-view-holder-avatar {
    width: 48px;
    height: 48px;
    display: block;
    border-radius: 16px;
}

.vbb-award-view-holder-info {
    display: grid;
    gap: 4px;
    align-content: center;
    min-width: 0;
}

.vbb-award-view-holder-name {
    display: block;
    font-size: 13px;
}

.vbb-award-view-holder-name .style8,
.vbb-awards-main-recent-meta .style8 {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

.vbb-award-view-holder-meta {
    display: block;
    margin-top: 0;
    font-size: 11px;
    line-height: 1;
}

.vbb-award-view-holder-date {
    min-height: 26px;
    justify-content: center;
    padding: 0 10px;
    font-size: 10px;
    font-weight: 950;
}

.vbb-awards-main-recent {
    width: 100%;
    min-height: 58px;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 12px;
    transition: 180ms ease;
}

.vbb-awards-main-recent:hover {
    background: var(--vbb-bg-card-3);
    border-color: rgba(240,178,50,0.28);
    transform: translateY(-1px);
}

.vbb-awards-main-recent-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 12px;
    background: var(--vbb-bg-card);
    border: 1px solid var(--vbb-border);
}

.vbb-awards-main-recent-icon img,
.vbb-awards-main-recent img {
    width: 30px;
    height: 30px;
    display: block;
    object-fit: contain;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    filter: drop-shadow(0 5px 9px rgba(0,0,0,0.35));
}

.vbb-awards-main-recent-info {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.vbb-awards-main-recent-title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vbb-awards-main-recent-title:hover,
.vbb-awards-main-recent-meta a:hover {
    color: var(--vbb-accent);
}

.vbb-awards-main-recent-meta {
    margin-top: 0;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vbb-awards-main-recent-meta a {
    color: var(--vbb-text-muted);
    text-decoration: none;
    font-weight: 950;
}

@media (max-width: 560px) {
    .vbb-award-view-holder {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    .vbb-award-view-holder-avatar {
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }

    .vbb-award-view-holder-date {
        grid-column: 2;
        justify-self: start;
    }

    .vbb-awards-main-recent {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .vbb-awards-main-recent-icon {
        width: 40px;
        height: 40px;
    }
}