/* Satoshi */
@font-face {
    font-family: 'Satoshi';
    src: url('https://cdn.fontshare.com/wf/NWBQYJIM7GCZ5XWD7D26ARB3VDY55ZRT/K63EV2KZIGKLE7RANQ2U42S6SVHU5RJ7/X6XYTKIVDUW7GZTZPZNN4EUM5KH54KHF.woff2') format('woff2'),
         url('https://cdn.fontshare.com/wf/NWBQYJIM7GCZ5XWD7D26ARB3VDY55ZRT/K63EV2KZIGKLE7RANQ2U42S6SVHU5RJ7/X6XYTKIVDUW7GZTZPZNN4EUM5KH54KHF.woff') format('woff'),
         url('https://cdn.fontshare.com/wf/NWBQYJIM7GCZ5XWD7D26ARB3VDY55ZRT/K63EV2KZIGKLE7RANQ2U42S6SVHU5RJ7/X6XYTKIVDUW7GZTZPZNN4EUM5KH54KHF.ttf') format('truetype');
    font-weight: 300 900;
    font-display: swap;
    font-style: normal;
}
  
/* Array */
@font-face {
    font-family: 'Array';
    src: url('https://cdn.fontshare.com/wf/4QBZHM3FOPYBI67YBLLWZV6ZYIUQTKEE/RXSUFPNEA6YXGQDMHMP3OODY6UWXRJBM/C6VM2RT4EU2NNT5XZWVYHR7WOIOGM4EU.woff2') format('woff2'),
         url('https://cdn.fontshare.com/wf/4QBZHM3FOPYBI67YBLLWZV6ZYIUQTKEE/RXSUFPNEA6YXGQDMHMP3OODY6UWXRJBM/C6VM2RT4EU2NNT5XZWVYHR7WOIOGM4EU.woff') format('woff'),
         url('https://cdn.fontshare.com/wf/4QBZHM3FOPYBI67YBLLWZV6ZYIUQTKEE/RXSUFPNEA6YXGQDMHMP3OODY6UWXRJBM/C6VM2RT4EU2NNT5XZWVYHR7WOIOGM4EU.ttf') format('truetype');
    font-weight: 400;
    font-display: swap;
    font-style: normal;
}

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 8px;
    background: rgba(0, 0, 0, 0);
}

::-webkit-scrollbar-track {
    background: rgba(20, 12, 30, 0.85);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        #8b6fd1,
        #3f2a66
    );
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        #6b4fa3,
        #5a3e8a
    );
}

* {
    scrollbar-width: thin;
    scrollbar-color: #6b4fa3 rgba(20, 12, 30, 0.85);
}

