.page-list .list-container,
.page-list .level-container,
.page-list .meta-container {
    padding-block: 2rem;
}
.page-list .list-container {
    padding-inline: 1rem;
}
.page-list .meta-container {
    padding-right: 2rem;
}
.desc {
    text-align: center;
}
.link-button {
    margin-left: 0.5em;
    height: 50px;
    width: 50px;
    border-style: solid;
    border-width: 5px;
    border-color: white;
    border-radius: 25%;
}
.link-button:hover {
  filter: brightness(150%);
}
.button-center {
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin: auto;
                                                display: flex;
                                                justify-content: center;
                                                align-items: center;
      text-align: center;
      width: 60%;
}
.button-holder {
/* money folder */
    display: flex; 
    justify-content: center;
    align-items: center;
}
.page-list .list {
    table-layout: auto;
}
.page-list .list .rank {
    text-align: end;
    padding-right: 1rem;
}
.page-list .list .level {
    width: 100%;
    color: #fff;
}
.page-list .list .level button {
    background-color: var(--color-background);
    color: var(--color-on-background);
    border: none;
    border-radius: 0.5rem;
    padding: 1rem;
    text-align: start;
    word-break: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
}
.page-list .list .level.error button {
    color: var(--color-error);
    cursor: not-allowed;
    text-decoration: line-through;
}
.page-list .list .level button {
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}

