:root {
    --purple: #6f45b7;
    --purple-dark: #4b2f83;
    --purple-line: rgba(62, 38, 112, 0.38);
    --white: #f8fbfd;
    --muted: rgba(245, 239, 255, 0.78);
    --shadow: rgba(43, 24, 78, 0.34);
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    color: var(--white);
    font-family: Inter, Arial, sans-serif;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.1), transparent 30rem),
        linear-gradient(180deg, transparent 0 calc(100% - 8rem), rgba(48, 28, 92, 0.42) calc(100% - 8rem), rgba(35, 20, 68, 0.6) 100%),
        linear-gradient(180deg, #7e56c8 0%, var(--purple) 52%, #54358f 100%);
    overflow-x: hidden;
}

a {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
}

a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.topbar {
    min-height: 8.5rem;
    display: flex;
    justify-content: flex-end;
    padding: 0.9rem 2rem 0;
}

.login-form {
    width: min(100%, 40rem);
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.35rem 0.45rem;
    align-items: end;
}

.login-form label {
    display: grid;
    gap: 0.18rem;
    color: rgba(42, 22, 80, 0.88);
    font-size: 0.82rem;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.16);
}

.login-form input[type="email"],
.login-form input[type="password"] {
    width: 100%;
    height: 2.45rem;
    border: 1px solid rgba(75, 47, 131, 0.45);
    border-radius: 3px;
    padding: 0 0.65rem;
    color: #2f2153;
    font: inherit;
    background: #ffffff;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

.login-form button {
    height: 2.45rem;
    min-width: 5.4rem;
    border: 1px solid rgba(64, 38, 118, 0.6);
    border-radius: 4px;
    color: white;
    font: inherit;
    font-weight: 700;
    background: linear-gradient(#b98cff, #8c55dc);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 1px rgba(43, 24, 78, 0.32);
    cursor: pointer;
}

.login-form button:hover {
    filter: brightness(1.04);
}

.login-options {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 4rem;
    min-height: 2rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.86rem;
}

.remember {
    display: inline-flex !important;
    grid-auto-flow: column;
    align-items: center;
    gap: 0.3rem !important;
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 500 !important;
}

.remember input {
    width: 1rem;
    height: 1rem;
}

.page-shell {
    min-height: calc(100vh - 15.8rem);
    display: grid;
    grid-template-columns: minmax(18rem, 34rem) minmax(18rem, 35rem);
    justify-content: center;
    align-items: center;
    gap: 3.6rem;
    padding: 3rem 2rem 5rem;
    position: relative;
}

.intro-panel {
    min-height: 18rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-right: 3.6rem;
    border-right: 1px solid var(--purple-line);
    text-align: center;
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.07);
    transform: translateY(-2rem);
}

.brand-lockup {
    width: 50%;
    min-width: 9rem;
    max-width: 13rem;
    aspect-ratio: 1;
    display: grid;
    align-items: center;
    justify-content: center;
    margin-bottom: 2.35rem;
    overflow: visible;
}

.brand-logo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    filter: drop-shadow(0 1.2rem 2rem rgba(31, 15, 59, 0));
}

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

.about {
    max-width: 34rem;
}

.about h2,
.feature h2 {
    margin: 0 0 0.35rem;
    font-size: 1.35rem;
    line-height: 1.15;
    font-weight: 800;
    text-shadow: 0 2px 1px rgba(48, 25, 88, 0.28);
}

.about p,
.feature p {
    margin: 0;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.38;
    text-shadow: 0 1px 1px rgba(48, 25, 88, 0.3);
}

.features {
    display: grid;
    gap: 2.35rem;
}

.feature {
    display: grid;
    grid-template-columns: 4.2rem 1fr;
    gap: 1rem;
    align-items: center;
}

.feature-icon {
    width: 3.6rem;
    height: 3.6rem;
    position: relative;
    filter: drop-shadow(0 3px 2px rgba(37, 20, 72, 0.35));
}

.user-icon::before {
    content: "";
    position: absolute;
    left: 0.48rem;
    top: 0.82rem;
    width: 2.65rem;
    height: 1.45rem;
    border-radius: 48% 48% 42% 42%;
    background:
        radial-gradient(circle at 25% 52%, var(--purple) 0 0.18rem, transparent 0.2rem),
        radial-gradient(circle at 75% 52%, var(--purple) 0 0.18rem, transparent 0.2rem),
        #ffffff;
}

.user-icon::after {
    content: "";
    position: absolute;
    left: 1.16rem;
    top: 1.78rem;
    width: 1.22rem;
    height: 1.22rem;
    border: 0.22rem solid #ffffff;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at 50% -18%, #ffffff 0 0.42rem, transparent 0.45rem);
}

.pin-icon::before {
    content: "";
    position: absolute;
    left: 0.65rem;
    top: 0.05rem;
    width: 2.25rem;
    height: 2.8rem;
    border-radius: 50% 50% 50% 0;
    background: #ffffff;
    transform: rotate(-45deg);
}

.pin-icon::after {
    content: "";
    position: absolute;
    left: 1.55rem;
    top: 0.92rem;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--purple);
}

.phone-icon::before {
    content: "";
    position: absolute;
    left: 0.9rem;
    top: 0.1rem;
    width: 1.75rem;
    height: 3.25rem;
    border-radius: 0.22rem;
    background: linear-gradient(#ffffff 0 12%, #a883df 12% 82%, #ffffff 82%);
    border: 0.16rem solid rgba(255, 255, 255, 0.95);
}

.phone-icon::after {
    content: "";
    position: absolute;
    left: 1.63rem;
    bottom: 0.34rem;
    width: 0.28rem;
    height: 0.28rem;
    border-radius: 50%;
    background: #9b78d6;
}

.flash {
    position: fixed;
    right: 2rem;
    top: 7.3rem;
    max-width: 26rem;
    padding: 0.75rem 1rem;
    border-radius: 5px;
    color: #ffffff;
    box-shadow: 0 0.5rem 1.4rem rgba(43, 24, 78, 0.25);
}

.flash.error {
    background: #c75353;
}

.flash.success {
    background: #4b9b77;
}

.register-page {
    background:
        radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.11), transparent 20rem),
        linear-gradient(180deg, #7e56c8 0%, #6f45b7 48%, #54358f 100%);
}

.register-shell {
    min-height: 100vh;
    display: grid;
    align-content: start;
    justify-items: center;
    padding: 1.6rem 1rem 3rem;
}

.register-logo {
    width: 7rem;
    height: 7rem;
    display: block;
    margin-bottom: 0.7rem;
}

.register-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.register-card {
    width: min(100%, 44rem);
    color: #514a5e;
    background: #ffffff;
    border: 1px solid rgba(52, 31, 96, 0.35);
    box-shadow: 0 1rem 2.5rem rgba(34, 18, 67, 0.28);
}