.fixed {
    position: fixed;
}
.flex {
    display: flex;
}
@keyframes appearance-in {
    0% {
        opacity: 0;
        transform: translateZ(0) scale(0.95);
    }
    60% {
        backface-visibility: hidden;
        opacity: 0.75;
        webkit-font-smoothing: antialiased;
        transform: translateZ(0) scale(1.05);
    }
    to {
        opacity: 1;
        transform: translateZ(0) scale(1);
    }
}
@keyframes drip-expand {
    0% {
        opacity: 0.2;
        transform: scale(0);
    }
    to {
        opacity: 0;
        transform: scale(2);
    }
}
@keyframes indeterminate-bar {
    0% {
        transform: translateX(-50%) scaleX(0.2);
    }
    to {
        transform: translateX(100%) scaleX(1);
    }
}
@keyframes spinner-spin {
    0% {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(1turn);
    }
}
.drop-shadow {
    --tw-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
}
.drop-shadow {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
:root {
    color-scheme: light;
    --heroui-background: 0 0% 100%;
    --heroui-foreground-50: 0 0% 98.04%;
    --heroui-foreground-100: 240 4.76% 95.88%;
    --heroui-foreground-200: 240 5.88% 90%;
    --heroui-foreground-300: 240 4.88% 83.92%;
    --heroui-foreground-400: 240 5.03% 64.9%;
    --heroui-foreground-500: 240 3.83% 46.08%;
    --heroui-foreground-600: 240 5.2% 33.92%;
    --heroui-foreground-700: 240 5.26% 26.08%;
    --heroui-foreground-800: 240 3.7% 15.88%;
    --heroui-foreground-900: 240 5.88% 10%;
    --heroui-foreground: 201.81999999999994 24.44% 8.82%;
    --heroui-divider: 0 0% 6.67%;
    --heroui-divider-opacity: 0.15;
    --heroui-focus: 212.01999999999998 100% 46.67%;
    --heroui-overlay: 0 0% 0%;
    --heroui-content1: 0 0% 100%;
    --heroui-content1-foreground: 201.81999999999994 24.44% 8.82%;
    --heroui-content2: 240 4.76% 95.88%;
    --heroui-content2-foreground: 240 3.7% 15.88%;
    --heroui-content3: 240 5.88% 90%;
    --heroui-content3-foreground: 240 5.26% 26.08%;
    --heroui-content4: 240 4.88% 83.92%;
    --heroui-content4-foreground: 240 5.2% 33.92%;
    --heroui-default-50: 0 0% 98.04%;
    --heroui-default-100: 240 4.76% 95.88%;
    --heroui-default-200: 240 5.88% 90%;
    --heroui-default-300: 240 4.88% 83.92%;
    --heroui-default-400: 240 5.03% 64.9%;
    --heroui-default-500: 240 3.83% 46.08%;
    --heroui-default-600: 240 5.2% 33.92%;
    --heroui-default-700: 240 5.26% 26.08%;
    --heroui-default-800: 240 3.7% 15.88%;
    --heroui-default-900: 240 5.88% 10%;
    --heroui-default-foreground: 0 0% 0%;
    --heroui-default: 240 4.88% 83.92%;
    --heroui-primary-50: 212.5 92.31% 94.9%;
    --heroui-primary-100: 211.84000000000003 92.45% 89.61%;
    --heroui-primary-200: 211.84000000000003 92.45% 79.22%;
    --heroui-primary-300: 212.24 92.45% 68.82%;
    --heroui-primary-400: 212.14 92.45% 58.43%;
    --heroui-primary-500: 212.01999999999998 100% 46.67%;
    --heroui-primary-600: 212.14 100% 38.43%;
    --heroui-primary-700: 212.24 100% 28.82%;
    --heroui-primary-800: 211.84000000000003 100% 19.22%;
    --heroui-primary-900: 211.84000000000003 100% 9.61%;
    --heroui-primary-foreground: 0 0% 100%;
    --heroui-primary: 212.01999999999998 100% 46.67%;
    --heroui-secondary-50: 270 61.54% 94.9%;
    --heroui-secondary-100: 270 59.26% 89.41%;
    --heroui-secondary-200: 270 59.26% 78.82%;
    --heroui-secondary-300: 270 59.26% 68.24%;
    --heroui-secondary-400: 270 59.26% 57.65%;
    --heroui-secondary-500: 270 66.67% 47.06%;
    --heroui-secondary-600: 270 66.67% 37.65%;
    --heroui-secondary-700: 270 66.67% 28.24%;
    --heroui-secondary-800: 270 66.67% 18.82%;
    --heroui-secondary-900: 270 66.67% 9.41%;
    --heroui-secondary-foreground: 0 0% 100%;
    --heroui-secondary: 270 66.67% 47.06%;
    --heroui-success-50: 146.66999999999996 64.29% 94.51%;
    --heroui-success-100: 145.71000000000004 61.4% 88.82%;
    --heroui-success-200: 146.2 61.74% 77.45%;
    --heroui-success-300: 145.78999999999996 62.57% 66.47%;
    --heroui-success-400: 146.01 62.45% 55.1%;
    --heroui-success-500: 145.96000000000004 79.46% 43.92%;
    --heroui-success-600: 146.01 79.89% 35.1%;
    --heroui-success-700: 145.78999999999996 79.26% 26.47%;
    --heroui-success-800: 146.2 79.78% 17.45%;
    --heroui-success-900: 145.71000000000004 77.78% 8.82%;
    --heroui-success-foreground: 0 0% 0%;
    --heroui-success: 145.96000000000004 79.46% 43.92%;
    --heroui-warning-50: 54.55000000000001 91.67% 95.29%;
    --heroui-warning-100: 37.139999999999986 91.3% 90.98%;
    --heroui-warning-200: 37.139999999999986 91.3% 81.96%;
    --heroui-warning-300: 36.95999999999998 91.24% 73.14%;
    --heroui-warning-400: 37.00999999999999 91.26% 64.12%;
    --heroui-warning-500: 37.02999999999997 91.27% 55.1%;
    --heroui-warning-600: 37.00999999999999 74.22% 44.12%;
    --heroui-warning-700: 36.95999999999998 73.96% 33.14%;
    --heroui-warning-800: 37.139999999999986 75% 21.96%;
    --heroui-warning-900: 37.139999999999986 75% 10.98%;
    --heroui-warning-foreground: 0 0% 0%;
    --heroui-warning: 37.02999999999997 91.27% 55.1%;
    --heroui-danger-50: 339.13 92% 95.1%;
    --heroui-danger-100: 340 91.84% 90.39%;
    --heroui-danger-200: 339.3299999999999 90% 80.39%;
    --heroui-danger-300: 339.11 90.6% 70.78%;
    --heroui-danger-400: 339 90% 60.78%;
    --heroui-danger-500: 339.20000000000005 90.36% 51.18%;
    --heroui-danger-600: 339 86.54% 40.78%;
    --heroui-danger-700: 339.11 85.99% 30.78%;
    --heroui-danger-800: 339.3299999999999 86.54% 20.39%;
    --heroui-danger-900: 340 84.91% 10.39%;
    --heroui-danger-foreground: 0 0% 100%;
    --heroui-danger: 339.20000000000005 90.36% 51.18%;
    --heroui-divider-weight: 1px;
    --heroui-disabled-opacity: 0.5;
    --heroui-font-size-tiny: 0.75rem;
    --heroui-font-size-small: 0.875rem;
    --heroui-font-size-medium: 1rem;
    --heroui-font-size-large: 1.125rem;
    --heroui-line-height-tiny: 1rem;
    --heroui-line-height-small: 1.25rem;
    --heroui-line-height-medium: 1.5rem;
    --heroui-line-height-large: 1.75rem;
    --heroui-radius-small: 8px;
    --heroui-radius-medium: 12px;
    --heroui-radius-large: 14px;
    --heroui-border-width-small: 1px;
    --heroui-border-width-medium: 2px;
    --heroui-border-width-large: 3px;
    --heroui-box-shadow-small: 0px 0px 5px 0px rgba(0, 0, 0, 0.02), 0px 2px 10px 0px rgba(0, 0, 0, 0.06), 0px 0px 1px 0px rgba(0, 0, 0, 0.3);
    --heroui-box-shadow-medium: 0px 0px 15px 0px rgba(0, 0, 0, 0.03), 0px 2px 30px 0px rgba(0, 0, 0, 0.08), 0px 0px 1px 0px rgba(0, 0, 0, 0.3);
    --heroui-box-shadow-large: 0px 0px 30px 0px rgba(0, 0, 0, 0.04), 0px 30px 60px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.3);
    --heroui-hover-opacity: 0.8;
}