.page-list .list .level button:hover {
    background-color: var(--color-background-hover);
    transform: translateX(6px);
    box-shadow: 0 8px 20px rgba(0,0,0,.25);
}
.page-list .list .level.active button {
    border: 3px solid var(--color-primary);
    background-color: var(--color-primary);
    color: var(--color-on-background);
}
.page-list .level-container .level {
    display: flex;
    flex-direction: column;
    gap: 2rem;
	padding-right: 4rem;
    padding-left: 4rem;
    width: 100%;
	justify-self: center;
}
.page-list .level-container .level .level-authors {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-auto-rows: max-content;
    gap: 1rem;
}
.page-list .level-container .level .video {
    aspect-ratio: 16/9;
}
.page-list .level-container .level .stats {
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    gap: 2rem;
}
.page-list .level-container .level .stats li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
.page-list .level-container .level .records {
    table-layout: fixed;
}
.page-list .level-container .level .records tr td:not(:last-child) {
    padding-right: 1rem;
}
.page-list .level-container .level .records .percent,
.page-list .level-container .level .records .user,
.page-list .level-container .level .records .hz {
    padding-block: 1rem;
}
.page-list .level-container .level .records .user {
    width: 100%;
}
.page-list .level-container .level .records .percent,
.page-list .level-container .level .records .hz {
    text-align: end;
}
.page-list .meta-container .og a:hover,
.page-list .level-container .level .records a:hover {
    text-decoration: underline;
}
.page-list .meta {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}
.page-list .meta .errors {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.page-list .meta .errors .error {
    padding: 1rem;
    background-color: var(--color-error);
    color: var(--color-on-error);
    border-radius: 0.5rem;
}
.page-list .meta .editors {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.page-list .meta .editors li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.page-list .meta .editors li img {
    height: 1.25rem;
}
.page-list .meta .editors li a:hover {
    text-decoration: underline;
}
.cl {
    margin-left: 24px;
    color: #808080;
}
.cl clw {
    color: var(--color-on-background);
	font-weight: 550;
}
/* =========================================
   MAIN LIST - TOP 1 / 2 / 3 RANK COLORS
   ========================================= */

/* TOP 1 - GOLD */
.page-list .rank-top-1 {
    background: linear-gradient(
        135deg,
        #f6d365,
        #dca928
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* TOP 2 - SILVER */
.page-list .rank-top-2 {
    background: linear-gradient(
        135deg,
        #cfd4d6,
        #8e969a
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* TOP 3 - BRONZE */
.page-list .rank-top-3 {
    background: linear-gradient(
        135deg,
        #d18a5a,
        #a8582e
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* =========================================
   LEVEL DETAIL TITLE - TOP 1 / 2 / 3
   ========================================= */

/* TOP 1 - GOLD */
.page-list .level-title-top-1 {
    background: linear-gradient(
        135deg,
        #f6d365,
        #dca928
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* TOP 2 - SILVER */
.page-list .level-title-top-2 {
    background: linear-gradient(
        135deg,
        #cfd4d6,
        #8e969a
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* TOP 3 - BRONZE */
.page-list .level-title-top-3 {
    background: linear-gradient(
        135deg,
        #d18a5a,
        #a8582e
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* =========================================
   BACK TO LIST BUTTON
   ========================================= */

.back-button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid var(--color-primary);
    color: var(--color-on-background);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    font-size: 14px;

    /* Chỉnh vị trí */
    position: relative;
    top: -16px;   /* lên trên 8px */
    left: 8px;   /* sang phải 8px */
}

.back-button:hover {
    background-color: var(--color-primary);
    color: var(--color-on-primary);
    transform: translateX(-2px);
}

.page-list .list .level button:active{
    transform:scale(.97);
}

/* =========================================================
   Discord Nitro Style Animated Roles
   ========================================================= */

@keyframes nitroGradient {
    from {
        background-position: 0% 50%;
    }
    to {
        background-position: 100% 50%;
    }
}

/* ==========================
   Shared Settings
   ========================== */

.owner-name,
.admin-name,
.dev-name,
.helper-name {

    font-weight: 500;

    display: inline-block;

    background-size: 250% 100%;

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    will-change: background-position;

    animation: nitroGradient 10s ease-in-out infinite;
}

/* ==========================
   Owner
   ========================== */

.owner-name {

    font-weight: 700;

    background-image: linear-gradient(
        90deg,

        #006466 0%,
        #065a60 12%,

        #6ef9ff 22%,
        #d9ffff 28%,
        #6ef9ff 34%,

        #0b525b 46%,
        #144552 58%,

        #9ae7ff 68%,
        #ffffff 74%,
        #9ae7ff 80%,

        #312244 90%,
        #4d194d 100%
    );
}

/* ==========================
   Admin
   ========================== */

.admin-name {

    background-image: linear-gradient(
        90deg,

        #583101 0%,
        #603808 12%,

        #ffd17d 22%,
        #fff8dc 30%,
        #ffd17d 38%,

        #8b5e34 50%,
        #bc8a5f 62%,

        #ffe0aa 72%,
        #ffffff 78%,
        #ffe0aa 84%,

        #d4a276 92%,
        #ffedd8 100%
    );
}

/* ==========================
   Dev
   ========================== */

.dev-name {

    background-image: linear-gradient(
        90deg,

        #004b23 0%,
        #006400 12%,

        #9ef01a 22%,
        #ffffff 30%,
        #9ef01a 38%,

        #008000 50%,
        #38b000 62%,

        #cfff77 72%,
        #ffffff 78%,
        #cfff77 84%,

        #70e000 92%,
        #ccff33 100%
    );
}

/* ==========================
   Helper
   ========================== */

.helper-name {

    background-image: linear-gradient(
        90deg,

        #590d22 0%,
        #800f2f 12%,

        #ff8fa3 22%,
        #ffffff 30%,
        #ff8fa3 38%,

        #c9184a 50%,
        #ff4d6d 62%,

        #ffc0cb 72%,
        #ffffff 78%,
        #ffc0cb 84%,

        #ff8fa3 92%,
        #ffb3c1 100%
    );
}

.page-list .meta .editors .type-label-lg::before,
.page-list .meta .editors .type-label-lg::after {
    content: none !important;
}

.page-list .meta .editors .type-label-lg {
    display: inline-block;
    line-height: 1.6rem !important;
}

/* ==========================
   Rank Glow
   ========================== */

.rank-top-1{
    text-shadow:
        0 0 8px rgba(255,220,100,.4),
        0 0 18px rgba(255,220,100,.2);
}

.rank-top-2{
    text-shadow:
        0 0 8px rgba(220,220,220,.4);
}

.rank-top-3{
    text-shadow:
        0 0 8px rgba(210,130,70,.4);
}

/* =========================================================
   IMAGE-1 STYLE INLINE LEVEL ACCORDION
   ========================================================= */

.page-list {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .30fr) !important;
    column-gap: 1rem !important;
    height: calc(100vh - var(--topbar-height));
    min-height: 0;
    overflow: hidden;
}

.page-list .accordion-list-container {
    height: 100%;
    min-height: 0;
    padding: 1.1rem 1.15rem 2rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.page-list .meta-container {
    height: 100%;
    min-height: 0;
    padding: 1.4rem 1.5rem 1.4rem .7rem;
    overflow: hidden !important;
    position: sticky;
    top: 0;
    align-self: start;
}

.page-list .meta {
    height: 100%;
    overflow: hidden !important;
}

/* card shell */
.level-accordion-card {
    width: 100%;
    margin-bottom: 22px !important;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid rgba(82, 211, 154, .22);
    background: rgba(10,10,13,.82);
    box-shadow: 0 10px 30px rgba(0,0,0,.20);
    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s cubic-bezier(.22,1,.36,1);
}

.level-accordion-card:hover {
    border-color: rgba(255,255,255,.16);
}

.level-accordion-card.is-expanded {
    border-color: rgba(52, 211, 153, .52);
    box-shadow:
        0 0 0 1px rgba(52,211,153,.08),
        0 0 24px rgba(52,211,153,.11),
        0 18px 44px rgba(0,0,0,.30);
}

/* Summary bar */
.level-accordion-summary {
    width: 100%;
    min-height: 190px;
    padding: 0;
    border: 0;
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    color: #fff;
    background: #0b0b0e;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}

.level-accordion-summary:disabled {
    cursor: not-allowed;
    opacity: .55;
}

/* left image like screenshot */
.level-card-thumb {
    position: relative;
    min-height: 190px;
    background-size: cover !important;
    background-position: center !important;
}

.level-card-thumb-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,.05), rgba(0,0,0,.16));
}

/* right background */
.level-card-main {
    position: relative;
    min-width: 0;
    min-height: 190px;
    background-size: cover !important;
    background-position: center !important;
}

.level-card-main-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(7,7,9,.44) 0%,
            rgba(7,7,9,.56) 48%,
            rgba(7,7,9,.86) 100%
        );
}

.level-card-content {
    position: relative;
    z-index: 1;
    min-height: 190px;
    padding: 20px 22px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 24px;
}

.level-card-center {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 11px;
}

.level-card-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.level-card-rank {
    font-size: 25px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.level-card-title {
    margin: 0;
    color: #fff;
    font-size: clamp(25px, 2.3vw, 36px);
    line-height: 1.05;
    font-weight: 800;
    overflow-wrap: anywhere;
    text-shadow: 0 3px 16px rgba(0,0,0,.62);
}

.level-card-verifier {
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: 14px;
}

.level-card-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.level-tag {
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(79,70,229,.74);
    border: 1px solid rgba(129,140,248,.75);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.level-tag-gold {
    color: #ffe181;
    background: rgba(145,105,14,.42);
    border-color: rgba(250,204,21,.54);
}

.level-card-right {
    min-width: 175px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 7px;
}

.level-card-fps {
    color: #fff;
    font-size: clamp(24px, 2vw, 32px);
    line-height: 1;
    font-weight: 800;
    text-shadow: 0 3px 14px rgba(0,0,0,.6);
}

.level-card-method {
    color: rgba(255,255,255,.90);
    font-size: 15px;
    font-weight: 650;
}

.level-card-points {
    color: #6ee7b7;
    font-family: Consolas, monospace;
    font-size: 16px;
    font-weight: 700;
}

.level-card-toggle {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255,255,255,.82);
    font-size: 12px;
}

.level-card-toggle > span {
    display: inline-block;
    transition: transform .25s ease;
}

.level-card-chevron-open {
    transform: rotate(180deg);
}

/* expanded body */
.level-accordion-detail {
    padding: 16px;
    border-top: 1px solid rgba(255,255,255,.075);
    background: rgba(7,7,9,.90);
    animation: level-open .28s cubic-bezier(.22,1,.36,1);
}

@keyframes level-open {
    from {
        opacity: 0;
        transform: translateY(-7px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.level-detail-top {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(290px, .78fr);
    gap: 16px;
    align-items: stretch;
}

.level-video-card,
.level-info-card,
.level-records-card {
    border-radius: 16px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
}

.level-video-card {
    min-width: 0;
    padding: 12px;
}

.level-detail-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 12px;
    background: #000;
}

.level-detail-description {
    margin: 12px 4px 3px;
    color: #a8a8b0;
    font-size: 13px;
    line-height: 1.65;
}

.level-info-card {
    padding: 18px;
}

.level-info-card h3,
.records-card-header h3 {
    margin: 0;
    color: #fff;
    font-size: 17px;
}

.level-info-card h3 {
    margin-bottom: 14px;
}

.level-info-row {
    min-height: 39px;
    padding: 8px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid rgba(255,255,255,.055);
}

.level-info-row:last-child {
    border-bottom: 0;
}

.level-info-label {
    color: #8b8b95;
    font-size: 12px;
    white-space: nowrap;
}

.level-info-row strong {
    color: #f0f0f2;
    font-size: 12px;
    font-weight: 650;
    text-align: right;
    overflow-wrap: anywhere;
}

.level-id-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.copy-level-id {
    width: 28px;
    height: 28px;
    padding: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.055);
    color: #a1a1aa;
    cursor: pointer;
}

.copy-level-id svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Records = full width below */
.level-records-card {
    width: 100%;
    margin-top: 16px;
    padding: 18px;
}

.records-card-header {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.records-card-header p {
    margin: 3px 0 0;
    color: #777780;
    font-size: 11px;
}

.qualification-badge {
    padding: 6px 10px;
    border-radius: 999px;
    color: #86efac;
    background: rgba(34,197,94,.10);
    border: 1px solid rgba(34,197,94,.20);
    font-size: 11px;
    font-weight: 650;
}

.qualification-badge.closed {
    color: #fca5a5;
    background: rgba(239,68,68,.10);
    border-color: rgba(239,68,68,.20);
}

.records-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.record-row-new {
    min-height: 48px;
    padding: 8px 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

.record-row-new:hover {
    background: rgba(255,255,255,.055);
    transform: translateX(2px);
}

.record-row-no-link {
    cursor: default;
}

.record-player {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.record-avatar-placeholder {
    width: 31px;
    height: 31px;
    min-width: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(135deg,#6366f1,#a855f7);
    font-size: 12px;
    font-weight: 700;
}

.record-player strong {
    color: #ededf0;
    font-size: 13px;
}

.record-extra {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #85858e;
    font-size: 11px;
}

.record-percent {
    min-width: 54px;
    color: #fff;
    font-family: Consolas, monospace;
    font-size: 13px;
    text-align: right;
}

.records-empty {
    padding: 23px;
    color: #71717a;
    text-align: center;
    font-size: 13px;
}

.accordion-empty {
    padding: 30px;
    text-align: center;
    color: #888;
}

/* neutralize old page-detail area if stale CSS exists */
.page-list .level-container {
    display: none !important;
}

@media (max-width: 1180px) {
    .level-accordion-summary {
        grid-template-columns: 280px minmax(0,1fr);
    }

    .level-detail-top {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 920px) {
    .page-list {
        grid-template-columns: 1fr !important;
    }

    .page-list .meta-container {
        display: none;
    }
}

@media (max-width: 720px) {
    .level-accordion-summary {
        grid-template-columns: 1fr;
    }

    .level-card-thumb {
        min-height: 160px;
    }

    .level-card-content {
        min-height: 170px;
        flex-direction: column;
    }

    .level-card-right {
        min-width: 0;
        width: 100%;
        align-items: flex-start;
    }
}


/* =========================================================
   SCLVN COMPACT LEVEL BAR / YOUTUBE THUMBNAIL V4
   ========================================================= */

.level-accordion-card {
    margin-bottom: 12px !important;
    border-radius: 15px !important;
    transition:
        transform .24s cubic-bezier(.22,1,.36,1),
        border-color .24s ease,
        box-shadow .24s ease !important;
}

.level-accordion-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(255,255,255,.22) !important;
    box-shadow:
        0 10px 26px rgba(0,0,0,.28),
        0 0 18px rgba(255,255,255,.035) !important;
}

.level-accordion-card.is-expanded {
    transform: none !important;
    border-color: rgba(96, 165, 250, .52) !important;
    box-shadow:
        0 0 0 1px rgba(96,165,250,.08),
        0 0 24px rgba(96,165,250,.13),
        0 14px 36px rgba(0,0,0,.28) !important;
}

.level-accordion-summary {
    min-height: 132px !important;
    grid-template-columns: 250px minmax(0, 1fr) !important;
}

.level-card-thumb,
.level-card-main,
.level-card-content {
    min-height: 132px !important;
}

.level-card-thumb {
    background-color: #111 !important;
    background-position: center !important;
}

.level-card-thumb-shade {
    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.02),
            rgba(0,0,0,.13)
        ) !important;
}

.level-card-main-shade {
    background:
        linear-gradient(
            90deg,
            rgba(7,7,9,.44) 0%,
            rgba(7,7,9,.55) 56%,
            rgba(7,7,9,.88) 100%
        ) !important;
}

.level-card-content {
    padding: 14px 18px !important;
    gap: 18px !important;
}

.level-card-center {
    gap: 7px !important;
}

.level-card-title-row {
    gap: 9px !important;
}

.level-card-rank {
    font-family: 'Poppins', sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.045em !important;
    line-height: 1 !important;
    font-variant-numeric: tabular-nums;
}

.level-card-title {
    font-size: clamp(21px, 1.8vw, 29px) !important;
    letter-spacing: -0.025em;
}

.level-card-verifier {
    font-size: 12px !important;
}

.level-card-tags {
    gap: 5px !important;
}

.level-tag {
    padding: 4px 8px !important;
    font-size: 10px !important;
}

.level-tag-custom {
    color: #dbeafe !important;
    background: rgba(37, 99, 235, .28) !important;
    border-color: rgba(96, 165, 250, .42) !important;
}

.level-card-right {
    min-width: 145px !important;
    gap: 5px !important;
}

.level-card-fps {
    font-size: clamp(20px, 1.65vw, 27px) !important;
}

.level-card-method {
    font-size: 12px !important;
}

.level-card-points {
    font-size: 13px !important;
}

.level-card-toggle {
    margin-top: 5px !important;
    font-size: 10px !important;
}

.level-accordion-detail {
    padding: 14px !important;
}

.level-detail-top {
    grid-template-columns: minmax(0, 1.72fr) minmax(275px, .78fr) !important;
}

/* SVG icon support */
.sidebar-icon svg,
.topbar-search-icon svg {
    width: 20px;
    height: 20px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1180px) {
    .level-accordion-summary {
        grid-template-columns: 220px minmax(0,1fr) !important;
    }
}

@media (max-width: 720px) {
    .level-accordion-summary {
        grid-template-columns: 1fr !important;
    }

    .level-card-thumb {
        min-height: 145px !important;
    }
}


/* =========================================================
   CUSTOM TAG PALETTE V5
   Allowed tags:
   Control / Frame Perfect / High CPS / Capped / Uncapped
   ========================================================= */

.level-tag {
    padding: 4px 9px !important;
    border-radius: 999px !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    letter-spacing: .01em;
}

/* Control */
.level-tag-control {
    color: #ffe68a !important;
    background: rgba(202, 138, 4, .23) !important;
    border-color: rgba(250, 204, 21, .58) !important;
    box-shadow: inset 0 0 10px rgba(250, 204, 21, .05);
}

/* Frame Perfect — yellow/gold */
.level-tag-frame-perfect {
    color: #ffe68a !important;
    background: rgba(202, 138, 4, .23) !important;
    border-color: rgba(250, 204, 21, .58) !important;
    box-shadow: inset 0 0 10px rgba(250, 204, 21, .05);
}

/* High CPS */
.level-tag-high-cps {
    color: #fecaca !important;
    background: rgba(220, 38, 38, .20) !important;
    border-color: rgba(248, 113, 113, .46) !important;
}

/* Capped */
.level-tag-capped {
    color: #ffe68a !important;
    background: rgba(202, 138, 4, .23) !important;
    border-color: rgba(250, 204, 21, .58) !important;
    box-shadow: inset 0 0 10px rgba(250, 204, 21, .05);
}

/* Uncapped */
.level-tag-uncapped {
    color: #ffe68a !important;
    background: rgba(202, 138, 4, .23) !important;
    border-color: rgba(250, 204, 21, .58) !important;
    box-shadow: inset 0 0 10px rgba(250, 204, 21, .05);
}

.level-tag-default {
    color: #e5e7eb !important;
    background: rgba(255,255,255,.08) !important;
    border-color: rgba(255,255,255,.14) !important;
}

/* =========================================================
   SUBTLE WHITE LEVEL GLOW
   ========================================================= */

.level-accordion-card.is-expanded {
    border-color:
        rgba(255,255,255,.22) !important;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.045),
        0 0 18px rgba(255,255,255,.055),
        0 14px 34px rgba(0,0,0,.24) !important;
}


/* =========================================================
   FINAL LIST SPACING + WHITE GLOW — SCLVN
   Keep this block LAST in list.css
   ========================================================= */

/*
   The scrolling list occupies the full viewport, including the
   area behind the fixed topbar. Top padding keeps the first card
   visible initially, but cards can scroll under the glass.
*/
.page-list {
    height: 100vh !important;
    min-height: 100vh !important;
    overflow: hidden !important;
}

.page-list .accordion-list-container {
    height: 100vh !important;
    min-height: 0 !important;

    padding-top:
        calc(var(--topbar-height) + 18px) !important;

    padding-bottom: 30px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Keep moderators visually below the topbar. */
.page-list .meta-container {
    height: 100vh !important;

    padding-top:
        calc(var(--topbar-height) + 22px) !important;
}

/* Real visible spacing: the old later rule was forcing 12px. */
.level-accordion-card {
    margin-bottom: 24px !important;

    position: relative !important;

    border:
        1px solid rgba(255,255,255,.075) !important;

    transition:
        transform .26s cubic-bezier(.22,1,.36,1),
        border-color .24s ease,
        box-shadow .24s ease,
        filter .24s ease !important;
}

/* Calm Apple-like hover */
.level-accordion-card:hover {
    transform:
        translateY(-3px) !important;

    border-color:
        rgba(255,255,255,.18) !important;

    box-shadow:
        0 12px 28px rgba(0,0,0,.27),
        0 0 14px rgba(255,255,255,.045) !important;

    filter:
        brightness(1.025) !important;
}

/*
   Expanded state:
   white, subtle, but still visible at a glance.
*/
.level-accordion-card.is-expanded {
    transform: none !important;

    border-color:
        rgba(255,255,255,.31) !important;

    box-shadow:
        0 0 0 1px rgba(255,255,255,.075),
        0 0 12px rgba(255,255,255,.13),
        0 0 26px rgba(255,255,255,.07),
        0 16px 38px rgba(0,0,0,.28) !important;

    filter:
        brightness(1.035) !important;
}

/* Thin white highlight, similar to the old navbar underline. */
.level-accordion-card.is-expanded::after {
    content: "" !important;

    position: absolute !important;
    z-index: 20 !important;

    left: 11% !important;
    right: 11% !important;
    top: 0 !important;

    height: 1px !important;

    pointer-events: none !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.34) 20%,
            rgba(255,255,255,.78) 50%,
            rgba(255,255,255,.34) 80%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 7px rgba(255,255,255,.20),
        0 0 14px rgba(255,255,255,.08) !important;
}


/* =========================================================
   FINAL COMPACT LEVEL BAR
   ========================================================= */

.level-card-points {
    color: #ffd166 !important;
}

.level-accordion-summary {
    min-height: 108px !important;
    grid-template-columns: 205px minmax(0, 1fr) !important;
}

.level-card-thumb,
.level-card-main,
.level-card-content {
    min-height: 108px !important;
}

.level-card-content {
    padding: 10px 14px !important;
    gap: 14px !important;
}

.level-card-center {
    gap: 5px !important;
}

.level-card-title-row {
    gap: 8px !important;
}

.level-card-rank {
    font-size: 18px !important;
}

.level-card-title {
    font-size: clamp(18px, 1.55vw, 24px) !important;
    line-height: 1.02 !important;
}

.level-card-verifier {
    font-size: 11px !important;
}

.level-card-tags {
    gap: 4px !important;
}

.level-tag {
    padding: 3px 7px !important;
    font-size: 9px !important;
}

.level-card-right {
    min-width: 126px !important;
    gap: 3px !important;
}

.level-card-fps {
    font-size: clamp(18px, 1.45vw, 23px) !important;
}

.level-card-method {
    font-size: 11px !important;
}

.level-card-points {
    font-size: 12px !important;
}

.level-card-toggle {
    margin-top: 3px !important;
    font-size: 9px !important;
}

@media (max-width: 1180px) {
    .level-accordion-summary {
        grid-template-columns: 180px minmax(0, 1fr) !important;
    }
}