.register-card-header {
    padding: 1.1rem 1.8rem;
    background: linear-gradient(#f8f8f9, #ececf0);
    border-bottom: 1px solid #dedee4;
}

.register-card-header h1 {
    margin: 0;
    color: #3e3949;
    font-size: 1.55rem;
    line-height: 1.1;
}

.register-alert {
    margin: 1.2rem 1.8rem 0;
    padding: 0.8rem 1rem;
    border-radius: 4px;
    color: #ffffff;
    font-weight: 700;
}

.register-alert.error {
    background: #c75353;
}

.register-alert.success {
    background: #4b9b77;
}

.register-intro {
    display: grid;
    grid-template-columns: 2.6rem 1fr;
    gap: 1.1rem;
    align-items: start;
    padding: 1.7rem 1.8rem 1rem;
}

.register-intro span {
    width: 2.35rem;
    height: 2.35rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    font-weight: 800;
    background: #cfcfd6;
}

.register-intro p {
    margin: 0;
    color: #686174;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 700;
}

.register-form {
    display: grid;
    gap: 1rem;
    padding: 0 2.2rem 2rem;
}

.register-form label,
.birth-row,
.gender-row {
    display: grid;
    grid-template-columns: 12rem 1fr;
    gap: 1.3rem;
    align-items: center;
}

.register-form label > span,
.birth-row legend,
.gender-row legend {
    color: #514a5e;
    font-weight: 800;
    text-align: right;
}

.register-form input[type="text"],
.register-form input[type="email"],
.register-form input[type="password"],
.register-form select {
    width: 100%;
    min-height: 2.45rem;
    border: 1px solid #d6d3dc;
    border-radius: 2px;
    padding: 0 0.65rem;
    color: #40394d;
    font: inherit;
    background: linear-gradient(#ffffff, #f8f8fa);
    box-shadow: inset 0 1px 2px rgba(40, 28, 68, 0.12);
}

.birth-row,
.gender-row {
    margin: 0;
    padding: 0;
    border: 0;
}

.birth-row > select {
    width: auto;
}

.birth-row {
    grid-template-columns: 12rem 4.8rem 8.5rem 5.8rem;
}

.gender-row {
    grid-template-columns: 12rem auto auto 1fr;
}

.gender-row label,
.terms-row {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    color: #514a5e;
    font-weight: 700;
}

.gender-row label {
    grid-template-columns: none;
}

.terms-row {
    grid-template-columns: auto 1fr !important;
    gap: 0.75rem !important;
    margin-top: 0.5rem;
}

.terms-row span {
    text-align: left !important;
    font-weight: 600 !important;
}

.register-submit {
    justify-self: end;
    min-width: 9rem;
    min-height: 2.65rem;
    border: 1px solid rgba(64, 38, 118, 0.6);
    border-radius: 4px;
    color: #ffffff;
    font: inherit;
    font-weight: 800;
    background: linear-gradient(#b98cff, #8c55dc);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 1px rgba(43, 24, 78, 0.32);
    cursor: pointer;
}

.register-submit:hover {
    filter: brightness(1.04);
}

.home-page {
    color: #33313a;
    background: #f3f3f5;
}

.app-bar {
    min-height: 2.25rem;
    color: #ffffff;
    background: linear-gradient(#7045b7, #54358f);
    border-bottom: 1px solid #3c2769;
    box-shadow: 0 1px 2px rgba(31, 18, 57, 0.28);
}

.app-bar-inner {
    width: min(100%, 70rem);
    min-height: 2.25rem;
    display: grid;
    grid-template-columns: 2rem auto minmax(9rem, 16rem) auto 1fr;
    gap: 0.55rem;
    align-items: center;
    margin: 0 auto;
    padding: 0 0.6rem;
}

.app-logo {
    width: 1.55rem;
    height: 1.55rem;
    overflow: hidden;
    border-radius: 4px;
}

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

.main-nav,
.account-nav {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.main-nav a,
.account-nav a {
    padding: 0.55rem 0.55rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.72rem;
    font-weight: 800;
}

.main-nav a:hover,
.account-nav a:hover,
.main-nav .active {
    color: #ffffff;
    text-decoration: none;
    background: rgba(36, 20, 68, 0.32);
}

.search-form input {
    width: 100%;
    height: 1.45rem;
    border: 1px solid rgba(39, 23, 72, 0.55);
    border-radius: 2px;
    padding: 0 0.5rem;
    font-size: 0.72rem;
}

.photo-button {
    height: 1.55rem;
    display: grid;
    place-items: center;
    border: 1px solid rgba(39, 23, 72, 0.55);
    border-radius: 3px;
    padding: 0 0.65rem;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    text-decoration: none;
    background: linear-gradient(#9a75db, #7045b7);
    cursor: pointer;
}

.photo-button:hover {
    color: #ffffff;
    text-decoration: none;
    filter: brightness(1.05);
}

.account-nav {
    justify-content: end;
    position: relative;
}

.account-settings-menu {
    position: relative;
}

.account-settings-button {
    border: 0;
    padding: 0.55rem 0.55rem;
    color: rgba(255, 255, 255, 0.9);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    background: transparent;
    cursor: pointer;
}

.account-settings-button::after {
    content: "";
    display: inline-block;
    margin-left: 0.35rem;
    border-top: 0.28rem solid currentColor;
    border-left: 0.24rem solid transparent;
    border-right: 0.24rem solid transparent;
    vertical-align: middle;
}

.account-settings-button:hover,
.account-settings-menu:focus-within .account-settings-button,
.account-settings-menu:hover .account-settings-button {
    color: #ffffff;
    background: rgba(36, 20, 68, 0.32);
}

.account-settings-dropdown {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 80;
    min-width: 12.5rem;
    padding: 0.3rem;
    border: 1px solid rgba(48, 24, 82, 0.35);
    border-radius: 4px;
    background: #ffffff;
    box-shadow: 0 0.55rem 1.2rem rgba(38, 17, 69, 0.22);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.25rem);
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.account-settings-menu:hover .account-settings-dropdown,
.account-settings-menu:focus-within .account-settings-dropdown,
.account-settings-button[aria-expanded="true"] + .account-settings-dropdown {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.account-nav .account-settings-dropdown a {
    display: block;
    padding: 0.48rem 0.65rem;
    border-radius: 3px;
    color: #4d3b69;
    font-size: 0.75rem;
    font-weight: 800;
    white-space: nowrap;
}

.account-nav .account-settings-dropdown a:hover {
    color: #ffffff;
    background: #7445b8;
}

.music-settings-layout {
    display: grid;
    gap: 1rem;
}

.music-settings-card {
    padding: 1rem;
    border: 1px solid #d8cdec;
    border-radius: 4px;
    background: #ffffff;
}

.music-settings-card h2 {
    margin: 0 0 0.8rem;
    color: #593890;
    font-size: 1rem;
}

.settings-check {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
}

.settings-check input {
    width: auto !important;
}

.music-source-list {
    display: grid;
    gap: 0.5rem;
    margin: 0.8rem 0;
}

.music-source-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.65rem;
    align-items: center;
    padding: 0.65rem;
    border: 1px solid #e1d7ef;
    border-radius: 4px;
    background: #fbf9ff;
}

.music-source-item label {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.65rem;
    align-items: start;
    margin: 0;
}

.music-source-delete {
    align-self: end;
    border: 1px solid #6a3fa4;
    border-radius: 3px;
    padding: 0.38rem 0.72rem;
    color: #ffffff;
    font-weight: 800;
    background: linear-gradient(#8b5cd1, #6c3daa);
    cursor: pointer;
}

.music-source-delete:hover {
    filter: brightness(1.05);
}

.music-source-list span {
    display: grid;
    gap: 0.18rem;
}

.music-source-list strong {
    color: #4c326f;
}

.music-source-list small {
    color: #7c669b;
}

.music-source-list em {
    overflow-wrap: anywhere;
    color: #70607f;
    font-style: normal;
}

.chat-settings-user-list {
    display: grid;
    gap: 0.55rem;
}

.chat-settings-user-list article {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem;
    border: 1px solid #e1d7ef;
    border-radius: 4px;
    background: #fbf9ff;
}

.chat-settings-user-list img,
.chat-settings-user-list > article > span {
    width: 2rem;
    height: 2rem;
    border-radius: 3px;
    object-fit: cover;
}

.chat-settings-user-list > article > span {
    display: grid;
    place-items: center;
    color: #ffffff;
    font-weight: 800;
    background: #7445b8;
}

.chat-settings-user-list small {
    display: block;
    color: #7c669b;
}

.home-shell {
    width: min(100%, 70rem);
    display: grid;
    grid-template-columns: 14rem minmax(24rem, 1fr) 14rem;
    gap: 1rem;
    margin: 1rem auto 0;
    padding: 0 0.6rem;
}

.home-alert {
    grid-column: 1 / -1;
    padding: 0.75rem 1rem;
    border-radius: 3px;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 800;
}

.home-alert.error {
    background: #c75353;
}

.home-alert.success {
    background: #4b9b77;
}

.left-sidebar,
.right-sidebar {
    display: grid;
    align-content: start;
    gap: 0.8rem;
}

.profile-box,
.side-panel,
.chat-panel,
.feed-column {
    background: #ffffff;
    border: 1px solid #dedde4;
}

.profile-box {
    padding: 0.7rem;
}

.profile-summary {
    display: grid;
    grid-template-columns: 2.7rem 1fr;
    gap: 0.65rem;
    align-items: center;
}

.profile-box h2 {
    margin: 0;
    color: #4d347e;
    font-size: 0.9rem;
}

.profile-box p,
.side-panel p,
.chat-panel p {
    margin: 0.15rem 0 0;
    color: #6d6875;
    font-size: 0.75rem;
}

.avatar {
    width: 2.35rem;
    height: 2.35rem;
    display: grid;
    place-items: center;
    color: #ffffff;
    font-weight: 800;
    background: linear-gradient(135deg, #9b78d6, #54358f);
    border-radius: 3px;
}

.avatar-main {
    width: 2.7rem;
    height: 2.7rem;
}

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

.profile-activity {
    display: grid;
    gap: 0.28rem;
    margin-top: 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid #eceaf0;
}

.activity-link {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    color: #4f8b2f;
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.2;
}

.activity-link:hover {
    color: #3f7625;
    text-decoration: underline;
}

.activity-link::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    flex: 0 0 auto;
    border-radius: 2px;
    background: #6db93f;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.activity-status::before {
    border-radius: 50%;
}

.activity-comment::before,
.activity-photo-comment::before {
    border-radius: 50% 50% 50% 0;
}

.activity-event::before {
    background:
        linear-gradient(#6db93f 0 30%, transparent 30%),
        linear-gradient(90deg, transparent 0 18%, #6db93f 18% 30%, transparent 30% 68%, #6db93f 68% 80%, transparent 80%),
        #9bd479;
}

.activity-page::before {
    border-radius: 1px;
    background: linear-gradient(90deg, #6db93f 0 30%, #9bd479 30%);
}

.tagged-thumbs {
    display: grid;
    grid-template-columns: repeat(6, 1.45rem);
    gap: 0.22rem;
    margin: 0.18rem 0 0.28rem 0.82rem;
}

.tagged-thumb {
    width: 1.45rem;
    height: 1.45rem;
    display: grid;
    place-items: center;
    border: 1px solid #ffffff;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 800;
    box-shadow: 0 1px 2px rgba(39, 23, 72, 0.25);
    overflow: hidden;
}

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

.thumb-1 {
    background: linear-gradient(135deg, #a98746, #d8c27a);
}

.thumb-2 {
    background: linear-gradient(135deg, #7045b7, #b98cff);
}

.thumb-3 {
    background: linear-gradient(135deg, #587e42, #a5c46f);
}

.thumb-4 {
    background: linear-gradient(135deg, #8c4d66, #d292a8);
}

.thumb-5 {
    background: linear-gradient(135deg, #386a8e, #9cc4df);
}

.tagged-more {
    background: #6f45b7;
}

.side-panel,
.chat-panel {
    padding: 0.7rem;
}

.side-panel h3,
.chat-panel h3 {
    margin: 0 0 0.45rem;
    color: #40394d;
    font-size: 0.85rem;
}

.side-panel a,
.chat-panel a,
.feed-content a {
    color: #5c3c9b;
    font-size: 0.75rem;
    font-weight: 700;
}

.invite-mini {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem;
    margin-top: 0.55rem;
}

.invite-mini input,
.friend-search input,
.chat-panel input {
    width: 100%;
    height: 1.75rem;
    border: 1px solid #d8d5df;
    border-radius: 2px;
    padding: 0 0.45rem;
    font-size: 0.75rem;
}

.invite-mini button {
    border: 1px solid #4c347d;
    border-radius: 2px;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    background: #7045b7;
}

.oldenti-player {
    position: relative;
    display: grid;
    gap: 0.72rem;
    justify-items: center;
    padding: 0.82rem 0.62rem 1rem;
    border: 1px solid #1e1f23;
    border-radius: 1.15rem;
    color: #17191d;
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.32), transparent 4.8rem),
        linear-gradient(145deg, #98999d 0%, #4a4b4e 43%, #202124 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.42),
        inset 0 -1.2rem 2rem rgba(0, 0, 0, 0.34),
        0 0.45rem 1.1rem rgba(39, 23, 72, 0.22);
}

.oldenti-player-brand {
    position: absolute;
    z-index: 1;
    right: 1.1rem;
    top: 0.72rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.oldenti-player-tape {
    display: none;
}

.oldenti-player-diskman-buttons {
    display: none;
}

.player-popup-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 0.75rem;
    background: #eeeeef;
}

.player-popup-shell {
    width: min(100%, 15rem);
}

.player-popup-page .oldenti-player {
    min-height: 24rem;
}

.player-popup-page .oldenti-player-skin-diskman {
    width: min(100%, 16rem);
    aspect-ratio: 1;
    min-height: 0;
}

.oldenti-player-screen {
    width: 100%;
    height: 8.1rem;
    min-height: 8.1rem;
    overflow: hidden;
    border: 0.28rem solid #050505;
    border-radius: 0.38rem;
    background: #f7f7f7;
}

.oldenti-player-skin-diskman {
    width: min(100%, 16rem);
    aspect-ratio: 1;
    min-height: 0;
    display: block;
    margin-bottom: 1.75rem;
    overflow: hidden;
    border-radius: 50%;
    padding: 0;
    background:
        radial-gradient(circle at 24% 20%, rgba(255, 255, 255, 0.16), transparent 3.4rem),
        radial-gradient(circle at 50% 50%, transparent 0 7.75rem, rgba(0, 0, 0, 0.38) 7.82rem),
        linear-gradient(145deg, #26272a 0%, #090a0c 68%, #020203 100%);
    box-shadow:
        inset 0 0 0 0.62rem rgba(0, 0, 0, 0.86),
        inset 0 0 0 0.82rem rgba(255, 255, 255, 0.05),
        inset 0 1.8rem 3.2rem rgba(255, 255, 255, 0.12),
        0 0.85rem 1.9rem rgba(39, 23, 72, 0.3);
}

.oldenti-player-skin-diskman::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0.45rem;
    top: 2.55rem;
    width: 10.65rem;
    height: 12.25rem;
    border-radius: 54% 44% 62% 42%;
    background:
        radial-gradient(circle at 58% 12%, rgba(255, 255, 255, 0.07) 0 0.12rem, transparent 0.14rem),
        radial-gradient(circle at 64% 12%, rgba(255, 255, 255, 0.07) 0 0.12rem, transparent 0.14rem),
        radial-gradient(circle at 70% 12%, rgba(255, 255, 255, 0.07) 0 0.12rem, transparent 0.14rem),
        linear-gradient(118deg, #1b1c1f 0%, #090a0c 72%);
    box-shadow:
        inset -0.36rem 0 1.1rem rgba(255, 255, 255, 0.05),
        0.16rem 0 0 rgba(255, 255, 255, 0.04);
}

.oldenti-player-skin-diskman::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: 0.48rem;
    top: 0.7rem;
    width: 12.95rem;
    height: 12.95rem;
    border-radius: 50%;
    transform-origin: 50% 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.86) 0 0.48rem, transparent 0.5rem),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.88) 0 2.75rem, rgba(255, 255, 255, 0.24) 2.82rem 5.92rem, transparent 6rem),
        conic-gradient(from 12deg, #e6f6ff, #52d9ff, #76f36e, #fff06b, #f77b74, #98b9ff, #e6f6ff);
    box-shadow:
        inset 0 0 0 0.24rem rgba(255, 255, 255, 0.18),
        inset 0 0 1.4rem rgba(255, 255, 255, 0.36),
        0 0 0 0.62rem rgba(0, 0, 0, 0.33);
}

.oldenti-player-skin-diskman.is-playing::after {
    animation: oldenti-disc-spin 1.2s linear infinite;
}

@keyframes oldenti-disc-spin {
    to {
        transform: rotate(360deg);
    }
}

.oldenti-player-skin-diskman .oldenti-player-brand {
    z-index: 3;
    right: 2.45rem;
    top: 1.8rem;
    color: #ffffff;
    font-size: 1rem;
    letter-spacing: 0.04rem;
    transform: rotate(19deg);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.oldenti-player-skin-diskman .oldenti-player-screen {
    position: absolute;
    left: 5.2rem;
    top: 6.15rem;
    width: 6.95rem;
    height: 3.45rem;
    min-height: 3.45rem;
    z-index: 3;
    margin: 0;
    border: 0.48rem solid #101113;
    border-radius: 1rem;
    transform: none;
    background: #101113;
    box-shadow:
        inset 0 0 0 0.08rem rgba(255, 255, 255, 0.08),
        0 0.35rem 0.7rem rgba(0, 0, 0, 0.28);
}

.oldenti-player-skin-diskman .oldenti-player-display {
    height: 100%;
    background: #89bdff;
}

.oldenti-player-skin-diskman .oldenti-player-track {
    padding: 0.1rem 0.24rem 0.12rem;
}

.oldenti-player-skin-diskman .oldenti-player-status {
    height: 0.88rem;
    font-size: 0.52rem;
    background: linear-gradient(#9bd0ff, #6fa8e5);
}

.oldenti-player-skin-diskman .oldenti-player-wheel {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    margin: 0;
    border-radius: 50%;
    background:
        linear-gradient(145deg, transparent, transparent);
    box-shadow: none;
}

.oldenti-player-skin-diskman .oldenti-player-wheel button {
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #303136, #101114);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0.12rem 0.25rem rgba(0, 0, 0, 0.38);
}

.oldenti-player-skin-diskman .oldenti-player-menu {
    top: 11.70rem;
    left: 4.9rem;
    width: 2.2rem;
    height: 1.22rem;
    border-radius: 0.38rem !important;
    font-size: 0.56rem;
}

.oldenti-player-skin-diskman .oldenti-player-prev,
.oldenti-player-skin-diskman .oldenti-player-next {
    width: 1.32rem;
    height: 1.32rem;
    font-size: 0.58rem;
}

.oldenti-player-skin-diskman .oldenti-player-prev {
    top: 4.75rem;
    left: 6.35rem;
}

.oldenti-player-skin-diskman .oldenti-player-next {
    top: 4.75rem;
    left: 8.28rem;
    right: auto;
}

.oldenti-player-skin-diskman .oldenti-player-toggle {
    top: 6.12rem;
    left: 2.00rem;
    bottom: auto;
    width: 2.05rem;
    height: 2.05rem;
    font-size: 0.72rem;
    transform: none;
}

.oldenti-player-skin-diskman .oldenti-player-volume {
    top: 8.55rem;
    left: 2.00rem;
    width: 2.05rem;
    height: 2.05rem;
    transform: none;
    background: linear-gradient(145deg, #303136, #101114) !important;
}

.oldenti-player-skin-diskman .oldenti-player-volume::before {
    left: 0.42rem;
    top: 0.58rem;
    width: 0.62rem;
    height: 0.66rem;
    clip-path: polygon(0 32%, 34% 32%, 100% 0, 100% 100%, 34% 68%, 0 68%);
    background: #ffffff;
    border-radius: 0;
    box-shadow: none;
}

.oldenti-player-skin-diskman .oldenti-player-volume::after {
    display: block;
    left: 0.95rem;
    top: 0.5rem;
    width: 0.38rem;
    height: 0.82rem;
    border: 0.13rem solid #ffffff;
    border-left: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0.22rem 0 0 -0.08rem #ffffff;
}

.oldenti-player-skin-diskman .oldenti-player-popout {
    z-index: 80;
    right: -0.35rem;
    bottom: -0.35rem;
    border-color: rgba(34, 23, 56, 0.28);
    background:
        linear-gradient(135deg, transparent 0 35%, #ffffff 36% 45%, transparent 46%),
        linear-gradient(#6b5c83, #34264f);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        0 0.18rem 0.45rem rgba(24, 16, 42, 0.28);
}

.oldenti-player-skin-diskman .oldenti-player-popup:not(.oldenti-player-volume-popup) {
    z-index: 40;
    top: 17.1rem;
    bottom: auto;
    left: 0.35rem;
    right: auto;
    width: 15.3rem;
    border-radius: 0.35rem;
}

.oldenti-player-popup.is-detached {
    position: fixed;
    z-index: 1000;
    right: auto;
    bottom: auto;
    color: #40394d;
    background: #ffffff;
}

.oldenti-player-popout.is-detached {
    position: fixed;
    z-index: 1000;
    right: auto;
    bottom: auto;
}

.oldenti-player-skin-diskman .oldenti-player-volume-popup {
    z-index: 40;
    top: 10.75rem;
    bottom: auto;
    left: 3.35rem;
    right: auto;
    width: 8.5rem;
    border-radius: 0.35rem;
}

.oldenti-player-skin-diskman .oldenti-player-diskman-buttons {
    display: block;
}

.oldenti-player-skin-diskman .oldenti-player-diskman-buttons span {
    position: absolute;
    z-index: 4;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    font-size: 0.52rem;
    font-weight: 900;
    line-height: 0.88;
    text-align: center;
    background: linear-gradient(145deg, #303136, #101114);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 0.12rem 0.25rem rgba(0, 0, 0, 0.38);
}

.oldenti-player-skin-diskman .diskman-fm {
    left: 4.2rem;
    top: 3.15rem;
    width: 1.32rem;
    height: 1.32rem;
}

.oldenti-player-skin-diskman .diskman-bt {
    left: 4.2rem;
    top: 5.05rem;
    width: 1.32rem;
    height: 1.32rem;
    font-size: 0.8rem;
}

.oldenti-player-skin-diskman .diskman-dir {
    left: 5.86rem;
    top: 5.05rem;
    width: 1.32rem;
    height: 1.32rem;
}

.oldenti-player-skin-diskman .diskman-prog {
    left: 5.68rem;
    top: 11.32rem;
    width: 1.34rem;
    height: 1.34rem;
    font-size: 0.42rem;
}

.oldenti-player-skin-diskman .diskman-eq {
    left: 4.25rem;
    top: 13.15rem;
    width: 1.38rem;
    height: 1.38rem;
}

/*
 * Keep the old generic positions from leaking into the physical Diskman layout.
 */
.oldenti-player-skin-diskman .oldenti-player-next,
.oldenti-player-skin-diskman .oldenti-player-prev {
    right: auto;
}

.oldenti-player-skin-diskman .oldenti-player-toggle,
.oldenti-player-skin-diskman .oldenti-player-menu {
    transform: none;
}

/*
 * The MENU button sits just below the Diskman in this skin.
 */
.oldenti-player-skin-diskman .oldenti-player-menu {
    color: #ffffff;
}



.oldenti-player-skin-diskman .oldenti-player-toggle::before {
    display: none;
}

.oldenti-player-skin-diskman .oldenti-player-prev,
.oldenti-player-skin-diskman .oldenti-player-next {
    color: #ffffff;
}

.oldenti-player-skin-diskman .oldenti-player-prev::before,
.oldenti-player-skin-diskman .oldenti-player-next::before {
    display: block;
    color: #ffffff;
}



.oldenti-player-skin-diskman .oldenti-player-toggle {
    color: #ffffff;
}

.oldenti-player-skin-diskman .oldenti-player-status strong,
.oldenti-player-skin-diskman .oldenti-player-status span,
.oldenti-player-skin-diskman .oldenti-player-track strong,
.oldenti-player-skin-diskman .oldenti-player-track span {
    font-family: Georgia, "Times New Roman", serif;
}

.oldenti-player-skin-diskman .oldenti-player-track strong {
    font-size: 0.78rem;
}

.oldenti-player-skin-diskman .oldenti-player-track span {
    font-size: 0.62rem;
}

/*
 * Undo earlier compact Diskman button tweaks when the physical layout is active.
 */
.oldenti-player-skin-diskman .oldenti-player-prev,
.oldenti-player-skin-diskman .oldenti-player-next,
.oldenti-player-skin-diskman .oldenti-player-toggle,
.oldenti-player-skin-diskman .oldenti-player-menu,
.oldenti-player-skin-diskman .oldenti-player-volume {
    position: absolute;
}

.oldenti-player-skin-diskman .oldenti-player-prev,
.oldenti-player-skin-diskman .oldenti-player-next {
    width: 1.32rem;
    height: 1.32rem;
}

.oldenti-player-skin-walkman {
    width: min(100%, 13.4rem);
    min-height: 24rem;
    display: block;
    overflow: visible;
    z-index: 1;
    border: 1px solid #4a5660;
    border-radius: 0.55rem;
    padding: 0;
    background:
        linear-gradient(90deg, #5fa6d8 0 61%, #e7e2d6 61% 100%);
    box-shadow:
        inset 0.25rem 0 0 rgba(255, 255, 255, 0.22),
        inset -0.28rem 0 0 rgba(0, 0, 0, 0.16),
        0 0.65rem 1.4rem rgba(39, 23, 72, 0.26);
}

.oldenti-player-skin-walkman::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(90deg, #5fa6d8 0 61%, #e7e2d6 61% 100%);
    box-shadow:
        inset 0.25rem 0 0 rgba(255, 255, 255, 0.22),
        inset -0.28rem 0 0 rgba(0, 0, 0, 0.16);
}

.oldenti-player-skin-walkman .oldenti-player-brand {
    z-index: 5;
    left: 1.05rem;
    right: auto;
    top: 0.82rem;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 900;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.26);
}

.oldenti-player-skin-walkman .oldenti-player-tape {
    position: absolute;
    z-index: 3;
    left: 1.05rem;
    top: 2.35rem;
    width: 8.9rem;
    height: 20.05rem;
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 8.5rem;
    justify-items: center;
    align-items: center;
    margin: 0;
    border: 0.52rem solid #17191d;
    border-radius: 0.3rem;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.05), transparent 20% 80%, rgba(255, 255, 255, 0.04)),
        #0b0c0e;
    box-shadow:
        inset 0 0 0 0.12rem rgba(255, 255, 255, 0.04),
        0.18rem 0.2rem 0.45rem rgba(0, 0, 0, 0.28);
}

.oldenti-player-skin-walkman .oldenti-player-tape span {
    width: 2.15rem;
    height: 2.15rem;
    border: 0.22rem solid #9c6a46;
    border-radius: 50%;
    background:
        radial-gradient(circle, #101114 0 0.45rem, transparent 0.47rem),
        conic-gradient(from 0deg, #2b1c15, #b98154, #2b1c15, #b98154, #2b1c15);
    box-shadow:
        inset 0 0 0 0.15rem #0b0c0e,
        0 0 0.25rem rgba(0, 0, 0, 0.35);
}

.oldenti-player-skin-walkman.is-playing .oldenti-player-tape span {
    animation: oldenti-tape-spin 1s linear infinite;
}

.oldenti-player-skin-walkman .oldenti-player-tape::after {
    content: "";
    position: absolute;
    left: 3.55rem;
    top: 9.1rem;
    width: 1.02rem;
    height: 1.38rem;
    background: #f4f1ea;
    box-shadow: 0 0 0 0.08rem rgba(255, 255, 255, 0.28);
}

@keyframes oldenti-tape-spin {
    to {
        transform: rotate(360deg);
    }
}

.oldenti-player-skin-walkman .oldenti-player-screen {
    position: absolute;
    z-index: 5;
    left: 2.25rem;
    top: 9.9rem;
    width: 6.75rem;
    height: 4.18rem;
    min-height: 4.18rem;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    box-shadow: 0 0.18rem 0.35rem rgba(0, 0, 0, 0.32);
}

.oldenti-player-skin-walkman .oldenti-player-display {
    height: 100%;
    background: #111;
}

.oldenti-player-skin-walkman .oldenti-player-status {
    height: 0.72rem;
    padding: 0 0.18rem;
    font-size: 0.42rem;
    background: #f6f6f6;
}

.oldenti-player-skin-walkman .oldenti-player-track {
    padding: 0.15rem 0.22rem;
}

.oldenti-player-skin-walkman .oldenti-player-track strong {
    font-size: 0.58rem;
}

.oldenti-player-skin-walkman .oldenti-player-track span {
    font-size: 0.48rem;
}

.oldenti-player-skin-walkman .oldenti-player-wheel {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.oldenti-player-skin-walkman .oldenti-player-wheel button {
    position: absolute;
    right: -1.72rem;
    left: auto;
    bottom: auto;
    width: 2.15rem;
    height: 3.25rem;
    display: grid;
    place-items: center;
    border: 1px solid #9e998d;
    border-left: 1px solid #9e998d;
    border-radius: 0 0.2rem 0.2rem 0;
    padding: 0;
    color: #24496c;
    font-size: 0.72rem;
    font-weight: 900;
    background: linear-gradient(#e9e4d8, #c9c2b4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0.1rem 0.08rem 0.18rem rgba(0, 0, 0, 0.18);
    cursor: pointer;
}

.oldenti-player-skin-walkman .oldenti-player-menu {
    top: 1.65rem;
    color: transparent;
    transform: translate(0%);
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
}

.oldenti-player-skin-walkman .oldenti-player-menu::before {
    content: "MENU";
    text-indent: 0;
    color: #2f72ad;
    font-size: 0.56rem;
    line-height: 1;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.oldenti-player-skin-walkman .oldenti-player-next {
    top: 5.95rem;
}

.oldenti-player-skin-walkman .oldenti-player-prev {
    top: 10.8rem;
}

.oldenti-player-skin-walkman .oldenti-player-toggle {
    top: 15rem;
    transform: translateX(0);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.oldenti-player-skin-walkman .oldenti-player-volume {
    top: 19.2rem;
    transform: translate(0%, 0%);
    background: linear-gradient(#e9e4d8, #c9c2b4) !important;
}

.oldenti-player-skin-walkman .oldenti-player-volume::before {
    content: "";
    position: absolute;
    left: 0.55rem;
    top: 1.17rem;
    width: 0.62rem;
    height: 0.62rem;
    clip-path: polygon(0 32%, 34% 32%, 100% 0, 100% 100%, 34% 68%, 0 68%);
    background: #2f72ad;
}

.oldenti-player-skin-walkman .oldenti-player-volume::after {
    content: "";
    position: absolute;
    left: 1.06rem;
    top: 1.1rem;
    width: 0.38rem;
    height: 0.74rem;
    border: 0.12rem solid #2f72ad;
    border-left: 0;
    border-radius: 50%;
}

.oldenti-player-skin-walkman.is-playing .oldenti-player-toggle {
    transform: translateX(-0.32rem);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0.18rem 0 0.32rem rgba(0, 0, 0, 0.18);
}

.oldenti-player-skin-walkman .oldenti-player-popout {
    z-index: 6;
    right: 0.62rem;
    bottom: 0.72rem;
}

.player-popup-page .oldenti-player-skin-cabeza {
    width: min(100%, 21rem);
    min-height: 0;
}

.oldenti-player-skin-cabeza {
    width: min(100%, 21rem);
    aspect-ratio: 342 / 394;
    display: block;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
    color: transparent;
    background: transparent;
    box-shadow: none;
}

.oldenti-player-skin-cabeza::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: url("../img/skins/cabeza/cabeza-player.png") center / contain no-repeat;
    pointer-events: none;
}

.oldenti-player-skin-cabeza .oldenti-player-brand,
.oldenti-player-skin-cabeza .oldenti-player-tape {
    display: none;
}

.oldenti-player-skin-cabeza .oldenti-player-screen {
    position: absolute;
    z-index: 1;
    left: 18.7%;
    top: 14.3%;
    width: 62.9%;
    height: 41.1%;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    border: 0;
    border-radius: 1.05rem;
    background: #050505;
}

.oldenti-player-skin-cabeza .oldenti-player-display {
    height: 100%;
    background: #050505;
}

.oldenti-player-skin-cabeza .oldenti-player-cover {
    background:
        radial-gradient(circle at 48% 44%, rgba(143, 255, 36, 0.45), transparent 3.5rem),
        linear-gradient(145deg, #0b1905, #050505);
}

.oldenti-player-skin-cabeza .oldenti-player-wheel {
    position: absolute;
    inset: 0;
    z-index: 4;
    width: 100%;
    aspect-ratio: auto;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.oldenti-player-skin-cabeza .oldenti-player-wheel button,
.oldenti-player-skin-cabeza .oldenti-player-popout {
    position: absolute;
    display: block;
    border: 0;
    border-radius: 0;
    padding: 0;
    overflow: hidden;
    color: transparent;
    font-size: 0;
    text-indent: -9999px;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    box-shadow: none;
    cursor: pointer;
    transform: none;
}

.oldenti-player-skin-cabeza .oldenti-player-wheel button::before,
.oldenti-player-skin-cabeza .oldenti-player-wheel button::after,
.oldenti-player-skin-cabeza .oldenti-player-popout::before,
.oldenti-player-skin-cabeza .oldenti-player-popout::after {
    display: none;
}

.oldenti-player-skin-cabeza .oldenti-player-special {
    left: 64.9%;
    top: 8.4%;
    width: 6.2%;
    height: 5.4%;
    background-image: url("../img/skins/cabeza/especial.png");
}

.oldenti-player-skin-cabeza .oldenti-player-menu {
    left: 30.8%;
    top: 8.4%;
    width: 5.8%;
    height: 5.1%;
    background-image: url("../img/skins/cabeza/menu.png");
}

.oldenti-player-skin-cabeza .oldenti-player-prev,
.oldenti-player-skin-cabeza .oldenti-player-next,
.oldenti-player-skin-cabeza .oldenti-player-toggle {
    top: 9.1%;
    width: 5.8%;
    height: 5.1%;
}

.oldenti-player-skin-cabeza .oldenti-player-prev {
    left: 38.1%;
    top: 8.4%;
    background-image: url("../img/skins/cabeza/atras.png");
}

.oldenti-player-skin-cabeza .oldenti-player-toggle {
    left: 45.4%;
    top: 8.4%;
    background-image: url("../img/skins/cabeza/play.png");
}

.oldenti-player-skin-cabeza.is-playing .oldenti-player-toggle {
    background-image: url("../img/skins/cabeza/pause.png");
}

.oldenti-player-skin-cabeza .oldenti-player-next {
    left: 52.7%;
    top: 8.4%;
    right: auto;
    background-image: url("../img/skins/cabeza/adelante.png");
}

.oldenti-player-skin-cabeza .oldenti-player-volume {
    left: 26%;
    top: 55.8%;
    width: 50%;
    height: 3.2%;
    overflow: visible;
    cursor: ew-resize;
    background-image: url("../img/skins/cabeza/vol.png") !important;
}

.oldenti-player-skin-cabeza .oldenti-player-wheel .oldenti-player-volume::before {
    content: "";
    position: absolute;
    display: block !important;
    left: clamp(0rem, calc(var(--oldenti-player-volume, 70%) - 0.42rem), calc(100% - 0.84rem));
    top: 50%;
    width: 0.84rem;
    height: 0.84rem;
    border: 1px solid rgba(49, 10, 88, 0.85);
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.95), transparent 0.18rem),
        linear-gradient(#d890ff, #7431b4);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 0.08rem 0.2rem rgba(0, 0, 0, 0.45);
    transform: translateY(-50%);
    pointer-events: none;
}

.oldenti-player-skin-cabeza .oldenti-player-wheel .oldenti-player-volume::after {
    display: none !important;
}

.oldenti-player-skin-cabeza .oldenti-player-popout {
    z-index: 5;
    left: 47.4%;
    top: 59.5%;
    width: 6.6%;
    height: 6.1%;
    background-image: url("../img/skins/cabeza/ventana%20nueva.png");
}

.oldenti-player-skin-cabeza .oldenti-player-cabeza-special-video {
    position: absolute;
    z-index: 2;
    left: 18.7%;
    top: 14.3%;
    width: 62.9%;
    height: 41.1%;
    overflow: hidden;
    border-radius: 1.05rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}

.oldenti-player-skin-cabeza.has-cabeza-special-video .oldenti-player-cabeza-special-video {
    opacity: 1;
}

.oldenti-player-skin-cabeza .oldenti-player-cabeza-special-video video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.oldenti-player-skin-cabeza .oldenti-player-popup {
    z-index: 30;
    left: 0.8rem;
    right: 0.8rem;
    top: calc(100% + 0.45rem);
    bottom: auto;
    border-radius: 0.35rem;
}

.oldenti-player-skin-cabeza .oldenti-player-volume-popup {
    left: 18%;
    right: 18%;
    top: 63.2%;
    bottom: auto;
}

.oldenti-player-status {
    height: 1.08rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.28rem;
    color: #111;
    font-size: 0.62rem;
    line-height: 1;
    background: linear-gradient(#f6f6f6, #d2d2d2);
}

.oldenti-player-display {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: #dfe9f4;
}

.oldenti-player-youtube,
.oldenti-player-soundcloud,
.oldenti-player-display iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.oldenti-player-cover {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.45rem;
    font-weight: 800;
    text-transform: uppercase;
    background:
        radial-gradient(circle at 56% 23%, #ffffff 0 0.62rem, rgba(255, 255, 255, 0.35) 0.64rem 1.1rem, transparent 1.12rem),
        radial-gradient(circle at 38% 72%, #f0d04e 0 0.42rem, transparent 0.44rem),
        radial-gradient(circle at 68% 78%, #e2574c 0 0.45rem, transparent 0.47rem),
        linear-gradient(180deg, #3c2d79 0%, #a56da8 48%, #ece2c9 49%, #241c20 70%, #111 100%);
    text-shadow: 0 2px 1px rgba(0, 0, 0, 0.28);
}

.oldenti-player-track {
    display: grid;
    gap: 0.04rem;
    padding: 0.28rem 0.36rem 0.38rem;
    border-top: 1px solid #d6d6d6;
    background: #ffffff;
}

.oldenti-player-track strong,
.oldenti-player-track span {
    overflow: hidden;
    color: #111;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oldenti-player-track strong {
    font-size: 0.7rem;
}

.oldenti-player-track span {
    color: #444;
    font-size: 0.58rem;
}

.oldenti-player-wheel {
    position: relative;
    width: 8.8rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, transparent 0 1.65rem, #222326 1.68rem),
        linear-gradient(145deg, #36373a, #18191b);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 0.3rem 0.9rem rgba(0, 0, 0, 0.28);
}

.oldenti-player-wheel button {
    position: absolute;
    border: 0;
    padding: 0;
    color: #f7f7f7;
    font-weight: 800;
    background: transparent;
    cursor: pointer;
}

.oldenti-player-wheel button:hover {
    color: #ffffff;
    text-shadow: 0 0 0.35rem rgba(255, 255, 255, 0.65);
}

.oldenti-player-menu {
    top: 0.9rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.78rem;
    letter-spacing: 0;
}

.oldenti-player-prev,
.oldenti-player-next {
    top: 4.05rem;
    font-size: 0.9rem;
}

.oldenti-player-prev {
    left: 1rem;
}

.oldenti-player-next {
    right: 1rem;
}

.oldenti-player-toggle {
    bottom: 1.02rem;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.82rem;
}

.oldenti-player-volume {
    left: 50%;
    top: 50%;
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(circle at 45% 34%, rgba(255, 255, 255, 0.22), transparent 1.2rem),
        linear-gradient(145deg, #5b5c60, #2b2c30) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.24),
        inset 0 -0.55rem 0.8rem rgba(0, 0, 0, 0.22);
}

.oldenti-player-volume::before {
    content: "";
    position: absolute;
    left: 1.07rem;
    top: 1.23rem;
    width: 0.58rem;
    height: 0.82rem;
    background: #ececec;
    clip-path: polygon(0 28%, 38% 28%, 100% 0, 100% 100%, 38% 72%, 0 72%);
}

.oldenti-player-volume::after {
    content: "";
    position: absolute;
    left: 1.7rem;
    top: 1.15rem;
    width: 0.55rem;
    height: 0.98rem;
    border-right: 0.13rem solid #ececec;
    border-radius: 50%;
}

.oldenti-player-skin-cabeza .oldenti-player-special {
    display: block;
}

.oldenti-player-special {
    display: none;
}

.oldenti-player-skin-cabeza .oldenti-player-special {
    display: block;
}

.oldenti-player-popout {
    position: absolute;
    right: 0.72rem;
    bottom: 0.72rem;
    width: 1.38rem;
    height: 1.38rem;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 50%;
    padding: 0;
    background:
        linear-gradient(135deg, transparent 0 35%, #ffffff 36% 45%, transparent 46%),
        linear-gradient(#55565a, #222326);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 1px 2px rgba(0, 0, 0, 0.32);
    cursor: pointer;
}

.oldenti-player-popout::before {
    content: "";
    position: absolute;
    right: 0.26rem;
    top: 0.24rem;
    width: 0.4rem;
    height: 0.4rem;
    border-top: 0.13rem solid #ffffff;
    border-right: 0.13rem solid #ffffff;
}

.oldenti-player-popout::after {
    content: "";
    position: absolute;
    left: 0.34rem;
    bottom: 0.32rem;
    width: 0.42rem;
    height: 0.36rem;
    border: 0.11rem solid #ffffff;
    border-top-width: 0.13rem;
}

.oldenti-player-popout:hover {
    filter: brightness(1.12);
}

.oldenti-player.is-popout-locked {
    filter: grayscale(0.8);
}

.oldenti-player.is-popout-locked > :not(.oldenti-player-lock) {
    pointer-events: none;
}

.oldenti-player-lock {
    position: absolute;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 1rem;
    color: #ffffff;
    text-align: center;
    background: rgba(32, 30, 38, 0.62);
}

.oldenti-player-lock[hidden] {
    display: none;
}

.oldenti-player-lock div {
    display: grid;
    gap: 0.65rem;
    justify-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 0.35rem;
    padding: 0.8rem;
    background: rgba(20, 16, 30, 0.78);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.28);
}

.oldenti-player-lock strong {
    font-size: 0.8rem;
    line-height: 1.25;
}

.oldenti-player-lock button {
    border: 1px solid #4c347d;
    border-radius: 3px;
    padding: 0.35rem 0.7rem;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    background: #7045b7;
    cursor: pointer;
}

.player-popup-page .oldenti-player-popout {
    display: none;
}

.oldenti-player-popup {
    position: absolute;
    z-index: 5;
    left: 0.45rem;
    right: 0.45rem;
    bottom: 1rem;
    padding: 0.65rem;
    border: 1px solid #bdb8c8;
    color: #40394d;
    background: #ffffff;
    box-shadow: 0 0.45rem 1.2rem rgba(20, 16, 30, 0.32);
}

.oldenti-player-popup form,
.oldenti-player-popup label,
.oldenti-player-skin-panel {
    display: grid;
    gap: 0.42rem;
}

.oldenti-player-skin-panel {
    margin-bottom: 0.65rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid #e3dfea;
}

.oldenti-player-popup strong,
.oldenti-player-popup span {
    font-size: 0.72rem;
}

.oldenti-player-popup input[type="url"] {
    width: 100%;
    height: 1.75rem;
    border: 1px solid #aaa2bc;
    padding: 0 0.4rem;
    font-size: 0.72rem;
}

.oldenti-player-popup select {
    width: 100%;
    height: 1.75rem;
    border: 1px solid #aaa2bc;
    padding: 0 0.35rem;
    color: #40394d;
    font-size: 0.72rem;
    background: #ffffff;
}

.oldenti-player-popup button {
    justify-self: end;
    border: 1px solid #4c347d;
    border-radius: 2px;
    padding: 0.25rem 0.55rem;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    background: #7045b7;
}

.oldenti-player-volume-popup {
    bottom: 4.1rem;
}

.oldenti-player-volume-popup input {
    width: 100%;
}

.invite-form {
    grid-template-columns: 1fr;
}

.invite-mini input:disabled,
.invite-mini button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.compact-list,
.chat-panel ul {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.compact-list li,
.chat-panel li {
    color: #625d6b;
    font-size: 0.75rem;
    line-height: 1.25;
}

.feed-column {
    min-height: 40rem;
    padding: 0.8rem;
}

.status-box {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.55rem;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid #e3e1e8;
}

.status-box input {
    height: 2rem;
    border: 1px solid #d8d5df;
    border-radius: 2px;
    padding: 0 0.65rem;
    color: #40394d;
    font: inherit;
}

.status-box button,
.more-button {
    border: 1px solid #bcb6c8;
    border-radius: 2px;
    color: #5b5366;
    font-weight: 800;
    background: linear-gradient(#ffffff, #eeeeF2);
    cursor: pointer;
}

.feed-heading h1 {
    margin: 0.85rem 0 0.35rem;
    color: #40394d;
    font-size: 1rem;
}

.feed-item {
    display: grid;
    grid-template-columns: 2.35rem 1fr;
    gap: 0.7rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid #eceaf0;
}

.feed-content p {
    margin: 0;
    color: #3d3847;
    font-size: 0.85rem;
    line-height: 1.35;
}

.feed-content strong {
    color: #4d347e;
}

.feed-content span {
    display: block;
    margin-top: 0.12rem;
    color: #8a8492;
    font-size: 0.72rem;
}

.feed-media-thumb {
    width: 6.2rem;
    aspect-ratio: 4 / 3;
    display: block;
    margin-top: 0.45rem;
    overflow: hidden;
    border: 1px solid #dedde4;
    background: #eceaf0;
}

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

.feed-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.32rem;
}

.feed-actions form {
    margin: 0;
}

.feed-actions a,
.feed-actions button {
    border: 0;
    padding: 0;
    color: #5c3c9b;
    font-size: 0.72rem;
    font-weight: 800;
    background: transparent;
    cursor: pointer;
}

.feed-comments {
    display: grid;
    gap: 0.35rem;
    margin-top: 0.5rem;
}

.feed-comments article {
    display: grid;
    grid-template-columns: 1.8rem 1fr;
    gap: 0.35rem;
    align-items: start;
}

.feed-comments img,
.feed-comments span {
    width: 1.8rem;
    height: 1.8rem;
    display: grid;
    place-items: center;
    object-fit: cover;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    background: #7045b7;
}

.feed-comments p {
    margin: 0;
    color: #40394d;
    font-size: 0.8rem;
}

.more-button {
    display: block;
    margin: 1rem 0 0 auto;
    padding: 0.35rem 0.75rem;
}

.chat-panel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.chat-panel input {
    margin-bottom: 0.55rem;
}

.chat-panel li::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    display: inline-block;
    margin-right: 0.35rem;
    border-radius: 50%;
    background: #73b84a;
}

.home-footer {
    width: min(100%, 70rem);
    display: flex;
    gap: 0.9rem;
    margin: 1.2rem auto;
    padding: 0 0.6rem;
    color: #8a8492;
    font-size: 0.72rem;
}

.home-footer a {
    color: #777181;
}

.search-shell {
    width: min(100%, 46rem);
    margin: 1rem auto;
    padding: 0 0.6rem;
}

.search-results-card {
    color: #33313a;
    background: #ffffff;
    border: 1px solid #dedde4;
}

.search-results-card h1 {
    margin: 0;
    padding: 0.8rem 0.9rem;
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 1px solid #eceaf0;
}

.search-page-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.55rem;
    padding: 0.8rem 0.9rem;
}

.search-page-form input {
    height: 2.5rem;
    border: 1px solid #d8d5df;
    border-radius: 4px;
    padding: 0 0.75rem;
    font: inherit;
}

.search-page-form button {
    border: 1px solid #12698d;
    border-radius: 4px;
    padding: 0 1rem;
    color: #ffffff;
    font: inherit;
    font-weight: 800;
    background: linear-gradient(#2495c4, #117ca8);
}

.search-tabs {
    display: flex;
    gap: 0.35rem;
    padding: 0 0.9rem 0.8rem;
    border-bottom: 1px solid #eceaf0;
    font-size: 0.88rem;
}

.search-tabs a {
    color: #2a7fa6;
}

.search-results-card h2 {
    margin: 0;
    padding: 0.85rem 0.9rem;
    font-size: 0.95rem;
}

.search-empty {
    min-height: 8rem;
    padding: 0.9rem;
    color: #6d6875;
    border-top: 1px solid #eceaf0;
}

.people-results {
    display: grid;
    border-top: 1px solid #eceaf0;
}

.person-result,
.request-item,
.public-profile-header {
    display: grid;
    grid-template-columns: 6rem 1fr auto;
    gap: 0.9rem;
    align-items: center;
    padding: 0.9rem;
    border-bottom: 1px solid #eceaf0;
}

.person-photo {
    width: 6rem;
    height: 6rem;
    object-fit: cover;
    background: #e5e5e8;
}

.person-placeholder {
    position: relative;
    overflow: hidden;
}

.person-placeholder::before {
    content: "";
    position: absolute;
    left: 1.35rem;
    top: 1.15rem;
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: #cfcfd6;
}

.person-placeholder::after {
    content: "";
    position: absolute;
    left: 0.55rem;
    bottom: -0.1rem;
    width: 4.9rem;
    height: 3.7rem;
    border-radius: 50% 50% 0 0;
    background: #cfcfd6;
}

.person-info {
    display: grid;
    gap: 0.25rem;
}

.person-name {
    color: #2e2a35;
    font-weight: 800;
}

.person-info span,
.relation-label,
.request-item p {
    color: #7b7482;
    font-size: 0.85rem;
}

.person-actions {
    display: grid;
    gap: 0.45rem;
    justify-self: end;
}

.person-actions form {
    margin: 0;
}

.add-friend-button {
    border: 1px solid #4c8d2d;
    border-radius: 4px;
    padding: 0.45rem 0.75rem;
    color: #ffffff;
    font-weight: 800;
    background: linear-gradient(#8fd25d, #58a72f);
    cursor: pointer;
}

.cancel-request-button {
    border: 1px solid #a66a2c;
    border-radius: 4px;
    padding: 0.45rem 0.75rem;
    color: #ffffff;
    font-weight: 800;
    background: linear-gradient(#d7a45d, #b8752f);
    cursor: pointer;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    padding: 1rem;
    background: rgba(22, 14, 39, 0.55);
    z-index: 10;
}

.modal-overlay:target {
    display: grid;
}

[hidden] {
    display: none !important;
}

.request-modal {
    width: min(100%, 42rem);
    max-height: 86vh;
    overflow: auto;
    color: #33313a;
    background: #ffffff;
    border: 1px solid #dedde4;
    box-shadow: 0 1.2rem 3rem rgba(18, 10, 34, 0.35);
}

.request-modal header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0.9rem;
    border-bottom: 1px solid #eceaf0;
}

.request-modal h2 {
    margin: 0;
    font-size: 1rem;
}

.modal-close {
    width: 1.8rem;
    height: 1.8rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    background: #c75353;
}

.modal-close:hover {
    color: #ffffff;
    text-decoration: none;
    filter: brightness(1.05);
}

.request-actions form {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 0.35rem;
}

.request-actions button {
    border: 1px solid #c9c3d4;
    border-radius: 3px;
    padding: 0.35rem 0.55rem;
    color: #40394d;
    font-weight: 800;
    background: linear-gradient(#ffffff, #eeeeF2);
}

.request-actions button[value="accept"] {
    color: #ffffff;
    border-color: #4c8d2d;
    background: linear-gradient(#8fd25d, #58a72f);
}

.albums-modal {
    width: min(100%, 48rem);
}

.albums-modal header {
    grid-template-columns: 1fr auto auto;
}

.create-album-link {
    border: 1px solid #4c347d;
    border-radius: 3px;
    padding: 0.4rem 0.65rem;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    background: #7045b7;
}

.create-album-link:hover {
    color: #ffffff;
    text-decoration: none;
    filter: brightness(1.04);
}

.albums-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9rem;
    padding: 1rem;
}

.album-card {
    display: grid;
    gap: 0.28rem;
    color: #40394d;
}

.album-cover {
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #dedde4;
    background: linear-gradient(135deg, #edeaf4, #d9d4e6);
}

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

.album-cover span {
    width: 3rem;
    height: 2.3rem;
    border-radius: 3px;
    background: linear-gradient(#ffffff 0 20%, #9b78d6 20%);
    box-shadow: 0 0.25rem 0.8rem rgba(39, 23, 72, 0.18);
}

.album-card h3,
.album-card p,
.album-card small {
    margin: 0;
}

.album-card h3 {
    color: #4d347e;
    font-size: 0.82rem;
    line-height: 1.15;
}

.album-card p {
    color: #6d6875;
    font-size: 0.76rem;
    font-weight: 800;
}

.album-card small {
    color: #8a8492;
    font-size: 0.7rem;
    line-height: 1.25;
}

.create-album-modal {
    width: min(100%, 28rem);
}

.create-album-form {
    display: grid;
    gap: 0.9rem;
    padding: 1rem;
}

.create-album-form label {
    display: grid;
    gap: 0.35rem;
}

.create-album-form span {
    color: #40394d;
    font-size: 0.82rem;
    font-weight: 800;
}

.create-album-form input {
    min-height: 2.25rem;
    border: 1px solid #d8d5df;
    border-radius: 3px;
    padding: 0 0.55rem;
    font: inherit;
}

.upload-photos-modal {
    width: min(100%, 45rem);
    overflow: hidden;
}

.upload-photos-modal form {
    min-height: 25rem;
    display: grid;
    grid-template-rows: auto auto 1fr auto;
}

.upload-photos-modal header {
    align-items: center;
    background: linear-gradient(#ffffff, #f2f1f5);
}

.upload-album-picker {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #8a8492;
    font-size: 0.72rem;
}

.upload-album-picker button {
    border: 1px solid #c9c3d4;
    border-radius: 3px;
    padding: 0.35rem 0.65rem;
    color: #5a5068;
    font-size: 0.72rem;
    font-weight: 800;
    background: linear-gradient(#ffffff, #e8e5ee);
    cursor: pointer;
}

.upload-album-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #eceaf0;
    background: #fbfafc;
}

.upload-album-list label {
    display: grid;
    gap: 0.3rem;
}

.upload-album-list span {
    color: #40394d;
    font-size: 0.76rem;
    font-weight: 800;
}

.upload-album-list select,
.upload-album-list input {
    min-height: 2rem;
    border: 1px solid #d8d5df;
    border-radius: 3px;
    padding: 0 0.5rem;
    color: #40394d;
    font: inherit;
    background: #ffffff;
}

.upload-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
    align-content: start;
    gap: 0.8rem;
    min-height: 16rem;
    padding: 1rem;
    background: #ffffff;
}

.upload-preview,
.upload-add-more {
    position: relative;
    aspect-ratio: 1.15;
    margin: 0;
    border: 1px solid #dedde4;
    background: #f5f4f8;
}

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

.upload-preview button {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    background: #c75353;
    cursor: pointer;
}

.upload-add-more {
    display: grid;
    place-items: center;
    color: #8a8492;
    font-size: 0.76rem;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
}

.upload-add-more::before {
    content: "";
    width: 2.6rem;
    height: 2rem;
    display: block;
    margin-bottom: 0.35rem;
    border: 2px solid #dedde4;
    border-radius: 3px;
    background: linear-gradient(135deg, transparent 0 55%, #dedde4 56% 62%, transparent 63%);
}

.upload-add-more input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.upload-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    border-top: 1px solid #eceaf0;
    background: #fbfafc;
}

.upload-actions a {
    color: #5b4d70;
    font-size: 0.76rem;
    font-weight: 800;
}

.upload-actions button {
    border: 1px solid #4d347e;
    border-radius: 3px;
    padding: 0.48rem 1.1rem;
    color: #ffffff;
    font-weight: 800;
    background: linear-gradient(#946bd5, #5b339b);
    cursor: pointer;
}

.send-message-modal {
    width: min(100%, 34rem);
}

.send-message-form {
    display: grid;
    gap: 0.8rem;
    padding: 1rem;
}

.send-message-form label {
    display: grid;
    gap: 0.35rem;
}

.send-message-form span {
    color: #40394d;
    font-size: 0.8rem;
    font-weight: 800;
}

.send-message-form textarea {
    min-height: 8rem;
    resize: vertical;
    border: 1px solid #d8d5df;
    border-radius: 3px;
    padding: 0.65rem;
    color: #40394d;
    font: inherit;
}

.send-message-form p {
    margin: 0;
    color: #6d6875;
    font-size: 0.76rem;
}

.messages-shell {
    width: min(100%, 70rem);
    display: grid;
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: 1rem;
    margin: 1rem auto;
    padding: 0 0.6rem;
}

.messages-shell .home-alert {
    grid-column: 1 / -1;
}

.messages-sidebar,
.messages-panel {
    color: #3d3847;
    background: #ffffff;
    border: 1px solid #dedde4;
}

.messages-sidebar {
    align-self: start;
    padding: 0.7rem;
}

.new-message-button {
    display: block;
    margin-bottom: 0.8rem;
    border: 1px solid #d2b051;
    border-radius: 3px;
    padding: 0.48rem 0.55rem;
    color: #5d4a15;
    font-size: 0.75rem;
    font-weight: 800;
    background: #f1c85b;
}

.messages-sidebar nav {
    display: grid;
    border-top: 1px solid #e5e2ea;
}

.messages-sidebar nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.65rem 0.3rem;
    border-bottom: 1px solid #e5e2ea;
    color: #4d347e;
    font-size: 0.78rem;
    font-weight: 800;
}

.messages-sidebar nav a.active {
    color: #2d243d;
    background: #f3f1f7;
}

.message-count-badge {
    min-width: 1.35rem;
    height: 1.35rem;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    padding: 0 0.35rem;
    color: #ffffff;
    font-size: 0.72rem;
    line-height: 1;
    background: #7045b7;
}

.messages-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid #dedde4;
}

.messages-heading h1 {
    margin: 0;
    color: #40394d;
    font-size: 1.1rem;
}

.messages-heading span {
    color: #6d6875;
    font-size: 0.76rem;
    font-weight: 800;
}

.message-list {
    display: grid;
}

.message-list-tools {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid #eceaf0;
    background: #fbfafc;
}

.message-list-tools button {
    border: 1px solid #c9c3d4;
    border-radius: 3px;
    padding: 0.35rem 0.65rem;
    color: #5b5366;
    font-size: 0.72rem;
    font-weight: 800;
    background: linear-gradient(#ffffff, #eeeeF2);
    cursor: pointer;
}

.message-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.65rem 0.8rem;
    border-bottom: 1px solid #eceaf0;
    background: #ffffff;
}

.message-row.selected {
    background: #f7f4fb;
}

.message-row-main {
    display: grid;
    grid-template-columns: 1rem 1fr;
    align-items: center;
    gap: 0.65rem;
    color: #40394d;
}

.message-row-link {
    display: grid;
    grid-template-columns: 2.4rem 1fr;
    align-items: center;
    gap: 0.65rem;
    color: #40394d;
}

.message-row-link:hover {
    color: #40394d;
    text-decoration: none;
}

.message-check-wrap {
    width: 0.72rem;
    height: 0.72rem;
    display: grid;
    place-items: center;
}

.message-check-wrap input {
    width: 0.82rem;
    height: 0.82rem;
    margin: 0;
    accent-color: #5ab55f;
}

.message-check {
    width: 0.72rem;
    height: 0.72rem;
    border: 1px solid #c9c3d4;
    border-radius: 2px;
}

.message-row.unread .message-check-wrap input {
    box-shadow: 0 0 0 2px rgba(90, 181, 95, 0.25);
}

.message-row img,
.message-row .avatar {
    width: 2.4rem;
    height: 2.4rem;
    display: grid;
    place-items: center;
    object-fit: cover;
    color: #ffffff;
    font-weight: 800;
    background: linear-gradient(135deg, #9b78d6, #54358f);
}

.message-row strong {
    display: block;
    font-size: 0.82rem;
}

.message-row.unread strong {
    font-weight: 900;
}

.message-row small {
    color: #6d6875;
    font-size: 0.72rem;
}

.message-row button,
.message-detail-actions button {
    border: 1px solid #c9c3d4;
    border-radius: 3px;
    padding: 0.35rem 0.55rem;
    color: #5b5366;
    font-size: 0.72rem;
    font-weight: 800;
    background: linear-gradient(#ffffff, #eeeeF2);
    cursor: pointer;
}

.message-detail {
    margin: 0.9rem;
    border: 1px solid #dedde4;
    background: #fbfafc;
}

.message-detail header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid #eceaf0;
}

.message-detail h2 {
    margin: 0;
    color: #40394d;
    font-size: 0.95rem;
}

.message-detail p {
    margin: 0;
    padding: 0.8rem;
    color: #3d3847;
    font-size: 0.84rem;
    line-height: 1.45;
}

.message-thread {
    display: grid;
    gap: 0.7rem;
    padding: 0.85rem;
    background: #ffffff;
}

.chat-bubble {
    width: min(78%, 34rem);
    display: grid;
    gap: 0.28rem;
    border-radius: 5px;
    padding: 0.65rem 0.75rem;
    box-shadow: 0 1px 0 rgba(39, 23, 72, 0.08);
}

.chat-bubble.received {
    justify-self: start;
    color: #ffffff;
    background: #7851b6;
}

.chat-bubble.own {
    justify-self: end;
    color: #3d2b55;
    background: #e3d7f5;
}

.chat-bubble strong {
    font-size: 0.76rem;
}

.chat-bubble p {
    padding: 0;
    color: inherit;
}

.chat-bubble small {
    justify-self: end;
    color: inherit;
    opacity: 0.72;
    font-size: 0.68rem;
}

.message-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0 0.8rem 0.8rem;
}

.message-reply-form {
    display: grid;
    gap: 0.6rem;
    padding: 0.8rem;
    border-top: 1px solid #eceaf0;
    background: #ffffff;
}

.message-reply-form label {
    display: grid;
    gap: 0.35rem;
}

.message-reply-form span {
    color: #40394d;
    font-size: 0.78rem;
    font-weight: 800;
}

.message-reply-form textarea {
    min-height: 5.5rem;
    resize: vertical;
    border: 1px solid #d8d5df;
    border-radius: 3px;
    padding: 0.55rem;
    color: #40394d;
    font: inherit;
}

.message-reply-form div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.message-reply-form small {
    color: #6d6875;
    font-size: 0.72rem;
}

.message-reply-form button {
    border: 1px solid #4d347e;
    border-radius: 3px;
    padding: 0.42rem 0.9rem;
    color: #ffffff;
    font-weight: 800;
    background: linear-gradient(#946bd5, #5b339b);
    cursor: pointer;
}

.hidden-link {
    display: inline-grid;
    place-items: center;
    margin: 0 0.2rem;
    border: 1px solid #a66a2c;
    border-radius: 3px;
    padding: 0.15rem 0.35rem;
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 800;
    background: #b8752f;
    cursor: pointer;
}

.global-chat {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    width: 13rem;
    max-height: 72vh;
    z-index: 8;
    color: #40394d;
    background: #ffffff;
    border: 1px solid #d9d5e4;
    box-shadow: 0 0.8rem 2rem rgba(24, 16, 42, 0.18);
    overflow: auto;
}

.global-chat header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(1.8rem, 1fr);
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.65rem;
    border-bottom: 1px solid #eceaf0;
}

.chat-panel-toggle {
    justify-self: end;
    border: 0;
    color: #8a8492;
    background: transparent;
    cursor: pointer;
    font-weight: 900;
}

.global-chat-mini {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 8;
    border: 1px solid #d9d5e4;
    border-radius: 3px;
    padding: 0.45rem 0.7rem;
    color: #40394d;
    font-weight: 800;
    background: #ffffff;
    box-shadow: 0 0.8rem 2rem rgba(24, 16, 42, 0.18);
    cursor: pointer;
}

.global-chat header strong {
    justify-self: center;
    font-size: 0.82rem;
    white-space: nowrap;
}

.chat-status-control {
    position: relative;
    justify-self: start;
}

.chat-status-current {
    width: 1.45rem;
    height: 1.45rem;
    display: grid;
    place-items: center;
    border: 1px solid #d8d5df;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer;
}

.chat-status-menu {
    position: absolute;
    left: 0;
    top: calc(100% + 0.35rem);
    z-index: 14;
    width: 9.2rem;
    display: grid;
    border: 1px solid #d8d5df;
    background: #ffffff;
    box-shadow: 0 0.55rem 1.3rem rgba(24, 16, 42, 0.16);
}

.chat-status-menu button {
    display: grid;
    grid-template-columns: 0.8rem 1fr;
    align-items: center;
    gap: 0.45rem;
    border: 0;
    padding: 0.45rem 0.55rem;
    color: #40394d;
    font: inherit;
    font-size: 0.74rem;
    text-align: left;
    background: #ffffff;
    cursor: pointer;
}

.chat-status-menu button:hover {
    background: #f3f1f7;
}

.global-chat input {
    width: calc(100% - 1rem);
    margin: 0.5rem;
    border: 1px solid #d8d5df;
    border-radius: 3px;
    padding: 0.35rem;
    font: inherit;
    font-size: 0.72rem;
}

.global-chat h3 {
    margin: 0;
    padding: 0.3rem 0.65rem;
    color: #40394d;
    font-size: 0.78rem;
}

.chat-status-dot {
    width: 0.48rem;
    height: 0.48rem;
    display: inline-block;
    border-radius: 50%;
    background: #b8b2c2;
}

.chat-status-dot.online {
    background: #78b83f;
}

.chat-status-dot.busy {
    background: #c94d55;
}

.chat-status-dot.hidden,
.chat-status-dot.offline {
    background: #b8b2c2;
}

.chat-status-dot.hollow {
    border: 1px solid #8a8492;
    background: #ffffff;
}

.chat-recent {
    display: flex;
    gap: 0.35rem;
    padding: 0.5rem 0.65rem 0;
}

.chat-recent-avatar,
.chat-friend {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.chat-friends {
    display: grid;
    padding: 0.25rem 0.45rem 0.7rem;
}

.chat-friend {
    display: grid;
    grid-template-columns: 0.6rem 1.6rem 1fr;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.15rem;
    color: #40394d;
    font: inherit;
    font-size: 0.74rem;
    text-align: left;
}

.chat-avatar-wrap {
    position: relative;
    width: 1.65rem;
    height: 1.65rem;
    display: inline-grid;
    place-items: center;
}

.chat-avatar-wrap img,
.chat-avatar-fallback {
    width: 1.65rem;
    height: 1.65rem;
    display: grid;
    place-items: center;
    object-fit: cover;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 800;
    background: linear-gradient(135deg, #9b78d6, #54358f);
}

.chat-unread-badge {
    position: absolute;
    top: -0.35rem;
    right: -0.4rem;
    min-width: 1rem;
    height: 1rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    padding: 0 0.25rem;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 800;
    background: #7045b7;
}

.chat-buzz-badge {
    position: absolute;
    top: -0.55rem;
    left: -0.55rem;
    min-width: 1.25rem;
    height: 1.05rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.08rem;
    border: 1px solid #ffffff;
    border-radius: 999px;
    padding: 0 0.2rem;
    color: #ffffff;
    font-size: 0.58rem;
    font-weight: 800;
    background: #7045b7;
    box-shadow: 0 1px 4px rgba(39, 23, 72, 0.28);
}

.chat-buzz-badge img {
    width: 0.72rem;
    height: 0.72rem;
    object-fit: contain;
}

.chat-dock {
    position: fixed;
    left: 0.7rem;
    bottom: 0.7rem;
    z-index: 12;
    display: flex;
    align-items: flex-end;
    gap: 0.45rem;
}

.chat-window {
    position: relative;
    width: 20rem;
    color: #40394d;
    background: #ffffff;
    border: 1px solid #cfc9dc;
    box-shadow: 0 0.9rem 2rem rgba(24, 16, 42, 0.22);
}

.chat-window.buzzing {
    animation: chat-buzz 0.08s linear 8;
}

@keyframes chat-buzz {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-7px, 3px);
    }

    50% {
        transform: translate(6px, -2px);
    }

    75% {
        transform: translate(-4px, -3px);
    }

    100% {
        transform: translate(5px, 2px);
    }
}

.chat-window.minimized {
    width: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.chat-mini-avatar {
    border: 1px solid #cfc9dc;
    padding: 0.2rem;
    background: #ffffff;
    cursor: pointer;
}

.chat-window header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.45rem 0.55rem;
    border-bottom: 1px solid #eceaf0;
}

.chat-window header strong {
    font-size: 0.8rem;
}

.chat-window header button {
    border: 0;
    color: #8a8492;
    background: transparent;
    cursor: pointer;
    font-weight: 800;
}

.chat-msn-menu,
.chat-msn-to,
.chat-msn-actions,
.chat-msn-footer,
.chat-live-profile {
    display: none;
}

.chat-window header .chat-sound-toggle {
    position: relative;
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    vertical-align: middle;
}

.chat-sound-toggle::before {
    content: "";
    position: absolute;
    left: 0.22rem;
    top: 0.42rem;
    width: 0.38rem;
    height: 0.5rem;
    background: #7045b7;
    clip-path: polygon(0 24%, 38% 24%, 100% 0, 100% 100%, 38% 76%, 0 76%);
}

.chat-sound-toggle::after {
    content: "";
    position: absolute;
    left: 0.68rem;
    top: 0.33rem;
    width: 0.38rem;
    height: 0.68rem;
    border-right: 0.12rem solid #7045b7;
    border-radius: 50%;
}

.chat-sound-toggle.muted::after {
    left: 0.58rem;
    top: 0.21rem;
    width: 0.52rem;
    height: 0.9rem;
    border-right: 0;
    border-radius: 0;
    background: linear-gradient(45deg, transparent 44%, #7045b7 45% 55%, transparent 56%);
}

.chat-buzz-button {
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0.1rem 0.25rem;
    vertical-align: middle;
    font-size: 0.62rem;
}

.chat-effect-button {
    min-width: 1.65rem;
    height: 1.35rem;
    border-radius: 3px;
    padding: 0 0.25rem;
    vertical-align: middle;
    color: #ffffff !important;
    font-size: 0.62rem;
    line-height: 1;
    background: #7045b7 !important;
}

.chat-buzz-button img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.chat-window-messages {
    height: 13rem;
    display: grid;
    align-content: start;
    gap: 0.45rem;
    overflow: auto;
    padding: 0.65rem;
    background: #f7f5fa;
}

.chat-line {
    width: fit-content;
    max-width: 82%;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem;
    align-items: start;
    border-radius: 5px;
    padding: 0.45rem 0.55rem;
    font-size: 0.78rem;
    line-height: 1.3;
}

.chat-line time {
    opacity: 0.72;
    font-size: 0.62rem;
    line-height: 1.4;
}

.chat-line.mine {
    justify-self: end;
    color: #3d2b55;
    background: #e3d7f5;
}

.chat-line.theirs {
    justify-self: start;
    color: #ffffff;
    background: #7851b6;
}

.chat-line.buzz-line {
    grid-template-columns: auto 1fr;
    color: #5c3c9b;
    font-weight: 800;
    background: #fff2a8;
}

.chat-line.effect-line {
    font-weight: 800;
}

.chat-speaker {
    display: none;
}

.chat-effect-float {
    position: absolute;
    inset: 2.25rem 0 2.95rem;
    z-index: 4;
    display: grid;
    place-items: center;
    pointer-events: none;
    animation: chat-effect-pop var(--chat-effect-duration, 3200ms) ease forwards;
}

.chat-effect-float img {
    max-width: 72%;
    max-height: 78%;
    object-fit: contain;
    filter: drop-shadow(0 0.8rem 1.4rem rgba(24, 16, 42, 0.28));
}

@keyframes chat-effect-pop {
    0% {
        opacity: 0;
        transform: scale(0.82);
    }

    12%,
    82% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(0.96);
    }
}

.chat-window form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem;
    padding: 0.55rem;
    border-top: 1px solid #eceaf0;
}

.chat-window form input {
    min-height: 2rem;
    border: 1px solid #d8d5df;
    padding: 0 0.45rem;
    font: inherit;
}

.chat-window form button {
    border: 1px solid #4d347e;
    border-radius: 3px;
    color: #ffffff;
    font-weight: 800;
    background: #7045b7;
}

.chat-effect-overlay {
    position: fixed;
    inset: 0;
    z-index: 30;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(20, 12, 34, 0.4);
}

.chat-effect-modal {
    width: min(92vw, 25rem);
    border: 1px solid #cfc9dc;
    background: #ffffff;
    box-shadow: 0 1rem 2.4rem rgba(24, 16, 42, 0.25);
}

.chat-effect-modal header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 0.8rem;
    border-bottom: 1px solid #eceaf0;
}

.chat-effect-modal header button {
    border: 0;
    color: #8a2741;
    background: transparent;
    cursor: pointer;
    font-weight: 900;
}

.chat-effect-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    gap: 0.65rem;
    padding: 0.8rem;
}

.chat-effect-list button {
    min-height: 6rem;
    display: grid;
    justify-items: center;
    gap: 0.35rem;
    border: 1px solid #ded9e8;
    border-radius: 4px;
    padding: 0.45rem;
    color: #4b3670;
    background: #faf9fc;
    cursor: pointer;
}

.chat-effect-list img {
    max-width: 4.8rem;
    max-height: 3.8rem;
    object-fit: contain;
}

.album-page-shell {
    width: min(100%, 58rem);
    margin: 1rem auto;
    padding: 0 0.6rem;
}

.album-page-shell .profile-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.album-page-shell h1 {
    margin: 0;
    color: #40394d;
    font-size: 1rem;
}

.album-photo-grid {
    grid-template-columns: repeat(5, 1fr);
}

.photo-view-shell {
    width: min(100%, 72rem);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15rem;
    gap: 1rem;
    margin: 1rem auto;
    padding: 0 0.6rem;
}

.photo-view-main {
    display: grid;
    align-content: start;
    gap: 0.7rem;
}

.photo-stage {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    border: 1px solid #d8d5df;
    background: #ffffff;
}

.photo-stage.tagging {
    cursor: crosshair;
}

.photo-stage > img {
    max-width: 100%;
    max-height: 72vh;
    display: block;
}

.photo-tag-marker {
    position: absolute;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px rgba(84, 53, 143, 0.9), 0 0.2rem 0.6rem rgba(18, 10, 34, 0.3);
    color: #ffffff;
    font-size: 0;
    background: rgba(112, 69, 183, 0.14);
    cursor: pointer;
}

.photo-tag-marker:hover,
.photo-tag-marker:focus {
    font-size: 0.72rem;
    font-weight: 800;
    background: rgba(112, 69, 183, 0.72);
}

.photo-underbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.55rem;
    border: 1px solid #d8d5df;
    background: #ffffff;
}

.photo-owner-line {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.photo-owner-line img,
.photo-owner-line > span,
.photo-tag-person img,
.photo-tag-person > span {
    width: 2.1rem;
    height: 2.1rem;
    display: grid;
    place-items: center;
    object-fit: cover;
    color: #ffffff;
    font-weight: 800;
    background: #7045b7;
}

.photo-owner-line p {
    margin: 0.1rem 0 0;
    color: #6d6875;
    font-size: 0.78rem;
}

.photo-title-form {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.2rem;
}

.photo-title-form input {
    min-height: 1.8rem;
    border: 1px solid #d8d5df;
    padding: 0 0.45rem;
    color: #40394d;
    font: inherit;
}

.photo-title-form button {
    border: 1px solid #c9c3d4;
    border-radius: 2px;
    padding: 0 0.55rem;
    color: #4d347e;
    font-size: 0.72rem;
    font-weight: 800;
    background: linear-gradient(#ffffff, #eeeeF2);
}

.photo-reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.photo-reactions form {
    margin: 0;
}

.is-highlighted {
    outline: 3px solid #f3d56b;
    outline-offset: 3px;
    background: #fff8d8;
    transition: background 0.25s ease;
}

.photo-reactions button,
.photo-tag-start,
.photo-tag-person button,
.photo-tag-form button {
    border: 1px solid #c9c3d4;
    border-radius: 2px;
    padding: 0.32rem 0.55rem;
    color: #4d347e;
    font-size: 0.72rem;
    font-weight: 800;
    background: linear-gradient(#ffffff, #eeeeF2);
    cursor: pointer;
}

.photo-comments {
    padding: 0.7rem;
}

.photo-comment-form,
.photo-inline-form {
    display: grid;
    gap: 0.35rem;
    margin: 0.5rem 0;
}

.photo-comment-form textarea,
.photo-inline-form textarea {
    min-height: 4rem;
    border: 1px solid #d8d5df;
    padding: 0.45rem;
    color: #40394d;
    resize: vertical;
    font: inherit;
}

.photo-comment-form button,
.photo-inline-form button {
    justify-self: start;
    border: 1px solid #4d347e;
    border-radius: 3px;
    padding: 0.4rem 0.8rem;
    color: #ffffff;
    font-weight: 800;
    background: linear-gradient(#946bd5, #5b339b);
    cursor: pointer;
}

.photo-comment-thread {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.55rem;
}

.photo-comment {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.45rem;
    align-items: start;
}

.photo-comment .photo-comment-thread {
    margin-top: 0.55rem;
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
}

.photo-comment-body {
    display: grid;
    gap: 0.35rem;
}

.photo-comment-avatar img,
.photo-comment-avatar span {
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    object-fit: cover;
    color: #ffffff;
    font-weight: 800;
    background: #19647e;
}

.photo-comment-box {
    width: fit-content;
    max-width: 100%;
    border: 0;
    padding: 0.15rem 0.2rem;
    color: #15121d;
    background: transparent;
}

.admin-shell {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
    width: min(1180px, calc(100% - 32px));
    margin: 24px auto 72px;
}

.chat-window header .chat-report-button {
    background: #b52323;
    color: #fff;
    border-color: #7c1515;
    font-weight: 800;
    min-width: 22px;
}

.chat-window .chat-line.local-notice {
    justify-content: center;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.chat-window .chat-line.local-notice span {
    display: inline-block;
    padding: 5px 8px;
    border-radius: 3px;
    font-weight: 700;
}

.chat-window .chat-line.local-notice.report-sent span {
    background: #ffe2e2;
    color: #b52323;
    border: 1px solid #f2b3b3;
}

.chat-window .chat-line.local-notice.report-error span {
    background: #fff3cd;
    color: #7a4c00;
    border: 1px solid #eed18a;
}

.chat-report-evidence {
    margin-top: 10px;
    padding: 10px;
    background: #faf7ff;
    border: 1px solid #e1d6f2;
}

.chat-report-evidence h3 {
    margin: 0 0 8px;
    color: #402260;
}

.chat-report-evidence article {
    border-top: 1px solid #e8e0f4;
    padding: 7px 0;
}

.chat-report-evidence article:first-of-type {
    border-top: 0;
}

.admin-resolution-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin: 10px 0;
}

.admin-resolution-user {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #d9d2e9;
    padding: 8px;
    background: #fff;
}

.admin-resolution-user img,
.admin-resolution-user .avatar {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 3px;
}

.admin-resolution-user .avatar {
    display: grid;
    place-items: center;
    background: #7b4cc2;
    color: #fff;
    font-weight: 800;
}

.inspection-corner {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 10020;
    width: 178px;
    min-height: 90px;
    padding: 10px 10px 12px 42px;
    color: #27364a;
    background:
        linear-gradient(135deg, #30a9d6 0 38%, #dff6ff 39% 100%);
    border-left: 1px solid rgba(28, 91, 127, 0.35);
    border-bottom: 1px solid rgba(28, 91, 127, 0.35);
    box-shadow: -2px 2px 8px rgba(31, 25, 55, 0.22);
    overflow: hidden;
}

.inspection-corner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 28%, rgba(0, 0, 0, 0.12) 0 1px, transparent 1.5px) 0 0 / 7px 7px;
    opacity: 0.28;
}

.inspection-corner::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    border-style: solid;
    border-width: 0 0 34px 34px;
    border-color: transparent transparent rgba(255, 255, 255, 0.82) transparent;
    filter: drop-shadow(-1px 1px 1px rgba(0, 0, 0, 0.2));
}

.inspection-corner strong,
.inspection-corner small,
.inspection-corner form {
    position: relative;
    z-index: 1;
    display: block;
}

.inspection-corner strong {
    color: #154664;
    font-size: 13px;
}

.inspection-corner small {
    margin: 2px 0 6px;
    font-size: 12px;
}

.inspection-corner button {
    border: 1px solid #4b248c;
    background: linear-gradient(#8d5bd1, #6732b0);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 3px;
    cursor: pointer;
}

.inspection-tool {
    position: absolute;
    left: 14px;
    top: 26px;
    z-index: 1;
    width: 24px;
    height: 24px;
    transform: rotate(-35deg);
}

.inspection-tool::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 4px;
    width: 6px;
    height: 22px;
    background: #52677b;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
}

.inspection-tool::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 0;
    width: 16px;
    height: 10px;
    border: 4px solid #52677b;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background: transparent;
}

@media (max-width: 760px) {
    body.mobile-layout-enabled {
        min-width: 0;
        overflow-x: hidden;
        background: #f4f2f7;
    }

    body.mobile-layout-enabled .app-bar {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    body.mobile-layout-enabled .app-bar-inner {
        width: 100%;
        grid-template-columns: 2rem minmax(0, 1fr);
        gap: 0.35rem 0.45rem;
        padding: 0.35rem 0.55rem 0.55rem;
    }

    body.mobile-layout-enabled .app-logo {
        align-self: center;
    }

    body.mobile-layout-enabled .main-nav {
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
        white-space: nowrap;
    }

    body.mobile-layout-enabled .main-nav::-webkit-scrollbar {
        display: none;
    }

    body.mobile-layout-enabled .main-nav a {
        flex: 0 0 auto;
        padding: 0.55rem 0.75rem;
        font-size: 0.78rem;
    }

    body.mobile-layout-enabled .search-form,
    body.mobile-layout-enabled .photo-button,
    body.mobile-layout-enabled .account-nav {
        grid-column: 1 / -1;
    }

    body.mobile-layout-enabled .search-form input {
        height: 2rem;
        font-size: 0.9rem;
    }

    body.mobile-layout-enabled .photo-button {
        width: 100%;
        height: 2rem;
        justify-content: start;
        padding-left: 0.75rem;
        font-size: 0.82rem;
    }

    body.mobile-layout-enabled .account-nav {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.35rem;
        align-items: start;
    }

    body.mobile-layout-enabled .account-settings-menu {
        min-width: 0;
    }

    body.mobile-layout-enabled .account-settings-button {
        width: 100%;
        min-height: 2rem;
        border: 1px solid rgba(54, 30, 91, 0.25);
        border-radius: 3px;
        color: #2b1c47;
        background: #ffffff;
        text-align: left;
    }

    body.mobile-layout-enabled .account-settings-dropdown {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 0.55rem;
        min-width: 0;
        margin-top: 0.35rem;
        padding: 0;
        border: 0;
        box-shadow: none;
        background: transparent;
        max-height: 0;
        opacity: 0;
        overflow: hidden;
        pointer-events: none;
        transform: none;
        transition: max-height 0.16s ease, opacity 0.12s ease;
    }

    body.mobile-layout-enabled .account-settings-menu:hover .account-settings-dropdown,
    body.mobile-layout-enabled .account-settings-menu:focus-within .account-settings-dropdown {
        max-height: 0;
        opacity: 0;
        pointer-events: none;
    }

    body.mobile-layout-enabled .account-settings-button[aria-expanded="true"] + .account-settings-dropdown {
        max-height: 12rem;
        opacity: 1;
        pointer-events: auto;
    }

    body.mobile-layout-enabled .account-nav .account-settings-dropdown a,
    body.mobile-layout-enabled .account-nav > a {
        min-height: 1.7rem;
        padding: 0.25rem 0.45rem;
        color: #ffffff;
        font-size: 0.78rem;
        line-height: 1.15;
        white-space: normal;
        border-radius: 3px;
    }

    body.mobile-layout-enabled .account-nav > a {
        align-self: start;
        font-weight: 800;
    }

    body.mobile-layout-enabled .home-shell {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
        margin-top: 0.75rem;
        padding: 0 0.55rem 6rem;
    }

    body.mobile-layout-enabled .home-alert {
        padding: 0.85rem;
        font-size: 0.92rem;
    }

    body.mobile-layout-enabled .left-sidebar,
    body.mobile-layout-enabled .right-sidebar {
        gap: 0.65rem;
    }

    body.mobile-layout-enabled .left-sidebar {
        order: 1;
    }

    body.mobile-layout-enabled .feed-column {
        order: 2;
        min-width: 0;
    }

    body.mobile-layout-enabled .right-sidebar {
        order: 3;
    }

    body.mobile-layout-enabled .profile-box,
    body.mobile-layout-enabled .side-panel,
    body.mobile-layout-enabled .feed-column {
        width: 100%;
        min-width: 0;
    }

    body.mobile-layout-enabled .profile-box {
        max-height: 10rem;
        overflow: hidden;
    }

    body.mobile-layout-enabled .profile-summary {
        grid-template-columns: 3rem minmax(0, 1fr);
        align-items: start;
    }

    body.mobile-layout-enabled .avatar-main {
        width: 3rem;
        height: 3rem;
    }

    body.mobile-layout-enabled .avatar-main img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    body.mobile-layout-enabled .profile-box h2 {
        font-size: 1rem;
    }

    body.mobile-layout-enabled .side-panel {
        padding: 0.9rem;
    }

    body.mobile-layout-enabled .side-panel h3 {
        font-size: 1rem;
    }

    body.mobile-layout-enabled .side-panel p {
        font-size: 0.92rem;
        line-height: 1.25;
    }

    body.mobile-layout-enabled .invite-mini input,
    body.mobile-layout-enabled .invite-mini button {
        width: 100%;
        min-height: 2.25rem;
        font-size: 0.9rem;
    }

    body.mobile-layout-enabled .status-box {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.45rem;
        padding: 0.8rem;
    }

    body.mobile-layout-enabled .status-box input {
        min-width: 0;
        height: 2.35rem;
        font-size: 1rem;
    }

    body.mobile-layout-enabled .status-box button {
        min-width: 4.8rem;
        min-height: 2.35rem;
        font-size: 0.85rem;
    }

    body.mobile-layout-enabled .feed-heading h1 {
        font-size: 1.15rem;
    }

    body.mobile-layout-enabled .feed-item {
        grid-template-columns: 2.4rem minmax(0, 1fr);
        gap: 0.55rem;
        padding: 0.75rem;
    }

    body.mobile-layout-enabled .feed-content {
        min-width: 0;
    }

    body.mobile-layout-enabled .feed-media-thumb {
        max-width: 100%;
    }

    body.mobile-layout-enabled .feed-media-thumb img {
        width: 100%;
        height: auto;
        max-height: 18rem;
        object-fit: contain;
    }

    body.mobile-layout-enabled .feed-actions {
        flex-wrap: wrap;
    }

    body.mobile-layout-enabled .right-sidebar .side-panel {
        display: none;
    }

    body.mobile-layout-enabled .home-footer {
        display: none;
    }

    body.mobile-layout-enabled .profile-shell {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
        margin-top: 0.75rem;
        padding: 0 0.55rem 6rem;
    }

    body.mobile-layout-enabled .profile-left,
    body.mobile-layout-enabled .profile-main,
    body.mobile-layout-enabled .profile-right {
        min-width: 0;
    }

    body.mobile-layout-enabled .profile-left {
        order: 1;
    }

    body.mobile-layout-enabled .profile-main {
        order: 2;
    }

    body.mobile-layout-enabled .profile-right {
        order: 3;
    }

    body.mobile-layout-enabled .profile-header-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0.65rem;
        align-items: start;
        padding: 0.85rem;
    }

    body.mobile-layout-enabled .profile-header-card h1 {
        margin: 0;
        min-width: 0;
        overflow-wrap: anywhere;
        font-size: 1.05rem;
        line-height: 1.2;
    }

    body.mobile-layout-enabled .profile-header-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem;
        width: 100%;
    }

    body.mobile-layout-enabled .profile-header-actions .profile-action-button,
    body.mobile-layout-enabled .profile-header-actions button {
        width: 100%;
        min-width: 0;
        min-height: 2.35rem;
        padding: 0.45rem 0.4rem;
        white-space: normal;
        text-align: center;
        line-height: 1.15;
        font-size: 0.82rem;
    }

    body.mobile-layout-enabled .profile-card > header {
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    body.mobile-layout-enabled .profile-card > header h2 {
        min-width: 0;
        overflow-wrap: anywhere;
        font-size: 1rem;
    }

    body.mobile-layout-enabled .profile-photo-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    body.mobile-layout-enabled .profile-photo-thumb img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    body.mobile-layout-enabled .wall-form textarea {
        min-height: 5.5rem;
    }

    body.mobile-layout-enabled .wall-post {
        grid-template-columns: 2.4rem minmax(0, 1fr);
        gap: 0.55rem;
    }

    body.mobile-layout-enabled .wall-post > div,
    body.mobile-layout-enabled .photo-inline-form textarea {
        min-width: 0;
    }

    body.mobile-layout-enabled .global-chat {
        right: 0.55rem;
        bottom: 0.55rem;
        width: min(17.5rem, calc(100vw - 1.1rem));
        max-height: 46vh;
    }

    body.mobile-layout-enabled .global-chat input[data-chat-search] {
        min-width: 0;
    }

    body.mobile-layout-enabled .oldenti-player {
        justify-self: center;
        align-self: start;
        margin-left: auto;
        margin-right: auto;
        max-width: calc(100vw - 1.1rem);
    }

    body.mobile-layout-enabled .oldenti-player-skin-classic {
        width: min(15rem, 100%);
    }

    body.mobile-layout-enabled .oldenti-player-skin-diskman {
        width: min(16rem, calc(100vw - 2rem));
    }

    body.mobile-layout-enabled .oldenti-player-skin-walkman {
        width: min(13rem, calc(100vw - 2rem));
    }

    body.mobile-layout-enabled .oldenti-player-skin-cabeza {
        width: min(20rem, calc(100vw - 1.1rem));
    }

    body.mobile-layout-enabled .profile-right,
    body.mobile-layout-enabled .right-sidebar {
        justify-items: center;
    }
}

.admin-menu,
.admin-panel,
.forced-password-modal {
    background: #fff;
    border: 1px solid #d9d2e9;
    box-shadow: 0 1px 2px rgba(47, 24, 88, 0.08);
}

.admin-menu {
    padding: 14px;
}

.admin-menu strong {
    display: block;
    margin-bottom: 12px;
    color: #402260;
}

.admin-menu a {
    display: block;
    padding: 10px 12px;
    color: #4e3970;
    text-decoration: none;
    border-bottom: 1px solid #eee8f6;
}

.admin-menu a.active,
.admin-menu a:hover {
    background: #f1e9ff;
    color: #5b2ea6;
    font-weight: 700;
}

.admin-panel {
    padding: 20px;
}

.admin-panel h1 {
    margin: 0 0 18px;
    color: #25163e;
}

.admin-search,
.admin-inline-form,
.admin-actions-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.admin-search {
    margin-bottom: 16px;
}

.admin-search input,
.admin-inline-form input,
.admin-inline-form select,
.admin-actions-row input,
.admin-support-form textarea {
    border: 1px solid #cfc5df;
    padding: 8px 10px;
}

.admin-search button,
.admin-inline-form button,
.admin-actions-row button,
.admin-card button,
.forced-password-modal button {
    border: 1px solid #4b248c;
    background: linear-gradient(#8d5bd1, #6732b0);
    color: #fff;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: 3px;
    cursor: pointer;
}

.admin-card-list {
    display: grid;
    gap: 12px;
}

.admin-card {
    border: 1px solid #ded7ea;
    background: #fff;
    padding: 14px;
}

.admin-card header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    color: #2d1748;
}

.admin-card p {
    margin: 6px 0;
    color: #4e4261;
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.admin-table th,
.admin-table td {
    border-bottom: 1px solid #e6def0;
    padding: 9px;
    text-align: left;
}

.admin-table th {
    background: #f3ecff;
    color: #402260;
}

.forced-password-page {
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: rgba(80, 42, 132, 0.12);
    padding: 24px;
}

.forced-password-modal {
    width: min(520px, 100%);
    padding: 26px;
}

.forced-password-modal h1 {
    margin-top: 0;
    color: #2d1748;
}

@media (max-width: 760px) {
    .admin-shell {
        grid-template-columns: 1fr;
    }
}

.photo-comment-box a,
.photo-comment-box strong {
    color: #2f2550;
}

.photo-comment-body > .photo-comment-thread {
    margin-left: 1.2rem;
}

.photo-activity-list {
    display: grid;
    gap: 0.55rem;
    padding: 0.8rem;
}

.photo-activity-list a {
    display: grid;
    grid-template-columns: 3.4rem 1fr;
    gap: 0.65rem;
    align-items: center;
    color: #40394d;
    font-size: 0.82rem;
    font-weight: 800;
}

.photo-activity-list img {
    width: 3.4rem;
    height: 3.4rem;
    object-fit: cover;
    background: #eceaf0;
}

.activity-hint {
    display: block;
    margin-left: 0.85rem;
    color: #6d6875;
    font-size: 0.68rem;
}

.photo-comment.mine .photo-comment-box {
    background: transparent;
}

.photo-comment-box p {
    margin: 0.2rem 0;
    line-height: 1.35;
}

.photo-comment-box time {
    display: inline-block;
    margin-left: 0.35rem;
    color: #827b8f;
    font-size: 0.68rem;
}

.photo-comment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.photo-comment-actions form {
    margin: 0;
}

.photo-comment-actions button {
    border: 0;
    padding: 0;
    color: #5c3c9b;
    font: inherit;
    font-size: 0.78rem;
    background: transparent;
    cursor: pointer;
}

.photo-comments h2,
.photo-side h2,
.photo-side h3 {
    margin: 0 0 0.6rem;
    color: #40394d;
    font-size: 0.9rem;
}

.upload-photo-title {
    display: grid;
    gap: 0.35rem;
    min-height: 5rem;
    align-content: center;
    border: 1px dashed #d8d5df;
    padding: 0.75rem;
    color: #40394d;
    font-size: 0.78rem;
    font-weight: 800;
}

.upload-photo-title input {
    min-height: 2rem;
    border: 1px solid #d8d5df;
    padding: 0 0.45rem;
    font: inherit;
}

.photo-side {
    padding: 0.8rem;
}

.photo-tag-form {
    display: grid;
    gap: 0.55rem;
    margin: 0.7rem 0;
    padding: 0.6rem;
    background: #f7f4fb;
}

.photo-tag-form label {
    display: grid;
    gap: 0.25rem;
    color: #40394d;
    font-size: 0.78rem;
    font-weight: 800;
}

.photo-tag-form select {
    min-height: 2rem;
    border: 1px solid #d8d5df;
    padding: 0 0.4rem;
}

.photo-tag-form p {
    margin: 0;
    color: #6d6875;
    font-size: 0.78rem;
}

.photo-tag-list {
    display: grid;
    gap: 0.55rem;
}

.photo-tag-person {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
}

.public-profile-card {
    padding: 0.9rem;
}

.public-profile-card > a {
    color: #5c3c9b;
    font-weight: 800;
}

.public-profile-header {
    grid-template-columns: 6rem 1fr;
    padding: 0.9rem 0 0;
    border-bottom: 0;
}

.public-profile-header h1 {
    padding: 0;
    border-bottom: 0;
}

.profile-shell {
    width: min(100%, 70rem);
    display: grid;
    grid-template-columns: 14rem minmax(28rem, 1fr) 14rem;
    gap: 1rem;
    margin: 1rem auto;
    padding: 0 0.6rem;
}

.profile-left,
.profile-main,
.profile-right {
    display: grid;
    align-content: start;
    gap: 0.8rem;
}

.profile-card,
.profile-header-card {
    color: #3d3847;
    background: #ffffff;
    border: 1px solid #dedde4;
}

.profile-card h2,
.profile-header-card h1 {
    margin: 0;
    color: #40394d;
    font-size: 0.9rem;
}

.profile-card > h2,
.profile-card > header,
.profile-header-card {
    padding: 0.55rem 0.7rem;
    background: #e8f1f7;
    border-bottom: 1px solid #d7e2ea;
}

.profile-header-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.45rem;
    background: #ffffff;
}

.profile-header-card h1 {
    font-size: 1rem;
}

.public-user-heading {
    align-items: flex-start;
}

.public-user-heading > div {
    display: grid;
    gap: 0.18rem;
}

.public-user-heading h1 {
    margin-right: 0;
}

.public-user-heading span,
.public-user-heading strong {
    color: #6d6875;
    font-size: 0.72rem;
}

.public-user-heading strong {
    color: #4d347e;
}

.profile-header-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.45rem;
}

.profile-header-card button,
.profile-action-button {
    border: 1px solid #c9c3d4;
    border-radius: 2px;
    padding: 0.28rem 0.5rem;
    color: #5b5366;
    font-size: 0.72rem;
    font-weight: 800;
    background: linear-gradient(#ffffff, #eeeeF2);
}

.profile-action-button:hover {
    color: #40394d;
    text-decoration: none;
}

.profile-photo-card {
    min-height: 12.5rem;
    display: grid;
    gap: 0.55rem;
    place-items: center;
    padding: 0.6rem;
}

.profile-photo-card img,
.profile-photo-placeholder {
    width: 100%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    object-fit: cover;
    color: #ffffff;
    font-size: 4rem;
    font-weight: 800;
    background: linear-gradient(135deg, #9b78d6, #54358f);
}

.profile-photo-edit-trigger {
    width: 100%;
    display: block;
    color: inherit;
}

.profile-photo-edit-trigger:hover {
    text-decoration: none;
    filter: brightness(0.98);
}

.profile-photo-modal {
    width: min(100%, 48rem);
}

.profile-photo-picker {
    display: grid;
    grid-template-columns: 12rem 1fr;
    min-height: 28rem;
}

.profile-photo-picker aside {
    display: grid;
    align-content: start;
    gap: 0.7rem;
    padding: 0.9rem;
    border-right: 1px solid #eceaf0;
    background: #fbfafc;
}

.profile-photo-picker h3 {
    margin: 0;
    color: #40394d;
    font-size: 0.9rem;
}

.profile-photo-picker aside button {
    width: 100%;
    border: 1px solid #d8d5df;
    border-radius: 3px;
    padding: 0.45rem 0.55rem;
    color: #40394d;
    font-weight: 800;
    text-align: left;
    background: #ffffff;
    cursor: pointer;
}

.profile-photo-picker aside button.active {
    color: #ffffff;
    border-color: #4d347e;
    background: #7045b7;
}

.profile-upload-new {
    display: grid;
    gap: 0.35rem;
    color: #4d347e;
    font-size: 0.78rem;
    font-weight: 800;
}

.profile-upload-new input {
    width: 100%;
    font-size: 0.72rem;
}

.profile-photo-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.2rem, 1fr));
    gap: 0.65rem;
    padding: 0.9rem;
}

.profile-photo-choice-grid button {
    aspect-ratio: 1;
    border: 1px solid #dedde4;
    padding: 0;
    background: #eceaf0;
    cursor: pointer;
    overflow: hidden;
}

.profile-photo-choice-grid img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.profile-cropper {
    padding: 0.9rem;
    border-top: 1px solid #eceaf0;
}

.profile-cropper p {
    color: #6d6875;
    font-size: 0.82rem;
}

.profile-crop-stage {
    position: relative;
    width: min(100%, 26rem);
    height: 20rem;
    display: grid;
    place-items: center;
    margin: 1rem auto;
    overflow: hidden;
    background: #edeaf4;
}

.profile-crop-stage img {
    width: auto;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    display: block;
}

.profile-crop-stage-full {
    height: auto;
    overflow: visible;
}

.profile-crop-stage-full img {
    width: min(100%, 20rem);
    max-height: none;
}

.profile-crop-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(84, 53, 143, 0.22);
    pointer-events: none;
}

.profile-crop-box {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 999px rgba(84, 53, 143, 0.38);
    cursor: move;
    touch-action: none;
}

.profile-cropper button {
    border: 1px solid #4d347e;
    border-radius: 3px;
    padding: 0.55rem 1.3rem;
    color: #ffffff;
    font-weight: 800;
    background: linear-gradient(#946bd5, #5b339b);
    cursor: pointer;
}

.profile-relation-actions {
    width: 100%;
    display: grid;
    gap: 0.45rem;
}

.profile-relation-actions form {
    margin: 0;
}

.profile-relation-actions button,
.profile-relation-actions a,
.profile-relation-actions .relation-label {
    width: 100%;
    min-height: 2rem;
    display: grid;
    place-items: center;
    text-align: center;
}

.block-friend-button {
    border: 1px solid #873b55;
    border-radius: 4px;
    padding: 0.45rem 0.75rem;
    color: #ffffff;
    font-weight: 800;
    background: linear-gradient(#d46983, #a33f5d);
    cursor: pointer;
}

.profile-info {
    display: grid;
    grid-template-columns: 4.6rem 1fr;
    gap: 0.25rem 0.45rem;
    margin: 0;
    padding: 0.7rem;
    font-size: 0.74rem;
}

.profile-info dt {
    color: #575260;
    font-weight: 800;
}

.profile-info dd {
    margin: 0;
    color: #6d6875;
}

.chat-window-listening {
    padding: 0.3rem 0.45rem 0;
}

.chat-listening-pill {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    width: 100%;
    border: 1px solid #ead16f;
    border-radius: 3px;
    padding: 0.22rem 0.35rem;
    color: #5f4a00;
    background: #fff3a8;
    font-size: 0.68rem;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}

.global-chat.chat-style-msn {
    width: 19.3rem;
    padding: 0;
    overflow: hidden;
    border: 2px solid #0158c8;
    border-radius: 7px 7px 0 0;
    color: #0b1424;
    font-family: Tahoma, Arial, sans-serif;
    background:
        linear-gradient(90deg, #075ed1 0 2.65rem, #ffffff 2.65rem),
        #ffffff;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.45),
        0 0.6rem 1.2rem rgba(8, 44, 107, 0.24);
}

.global-chat.chat-style-msn header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.35rem;
    align-items: center;
    min-height: 2rem;
    padding: 0.2rem 0.35rem;
    color: #ffffff;
    background: linear-gradient(#2c8dff, #0052ca 54%, #003f9f);
    border-bottom: 1px solid #003d9b;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.38);
}

.global-chat.chat-style-msn header::before {
    content: none;
    display: none;
}

.global-chat.chat-style-msn header strong {
    font-size: 1rem;
}

.global-chat.chat-style-msn .chat-panel-toggle {
    width: 1.35rem;
    height: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 3px;
    color: #ffffff;
    background: linear-gradient(#7cb8ff, #1d6fd9);
}

.global-chat.chat-style-msn::before {
    content: none;
    display: none;
}

.global-chat.chat-style-msn::after {
    content: "";
    display: block;
    margin-left: 2.65rem;
    height: 2rem;
    padding: 0;
    color: #111;
    font-size: 0.95rem;
    font-weight: 800;
    background:
        linear-gradient(90deg, #4da3ff 0 18%, #26ba39 18% 40%, #ffe55a 40% 60%, #f05b37 60% 72%, #4b80ff 72% 100%) left bottom / 100% 0.18rem no-repeat,
        #ffffff;
    border-bottom: 1px solid #a8c2d5;
}

.global-chat.chat-style-msn .chat-status-control {
    position: relative;
    left: auto;
    top: auto;
    z-index: 4;
}

.global-chat.chat-style-msn .chat-status-current {
    width: 1.45rem;
    height: 1.45rem;
    border: 0;
    background: transparent;
}

.global-chat.chat-style-msn .chat-status-current .chat-status-dot {
    width: 1.05rem;
    height: 1.05rem;
    box-shadow: 0 0 0 0.18rem rgba(255, 255, 255, 0.55);
}

.global-chat.chat-style-msn .chat-recent,
.global-chat.chat-style-msn input[data-chat-search],
.global-chat.chat-style-msn h3,
.global-chat.chat-style-msn .chat-friends {
    margin-left: 2.65rem;
}

.global-chat.chat-style-msn .chat-recent {
    display: none;
}

.global-chat.chat-style-msn input[data-chat-search] {
    width: calc(100% - 3.2rem);
    height: 1.35rem;
    margin: -1.68rem 2.94rem 0.28rem;
    position: relative;
    z-index: 2;
    margin-top: 0.3rem;
    border: 1px solid #7a97b9;
    border-radius: 0;
    font-family: Tahoma, Arial, sans-serif;
}

.global-chat.chat-style-msn h3 {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0.22rem 0.45rem;
    color: #ffffff;
    font-size: 0.9rem;
    background: linear-gradient(#8bd6ff, #216fcf);
}

.global-chat.chat-style-msn .chat-friends {
    max-height: 22rem;
    overflow: auto;
    padding: 0.35rem 0.3rem 0.5rem;
    background:
        radial-gradient(circle at 82% 72%, rgba(97, 151, 205, 0.12) 0 4rem, transparent 4.1rem),
        #ffffff;
}

.global-chat.chat-style-msn .chat-friend {
    display: grid;
    grid-template-columns: 0.8rem 1.15rem 1fr;
    gap: 0.28rem;
    min-height: 1.45rem;
    padding: 0.12rem 0.2rem;
    border: 0;
    border-radius: 0;
    color: #111;
    font-size: 0.78rem;
    font-weight: 400;
    background: transparent;
}

.global-chat.chat-style-msn .chat-friend:hover {
    color: #ffffff;
    background: #2d74d5;
}

.global-chat.chat-style-msn .chat-avatar-wrap,
.global-chat.chat-style-msn .chat-avatar-wrap img,
.global-chat.chat-style-msn .chat-avatar-fallback {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 50%;
}

.global-chat.chat-style-msn .chat-status-dot {
    align-self: center;
}

.chat-dock.chat-style-msn {
    gap: 0.35rem;
}

.chat-window.chat-style-msn {
    width: 24rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto auto;
    overflow: hidden;
    border: 2px solid #0056d6;
    border-radius: 7px 7px 0 0;
    color: #111;
    font-family: Tahoma, Arial, sans-serif;
    background: #79a0e5;
    box-shadow: 0 0.75rem 1.4rem rgba(5, 42, 108, 0.26);
}

.chat-window.chat-style-msn header {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr auto;
    min-height: 2rem;
    padding: 0.22rem 0.35rem;
    color: #ffffff;
    background: linear-gradient(#2b8dff, #045ccf 54%, #0042a8);
    border-bottom: 1px solid #003d9b;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.36);
}

.chat-window.chat-style-msn header button {
    min-width: 1.35rem;
    height: 1.25rem;
    margin-left: 0.12rem;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 3px;
    color: #ffffff;
    background: linear-gradient(#7db8ff, #1c6dd7);
}

.chat-window.chat-style-msn header [data-chat-close] {
    background: linear-gradient(#ffb082, #e2401d);
}

.chat-window.chat-style-msn .chat-msn-menu {
    grid-column: 1 / -1;
    display: flex;
    gap: 1rem;
    padding: 0.18rem 0.35rem;
    color: #1d1d1d;
    font-size: 0.78rem;
    background: linear-gradient(#fffef4, #ddd8bd);
    border-bottom: 1px solid #8f9eb1;
}

.chat-window.chat-style-msn .chat-msn-to {
    grid-column: 1 / -1;
    padding: 0.38rem 0.45rem;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 800;
    background: linear-gradient(#0d62c8, #034caa);
}

.chat-window.chat-style-msn .chat-window-listening {
    grid-column: 1 / 2;
    padding: 0.25rem 0.35rem;
    background: #e8f1ff;
}

.chat-window.chat-style-msn .chat-window-messages {
    grid-column: 1 / 2;
    height: 15rem;
    margin: 0.35rem 0 0 0.35rem;
    padding: 0.45rem;
    border: 1px solid #688ec1;
    color: #111;
    background: #ffffff;
}

.chat-window.chat-style-msn .chat-line {
    max-width: 100%;
    display: grid;
    grid-template-columns: 2.2rem minmax(0, 1fr);
    gap: 0.35rem;
    align-items: start;
    border: 0;
    border-radius: 0;
    padding: 0.08rem 0;
    color: #222;
    background: transparent;
    box-shadow: none;
}

.chat-window.chat-style-msn .chat-line.mine,
.chat-window.chat-style-msn .chat-line.theirs {
    justify-self: stretch;
}

.chat-window.chat-style-msn .chat-line span {
    display: block;
    grid-column: 2;
    margin-left: 0;
    font-size: 0.9rem;
}

.chat-window.chat-style-msn .chat-speaker {
    display: block;
    grid-column: 2;
    margin: 0.05rem 0;
    color: #777;
    font-size: 0.9rem;
    font-weight: 400;
}

.chat-window.chat-style-msn .chat-line time {
    grid-column: 1;
    grid-row: 1 / span 2;
    display: block;
    width: auto;
    margin: 0.15rem 0 0 0;
    color: #666;
    font-size: 0.68rem;
    text-align: left;
}

.chat-window.chat-style-msn .chat-msn-actions {
    display: none;
}

.chat-window.chat-style-msn .chat-msn-actions::after {
    content: none;
}

.chat-window.chat-style-msn form {
    grid-column: 1 / 2;
    display: grid;
    grid-template-columns: 1fr 4rem;
    gap: 0.45rem;
    padding: 0.45rem;
    border: 0;
    background: #ffffff;
}

.chat-window.chat-style-msn form input {
    min-height: 2.2rem;
    border: 1px solid #809ec5;
    font-family: Tahoma, Arial, sans-serif;
}

.chat-window.chat-style-msn form button {
    border: 1px solid #c8c8c8;
    color: #777;
    background: linear-gradient(#ffffff, #e5e5df);
}

.chat-window.chat-style-msn .chat-msn-footer {
    grid-column: 1 / -1;
    display: block;
    padding: 0.22rem 0.35rem;
    color: #1a1a1a;
    font-size: 0.74rem;
    background: linear-gradient(#fffef4, #ddd8bd);
    border-top: 1px solid #8f9eb1;
}

.chat-window.chat-style-msn.minimized {
    display: block;
    width: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.global-chat.chat-style-windows-live {
    width: 18.7rem;
    padding: 0.28rem;
    overflow: hidden;
    border: 1px solid #5b3e89;
    border-radius: 5px 5px 0 0;
    color: #332545;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    background:
        linear-gradient(90deg, rgba(117, 77, 174, 0.95) 0 0.38rem, transparent 0.38rem),
        linear-gradient(#e8ddfa, #c9b2ea 2.2rem, #ffffff 2.2rem);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        0 0.65rem 1.4rem rgba(45, 90, 55, 0.25);
}

.global-chat.chat-style-windows-live header {
    min-height: 1.65rem;
    margin: 0 -0.28rem;
    padding: 0.1rem 0.25rem 0.18rem;
    color: #ffffff;
    background: linear-gradient(#b89ced, #7a52bd);
    border: 1px solid rgba(78, 48, 129, 0.85);
    border-radius: 4px 4px 0 0;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.global-chat.chat-style-windows-live header strong {
    justify-self: center;
    font-size: 0.95rem;
}

.global-chat.chat-style-windows-live .chat-panel-toggle {
    width: 1.35rem;
    height: 1.25rem;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 2px;
    color: #3b245f;
    background: linear-gradient(#f5f0ff, #c7afe9);
}

.global-chat.chat-style-windows-live .chat-status-control {
    z-index: 3;
}

.global-chat.chat-style-windows-live .chat-status-current {
    width: 1.55rem;
    height: 1.55rem;
    border: 0;
    background: transparent;
}

.global-chat.chat-style-windows-live .chat-status-current .chat-status-dot {
    width: 1.1rem;
    height: 1.1rem;
    box-shadow: 0 0 0 0.18rem rgba(255, 255, 255, 0.65);
}

.global-chat.chat-style-windows-live::before {
    content: none;
    display: none;
}

.global-chat.chat-style-windows-live::after {
    content: none;
    display: none;
}

.global-chat.chat-style-windows-live .chat-recent {
    display: none;
}

.global-chat.chat-style-windows-live .chat-live-profile {
    display: grid;
    grid-template-columns: 3.2rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: start;
    min-height: 4.1rem;
    margin: -0.28rem -0.28rem 0;
    padding: 0.45rem 0.7rem 0.55rem 0.75rem;
    color: #2f4f5f;
    background:
        radial-gradient(circle at 50% 42%, #fbff9f 0 0.12rem, transparent 0.14rem),
        radial-gradient(circle at 35% 70%, #bffffa 0 0.1rem, transparent 0.12rem),
        linear-gradient(120deg, #eadfff, #ffffff 42%, #eee6ff 70%, #e2d1fa);
    border: 1px solid #a486ce;
    border-bottom: 0;
    box-shadow: inset 0 0 2.2rem rgba(126, 89, 184, 0.18);
    pointer-events: none;
}

.global-chat.chat-style-windows-live .chat-live-profile-photo {
    width: 3.05rem;
    height: 3.05rem;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid #94a9c3;
    background: linear-gradient(#101b1d, #546f78);
    box-shadow: 0 0 0 0.12rem rgba(255, 255, 255, 0.8);
}

.global-chat.chat-style-windows-live .chat-live-profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.global-chat.chat-style-windows-live .chat-live-profile-photo span {
    color: #ffffff;
    font-weight: 800;
}

.global-chat.chat-style-windows-live .chat-live-profile-text {
    min-width: 0;
    width: 100%;
    padding-top: 0.35rem;
}

.global-chat.chat-style-windows-live .chat-live-profile-text strong,
.global-chat.chat-style-windows-live .chat-live-profile-text small {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.global-chat.chat-style-windows-live .chat-live-profile-text strong {
    font-size: 0.95rem;
    font-weight: 400;
}

.global-chat.chat-style-windows-live .chat-live-profile-text small {
    margin-top: 0.18rem;
    font-size: 0.78rem;
}

.global-chat.chat-style-windows-live input[data-chat-search] {
    width: calc(100% - 1rem);
    height: 1.55rem;
    margin: 0.42rem 0.5rem 0.25rem;
    border: 1px solid #b9cfd9;
    border-radius: 0;
    color: #5c6670;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    background:
        linear-gradient(90deg, transparent calc(100% - 1.7rem), #eff6f7 calc(100% - 1.7rem)),
        #ffffff;
}

.global-chat.chat-style-windows-live h3 {
    margin: 0.15rem 0.35rem 0;
    padding: 0.25rem 0.55rem;
    color: #4b3470;
    font-size: 0.85rem;
    background: linear-gradient(#ffffff, #efe7fb);
    border-top: 1px solid #d6c6ef;
    border-bottom: 1px solid #ded1ef;
}

.global-chat.chat-style-windows-live .chat-friends {
    max-height: 23rem;
    overflow: auto;
    padding: 0.3rem 0.35rem 0.55rem 0.65rem;
    background:
        radial-gradient(circle at 86% 75%, rgba(117, 77, 174, 0.12) 0 4rem, transparent 4.15rem),
        #ffffff;
}

.global-chat.chat-style-windows-live .chat-friend {
    display: grid;
    grid-template-columns: 0.7rem 1.15rem 1fr;
    gap: 0.25rem;
    min-height: 1.35rem;
    width: calc(100% - 0.45rem);
    margin-left: 0.45rem;
    padding: 0.1rem 0.2rem;
    border: 0;
    border-radius: 0;
    color: #222;
    font-size: 0.78rem;
}

.global-chat.chat-style-windows-live .chat-friend:hover {
    color: #ffffff;
    background: #7f54c0;
}

.global-chat.chat-style-windows-live .chat-avatar-wrap,
.global-chat.chat-style-windows-live .chat-avatar-wrap img,
.global-chat.chat-style-windows-live .chat-avatar-fallback {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}

.chat-window.chat-style-windows-live {
    width: 29rem;
    overflow: hidden;
    border: 1px solid #5b3e89;
    border-radius: 5px 5px 0 0;
    color: #35453d;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    background: #ffffff;
    box-shadow: 0 0.7rem 1.5rem rgba(77, 47, 128, 0.24);
}

.chat-window.chat-style-windows-live header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 1.65rem;
    padding: 0.1rem 0.3rem;
    color: #2f1f4b;
    background: linear-gradient(#eadfff, #8d65ca);
    border-bottom: 1px solid #5b3e89;
}

.chat-window.chat-style-windows-live header strong {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-window.chat-style-windows-live header > div {
    display: flex;
    align-items: center;
    gap: 0.14rem;
    flex: 0 0 auto;
}

.chat-window.chat-style-windows-live header button {
    width: 1.25rem;
    min-width: 1.25rem;
    height: 1.15rem;
    display: grid;
    place-items: center;
    margin-left: 0;
    padding: 0 0.25rem;
    border: 1px solid #7652aa;
    border-radius: 2px;
    color: #321f50;
    font-size: 0.68rem;
    line-height: 1;
    background: linear-gradient(#fbf8ff, #c6afe6);
}

.chat-window.chat-style-windows-live header .chat-effect-button {
    width: 3.25rem;
    min-width: 2.25rem;
}

.chat-window.chat-style-windows-live .chat-msn-menu {
    display: none;
    gap: 1.1rem;
    padding: 0.35rem 0.55rem;
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 600;
    background: linear-gradient(90deg, #52aee0, #75c7e8 52%, #b6ebfa);
    border-bottom: 1px solid #6eb3c7;
}

.chat-window.chat-style-windows-live .chat-msn-to {
    display: grid;
    grid-template-columns: 5.3rem 1fr;
    gap: 0.75rem;
    align-items: start;
    max-height: 3.1rem;
    overflow: visible;
    padding: 0.35rem 1rem 0;
    color: #3b5560;
    font-size: 1.05rem;
    background: linear-gradient(120deg, #fbf9ff, #ebe0ff 36%, #ffffff 72%);
    position: relative;
    z-index: 2;
}

.chat-window.chat-style-windows-live .chat-msn-to .chat-avatar-wrap,
.chat-window.chat-style-windows-live .chat-msn-to .chat-avatar-wrap img,
.chat-window.chat-style-windows-live .chat-msn-to .chat-avatar-fallback {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 8px;
}

.chat-window.chat-style-windows-live .chat-msn-to .chat-avatar-wrap {
    padding: 0.28rem;
    border: 1px solid #9d7ccf;
    background: #f2eaff;
    box-shadow: 0 0 0 0.16rem rgba(185, 160, 221, 0.55);
}

.chat-window.chat-style-windows-live .chat-msn-to small {
    color: #60727b;
    font-size: 0.72rem;
}

.chat-window.chat-style-windows-live .chat-live-recipient-status.busy {
    color: #c33434;
    font-weight: 700;
}

.chat-window.chat-style-windows-live .chat-live-recipient-status.offline {
    color: #7b7484;
}

.chat-window.chat-style-windows-live .chat-window-listening {
    padding: 0.25rem 1rem;
    background: #ffffff;
}

.chat-window.chat-style-windows-live .chat-window-messages {
    height: 10.5rem;
    padding: 1.55rem 1.1rem 0.65rem 6.1rem;
    border: 0;
    color: #283138;
    background: #ffffff;
}

.chat-window.chat-style-windows-live .chat-live-self-avatar {
    width: 4.2rem;
    height: 4.2rem;
    margin: 0 0 1.5rem 1rem;
    padding: 0.28rem;
    border: 1px solid #9d7ccf;
    border-radius: 8px;
    background: #f2eaff;
    box-shadow: 0 0 0 0.16rem rgba(185, 160, 221, 0.55);
}

.chat-window.chat-style-windows-live .chat-live-self-avatar .chat-avatar-wrap,
.chat-window.chat-style-windows-live .chat-live-self-avatar .chat-avatar-wrap img,
.chat-window.chat-style-windows-live .chat-live-self-avatar .chat-avatar-fallback {
    width: 100%;
    height: 100%;
    border-radius: 6px;
}

.chat-window.chat-style-windows-live .chat-line {
    max-width: 100%;
    display: block;
    padding: 0.1rem 0;
    border: 0;
    color: #2f353b;
    background: transparent;
    box-shadow: none;
}

.chat-window.chat-style-windows-live .chat-line.mine,
.chat-window.chat-style-windows-live .chat-line.theirs {
    justify-self: stretch;
}

.chat-window.chat-style-windows-live .chat-speaker {
    display: block;
    color: #6f6f6f;
    font-size: 0.82rem;
    font-weight: 400;
}

.chat-window.chat-style-windows-live .chat-line span {
    display: block;
    padding-left: 0.9rem;
    font-size: 0.86rem;
}

.chat-window.chat-style-windows-live .chat-line time {
    display: none;
}

.chat-window.chat-style-windows-live form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.45rem;
    margin: -4.85rem 1rem 0.6rem 6rem;
    padding: 0.55rem;
    border: 1px solid #d0d7db;
    background:
        linear-gradient(135deg, transparent 0 1rem, #ffffff 1.02rem),
        #ffffff;
}

.chat-window.chat-style-windows-live form input {
    min-height: 2.2rem;
    border: 0;
    color: #2f353b;
    font-family: "Segoe UI", Tahoma, Arial, sans-serif;
    outline: none;
}

.chat-window.chat-style-windows-live form button {
    border: 1px solid #b8c5ca;
    border-radius: 2px;
    color: #617077;
    background: linear-gradient(#ffffff, #eaf0f2);
}

.chat-window.chat-style-windows-live .chat-msn-footer {
    display: none;
    padding: 0.3rem 0.55rem;
    color: #37463c;
    font-size: 0.72rem;
    font-weight: 700;
    background: linear-gradient(#f7f5e8, #e1dcc0);
    border-top: 1px solid #b9c2a3;
}

.chat-window.chat-style-windows-live.minimized {
    width: auto;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.chat-window.chat-style-windows-live.minimized .chat-mini-avatar {
    width: auto;
    min-width: 0;
    height: auto;
    display: grid;
    padding: 0.2rem;
    border: 1px solid #9d7ccf;
    border-radius: 3px;
    background: #ffffff;
}

.chat-window.chat-style-windows-live.minimized .chat-avatar-wrap,
.chat-window.chat-style-windows-live.minimized .chat-avatar-wrap img,
.chat-window.chat-style-windows-live.minimized .chat-avatar-fallback {
    width: 1.65rem;
    height: 1.65rem;
    border-radius: 2px;
}

.global-chat.chat-style-yahoo {
    border-color: #8a59c7;
}

.global-chat.chat-style-yahoo header {
    background: linear-gradient(#8f62d1, #54248b);
    color: #ffffff;
}

.chat-listening-pill strong {
    flex: 0 0 auto;
}

.chat-listening-title {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.chat-friend .chat-listening-pill {
    margin-top: 0.15rem;
    font-size: 0.62rem;
}

.chat-window-listening .chat-listening-title {
    display: inline-block;
    min-width: max-content;
    animation: chat-listening-marquee 18s ease-in-out infinite;
}

@keyframes chat-listening-marquee {
    0%, 16.6% {
        transform: translateX(0);
    }
    50%, 66.6% {
        transform: translateX(calc(-100% + 10rem));
    }
    100% {
        transform: translateX(0);
    }
}

.profile-networks dd {
    display: grid;
    gap: 0.4rem;
}

.profile-networks dd span,
.profile-networks dd a {
    line-height: 1.25;
}

.profile-info.profile-networks {
    display: block;
    padding: 0.75rem;
    background: linear-gradient(180deg, #ffffff 0%, #fbf9ff 100%);
}

.profile-info.profile-networks dt {
    width: fit-content;
    margin: 0.2rem 0 0.45rem;
    border-radius: 3px;
    padding: 0.18rem 0.45rem;
    color: #4e337f;
    background: #eee8fb;
    overflow-wrap: anywhere;
}

.profile-info.profile-networks dd {
    min-width: 0;
    display: grid;
    gap: 0.42rem;
    padding: 0 0 0.8rem;
    margin-bottom: 0.8rem;
    border-bottom: 1px solid #e7ddf6;
}

.profile-info.profile-networks dd:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.profile-info.profile-networks dd span,
.profile-info.profile-networks dd a {
    position: relative;
    display: block;
    border-left: 3px solid #8b62cd;
    border-radius: 3px;
    padding: 0.34rem 0.5rem 0.34rem 0.9rem;
    overflow-wrap: anywhere;
    color: #554765;
    line-height: 1.3;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(71, 45, 121, 0.09);
}

.profile-info.profile-networks dd a {
    text-decoration: none;
}

.profile-info.profile-networks dd a:hover {
    color: #4e337f;
    background: #f6f1ff;
}

.profile-info.profile-networks dd span::before,
.profile-info.profile-networks dd a::before {
    content: "";
    position: absolute;
    width: 0.32rem;
    height: 0.32rem;
    left: 0.32rem;
    top: 0.74rem;
    border-radius: 50%;
    background: #7045b7;
}

.profile-info-link {
    color: #5c3c9b;
    font-weight: 800;
}

.related-priority-note {
    margin: 0;
    padding: 0.7rem 0.9rem;
    color: #6d6875;
    font-size: 0.82rem;
    border-bottom: 1px solid #eceaf0;
}

.personal-space p,
.empty-note {
    margin: 0;
    padding: 0.75rem;
    color: #6d6875;
    font-size: 0.82rem;
    line-height: 1.4;
}

.profile-card > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.profile-card > header a {
    color: #5c3c9b;
    font-size: 0.72rem;
    font-weight: 800;
}

.profile-photo-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.55rem;
    padding: 0.75rem;
}

.profile-photo-thumb {
    aspect-ratio: 1;
    display: block;
    overflow: hidden;
    background: #eceaf0;
}

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

.wall-form {
    display: grid;
    gap: 0.45rem;
    padding: 0.7rem;
    border-bottom: 1px solid #eceaf0;
}

.wall-form textarea {
    min-height: 4.5rem;
    resize: vertical;
    border: 1px solid #d8d5df;
    border-radius: 2px;
    padding: 0.55rem;
    color: #40394d;
    font: inherit;
}

.wall-form button {
    justify-self: end;
    border: 1px solid #4c347d;
    border-radius: 2px;
    padding: 0.35rem 0.8rem;
    color: #ffffff;
    font-weight: 800;
    background: #7045b7;
}

.wall-post {
    display: grid;
    grid-template-columns: 2.35rem 1fr;
    gap: 0.65rem;
    padding: 0.75rem;
    border-bottom: 1px solid #eceaf0;
}

.wall-post p {
    margin: 0;
    color: #3d3847;
    font-size: 0.82rem;
    line-height: 1.35;
}

.wall-post p a,
.wall-post p strong,
.wall-post .photo-comment-box a,
.wall-post .photo-comment-box strong {
    color: #2f2550;
}

.wall-post p a:hover,
.wall-post .photo-comment-box a:hover {
    color: #5c3c9b;
}

.wall-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 0.35rem;
}

.wall-actions a,
.wall-actions button {
    border: 0;
    padding: 0;
    color: #5c3c9b;
    font-size: 0.72rem;
    font-weight: 800;
    background: transparent;
    cursor: pointer;
}

.friends-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
    padding: 0.7rem;
}

.friend-tile {
    display: grid;
    gap: 0.28rem;
    color: #5c3c9b;
    font-size: 0.72rem;
    font-weight: 800;
}

.friend-tile:hover {
    color: #4d347e;
    text-decoration: none;
}

.friend-tile img,
.friend-tile span {
    width: 100%;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    object-fit: cover;
    color: #ffffff;
    font-size: 1.4rem;
    font-weight: 800;
    background: linear-gradient(135deg, #9b78d6, #54358f);
}

.friend-tile strong {
    line-height: 1.15;
}

.settings-shell {
    width: min(100%, 70rem);
    display: grid;
    grid-template-columns: 18rem minmax(28rem, 1fr);
    gap: 1.8rem;
    margin: 1rem auto;
    padding: 0 0.6rem;
}

.settings-menu {
    display: grid;
    align-content: start;
    background: #f4f4f6;
    border-right: 1px solid #e0dde6;
}

.settings-menu a {
    padding: 0.95rem 1rem;
    color: #65718c;
    font-weight: 800;
    border-bottom: 1px solid #e3e1e8;
}

.settings-menu a:hover,
.settings-menu .active {
    color: #40394d;
    text-decoration: none;
    background: #ffffff;
}

.settings-panel {
    color: #40394d;
    background: #ffffff;
    border: 1px solid #dedde4;
    padding: 1rem 1.4rem 1.4rem;
}

.settings-panel h1 {
    margin: 0 0 1.2rem;
    padding-bottom: 0.6rem;
    color: #40394d;
    font-size: 1.45rem;
    font-weight: 500;
    border-bottom: 1px solid #e3e1e8;
}

.settings-form {
    display: grid;
    gap: 1.4rem;
}

.settings-form fieldset {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0 0 1.35rem;
    border: 0;
    border-bottom: 1px solid #e3e1e8;
}

.settings-form legend {
    margin: 0 0 0.65rem;
    color: #9a94a2;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
}

.settings-form label {
    display: grid;
    grid-template-columns: 11rem minmax(12rem, 22rem);
    gap: 0.8rem;
    align-items: center;
}

.settings-form label > span {
    color: #514a5e;
    font-weight: 800;
    text-align: right;
}

.settings-form input,
.settings-form select {
    width: 100%;
    min-height: 2.25rem;
    border: 1px solid #d6d3dc;
    border-radius: 2px;
    padding: 0 0.55rem;
    color: #40394d;
    font: inherit;
    background: linear-gradient(#ffffff, #f8f8fa);
    box-shadow: inset 0 1px 2px rgba(40, 28, 68, 0.12);
}

.settings-form .short-field {
    grid-template-columns: 11rem 9rem;
}

.settings-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.8rem;
}

.settings-actions a {
    color: #6d6875;
    font-weight: 800;
}

.settings-actions button {
    border: 1px solid #4c347d;
    border-radius: 3px;
    padding: 0.55rem 1rem;
    color: #ffffff;
    font-weight: 800;
    background: #7045b7;
}

.account-preferences {
    display: grid;
    gap: 0;
}

.account-preference-block {
    padding: 1.15rem 0 1.45rem;
    border-bottom: 1px solid #e3e1e8;
}

.account-preference-block:first-child {
    padding-top: 0;
}

.account-preference-block h2 {
    margin: 0 0 1.1rem;
    color: #9a94a2;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
}

.account-preference-form {
    width: min(100%, 34rem);
    margin: 0 auto;
    gap: 0.7rem;
}

.account-preference-form label {
    grid-template-columns: 11rem minmax(13rem, 1fr);
}

.account-preference-form label strong {
    color: #40394d;
    font-size: 0.82rem;
}

.account-password-hint {
    width: min(100%, 22rem);
    margin: -0.35rem 0 0.1rem 11.8rem;
    color: #6e5c99;
    font-size: 0.72rem;
}

.account-preference-actions {
    width: min(100%, 22rem);
    justify-content: flex-start;
    margin-left: 11.8rem;
}

.account-deactivate-block {
    min-height: 8rem;
    display: grid;
    justify-items: center;
    align-content: center;
    border-bottom: 0;
}

.account-deactivate-button {
    border: 1px solid #a64666;
    border-radius: 3px;
    padding: 0.55rem 0.9rem;
    color: #6d2540;
    font-weight: 800;
    background: linear-gradient(#ffffff, #f1eaf0);
    cursor: pointer;
}

.account-deactivate-button:hover {
    color: #ffffff;
    background: linear-gradient(#b34c78, #8b2e58);
}

.account-deactivate-overlay {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(28, 18, 45, 0.52);
}

.account-deactivate-modal {
    width: min(100%, 28rem);
    color: #40394d;
    background: #ffffff;
    border: 1px solid #4d347e;
    box-shadow: 0 1rem 2.4rem rgba(31, 18, 55, 0.32);
}

.account-deactivate-modal header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0.9rem;
    color: #ffffff;
    background: linear-gradient(#8d65ca, #60399f);
}

.account-deactivate-modal h2 {
    margin: 0;
    font-size: 1rem;
}

.account-deactivate-modal header button {
    border: 0;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 800;
    background: transparent;
    cursor: pointer;
}

.account-deactivate-modal p {
    margin: 0;
    padding: 1rem 1rem 0.25rem;
    line-height: 1.45;
}

.account-deactivate-modal > div {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 1rem;
}

.account-deactivate-modal > div button {
    border: 1px solid #4d347e;
    border-radius: 3px;
    padding: 0.55rem 0.8rem;
    color: #ffffff;
    font-weight: 800;
    background: linear-gradient(#936bd2, #7045b7);
    cursor: pointer;
}

.account-deactivate-modal > div button[data-deactivate-confirm] {
    border-color: #8f2f55;
    background: linear-gradient(#c55a84, #8f2f55);
}

.settings-requests {
    display: grid;
    gap: 0.75rem;
}

.settings-requests .request-item {
    border: 1px solid #ece8f2;
    background: #fbfafc;
}

.privacy-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14rem;
    gap: 1.4rem;
}

.privacy-main {
    display: grid;
    gap: 1.2rem;
}

.privacy-form fieldset {
    border: 2px solid #d7bdf2;
    border-radius: 4px;
    padding: 1rem;
    background: #fbf8ff;
}

.privacy-block-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.privacy-list {
    display: grid;
    align-content: start;
    gap: 0.55rem;
}

.privacy-list h2,
.privacy-help h2 {
    margin: 0;
    padding-bottom: 0.4rem;
    color: #40394d;
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 1px solid #e4dced;
}

.privacy-list article {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr) auto;
    gap: 0.55rem;
    align-items: center;
    padding: 0.55rem 0;
    border-bottom: 1px solid #ece8f2;
}

.privacy-list img,
.privacy-list span {
    width: 2.6rem;
    height: 2.6rem;
    display: grid;
    place-items: center;
    object-fit: cover;
    color: #ffffff;
    font-weight: 800;
    background: #7045b7;
}

.privacy-list a {
    min-width: 0;
    color: #5c3c9b;
    font-weight: 800;
}

.privacy-list form {
    margin: 0;
}

.privacy-list button {
    border: 0;
    padding: 0;
    color: #8b7d9f;
    font-weight: 800;
    background: transparent;
    cursor: pointer;
}

.privacy-help {
    color: #8b8493;
    font-size: 0.82rem;
    line-height: 1.45;
}

.networks-settings fieldset {
    gap: 1rem;
}

.network-add-form {
    display: grid;
    gap: 0.65rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid #ebe8f0;
}

.network-add-form:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.settings-form label > .network-name-search {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.25rem;
    gap: 0.35rem;
    text-align: left;
}

.settings-form label > .relationship-status-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.25rem;
    gap: 0.35rem;
}

.relationship-ring-button {
    position: relative;
    min-height: 2.25rem;
    display: grid;
    place-items: center;
    border: 1px solid #c7c1d2;
    border-radius: 3px;
    background: linear-gradient(#ffffff, #eee8fb);
}

.relationship-ring-button::before {
    content: "";
    width: 0.9rem;
    height: 0.9rem;
    border: 3px solid #7f54c0;
    border-radius: 50%;
    box-shadow: 0 -0.34rem 0 -0.18rem #d8c2ff;
}

.relationship-ring-button[hidden] {
    display: none;
}

.relationship-partner-value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.relationship-partner-value form {
    margin: 0;
}

.relationship-broken-ring-button {
    position: relative;
    width: 2.25rem;
    min-height: 2.25rem;
    display: grid;
    place-items: center;
    border: 1px solid #4d347e;
    border-radius: 3px;
    background: linear-gradient(#936bd2, #7045b7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
    cursor: pointer;
}

.relationship-broken-ring-button::before {
    content: "";
    width: 1rem;
    height: 1rem;
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-shadow: inset 0 0 0 0.08rem rgba(112, 69, 183, 0.35);
}

.relationship-broken-ring-button::after {
    content: "";
    position: absolute;
    width: 1.35rem;
    height: 1.35rem;
    background:
        linear-gradient(45deg, transparent 0 43%, #ffd6e8 43% 53%, transparent 53% 100%),
        linear-gradient(135deg, transparent 0 38%, #7045b7 38% 48%, transparent 48% 100%);
    transform: rotate(-6deg);
    pointer-events: none;
}

.relationship-broken-ring-button:hover {
    background: linear-gradient(#a47ee0, #7a50bf);
}

.relationship-send-button {
    border: 1px solid #4c347d;
    border-radius: 3px;
    padding: 0.45rem 0.7rem;
    color: #ffffff;
    font-weight: 800;
    background: linear-gradient(#7f54c0, #5f3a9e);
    cursor: pointer;
}

.relationship-filter {
    padding: 0.75rem 0.9rem;
    border-bottom: 1px solid #eceaf0;
    background: #fbfafc;
}

.relationship-filter input {
    width: 100%;
    min-height: 2.25rem;
    border: 1px solid #d6d3dc;
    border-radius: 3px;
    padding: 0 0.65rem;
    color: #40394d;
    font: inherit;
    background: #ffffff;
}

.network-name-search input {
    width: 100%;
}

.network-name-search button {
    position: relative;
    min-height: 2.25rem;
    border: 1px solid #c7c1d2;
    border-radius: 3px;
    background: linear-gradient(#ffffff, #ece8f3);
    cursor: pointer;
}

.network-name-search button::before {
    content: "";
    position: absolute;
    width: 0.72rem;
    height: 0.72rem;
    left: 0.62rem;
    top: 0.55rem;
    border: 2px solid #6a4aa0;
    border-radius: 50%;
}

.network-name-search button::after {
    content: "";
    position: absolute;
    width: 0.5rem;
    height: 2px;
    left: 1.28rem;
    top: 1.35rem;
    background: #6a4aa0;
    transform: rotate(45deg);
    transform-origin: left center;
}

.network-duration-row {
    display: grid;
    grid-template-columns: 11rem 5.8rem auto 8.5rem auto;
    gap: 0.55rem;
    align-items: center;
}

.network-duration-row > span:first-child {
    color: #514a5e;
    font-weight: 800;
    text-align: right;
}

.network-duration-row select {
    min-height: 2.25rem;
}

.network-duration-row button,
.network-current-list button {
    border: 1px solid #4c347d;
    border-radius: 3px;
    padding: 0.5rem 0.9rem;
    color: #ffffff;
    font-weight: 800;
    background: linear-gradient(#7f54c0, #5f3a9e);
    cursor: pointer;
}

.network-duration-row-short {
    grid-template-columns: 11rem auto;
}

.network-current-list {
    display: grid;
    gap: 0.75rem;
}

.network-current-list h2,
.network-current-list h3 {
    margin: 0;
    color: #40394d;
}

.network-current-list h2 {
    font-size: 1rem;
}

.network-current-list h3 {
    font-size: 0.85rem;
}

.network-current-list article {
    display: grid;
    gap: 0.4rem;
    padding: 0.75rem;
    border: 1px solid #e2dfeb;
    background: #fbfafc;
}

.network-current-list ul {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding-left: 1rem;
    color: #6d6875;
    font-size: 0.82rem;
}

.network-current-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.45rem 0.7rem;
    align-items: start;
}

.network-current-item > span {
    grid-column: 1 / -1;
}

.network-item-actions {
    display: contents;
}

.network-item-actions form {
    margin: 0;
}

.network-item-actions details {
    position: relative;
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
}

.network-item-actions summary,
.network-delete-button {
    width: fit-content;
    min-height: 1.65rem;
    display: inline-grid;
    place-items: center;
    border: 1px solid #4c347d;
    border-radius: 3px;
    padding: 0.28rem 0.7rem;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    font-family: inherit;
    line-height: 1;
    background: linear-gradient(#7f54c0, #5f3a9e);
    cursor: pointer;
    list-style: none;
}

.network-item-actions summary::-webkit-details-marker {
    display: none;
}

.network-item-actions details[open] {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
}

.network-delete-button {
    color: #ffffff;
}

.network-item-actions > form {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
}

.network-edit-form {
    display: grid;
    gap: 0.55rem;
    margin-top: 0.5rem;
    padding: 0.7rem;
    border: 1px solid #e2daef;
    border-radius: 4px;
    background: #ffffff;
}

.network-edit-form label,
.network-edit-duration {
    display: grid;
    grid-template-columns: 5.8rem minmax(0, 1fr);
    gap: 0.45rem;
    align-items: center;
}

.network-edit-form label > span,
.network-edit-duration > span:first-child {
    color: #514a5e;
    font-weight: 800;
}

.network-edit-form input,
.network-edit-form select {
    min-height: 2rem;
}

.network-edit-duration {
    grid-template-columns: 5.8rem 5rem auto 7.5rem;
}

.network-edit-form > button {
    justify-self: start;
    border: 1px solid #4c347d;
    border-radius: 3px;
    padding: 0.4rem 0.8rem;
    color: #ffffff;
    font-weight: 800;
    background: linear-gradient(#7f54c0, #5f3a9e);
    cursor: pointer;
}

.search-page-form button,
.add-friend-button,
.cancel-request-button,
.block-friend-button,
.profile-header-card button,
.profile-action-button,
.request-actions button,
.upload-album-picker button,
.upload-preview button,
.upload-actions button,
.new-message-button,
.message-list-tools button,
.message-row button,
.message-detail-actions button,
.message-reply-form button,
.photo-title-form button,
.photo-reactions button,
.photo-tag-person button,
.photo-tag-form button,
.photo-comment-form button,
.photo-inline-form button,
.photo-comment-actions button,
.profile-cropper button,
.profile-relation-actions button,
.wall-form button,
.wall-actions button,
.settings-actions button,
.privacy-list button,
.relationship-send-button,
.network-duration-row button,
.network-current-list button,
.network-delete-button,
.network-edit-form > button,
.invite-mini button,
.status-box button,
.more-button {
    min-height: 2rem;
    border: 1px solid #4d347e;
    border-radius: 3px;
    padding: 0.45rem 0.78rem;
    color: #ffffff;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.1;
    text-align: center;
    text-decoration: none;
    background: linear-gradient(#936bd2, #7045b7);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 0 rgba(38, 20, 68, 0.14);
    cursor: pointer;
}

.search-page-form button:hover,
.add-friend-button:hover,
.cancel-request-button:hover,
.block-friend-button:hover,
.profile-header-card button:hover,
.profile-action-button:hover,
.request-actions button:hover,
.upload-album-picker button:hover,
.upload-preview button:hover,
.upload-actions button:hover,
.new-message-button:hover,
.message-list-tools button:hover,
.message-row button:hover,
.message-detail-actions button:hover,
.message-reply-form button:hover,
.photo-title-form button:hover,
.photo-reactions button:hover,
.photo-tag-person button:hover,
.photo-tag-form button:hover,
.photo-comment-form button:hover,
.photo-inline-form button:hover,
.photo-comment-actions button:hover,
.profile-cropper button:hover,
.profile-relation-actions button:hover,
.wall-form button:hover,
.wall-actions button:hover,
.settings-actions button:hover,
.privacy-list button:hover,
.relationship-send-button:hover,
.network-duration-row button:hover,
.network-current-list button:hover,
.network-delete-button:hover,
.network-edit-form > button:hover,
.invite-mini button:hover,
.status-box button:hover,
.more-button:hover {
    color: #ffffff;
    background: linear-gradient(#a47ee0, #7a50bf);
}

.search-page-form button:disabled,
.add-friend-button:disabled,
.cancel-request-button:disabled,
.block-friend-button:disabled,
.profile-header-card button:disabled,
.profile-action-button:disabled,
.request-actions button:disabled,
.upload-album-picker button:disabled,
.upload-preview button:disabled,
.upload-actions button:disabled,
.new-message-button:disabled,
.message-list-tools button:disabled,
.message-row button:disabled,
.message-detail-actions button:disabled,
.message-reply-form button:disabled,
.photo-title-form button:disabled,
.photo-reactions button:disabled,
.photo-tag-person button:disabled,
.photo-tag-form button:disabled,
.photo-comment-form button:disabled,
.photo-inline-form button:disabled,
.photo-comment-actions button:disabled,
.profile-cropper button:disabled,
.profile-relation-actions button:disabled,
.wall-form button:disabled,
.wall-actions button:disabled,
.settings-actions button:disabled,
.privacy-list button:disabled,
.relationship-send-button:disabled,
.network-duration-row button:disabled,
.network-current-list button:disabled,
.network-delete-button:disabled,
.network-edit-form > button:disabled,
.invite-mini button:disabled,
.status-box button:disabled,
.more-button:disabled {
    opacity: 0.62;
    cursor: default;
}

.profile-action-button {
    display: inline-grid;
    place-items: center;
}

.profile-header-actions .profile-action-button,
.profile-header-actions button {
    min-height: 1.8rem;
    padding: 0.4rem 0.7rem;
    white-space: nowrap;
}

.footer {
    min-height: 7.3rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    padding: 1rem 2rem;
    border-top: 1px solid rgba(31, 17, 61, 0.45);
    background: rgba(47, 27, 88, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.84rem;
}

.footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.footer strong {
    color: #ffffff;
}

@media (max-width: 900px) {
    .topbar {
        justify-content: center;
        min-height: auto;
        padding: 1rem;
    }

    .login-form {
        grid-template-columns: 1fr;
    }

    .login-options {
        gap: 1rem;
        justify-content: space-between;
    }

    .page-shell {
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 3rem 1.2rem;
    }

    .intro-panel {
        padding-right: 0;
        border-right: 0;
        box-shadow: none;
        transform: none;
    }

    .brand-lockup {
        width: 42%;
        min-width: 8.5rem;
        max-width: 12rem;
    }

    .footer {
        flex-direction: column;
        gap: 1rem;
    }

    .register-form label,
    .birth-row,
    .gender-row {
        grid-template-columns: 1fr;
        gap: 0.45rem;
    }

    .register-form label > span,
    .birth-row legend,
    .gender-row legend {
        text-align: left;
    }

    .birth-row {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .birth-row legend,
    .gender-row legend {
        grid-column: 1 / -1;
    }

    .gender-row {
        grid-template-columns: auto auto 1fr;
    }

    .app-bar-inner {
        grid-template-columns: 2rem 1fr;
    }

    .search-form,
    .photo-button,
    .account-nav {
        grid-column: 1 / -1;
    }

    .home-shell {
        grid-template-columns: 1fr;
    }

    .profile-shell {
        grid-template-columns: 1fr;
    }

    .profile-photo-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .albums-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .upload-album-list {
        grid-template-columns: 1fr;
    }

    .profile-photo-picker {
        grid-template-columns: 1fr;
    }

    .profile-photo-picker aside {
        border-right: 0;
        border-bottom: 1px solid #eceaf0;
    }

    .photo-view-shell {
        grid-template-columns: 1fr;
    }

    .photo-underbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .upload-album-picker {
        width: 100%;
        justify-content: space-between;
    }

    .messages-shell {
        grid-template-columns: 1fr;
    }

    .message-row {
        grid-template-columns: 1fr;
    }

    .settings-shell {
        grid-template-columns: 1fr;
    }

    .settings-form label,
    .settings-form .short-field {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }

    .settings-form label > span {
        text-align: left;
    }

    .account-preference-form label {
        grid-template-columns: 1fr;
    }

    .account-password-hint,
    .account-preference-actions {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 520px) {
    .login-options {
        align-items: flex-start;
        flex-direction: column;
    }

    .brand-logo {
        width: 100%;
    }

    .feature {
        grid-template-columns: 3.7rem 1fr;
    }

    .flash {
        left: 1rem;
        right: 1rem;
    }
}