.button-small {
    background-color: var(--presenceContainerBackground);
    border: var(--presenceContainerBorder);
    border-radius: 6px;
    padding: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    height: fit-content;
}

.button-play {
    margin: 25px auto;
}


body {
    background-color: #0a0a0a;
    color: #a13ecf9c;
    margin: 0;
    overflow-x: hidden;
    padding: 0;
}
body {
    font-family: Satoshi, sans-serif;
}
body,
html {
    height: 100%;
}
body {
    min-height: 100%;
}
::-moz-selection {
    background: #b364d79c;
    color: #080808fa;
}
::-moz-selection {
    background: #eee;
    color: #09090b;
}
::selection {
    background: #eee;
    color: #09090b;
}
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #181818;
    border-radius: 5px;
}
:root {
    --rt-color-dark: #0f0f0f !important;
    --rt-opacity: 1 !important;
}
@keyframes shimmer {
    to {
        content: var(--tw-content);
        transform: translateX(100%);
    }
}
@keyframes eVhcdG_1a7d051ed0aa804402af {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0.4;
    }
}
@keyframes yG23ZF_f260513f92977ebe2a55 {
    0% {
        transform: translateY(0);
    }
    to {
        transform: translateY(110vh);
    }
}
@keyframes sNb0um_7d79542c9f6bd4fc481e {
    0%,
    to {
        transform: translateX(0);
    }
    50% {
        transform: translateX(80px);
    }
}
.bgimage {
    bottom: 0;
    height: 100vh;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    position: fixed;
    right: 0;
    top: 0;
    width: 100vw;
    z-index: -1;
}
.bcYWcV_4ac5c10f247eb261df8a {
    align-items: center;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    background-color: rgba(0, 0, 0, 0.775);
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    top: 0;
    transition: 0.75s ease;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%;
    z-index: 9999;
}
.bcYWcV_4ac5c10f247eb261df8a.al1zmn_90eaf9aaa3c00ed121cd {
    opacity: 0;
}
.bG2N12_dbdc0f63fcf9ce25e8c2 {
    color: #fafafa;
    padding: 0 10px;
    text-align: center;
}
.quX2nx_87e32c7ed391a936e81d {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: center;
    margin-top: 30px;
    row-gap: 11px;
    width: 100%;
}
.qytYbN_f868b47b56a17c140676 {
    display: flex;
}
.qytYbN_f868b47b56a17c140676 svg {
    font-size: 35px;
    transition: 0.3s;
    margin: 0 10px;
}
.qytYbN_f868b47b56a17c140676 svg:hover {
    transform: scale(1.1);
}
.qytYbN_f868b47b56a17c140676 a {
    display: flex;
}
.fwNYeU_41d205e0e5755e844659 svg {
    color: #f7f7f7;
    filter: drop-shadow(#f7f7f7 1px 0 7px);
}
.midboxinnercontainer {
    background-color: var(--presenceContainerBackground);
    border: var(--presenceContainerBorder);
    border-radius: 25px;
    box-sizing: border-box;
    justify-content: space-between;
    max-width: -moz-fit-content;
    max-width: fit-content;
    width: 100%;
    align-items: center;
    display: flex;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 20px;
}

.midbox {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 4px;
    height: 100%;
    padding: 15px;
    width: 320px;
}

.presence {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    height: 100%;
    padding: 15px;
    width: 320px;
}

.presence-nameplate {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 0;
    pointer-events: none;
}

.presence-nameplate video {
    width: 100%;
    height: 100%;
    object-fit: fill;
    position: absolute;
    top: 0; left: 0;
    opacity: 1;
}

.presence .pfp, 
.presence .usernamecontainer {
    position: relative;
    z-index: 2 !important;
}

.presence .pfp {
    position: relative;
    display: inline-block;
}

.presence .pfp img {
    border-radius: 50%;
    height: 48px;
    width: 48px;
    display: block;
}

.presence .pfp .status-icon {
    height: 14px;
    width: 14px;

    position: absolute;
    bottom: 0;
    right: 0;
    border-radius: 50%;
    box-sizing: border-box;

    border: 2px solid #181818;

    z-index: 999;
}

.presence .pfp .avatar-deco {
    height: 54px;
    width: 54px;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
}

.presence .usernamecontainer {
    color: white;
    max-width: 100%;
}

.presence .usernamecontainer h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.presence .guild-tag {
    background-color: var(--presenceContainerBackground);
    border: var(--presenceContainerBorder);
    border-radius: 10px;
    padding: 2px 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    font-size: 12px;
}

.presence .guild-tag img {
    height: 12px;
    width: 12px;
}

.presence .activity {
    font-size: 12px;
    max-width: 70%;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
    flex: 1;
    min-width: 0;
}

.presence h1,
.presence h3,
.presence h4 {
    margin: 0;
}
.presence h1 {
    align-items: center;
    color: var(--presenceUsernameColor);
    display: flex;
}
.presence h1 svg {
    color: #da2f2f;
    font-size: 24px;
    margin-right: 6px;
}
.presence h3 {
    color: var(--presenceStatusColor);
}
.presence h3 a {
    color: var(--presenceUsernameColor);
}

.midbox h1,
.midbox h3 {
    margin: 0;
}
.midbox h1 {
    align-items: center;
    color: var(--presenceUsernameColor);
    display: flex;
}
.midbox h1 svg {
    color: #da2f2f;
    font-size: 24px;
    margin-right: 6px;
}
.midbox h3 {
    color: var(--presenceStatusColor);
}
.midbox h3 a {
    color: var(--presenceUsernameColor);
}

.div1 {
    background-position: 50%;
    background-size: cover;
    min-height: 100%;
    position: absolute;
    width: 100%;
}
.div2 {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 100%;
}
.centered {
    margin-top: calc(50vh - 180px);
}
@media (max-width: 600px) {
    .centered {
        margin-top: 5vh;
    }
}
.div4 {
    backdrop-filter: blur(var(--containerBlur));
    -webkit-backdrop-filter: blur(var(--containerBlur));
    background-color: var(--containerColor);
    background-image: var(--containerGradient);
    background-origin: border-box;
    border: var(--containerBorder);
    border-radius: var(--containerRadius);
    box-sizing: border-box;
    max-width: var(--containerWidth);
    padding: var(--containerPadding);
    width: 100%;
    transition: opacity 3s, margin-bottom 2.4s, backdrop-filter 0.8s, box-shadow ease 0.6s;
    margin-bottom: 145px;
    opacity: 1 !important;
    pointer-events: all;
    box-shadow: rgba(0, 0, 0, 0.2) 5px 5px 5px;
}
.div4:hover {
    backdrop-filter: blur(10px);
    box-shadow: rgba(0, 0, 0, 0.2) 10px 10px 10px;
}
@keyframes clNwu1_13049f0cfabe08e6ffce {
    0% {
        opacity: 0;
        transform: scale(0.8) rotate(-1turn);
    }
    60% {
        opacity: 1;
        transform: scale(1.1) rotate(-180deg);
    }
    to {
        transform: scale(1) rotate(0);
    }
}
.a1Lcy9_e606f195670897bc74a6 {
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: -2;
}
.xZw2Vb_599d5ef2ae281840bef2 {
    bottom: 12px;
    left: 15px;
    position: absolute;
}
.xZw2Vb_599d5ef2ae281840bef2 span {
    align-items: center;
    color: var(--textColor);
    display: flex;
}
.xZw2Vb_599d5ef2ae281840bef2 span svg {
    font-size: 19px;
    margin-right: 5px;
}
@media (max-width: 690px) {
    .div4 {
        box-sizing: border-box;
        width: 95%;
    }
}
@media (max-width: 370px) {
    .div4 {
        width: 100%;
    }
}
@keyframes r3XBdR_8a8ea89dbecde7a8ccc6 {
    0% {
        background-position: 0 50%;
    }
    to {
        background-position: 100% 50%;
    }
}
.midboxoutercontainer {
    display: flex;
    justify-content: center;
    max-width: 28rem;
    width: 100%;
}
.div3 {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
    max-width: var(--containerWidth);
    width: 100%;
}
.div5 {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.topcontainer {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 7px;
    max-width: 27rem;
    text-align: center;
}
.subtitlecontainer,
.titlecontainer {
    color: var(--textColor);
    margin: 0;
}
.subtitlecontainer {
    margin-top: 5px;
    font-weight: 570;
    font-size: 19px;
}
.titlecontainer {
    background-image: var(--usernameEffects);
    text-shadow: var(--colorUsernameGlow);
    width: -moz-fit-content;
    width: fit-content;
    font-weight: 600;
    font-size: 39.5px;
}
.mcVunh_b4c509d547ebc284a4d0 {
    margin-bottom: 7px;
    padding: 0 15px;
}
@keyframes vw3Nd9_b27a6720e965d87b8973 {
    0% {
        opacity: 1;
    }
    to {
        opacity: 0.4;
    }
}

.yt-hidden {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden; opacity: 0;
    pointer-events: none;
}

.player-card {
    background: var(--presenceContainerBackground);
    border: var(--presenceContainerBorder);
    border-radius: 25px;
    padding: 18px 20px 16px;
    margin-top: 20px;
    width: 100%;
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
}

.player-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.player-thumb {
    width: 52px; height: 52px;
    border-radius: 10px;
    flex-shrink: 0;
    overflow: hidden;
    background: rgba(255,255,255,0.08);
}

.player-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}

.player-info { flex: 1; min-width: 0; }

.player-title {
    color: #fff;
    font-weight: 600; font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-bottom: 3px;
}

.player-artist {
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.player-open-btn {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
    text-decoration: none;
}
.player-open-btn:hover { background: rgba(255,255,255,0.2); }
.player-open-btn svg { color: rgba(255,255,255,0.7); }

.player-progress-wrap {
    margin-bottom: 12px;
    cursor: pointer;
}

.player-progress-bg {
    width: 100%; height: 3px;
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
    overflow: hidden;
}

.player-progress-fill {
    height: 100%; width: 0%;
    background: #fff;
    border-radius: 2px;
    transition: width 0.4s linear;
}

.player-time-row {
    display: flex; justify-content: space-between;
    margin-top: 4px;
    color: rgba(255,255,255,0.35);
    font-size: 11px;
}

.player-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.ctrl-btn {
    background: none; border: none; cursor: pointer;
    color: rgba(255,255,255,0.5);
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 8px;
    transition: color 0.2s, background 0.2s;
}
.ctrl-btn:hover { color: #fff; background: rgba(255,255,255,0.08); }
.ctrl-btn.active { color: #fff; }

.ctrl-btn--play {
    width: 42px; height: 42px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 50%;
    color: #fff;
}
.ctrl-btn--play:hover { background: rgba(255,255,255,0.22); }