body {
    margin: 0;
    font-family: "Open Sans", sans-serif;
    background: #070403;
}

/* ==============================
   Home Emerald Landing
============================== */
.home-emerald-page .pixarts-header::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 26% 28%, rgba(169, 101, 56, 0.14) 0%, rgba(169, 101, 56, 0) 40%),
        radial-gradient(circle at 80% 22%, rgba(197, 136, 73, 0.16) 0%, rgba(197, 136, 73, 0) 45%),
        linear-gradient(180deg, rgba(10, 7, 8, 0.24) 0%, rgba(10, 7, 8, 0.68) 75%, rgba(10, 7, 8, 0.84) 100%);
}

.home-emerald-page .pixarts-header {
    height: 540px;
}

.home-emerald-page .pixarts-header .pixarts-header-video {
    height: 580px;
    top: -30px;
}

.home-emerald-page .pixarts-nav {
    position: relative;
    z-index: 6;
}

.home-emerald-page .pix-header-contents {
    position: relative;
}

.home-emerald-page .pixarts-header .pix-header-contents .welcome-logo {
    left: 86px;
    top: 86px;
    width: 520px;
}

.home-header-download-btn {
    position: absolute;
    right: 6px;
    top: 12px;
    z-index: 8;
    border: 1px solid rgba(247, 218, 136, 0.72);
    background: linear-gradient(180deg, rgba(123, 96, 40, 0.94) 0%, rgba(82, 63, 23, 0.94) 100%);
    color: #fff7df;
    text-decoration: none;
    font-family: "TrajanProBold", "Open Sans", sans-serif;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.52rem 0.85rem 0.48rem;
    text-shadow: 0 1px 0 rgba(35, 21, 8, 0.75);
    box-shadow: inset 0 0 0 1px rgba(255, 223, 150, 0.26), 0 8px 18px rgba(0, 0, 0, 0.35);
    transition: filter 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.home-header-download-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(255, 229, 170, 0.34), 0 10px 22px rgba(0, 0, 0, 0.42), 0 0 18px rgba(227, 179, 91, 0.35);
}

.home-emerald-content {
    --emerald-bg: #130c0a;
    --emerald-panel: rgba(28, 16, 14, 0.9);
    --emerald-panel-strong: rgba(39, 24, 20, 0.94);
    --emerald-border: #825234;
    --emerald-border-soft: rgba(167, 106, 67, 0.38);
    --emerald-ink: #f7ebdc;
    --emerald-muted: #c6a98c;
    --emerald-gold: #d0a665;
    --emerald-gold-strong: #f0ca85;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(109, 58, 35, 0.16) 0%, rgba(109, 58, 35, 0) 48%),
        linear-gradient(180deg, rgba(20, 12, 11, 0.96) 0%, rgba(10, 6, 6, 0.98) 100%);
}

.home-emerald-content::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(135deg, rgba(207, 156, 110, 0.07) 0 1px, transparent 1px 170px),
        repeating-linear-gradient(45deg, rgba(174, 119, 76, 0.05) 0 1px, transparent 1px 170px);
}

.home-emerald-shell {
    position: relative;
    z-index: 2;
    width: calc(100% - 2rem);
    max-width: 1420px;
    padding-top: 42px;
    padding-bottom: 34px;
}

.home-emerald-float-social {
    position: fixed;
    left: 10px;
    top: 36%;
    z-index: 40;
    display: grid;
    gap: 10px;
}

.home-emerald-float-social a {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(173, 123, 84, 0.5);
    background: rgba(24, 14, 13, 0.82);
    color: #f4e8dc;
    text-decoration: none;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: grid;
    place-items: center;
    transition: transform 0.18s ease, filter 0.18s ease;
}

.home-emerald-float-social a:hover {
    transform: translateX(2px);
    filter: brightness(1.1);
}

.home-emerald-hero {
    position: relative;
    max-width: 1240px;
    margin: 0 auto 20px;
    min-height: 430px;
    border: 1px solid var(--emerald-border-soft);
    background:
        linear-gradient(180deg, rgba(31, 18, 17, 0.74) 0%, rgba(17, 10, 10, 0.9) 100%),
        url("/img/header-bg-static.png") center top / cover no-repeat;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 3rem clamp(1.4rem, 4vw, 4rem);
}

.home-emerald-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(18, 11, 11, 0.76) 0%, rgba(18, 11, 11, 0.24) 60%, rgba(18, 11, 11, 0.78) 100%);
}

.home-emerald-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 620px;
}

.home-emerald-hero-eyebrow {
    margin: 0;
    color: #c4ab8d;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 0.72rem;
}

.home-emerald-hero h1 {
    margin: 0.5rem 0 0;
    color: #f5ebe0;
    font-size: clamp(2.4rem, 5.5vw, 5.1rem);
    line-height: 0.98;
    font-family: "TrajanProBold", "Open Sans", sans-serif;
    text-transform: uppercase;
    text-shadow: 0 6px 30px rgba(8, 5, 5, 0.84);
}

.home-emerald-hero-sub {
    margin: 1rem 0 0;
    color: var(--emerald-muted);
    font-size: clamp(0.95rem, 1.5vw, 1.15rem);
    max-width: 590px;
    line-height: 1.65;
}

.home-emerald-hero-actions {
    margin-top: 1.4rem;
    display: flex;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.home-emerald-cta {
    min-width: 150px;
    border: 1px solid rgba(173, 124, 87, 0.5);
    background: rgba(35, 20, 18, 0.88);
    color: #f0dfce;
    padding: 0.64rem 0.95rem;
    text-decoration: none;
    font-size: 0.77rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-weight: 700;
    text-align: center;
    transition: transform 0.18s ease, filter 0.18s ease, border-color 0.18s ease;
}

.home-emerald-cta:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    border-color: rgba(217, 170, 123, 0.72);
}

.home-emerald-cta-primary {
    border-color: rgba(247, 218, 136, 0.72);
    background: linear-gradient(180deg, rgba(123, 96, 40, 0.94) 0%, rgba(82, 63, 23, 0.94) 100%);
    color: #fff7df;
}

.home-emerald-hero-art {
    position: absolute;
    right: clamp(12px, 4vw, 44px);
    bottom: -16px;
    width: min(480px, 44vw);
    z-index: 2;
    pointer-events: none;
}

.home-emerald-hero-art img {
    width: 100%;
    display: block;
    filter: saturate(1.05) contrast(1.08) drop-shadow(0 18px 30px rgba(8, 5, 5, 0.75));
}

.home-emerald-layout {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr) 270px;
    gap: 14px;
}

.home-emerald-left,
.home-emerald-main,
.home-emerald-right {
    min-width: 0;
    align-self: start;
}

.home-emerald-left {
    display: grid;
    gap: 12px;
}

.home-emerald-card,
.home-emerald-news-wrap,
.home-emerald-shortcuts {
    border: 1px solid var(--emerald-border-soft);
    background: linear-gradient(180deg, rgba(34, 20, 18, 0.95) 0%, rgba(18, 10, 10, 0.95) 100%);
    box-shadow: inset 0 0 0 1px rgba(127, 82, 53, 0.24), 0 0 18px rgba(209, 156, 104, 0.07);
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.home-emerald-card::before,
.home-emerald-card::after,
.home-emerald-news-wrap::before,
.home-emerald-news-wrap::after,
.home-emerald-shortcuts::before,
.home-emerald-shortcuts::after,
.home-emerald-news-item::before,
.home-emerald-news-item::after {
    content: "";
    position: absolute;
    left: 6%;
    right: 6%;
    height: 3px;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(214, 172, 112, 0) 0%, rgba(214, 172, 112, 0.95) 50%, rgba(214, 172, 112, 0) 100%);
    opacity: 0.82;
}

.home-emerald-card::before,
.home-emerald-news-wrap::before,
.home-emerald-shortcuts::before,
.home-emerald-news-item::before {
    top: 0;
    box-shadow: 0 0 18px rgba(214, 172, 112, 0.6);
}

.home-emerald-card::after,
.home-emerald-news-wrap::after,
.home-emerald-shortcuts::after,
.home-emerald-news-item::after {
    bottom: 0;
    box-shadow: 0 0 18px rgba(214, 172, 112, 0.52);
}

.home-emerald-card > *,
.home-emerald-news-wrap > *,
.home-emerald-shortcuts > *,
.home-emerald-news-item > * {
    position: relative;
    z-index: 1;
}

.home-emerald-card {
    padding: 0.9rem;
}

.home-emerald-card h2 {
    margin: 0 0 0.7rem;
    color: #f4e9dd;
    font-family: "TrajanProBold", "Open Sans", sans-serif;
    font-size: 0.96rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(240, 189, 120, 0.2);
}

.home-emerald-login-card {
    padding-top: 74px;
}

.home-emerald-login-head {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 18px;
    z-index: 2;
    border-bottom: 1px solid rgba(118, 34, 24, 0.66);
    background: linear-gradient(180deg, rgba(69, 12, 11, 0.22) 0%, rgba(36, 8, 8, 0.08) 100%);
}

.home-emerald-login-head-bg {
    position: absolute;
    left: -17px;
    top: 0;
    width: calc(100% + 34px);
    height: 74px;
    object-fit: fill;
    pointer-events: none;
}

.home-emerald-login-head h2 {
    margin: 0;
    color: #fff4e8;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

.home-emerald-login-head a {
    color: #e7bc90;
    text-decoration: none;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

.home-emerald-login-head a:hover {
    color: #ffdcb2;
}

.home-emerald-login-note {
    margin: 0 0 0.72rem;
    color: #bda185;
    font-size: 0.73rem;
    text-align: center;
}

.home-emerald-login-form {
    display: grid;
    gap: 0.65rem;
}

.home-emerald-login-form label {
    display: grid;
    gap: 0.3rem;
}

.home-emerald-login-form label span {
    color: #bda182;
    font-size: 0.69rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.home-emerald-login-form input {
    border: 1px solid rgba(149, 104, 72, 0.44);
    background: rgba(17, 9, 9, 0.78);
    color: #f0e0d0;
    padding: 0.55rem 0.62rem;
    font-size: 0.82rem;
    outline: none;
}

.home-emerald-login-form input:focus {
    border-color: rgba(214, 171, 122, 0.64);
}

.home-emerald-login-links {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
}

.home-emerald-login-links a,
.home-emerald-login-links .quicklink-button {
    border: 0;
    background: none;
    padding: 0;
    color: #c7b19a;
    font-size: 0.68rem;
    text-decoration: none;
    cursor: pointer;
}

.home-emerald-login-links a:hover,
.home-emerald-login-links .quicklink-button:hover {
    color: #f2db9d;
}

.home-emerald-login-submit,
.home-emerald-logout {
    border: 1px solid rgba(226, 191, 95, 0.7);
    background: linear-gradient(180deg, rgba(198, 151, 65, 0.94) 0%, rgba(137, 100, 35, 0.94) 100%);
    color: #fff6de;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    padding: 0.58rem 0.78rem;
    cursor: pointer;
    text-shadow: 0 1px 0 rgba(35, 21, 8, 0.75);
    box-shadow: inset 0 0 0 1px rgba(250, 220, 140, 0.28);
    transition: filter 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.home-emerald-login-submit:hover,
.home-emerald-logout:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(252, 230, 166, 0.34), 0 0 14px rgba(217, 172, 94, 0.28);
}

.home-emerald-register-btn {
    margin-top: 0.44rem;
    border: 1px solid rgba(158, 111, 75, 0.66);
    background: linear-gradient(180deg, rgba(33, 18, 16, 0.9) 0%, rgba(14, 8, 8, 0.9) 100%);
    color: #eecfae;
    text-decoration: none;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    padding: 0.46rem 0.7rem;
    text-align: center;
    display: block;
    box-shadow: inset 0 0 0 1px rgba(98, 66, 47, 0.44);
    transition: filter 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}

.home-emerald-register-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    border-color: rgba(221, 186, 107, 0.72);
}

.home-emerald-account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
}

.home-emerald-account-grid div {
    border: 1px solid rgba(126, 86, 59, 0.34);
    background: rgba(17, 10, 10, 0.58);
    padding: 0.5rem 0.55rem;
    display: grid;
    gap: 0.22rem;
}

.home-emerald-account-grid span {
    color: #b29376;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.home-emerald-account-grid strong {
    color: #f2e2d0;
    font-size: 0.8rem;
}

.home-emerald-account-actions {
    margin-top: 0.8rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}

.home-emerald-account-actions form {
    margin: 0;
}

.home-emerald-rank-head {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.45rem;
}

.home-emerald-rank-head h2 {
    margin-bottom: 0;
}

.home-emerald-rank-switch {
    display: flex;
    gap: 0.28rem;
}

.home-emerald-rank-switch button {
    border: 1px solid rgba(132, 90, 61, 0.52);
    background: rgba(20, 11, 10, 0.76);
    color: #d5c1a9;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.33rem 0.47rem;
    cursor: pointer;
}

.home-emerald-rank-switch button.active {
    border-color: rgba(224, 191, 100, 0.68);
    background: rgba(92, 67, 26, 0.74);
    color: #faedcb;
}

.home-emerald-rank-switch-bottom {
    margin-top: 0.62rem;
    justify-content: center;
    padding-bottom: 0.08rem;
}

.home-emerald-rank-switch-bottom button {
    min-width: 116px;
    padding: 0.42rem 0.64rem;
    border-radius: 2px;
    border-color: rgba(151, 108, 72, 0.62);
    background: linear-gradient(180deg, rgba(34, 19, 17, 0.9) 0%, rgba(16, 10, 10, 0.9) 100%);
    font-size: 0.64rem;
    letter-spacing: 0.09em;
}

.home-emerald-rank-switch-bottom button.active {
    border-color: rgba(228, 193, 112, 0.74);
    background: linear-gradient(180deg, rgba(107, 78, 29, 0.86) 0%, rgba(62, 45, 18, 0.86) 100%);
    box-shadow: 0 0 10px rgba(221, 176, 91, 0.24);
}

.home-emerald-rank-list {
    display: none;
}

.home-emerald-rank-list.active {
    display: block;
    border: 1px solid rgba(140, 95, 64, 0.42);
    box-shadow: inset 0 0 0 1px rgba(77, 52, 37, 0.48);
}

.home-emerald-rank-row {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 82px 60px;
    gap: 0.45rem;
    padding: 0.45rem 0.45rem;
    color: #dbc8b4;
    font-size: 0.72rem;
    border-bottom: 1px solid rgba(90, 61, 43, 0.5);
    transition: transform 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.home-emerald-rank-row::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(217, 186, 101, 0.1) 0%, rgba(217, 186, 101, 0.9) 100%);
    opacity: 0;
    transition: opacity 0.16s ease;
}

.home-emerald-rank-row:not(.head):hover {
    background: rgba(74, 62, 30, 0.34);
    color: #f6edcf;
    transform: translateX(2px);
}

.home-emerald-rank-row:not(.head):hover::after {
    opacity: 1;
}

.home-emerald-rank-row.head {
    color: #eccf8f;
    font-size: 0.63rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    border-bottom-color: rgba(120, 92, 41, 0.52);
    background: rgba(54, 46, 22, 0.36);
}

.home-emerald-media-card img {
    width: 100%;
    border: 1px solid rgba(130, 88, 58, 0.52);
    display: block;
}

.home-emerald-media-card a {
    margin-top: 0.6rem;
    display: inline-block;
    color: #d7c2ab;
    text-decoration: none;
    font-size: 0.72rem;
}

.home-emerald-media-card a:hover {
    color: #f3dca0;
}

.home-emerald-main {
    display: grid;
    align-content: start;
    grid-auto-rows: max-content;
    gap: 12px;
}

.home-emerald-shortcuts {
    padding: 0.22rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(44px, auto);
    gap: 0.26rem;
}

.home-emerald-shortcuts a {
    border: 1px solid rgba(132, 90, 61, 0.5);
    background:
        radial-gradient(circle at 50% 0%, rgba(154, 102, 64, 0.18) 0%, rgba(154, 102, 64, 0) 60%),
        linear-gradient(180deg, rgba(33, 18, 16, 0.86) 0%, rgba(14, 8, 8, 0.88) 100%);
    text-decoration: none;
    color: #e0ccb8;
    display: grid;
    grid-template-columns: 20px 1fr;
    align-items: center;
    justify-items: start;
    gap: 0.42rem;
    height: 100%;
    min-height: 44px;
    padding: 0 0.5rem;
    text-align: left;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(76, 50, 36, 0.4);
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.home-emerald-shortcuts a::before {
    content: "";
    position: absolute;
    inset: 1px;
    border: 1px solid rgba(154, 109, 76, 0.22);
    pointer-events: none;
}

.home-emerald-shortcuts a::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 36px;
    left: -46px;
    background: linear-gradient(90deg, rgba(248, 214, 154, 0) 0%, rgba(248, 214, 154, 0.3) 50%, rgba(248, 214, 154, 0) 100%);
    transform: skewX(-20deg);
    transition: left 0.36s ease;
    pointer-events: none;
}

.home-emerald-shortcuts a:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    border-color: rgba(221, 191, 106, 0.65);
    box-shadow: inset 0 0 0 1px rgba(245, 211, 137, 0.24), 0 0 14px rgba(212, 161, 86, 0.24);
}

.home-emerald-shortcuts a:hover::after {
    left: calc(100% + 18px);
}

.home-emerald-shortcuts a .home-emerald-shortcut-icon {
    width: 20px;
    height: 20px;
    border: 1px solid rgba(173, 124, 87, 0.65);
    background: rgba(62, 35, 31, 0.72);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.58rem;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-emerald-shortcuts a .home-emerald-shortcut-icon .mud-icon-root {
    font-size: 0.78rem;
    color: #f6ddb8;
}

.home-emerald-shortcuts a:hover .home-emerald-shortcut-icon {
    transform: scale(1.06);
    border-color: rgba(232, 190, 112, 0.84);
    box-shadow: 0 0 10px rgba(222, 172, 93, 0.36);
}

.home-emerald-shortcuts a strong {
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.1;
}

.home-emerald-media-slider {
    position: relative;
    border: 1px solid rgba(132, 90, 61, 0.52);
    background: rgba(13, 8, 8, 0.78);
    min-height: 212px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(77, 52, 37, 0.54);
}

.home-emerald-media-slider::before,
.home-emerald-media-slider::after {
    content: "";
    position: absolute;
    left: 7%;
    right: 7%;
    height: 3px;
    pointer-events: none;
    z-index: 3;
    background: linear-gradient(90deg, rgba(214, 172, 112, 0) 0%, rgba(214, 172, 112, 0.94) 50%, rgba(214, 172, 112, 0) 100%);
}

.home-emerald-media-slider::before {
    top: 0;
    box-shadow: 0 0 18px rgba(214, 172, 112, 0.56);
}

.home-emerald-media-slider::after {
    bottom: 0;
    box-shadow: 0 0 18px rgba(214, 172, 112, 0.5);
}

.home-emerald-media-track {
    display: flex;
    min-height: 212px;
    transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.home-emerald-media-slide {
    min-width: 100%;
    min-height: 212px;
    position: relative;
}

.home-emerald-media-slide img,
.home-emerald-media-video {
    width: 100%;
    height: 100%;
    min-height: 212px;
    object-fit: cover;
    display: block;
}

.home-emerald-media-slide img {
    filter: saturate(0.84) brightness(0.76) contrast(1.04);
}

.home-emerald-media-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border: 1px solid rgba(181, 136, 93, 0.64);
    background: rgba(18, 10, 10, 0.8);
    color: #f5dfbf;
    font-size: 0.94rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 4;
}

.home-emerald-media-arrow.prev {
    left: 8px;
}

.home-emerald-media-arrow.next {
    right: 8px;
}

.home-emerald-media-arrow:hover {
    filter: brightness(1.08);
}

.home-emerald-media-dots {
    position: absolute;
    right: 12px;
    bottom: 10px;
    display: flex;
    gap: 0.32rem;
    z-index: 4;
}

.home-emerald-media-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1px solid rgba(185, 141, 95, 0.74);
    background: rgba(15, 10, 10, 0.74);
    cursor: pointer;
}

.home-emerald-media-dot.active {
    background: #d4a963;
}

.home-emerald-right {
    display: grid;
    gap: 12px;
    align-content: start;
}

.home-emerald-download-card p {
    margin: 0 0 0.42rem;
    color: #c3a587;
    font-size: 0.74rem;
    line-height: 1.36;
}

.home-emerald-download-links {
    display: grid;
    gap: 0.28rem;
}

.home-emerald-download-links a {
    border: 1px solid rgba(132, 90, 61, 0.58);
    background: linear-gradient(180deg, rgba(30, 17, 15, 0.84) 0%, rgba(14, 8, 8, 0.86) 100%);
    color: #e8d5c0;
    text-decoration: none;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.38rem 0.48rem;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px rgba(89, 59, 41, 0.4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    transition: filter 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.home-emerald-download-links a span {
    display: block;
}

.home-emerald-link-icon {
    font-size: 1.1rem;
    color: #ffcb80;
    filter: drop-shadow(0 0 6px rgba(245, 169, 85, 0.35));
}

.home-emerald-download-links a::after {
    content: "";
    position: absolute;
    inset: auto 10% 0;
    height: 2px;
    background: linear-gradient(90deg, rgba(214, 172, 112, 0) 0%, rgba(214, 172, 112, 0.88) 50%, rgba(214, 172, 112, 0) 100%);
    opacity: 0;
    transition: opacity 0.16s ease;
}

.home-emerald-download-links a:hover {
    filter: brightness(1.08);
    border-color: rgba(219, 187, 103, 0.72);
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(227, 186, 107, 0.24), 0 0 12px rgba(212, 161, 86, 0.22);
}

.home-emerald-download-links a:hover .home-emerald-link-icon {
    color: #ffdda3;
}

.home-emerald-download-links a:hover::after {
    opacity: 1;
}

.home-emerald-stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.28rem;
}

.home-emerald-stats-grid div {
    border: 1px solid rgba(126, 86, 59, 0.42);
    background: rgba(17, 10, 10, 0.64);
    padding: 0.3rem 0.42rem;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
}

.home-emerald-stats-grid span {
    color: #b5987b;
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.home-emerald-stats-grid strong {
    color: #f4e5d4;
    font-size: 0.8rem;
    font-family: "TrajanProBold", "Open Sans", sans-serif;
}

.home-emerald-info-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.28rem;
}

.home-emerald-info-list li {
    border: 1px solid rgba(126, 86, 59, 0.42);
    background: rgba(17, 10, 10, 0.58);
    padding: 0.3rem 0.42rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

.home-emerald-info-list span {
    color: #bfa388;
    font-size: 0.66rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
}

.home-emerald-inline-icon {
    font-size: 0.9rem;
    color: #efc487;
}

.home-emerald-info-list a {
    color: #efd8b3;
    text-decoration: none;
    font-size: 0.68rem;
}

.home-emerald-info-list a:hover {
    color: #ffe4b8;
    text-decoration: underline;
}

.home-emerald-news-wrap {
    padding: 0.85rem;
}

.home-emerald-news-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 1rem;
    margin-bottom: 0.7rem;
    border-bottom: 1px solid rgba(126, 86, 58, 0.42);
    padding-bottom: 0.55rem;
    position: relative;
}

.home-emerald-news-head h2 {
    margin: 0;
    color: #f4e6d6;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.98rem;
    font-family: "TrajanProBold", "Open Sans", sans-serif;
}

.home-emerald-news-head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, rgba(214, 172, 112, 0.12) 0%, rgba(214, 172, 112, 0.86) 45%, rgba(214, 172, 112, 0.12) 100%);
    box-shadow: 0 0 10px rgba(214, 172, 112, 0.35);
}

.home-emerald-news-head nav {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.home-emerald-news-head nav a {
    text-decoration: none;
    color: #c8af95;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.home-emerald-news-head nav a.active,
.home-emerald-news-head nav a:hover {
    color: #f2d594;
}

.home-emerald-news-item {
    position: relative;
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 0.9rem;
    margin-bottom: 0.95rem;
    border: 1px solid rgba(116, 79, 54, 0.4);
    background: rgba(16, 9, 9, 0.72);
    padding: 0.7rem;
    overflow: hidden;
}

.home-emerald-news-item img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border: 1px solid rgba(122, 83, 56, 0.46);
}

.home-emerald-news-item h3 {
    margin: 0;
    color: #f2e5d7;
    font-size: 0.92rem;
}

.home-emerald-news-item p {
    margin: 0.55rem 0 0;
    color: #c0a58a;
    font-size: 0.8rem;
    line-height: 1.55;
}

.home-emerald-news-item footer {
    margin-top: 0.65rem;
    display: flex;
    justify-content: space-between;
    gap: 0.8rem;
    align-items: center;
}

.home-emerald-news-item footer span {
    color: #ab8f74;
    font-size: 0.68rem;
}

.home-emerald-news-item footer a {
    border: 1px solid rgba(218, 186, 101, 0.62);
    background: rgba(84, 63, 27, 0.86);
    color: #f8eccc;
    text-decoration: none;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.37rem 0.57rem;
    box-shadow: inset 0 0 0 1px rgba(250, 220, 140, 0.2);
    transition: filter 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.home-emerald-news-item footer a:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(250, 224, 160, 0.3), 0 0 12px rgba(217, 172, 94, 0.28);
}

.home-emerald-pagination {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    padding-top: 0.35rem;
}

.home-emerald-pagination button {
    border: 1px solid rgba(115, 79, 56, 0.62);
    background: rgba(13, 8, 8, 0.82);
    color: #d8c3af;
    font-size: 0.7rem;
    padding: 0.32rem 0.55rem;
    cursor: pointer;
}

.home-emerald-pagination button.active,
.home-emerald-pagination button:hover {
    border-color: rgba(220, 190, 110, 0.64);
    color: #fff1cf;
    background: rgba(88, 66, 29, 0.74);
}

@media (max-width: 1360px) {
    .home-emerald-float-social {
        display: none;
    }
}

@media (max-width: 1320px) {
    .home-emerald-layout {
        grid-template-columns: 320px minmax(0, 1fr);
    }

    .home-emerald-right {
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .home-emerald-page .pixarts-header {
        height: 500px;
    }

    .home-emerald-page .pixarts-header .pix-header-contents .welcome-logo {
        left: 44px;
        top: 104px;
        width: 460px;
    }

    .home-emerald-hero {
        min-height: 390px;
        padding-bottom: 1.6rem;
    }

    .home-emerald-hero-art {
        width: min(370px, 41vw);
        opacity: 0.86;
    }
}

@media (max-width: 1040px) {
    .home-emerald-page .pixarts-header {
        height: 460px;
    }

    .home-emerald-page .pixarts-header .pixarts-header-video {
        height: 500px;
    }

    .home-emerald-page .pixarts-header .pix-header-contents .welcome-logo {
        left: 20px;
        top: 106px;
        width: 390px;
    }

    .home-emerald-layout {
        grid-template-columns: 1fr;
    }

    .home-emerald-left {
        order: 2;
    }

    .home-emerald-main {
        order: 1;
    }

    .home-emerald-right {
        order: 3;
        grid-template-columns: 1fr;
    }

    .home-emerald-hero {
        min-height: 360px;
        max-width: none;
    }

    .home-emerald-hero-art {
        opacity: 0.32;
        width: min(360px, 56vw);
    }

    .home-header-download-btn {
        right: 0;
        top: 8px;
        padding: 0.45rem 0.7rem 0.41rem;
        font-size: 0.62rem;
    }
}

@media (max-width: 768px) {
    .home-emerald-page .pixarts-header {
        height: 410px;
    }

    .home-emerald-page .pixarts-header .pixarts-header-video {
        height: 470px;
    }

    .home-emerald-page .pixarts-header .pix-header-contents .welcome-logo {
        left: 50%;
        transform: translateX(-50%);
        top: 120px;
        width: min(82vw, 340px);
    }

    .home-emerald-shell {
        width: calc(100% - 1rem);
        padding-top: 24px;
    }

    .home-emerald-hero {
        min-height: 330px;
        padding: 1.2rem 1rem;
    }

    .home-emerald-hero h1 {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .home-emerald-shortcuts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 46px;
    }

    .home-emerald-shortcuts a {
        height: 46px;
        min-height: 46px;
        padding: 0 0.42rem;
    }

    .home-emerald-media-slider {
        min-height: 188px;
    }

    .home-emerald-media-track,
    .home-emerald-media-slide,
    .home-emerald-media-slide img,
    .home-emerald-media-video {
        min-height: 188px;
    }

    .home-emerald-stats-grid div,
    .home-emerald-info-list li {
        padding: 0.46rem;
    }

    .home-emerald-news-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-emerald-news-item {
        grid-template-columns: 1fr;
    }

    .home-emerald-news-item img {
        height: 174px;
    }

    .home-emerald-news-item footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-header-download-btn {
        display: none;
    }
}

/* ==============================
   Home Emerald - Cinematic Pass
============================== */
.home-emerald-content {
    background:
        radial-gradient(1200px 460px at 50% -4%, rgba(245, 157, 80, 0.22) 0%, rgba(245, 157, 80, 0) 70%),
        radial-gradient(900px 340px at 50% 100%, rgba(212, 109, 46, 0.15) 0%, rgba(212, 109, 46, 0) 72%),
        linear-gradient(180deg, rgba(18, 10, 10, 0.97) 0%, rgba(9, 5, 5, 0.99) 100%);
}

.home-emerald-content::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(2px 2px at 9% 14%, rgba(255, 210, 150, 0.38) 20%, transparent 80%),
        radial-gradient(2px 2px at 22% 26%, rgba(255, 197, 126, 0.24) 20%, transparent 80%),
        radial-gradient(2px 2px at 67% 18%, rgba(255, 211, 151, 0.26) 20%, transparent 80%),
        radial-gradient(2px 2px at 83% 36%, rgba(255, 194, 129, 0.2) 20%, transparent 80%),
        radial-gradient(2px 2px at 58% 64%, rgba(255, 206, 142, 0.2) 20%, transparent 80%),
        radial-gradient(2px 2px at 14% 78%, rgba(255, 173, 94, 0.16) 20%, transparent 80%);
    opacity: 0.7;
}

.home-emerald-card,
.home-emerald-news-wrap,
.home-emerald-shortcuts,
.home-emerald-media-slider {
    border-color: rgba(196, 122, 72, 0.6);
    box-shadow:
        inset 0 0 0 1px rgba(255, 164, 99, 0.12),
        0 0 0 1px rgba(74, 40, 28, 0.6),
        0 0 22px rgba(255, 144, 73, 0.12);
}

.home-emerald-card::before,
.home-emerald-news-wrap::before,
.home-emerald-shortcuts::before,
.home-emerald-news-item::before,
.home-emerald-media-slider::before {
    height: 2px;
    left: 4%;
    right: 4%;
    opacity: 0.95;
}

.home-emerald-card::after,
.home-emerald-news-wrap::after,
.home-emerald-shortcuts::after,
.home-emerald-news-item::after,
.home-emerald-media-slider::after {
    height: 2px;
    left: 4%;
    right: 4%;
    opacity: 0.92;
}

.home-emerald-login-card {
    background:
        radial-gradient(circle at 24% -10%, rgba(255, 162, 93, 0.18) 0%, rgba(255, 162, 93, 0) 48%),
        linear-gradient(180deg, rgba(36, 20, 19, 0.96) 0%, rgba(19, 10, 10, 0.95) 100%);
}

.home-emerald-shortcuts {
    height: 48px;
    grid-auto-rows: 1fr;
    padding: 0.18rem;
    gap: 0.2rem;
}

.home-emerald-shortcuts a {
    min-height: 0;
    border-color: rgba(154, 103, 68, 0.64);
}

.home-emerald-shortcuts a strong {
    font-size: 0.62rem;
    font-family: "TrajanProBold", "Open Sans", sans-serif;
}

.home-emerald-media-slider {
    min-height: 246px;
}

.home-emerald-media-track,
.home-emerald-media-slide,
.home-emerald-media-slide img,
.home-emerald-media-video {
    min-height: 246px;
}

.home-emerald-media-arrow {
    width: 34px;
    height: 34px;
    border-color: rgba(213, 154, 101, 0.72);
    background: rgba(22, 11, 10, 0.82);
}

.home-emerald-rank-row:not(.head) {
    align-items: center;
}

.home-emerald-rank-row:not(.head) span:first-child {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(176, 125, 82, 0.7);
    background: radial-gradient(circle at 32% 25%, rgba(255, 225, 178, 0.26) 0%, rgba(129, 78, 47, 0.5) 100%);
    color: #f5e5cd;
    display: grid;
    place-items: center;
    font-size: 0.65rem;
    font-weight: 700;
}

.home-emerald-rank-list .home-emerald-rank-row:nth-child(2):not(.head) span:first-child,
.home-emerald-rank-list .home-emerald-rank-row:nth-child(3):not(.head) span:first-child,
.home-emerald-rank-list .home-emerald-rank-row:nth-child(4):not(.head) span:first-child {
    border-color: rgba(230, 188, 109, 0.88);
    box-shadow: 0 0 10px rgba(233, 178, 95, 0.32);
}

.home-emerald-download-links a,
.home-emerald-info-list a,
.home-emerald-news-item footer a {
    font-family: "TrajanProBold", "Open Sans", sans-serif;
}


.home-emerald-stats-grid strong {
    text-shadow: 0 0 8px rgba(255, 201, 126, 0.25);
}

@media (max-width: 768px) {
    .home-emerald-shortcuts {
        height: auto;
        grid-auto-rows: 42px;
    }

    .home-emerald-media-slider {
        min-height: 178px;
    }

    .home-emerald-media-track,
    .home-emerald-media-slide,
    .home-emerald-media-slide img,
    .home-emerald-media-video {
        min-height: 178px;
    }
}

/* ==============================
   Home Emerald - Header Blend + Panel Heads
============================== */
.home-emerald-content {
    margin-top: -196px;
}

.home-emerald-shell {
    padding-top: 10px;
}

.home-emerald-card-headed {
    padding-top: 58px;
    border-top: 0;
    box-shadow:
        inset 1px 0 0 rgba(127, 82, 53, 0.24),
        inset -1px 0 0 rgba(127, 82, 53, 0.24),
        inset 0 -1px 0 rgba(127, 82, 53, 0.24),
        0 0 18px rgba(209, 156, 104, 0.07);
    overflow: visible;
}

.home-emerald-card-headed::before {
    opacity: 0;
}

.home-emerald-panel-head,
.home-emerald-login-head,
.home-emerald-rank-head {
    position: absolute;
    left: 0;
    right: 0;
    top: -11px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0 18px;
    margin: 0;
    z-index: 3;
    border-bottom: 1px solid rgba(118, 34, 24, 0.66);
    background: linear-gradient(180deg, rgba(69, 12, 11, 0.24) 0%, rgba(36, 8, 8, 0.1) 100%);
    overflow: hidden;
}

.home-emerald-panel-head::before,
.home-emerald-login-head::before,
.home-emerald-rank-head::before {
    content: "";
    position: absolute;
    left: -13px;
    top: -7px;
    width: calc(100% + 26px);
    height: 82px;
    background-image: url("/img/user-panel-head.png");
    background-repeat: no-repeat;
    background-size: 100% 82px;
    background-position: center top;
    pointer-events: none;
    z-index: 0;
}

.home-emerald-panel-head h2,
.home-emerald-login-head h2,
.home-emerald-rank-head h2 {
    margin: 0;
    color: #fff4e8;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(244, 184, 108, 0.25);
    position: relative;
    z-index: 1;
}

.home-emerald-login-head a {
    color: #e7bc90;
    text-decoration: none;
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}

.home-emerald-login-head a:hover {
    color: #ffdcb2;
}

.home-emerald-rank-switch {
    position: relative;
    z-index: 1;
}

.home-emerald-login-note {
    margin: 0.12rem 0 0.72rem;
}

.home-emerald-stats-card .home-emerald-stats-grid {
    margin-top: 0.2rem;
}

.home-emerald-media-card img {
    margin-top: 0.2rem;
}

@media (max-width: 1180px) {
    .home-emerald-content {
        margin-top: -174px;
    }

    .home-emerald-shell {
        padding-top: 8px;
    }
}

@media (max-width: 1040px) {
    .home-emerald-content {
        margin-top: -150px;
    }
}

@media (max-width: 768px) {
    .home-emerald-content {
        margin-top: -124px;
    }

    .home-emerald-shell {
        padding-top: 14px;
    }

    .home-emerald-card-headed {
        padding-top: 52px;
    }

    .home-emerald-panel-head,
    .home-emerald-login-head,
    .home-emerald-rank-head {
        top: -11px;
        height: 56px;
        padding: 0 14px;
    }

    .home-emerald-panel-head::before,
    .home-emerald-login-head::before,
    .home-emerald-rank-head::before {
        left: -10px;
        top: -5px;
        width: calc(100% + 20px);
        height: 72px;
    }
}

/* ==============================
   Home Emerald - Polish Pass
============================== */
.home-emerald-page .home-emerald-panel-head h2,
.home-emerald-page .home-emerald-login-head h2,
.home-emerald-page .home-emerald-rank-head h2 {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    text-align: center;
    line-height: 1;
}

.home-emerald-page .home-emerald-login-head a {
    margin-left: auto;
}

.home-emerald-page .home-emerald-shortcuts a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.36rem;
    padding: 0 0.35rem;
    text-align: center;
}

.home-emerald-page .home-emerald-shortcuts a strong {
    text-align: center;
    letter-spacing: 0.05em;
}

.home-emerald-page .home-emerald-login-note,
.home-emerald-page .home-emerald-download-card p {
    text-align: center;
}

.home-emerald-page .home-emerald-download-links a span {
    text-align: center;
}

.home-emerald-page .home-emerald-stats-grid div {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.18rem;
    text-align: center;
}

.home-emerald-page .home-emerald-stats-grid span {
    font-size: 0.62rem;
}

.home-emerald-page .home-emerald-info-list li {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 0.22rem;
    text-align: center;
}

.home-emerald-page .home-emerald-info-list span,
.home-emerald-page .home-emerald-info-list a {
    justify-content: center;
    text-align: center;
}

.home-emerald-page .home-emerald-news-item h3 {
    color: #f8eddd;
    text-shadow: 0 0 10px rgba(244, 186, 111, 0.2);
}

.home-emerald-page .home-emerald-news-item p {
    color: #ceb397;
}

.home-emerald-page .home-emerald-card,
.home-emerald-page .home-emerald-news-wrap,
.home-emerald-page .home-emerald-media-slider {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.home-emerald-page .home-emerald-card:hover,
.home-emerald-page .home-emerald-news-wrap:hover,
.home-emerald-page .home-emerald-media-slider:hover {
    transform: translateY(-1px);
    border-color: rgba(222, 166, 105, 0.68);
    box-shadow:
        inset 0 0 0 1px rgba(255, 173, 103, 0.2),
        0 0 0 1px rgba(90, 50, 34, 0.6),
        0 0 24px rgba(255, 144, 73, 0.2);
}

.home-emerald-page .home-emerald-login-form input,
.home-emerald-page .home-emerald-download-links a,
.home-emerald-page .home-emerald-register-btn,
.home-emerald-page .home-emerald-login-submit,
.home-emerald-page .home-emerald-shortcuts a {
    transition: box-shadow 0.16s ease, border-color 0.16s ease, filter 0.16s ease, transform 0.16s ease;
}

.home-emerald-page .home-emerald-login-form input:focus {
    box-shadow: 0 0 0 2px rgba(214, 171, 122, 0.18), 0 0 14px rgba(214, 171, 122, 0.16);
}

@media (max-width: 768px) {
    .home-emerald-page .home-emerald-login-head h2,
    .home-emerald-page .home-emerald-rank-head h2,
    .home-emerald-page .home-emerald-panel-head h2 {
        font-size: 0.74rem;
    }

    .home-emerald-page .home-emerald-rank-switch-bottom {
        gap: 0.36rem;
    }

    .home-emerald-page .home-emerald-rank-switch-bottom button {
        min-width: 0;
        flex: 1 1 0;
        padding: 0.4rem 0.4rem;
    }
}

/* ==============================
   Home MMO Main Page
============================== */
.home-mmo-content {
    --mmo-border: #6c4532;
    --mmo-border-bright: #b77d4d;
    --mmo-ink: #f7e7d4;
    --mmo-muted: #b79678;
    --mmo-bg-top: #1c1110;
    --mmo-bg-mid: #120b0b;
    --mmo-bg-bot: #090606;
    --mmo-panel: linear-gradient(180deg, rgba(28, 17, 16, 0.96) 0%, rgba(11, 8, 8, 0.96) 100%);
    --mmo-accent: #ce8b52;
    --mmo-accent-2: #9f5f35;
}

.home-mmo-content .pixarts-container {
    width: calc(100% - 2rem);
    max-width: 1540px;
    padding-top: 56px;
}

.home-mmo-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    align-items: start;
}

.home-mmo-main,
.home-mmo-side {
    min-width: 0;
}

.home-mmo-main {
    display: grid;
    gap: 14px;
}

.home-mmo-command-bar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.home-mmo-command {
    position: relative;
    border: 1px solid var(--mmo-border);
    background: var(--mmo-panel);
    min-height: 96px;
    text-decoration: none;
    color: var(--mmo-ink);
    padding: 0.78rem 0.82rem 0.76rem;
    display: grid;
    gap: 0.3rem;
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
    transition: border-color 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}

.home-mmo-command::before {
    content: "";
    position: absolute;
    inset: 1px;
    border: 1px solid rgba(103, 67, 48, 0.5);
    pointer-events: none;
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 11px, 100% 100%, 11px 100%, 0 calc(100% - 11px));
}

.home-mmo-command::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 2px;
    width: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(225, 174, 120, 0.7) 18%, rgba(225, 174, 120, 0.7) 82%, transparent 100%);
    opacity: 0.72;
}

.home-mmo-command:hover {
    border-color: var(--mmo-border-bright);
    filter: brightness(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.home-mmo-command strong {
    font-family: "TrajanProBold", "Open Sans", sans-serif;
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.home-mmo-command span {
    color: var(--mmo-muted);
    font-size: 0.74rem;
    line-height: 1.4;
}

.home-mmo-command em {
    margin-top: auto;
    color: #f0c89c;
    font-style: normal;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-mmo-command-primary {
    grid-column: span 1;
    border-color: #a36b43;
    background: linear-gradient(180deg, rgba(56, 31, 24, 0.98) 0%, rgba(19, 11, 10, 0.98) 100%);
}

.home-mmo-hero {
    border: 1px solid var(--mmo-border);
    background: var(--mmo-panel);
    position: relative;
    padding: 12px;
}

.home-mmo-hero::before {
    content: "";
    position: absolute;
    inset: 1px;
    border: 1px solid rgba(112, 73, 52, 0.52);
    pointer-events: none;
}

.home-mmo-hero-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 12px;
}

.home-mmo-eyebrow {
    margin: 0;
    color: #d1ac84;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.home-mmo-hero-head h2 {
    margin: 0.3rem 0 0;
    color: var(--mmo-ink);
    font-family: "TrajanProBold", "Open Sans", sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.35rem);
    line-height: 1.25;
    letter-spacing: 0.03em;
}

.home-mmo-outline-btn {
    border: 1px solid #a87048;
    color: #f2ddc6;
    text-decoration: none;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.44rem 0.72rem;
    background: linear-gradient(180deg, rgba(44, 27, 24, 0.92) 0%, rgba(22, 14, 13, 0.92) 100%);
    transition: filter 0.16s ease, border-color 0.16s ease;
}

.home-mmo-outline-btn:hover {
    border-color: #d49663;
    filter: brightness(1.06);
}

.home-mmo-slider {
    position: relative;
    border: 1px solid rgba(102, 66, 47, 0.62);
    min-height: 448px;
    background: #090505;
    overflow: hidden;
}

.home-mmo-slider-track {
    display: flex;
    min-height: 448px;
    transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.home-mmo-slide {
    min-width: 100%;
    min-height: 448px;
    position: relative;
}

.home-mmo-slide img,
.home-mmo-media-video {
    width: 100%;
    height: 100%;
    min-height: 448px;
    object-fit: cover;
    display: block;
}

.home-mmo-slide img {
    filter: saturate(0.9) contrast(1.03) brightness(0.78);
}

.home-mmo-slide-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(7, 5, 5, 0.02) 0%, rgba(9, 6, 6, 0.82) 44%, rgba(9, 6, 6, 0.98) 100%);
    padding: 0.95rem 1rem 1rem;
    display: grid;
    gap: 0.35rem;
}

.home-mmo-slide-overlay strong {
    color: #f4e6d6;
    font-size: 0.95rem;
    font-family: "TrajanProBold", "Open Sans", sans-serif;
    letter-spacing: 0.03em;
}

.home-mmo-slide-overlay span {
    color: #c9b196;
    font-size: 0.82rem;
    line-height: 1.45;
}

.home-mmo-slide-video .home-mmo-slide-overlay {
    left: 14px;
    top: 14px;
    right: auto;
    bottom: auto;
    width: min(430px, calc(100% - 28px));
    border: 1px solid rgba(109, 72, 51, 0.72);
    background: linear-gradient(180deg, rgba(22, 14, 13, 0.92) 0%, rgba(10, 7, 7, 0.92) 100%);
}

.home-mmo-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 1px solid rgba(157, 106, 69, 0.72);
    background: rgba(15, 10, 10, 0.76);
    color: #f2dec6;
    font-size: 1.08rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 4;
    transition: filter 0.16s ease;
}

.home-mmo-slider-arrow:hover {
    filter: brightness(1.11);
}

.home-mmo-slider-arrow.prev {
    left: 10px;
}

.home-mmo-slider-arrow.next {
    right: 10px;
}

.home-mmo-slider-dots {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 4;
    display: flex;
    gap: 0.32rem;
}

.home-mmo-slider-dot {
    width: 10px;
    height: 10px;
    border: 1px solid rgba(206, 142, 82, 0.8);
    background: rgba(26, 16, 15, 0.9);
    cursor: pointer;
}

.home-mmo-slider-dot.active {
    background: #d49663;
}

.home-mmo-news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.home-mmo-news-card {
    position: relative;
    border: 1px solid rgba(102, 66, 47, 0.62);
    background: var(--mmo-panel);
    padding: 0.86rem 0.86rem 0.8rem;
    display: grid;
    gap: 0.55rem;
    min-height: 174px;
}

.home-mmo-news-card::before {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    border-top: 18px solid rgba(207, 141, 83, 0.35);
    border-left: 18px solid transparent;
}

.home-mmo-news-card header p {
    margin: 0;
    color: #d7ad82;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.66rem;
}

.home-mmo-news-card header h3 {
    margin: 0.35rem 0 0;
    color: #f6e9d8;
    font-size: 0.88rem;
    line-height: 1.32;
}

.home-mmo-news-card > p {
    margin: 0;
    color: #b6977a;
    font-size: 0.78rem;
    line-height: 1.5;
}

.home-mmo-news-card > a {
    margin-top: auto;
    color: #f0c598;
    text-decoration: none;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    width: fit-content;
}

.home-mmo-news-card > a:hover {
    color: #ffe3c2;
}

.home-mmo-side {
    display: grid;
    gap: 10px;
}

.home-mmo-auth-card,
.home-mmo-session-card,
.home-mmo-rank-card {
    border: 1px solid rgba(108, 69, 50, 0.85);
    background: var(--mmo-panel);
}

.home-mmo-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.7rem;
    border-bottom: 1px solid rgba(91, 59, 43, 0.8);
    padding: 0.66rem 0.74rem;
}

.home-mmo-card-head h3 {
    margin: 0;
    color: #f5e7d6;
    font-size: 0.84rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.home-mmo-card-head a {
    color: #e3bc93;
    font-size: 0.68rem;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.home-mmo-card-head a:hover {
    color: #ffe1bc;
}

.home-mmo-auth-body {
    padding: 0.8rem;
    display: grid;
    gap: 0.7rem;
}

.home-mmo-auth-body > p {
    margin: 0;
    color: #b99a7e;
    font-size: 0.78rem;
    line-height: 1.45;
}

.home-mmo-inline-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.45rem;
}

.home-mmo-inline-links a,
.home-mmo-inline-links .quicklink-button {
    color: #e1c29e;
    font-size: 0.73rem;
    text-decoration: none;
    padding: 0;
    width: auto;
}

.home-mmo-inline-links a:hover,
.home-mmo-inline-links .quicklink-button:hover {
    color: #ffe4c5;
}

.home-mmo-session-grid {
    padding: 0.76rem;
    display: grid;
    gap: 0.42rem;
}

.home-mmo-session-grid div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(77, 49, 36, 0.74);
    padding: 0.36rem 0.04rem;
    gap: 0.6rem;
}

.home-mmo-session-grid span {
    color: #af9073;
    font-size: 0.72rem;
}

.home-mmo-session-grid strong {
    color: #f0dcc5;
    font-size: 0.76rem;
    text-align: right;
}

.home-mmo-session-actions {
    padding: 0 0.76rem 0.76rem;
    display: flex;
    gap: 0.45rem;
}

.home-mmo-session-actions form {
    margin: 0;
}

.home-mmo-danger-btn {
    border: 1px solid rgba(153, 78, 69, 0.9);
    background: linear-gradient(180deg, rgba(104, 46, 40, 0.95) 0%, rgba(59, 25, 23, 0.95) 100%);
    color: #f9ded7;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.44rem 0.62rem;
    cursor: pointer;
}

.home-mmo-danger-btn:hover {
    filter: brightness(1.1);
}

.home-mmo-promo-card {
    border: 1px solid #c98a4f;
    background: linear-gradient(180deg, rgba(184, 121, 67, 0.95) 0%, rgba(103, 61, 38, 0.95) 100%);
    color: #2c140b;
    text-decoration: none;
    padding: 0.82rem 0.86rem;
    display: grid;
    gap: 0.3rem;
}

.home-mmo-promo-card strong {
    font-size: 0.88rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.home-mmo-promo-card span {
    color: #532a16;
    font-size: 0.76rem;
    line-height: 1.4;
}

.home-mmo-rank-list {
    display: none;
}

.home-mmo-rank-list.active {
    display: block;
}

.home-mmo-rank-switch {
    display: flex;
    gap: 0.3rem;
}

.home-mmo-rank-switch button {
    border: 1px solid rgba(126, 82, 58, 0.8);
    background: linear-gradient(180deg, rgba(43, 26, 23, 0.95) 0%, rgba(27, 16, 14, 0.95) 100%);
    color: #d7bfa4;
    padding: 0.28rem 0.5rem;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
}

.home-mmo-rank-switch button.active {
    border-color: #d1935f;
    background: linear-gradient(180deg, rgba(176, 113, 64, 0.96) 0%, rgba(90, 51, 32, 0.96) 100%);
    color: #fff2df;
}

.home-mmo-rank-row {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 88px 62px;
    gap: 0.34rem;
    padding: 0.46rem 0.7rem;
    border-top: 1px solid rgba(63, 40, 30, 0.7);
    color: #ddc7ae;
    font-size: 0.73rem;
    position: relative;
    transition: background-color 0.16s ease, transform 0.16s ease, color 0.16s ease;
}

.home-mmo-rank-row:nth-child(even):not(.head) {
    background: rgba(19, 12, 12, 0.65);
}

.home-mmo-rank-row::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(180deg, rgba(226, 168, 104, 0.88) 0%, rgba(154, 91, 50, 0.88) 100%);
    opacity: 0;
    transition: opacity 0.16s ease;
}

.home-mmo-rank-row:not(.head):hover {
    background: linear-gradient(90deg, rgba(63, 36, 24, 0.72) 0%, rgba(35, 20, 16, 0.72) 100%);
    transform: translateX(2px);
    color: #ffebd3;
}

.home-mmo-rank-row:not(.head):hover::after {
    opacity: 1;
}

.home-mmo-rank-row.head {
    background: rgba(49, 29, 24, 0.92);
    color: #f3e5d4;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.home-mmo-rank-row span:last-child {
    text-align: right;
}

@media (max-width: 1360px) {
    .home-mmo-command-bar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-mmo-news-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1100px) {
    .home-mmo-shell {
        grid-template-columns: 1fr;
    }

    .home-mmo-side {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .home-mmo-content .pixarts-container {
        width: calc(100% - 1rem);
        padding-top: 36px;
    }

    .home-mmo-command-bar {
        grid-template-columns: 1fr;
    }

    .home-mmo-hero {
        padding: 8px;
    }

    .home-mmo-hero-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-mmo-slider,
    .home-mmo-slider-track,
    .home-mmo-slide,
    .home-mmo-slide img,
    .home-mmo-media-video {
        min-height: 320px;
    }

    .home-mmo-slide-video .home-mmo-slide-overlay {
        width: calc(100% - 20px);
        left: 10px;
        top: 10px;
    }

    .home-mmo-rank-row {
        grid-template-columns: 30px minmax(0, 1fr) 78px 54px;
        font-size: 0.7rem;
    }
}

html {
    scroll-behavior: smooth;
}

.app-route-transition {
    animation: appRouteEnter 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform, filter;
}

.app-route-transition.leaving {
    animation: appRouteLeave 0.16s ease-in forwards;
    pointer-events: none;
}

@keyframes appRouteEnter {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.995);
        filter: blur(2px);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes appRouteLeave {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }

    to {
        opacity: 0;
        transform: translateY(-4px) scale(0.996);
        filter: blur(1.2px);
    }
}

button,
input,
textarea {
    font-family: inherit;
}

.status-message {
    margin-top: 0.8rem;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    font-size: 0.85rem;
    line-height: 1.35;
}

.status-message.success {
    border: 1px solid #3c8b45;
    background: rgba(34, 78, 38, 0.75);
    color: #d9ffd7;
}

.status-message.error {
    border: 1px solid #9f4747;
    background: rgba(93, 32, 32, 0.8);
    color: #ffd4d4;
}

.modern-login-form {
    display: grid;
    gap: 0.55rem;
}

.modern-login-form .input-holder {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.modern-login-form .input-holder:focus-within {
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
}

.modern-login-form .login-input {
    transition: color 0.15s ease;
}

.modern-submit-holder {
    margin-top: 0.15rem;
}

.modern-login-btn {
    min-width: 170px;
    position: relative;
    border: 0;
    cursor: pointer;
}

.modern-login-btn .btn-wait {
    display: none;
    align-items: center;
    gap: 0.42rem;
}

.modern-login-btn .btn-spinner {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 238, 215, 0.4);
    border-top-color: #fff7ea;
    border-radius: 50%;
    animation: loginSpin 0.7s linear infinite;
}

.modern-login-form.is-submitting .modern-login-btn .btn-label {
    display: none;
}

.modern-login-form.is-submitting .modern-login-btn .btn-wait {
    display: inline-flex;
}

.modern-login-form.is-submitting .input-holder {
    opacity: 0.72;
}

.modern-login-form.is-submitting .mud-login-input {
    opacity: 0.72;
}

.modern-login-form.is-submitting .modern-login-btn {
    filter: saturate(1.05) brightness(1.07);
}

.login-progress-msg {
    margin: 0;
    display: none;
    color: #dac7b2;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
}

.modern-login-form.is-submitting .login-progress-msg {
    display: block;
    animation: loginProgressFade 0.2s ease;
}

@keyframes loginSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes loginProgressFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.login-box .login-panel-title {
    margin-bottom: 0.25rem;
    font-size: 0.83rem;
    color: #d4bea2;
    letter-spacing: 0.01em;
}

.modern-login-form-home {
    border: 1px solid rgba(136, 92, 64, 0.48);
    border-radius: 8px;
    padding: 0.6rem;
    background:
        linear-gradient(180deg, rgba(43, 24, 20, 0.7) 0%, rgba(24, 14, 13, 0.78) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 230, 195, 0.06);
}

.modern-login-form-home .login-field-wrap {
    display: grid;
    gap: 0.32rem;
}

.modern-login-form-home .login-field-label {
    color: #ceb597;
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.modern-login-form-home .mud-login-stack {
    display: grid;
    gap: 0.52rem;
}

.modern-login-form-home .mud-login-input {
    margin: 0;
}

.modern-login-form-home .mud-login-input .mud-input-adornment {
    color: #c9b090;
}

.modern-login-form-home .mud-login-input .mud-input-slot {
    color: #f0dfcb;
    font-size: 0.82rem;
}

.modern-login-form-home .mud-login-input .mud-input-slot::placeholder {
    color: #907861;
}

.modern-login-form-home .mud-login-input .mud-input-outlined {
    border-radius: 6px;
    background: rgba(14, 8, 8, 0.84);
    box-shadow: inset 0 1px 0 rgba(255, 227, 189, 0.05);
}

.modern-login-form-home .mud-login-input .mud-input-outlined-border {
    border-color: rgba(130, 89, 67, 0.54);
}

.modern-login-form-home .mud-login-input.mud-input-control.mud-input-focused .mud-input-outlined {
    background: rgba(20, 12, 11, 0.95);
}

.modern-login-form-home .mud-login-input.mud-input-control.mud-input-focused .mud-input-outlined-border {
    border-color: rgba(222, 168, 98, 0.75);
}

.modern-login-form-home .mud-login-input.mud-input-control.mud-input-focused .mud-input-slot {
    box-shadow: 0 0 0 2px rgba(219, 157, 84, 0.14);
    border-radius: 6px;
}

.modern-login-form-home .login-submit-row {
    margin-top: 0.25rem;
}

.panel-login-btn {
    width: 100%;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border-radius: 8px;
    border: 1px solid rgba(232, 175, 101, 0.7);
    background: linear-gradient(180deg, #df9a55 0%, #b96c37 52%, #7f3f22 100%);
    color: #fff7ee;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 238, 207, 0.36);
    transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}

.panel-login-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 238, 207, 0.42);
}

.panel-login-btn:active {
    transform: translateY(0);
}

.modern-login-form-home .modern-login-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -45%;
    width: 36%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 236, 204, 0.25) 55%, transparent 100%);
    transform: skewX(-16deg);
    transition: left 0.45s ease;
}

.modern-login-form-home .modern-login-btn:hover::after {
    left: 112%;
}

.modern-login-form.is-submitting .panel-login-btn {
    opacity: 0.92;
}

.modern-login-form-home .login-progress-msg {
    padding: 0.12rem 0.2rem 0;
}

.login-link-group {
    display: grid;
    gap: 0.14rem;
}

.login-link-button {
    font-size: 0.79rem;
    color: #ead7be;
    text-decoration: none;
    transition: color 0.15s ease, transform 0.15s ease;
}

.login-link-button:hover {
    color: #fff2dd;
    transform: translateX(2px);
}

.login-link-button.active {
    color: #ffddb2;
    font-weight: 700;
}

.modern-forgot-box {
    margin-top: 0.45rem;
    border: 1px solid rgba(122, 85, 64, 0.45);
    border-radius: 8px;
    padding: 0.68rem;
    background: linear-gradient(180deg, rgba(24, 14, 13, 0.84) 0%, rgba(14, 8, 8, 0.84) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 226, 183, 0.05);
}

.modern-forgot-head {
    margin-bottom: 0.5rem;
}

.modern-forgot-head strong {
    display: block;
    color: #f0ddc6;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.modern-forgot-head p {
    margin: 0.22rem 0 0;
    color: #b99f83;
    font-size: 0.74rem;
    line-height: 1.35;
}

.modern-forgot-box .mud-forgot-input {
    margin: 0;
}

.modern-forgot-box .mud-forgot-input .mud-input-adornment {
    color: #c8ae8f;
}

.modern-forgot-box .mud-forgot-input .mud-input-slot {
    color: #ecdcc8;
    font-size: 0.8rem;
}

.modern-forgot-box .mud-forgot-input .mud-input-slot::placeholder {
    color: #8f7760;
}

.modern-forgot-box .mud-forgot-input .mud-input-outlined {
    border-radius: 6px;
    background: rgba(12, 8, 8, 0.85);
}

.modern-forgot-box .mud-forgot-input .mud-input-outlined-border {
    border-color: rgba(122, 84, 63, 0.56);
}

.modern-forgot-box .mud-forgot-input.mud-input-control.mud-input-focused .mud-input-outlined-border {
    border-color: rgba(224, 169, 97, 0.72);
}

.modern-forgot-box .mud-forgot-input.mud-input-control.mud-input-focused .mud-input-slot {
    box-shadow: 0 0 0 2px rgba(223, 160, 86, 0.12);
    border-radius: 6px;
}

.modern-forgot-btn {
    width: 100%;
    margin-top: 0.5rem;
}

.panel-login-btn-subtle {
    border-color: rgba(164, 114, 73, 0.66);
    background: linear-gradient(180deg, #a96b3f 0%, #7e4629 56%, #562d1c 100%);
}

.panel-login-btn-subtle:hover {
    filter: brightness(1.08);
}

.btn-inline-wait {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;
}

.modern-forgot-box .status-message {
    margin-top: 0.55rem;
}

.auth-launcher-panel {
    min-height: 300px;
    border: 1px solid rgba(133, 94, 72, 0.55);
    border-radius: 10px;
    padding: 0.85rem;
    display: grid;
    gap: 0.62rem;
    background:
        radial-gradient(circle at top right, rgba(225, 162, 95, 0.15), transparent 45%),
        linear-gradient(180deg, rgba(32, 18, 16, 0.96) 0%, rgba(15, 9, 8, 0.94) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 226, 187, 0.07), 0 14px 28px rgba(0, 0, 0, 0.24);
}

.home-session-card {
    border: 1px solid rgba(133, 94, 72, 0.55);
    border-radius: 10px;
    padding: 0.85rem;
    margin-bottom: 0.55rem;
    display: grid;
    gap: 0.62rem;
    background:
        radial-gradient(circle at top right, rgba(225, 162, 95, 0.14), transparent 45%),
        linear-gradient(180deg, rgba(32, 18, 16, 0.96) 0%, rgba(15, 9, 8, 0.94) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 226, 187, 0.07), 0 14px 28px rgba(0, 0, 0, 0.24);
}

.home-session-head {
    display: grid;
    gap: 0.18rem;
}

.home-session-eyebrow {
    margin: 0;
    color: #d6ba98;
    font-size: 0.66rem;
    letter-spacing: 0.11em;
    font-weight: 700;
    text-transform: uppercase;
}

.home-session-head h3 {
    margin: 0;
    color: #f7ebde;
    font-size: 1rem;
    line-height: 1.2;
}

.home-session-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.home-session-grid > div {
    border: 1px solid rgba(116, 80, 61, 0.44);
    border-radius: 7px;
    background: rgba(24, 14, 13, 0.9);
    padding: 0.45rem 0.55rem;
}

.home-session-grid span {
    display: block;
    color: #baa58f;
    font-size: 0.68rem;
}

.home-session-grid strong {
    color: #f3e8d9;
    font-size: 0.78rem;
}

.home-session-actions {
    display: grid;
    gap: 0.4rem;
}

.home-session-actions form {
    margin: 0;
}

.home-session-btn {
    border: 1px solid rgba(136, 95, 72, 0.5);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(55, 31, 27, 0.95) 0%, rgba(31, 18, 16, 0.95) 100%);
    color: #e8d3bd;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.48rem 0.7rem;
    cursor: pointer;
    text-decoration: none;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: filter 0.16s ease, transform 0.16s ease;
}

.home-session-btn:hover {
    color: #fff5e8;
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.home-session-btn-primary {
    border-color: rgba(220, 165, 96, 0.65);
    background: linear-gradient(180deg, rgba(188, 124, 70, 0.96) 0%, rgba(94, 53, 33, 0.96) 100%);
    color: #fff4e8;
}

.home-session-btn-danger {
    border-color: rgba(173, 90, 90, 0.65);
    background: linear-gradient(180deg, rgba(128, 58, 58, 0.95) 0%, rgba(74, 33, 33, 0.95) 100%);
    color: #ffe6e6;
}

.auth-launcher-eyebrow {
    margin: 0;
    color: #d6ba98;
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    font-weight: 700;
    text-transform: uppercase;
}

.auth-launcher-panel h3 {
    margin: 0;
    color: #f7ebde;
    font-size: 1.04rem;
    line-height: 1.2;
}

.auth-launcher-panel p {
    margin: 0;
    color: #cdb69d;
    font-size: 0.8rem;
    line-height: 1.45;
}

.auth-launcher-btn {
    margin-top: 0.2rem;
}

.auth-launcher-links {
    display: grid;
    gap: 0.14rem;
}

.auth-launcher-link {
    color: #f3debe;
    text-decoration: none;
    font-size: 0.8rem;
    transition: color 0.16s ease, transform 0.16s ease;
}

.auth-launcher-link:hover {
    color: #fff3e0;
    transform: translateX(2px);
}

.auth-launcher-link-button {
    width: auto;
    padding: 0;
    color: #edd8b9;
    font-size: 0.8rem;
}

.auth-launcher-link-button:hover {
    color: #fff2df;
}

.auth-launcher-points {
    margin: 0.1rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.32rem;
}

.auth-launcher-points li {
    color: #c6ae93;
    font-size: 0.75rem;
    line-height: 1.35;
    position: relative;
    padding-left: 0.78rem;
}

.auth-launcher-points li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.44rem;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d29d63;
    box-shadow: 0 0 0 2px rgba(210, 157, 99, 0.2);
}

.home-auth-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1600;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(6, 4, 4, 0.78);
    backdrop-filter: blur(6px);
}

.home-auth-modal {
    width: min(520px, 100%);
    border-radius: 14px;
    border: 1px solid rgba(181, 134, 90, 0.64);
    background:
        radial-gradient(circle at top right, rgba(226, 161, 92, 0.19), transparent 43%),
        linear-gradient(180deg, rgba(26, 16, 14, 0.98) 0%, rgba(13, 9, 9, 0.98) 100%);
    box-shadow: 0 28px 64px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 229, 196, 0.08);
    padding: 1rem;
    animation: homeAuthModalIn 0.22s ease;
}

.home-auth-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 0.6rem;
}

.home-auth-modal-eyebrow {
    margin: 0;
    color: #cdb498;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.home-auth-modal-head h3 {
    margin: 0.15rem 0 0;
    color: #f5eadc;
    font-size: 1.12rem;
    line-height: 1.2;
}

.home-auth-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(143, 101, 73, 0.68);
    background: rgba(35, 21, 19, 0.9);
    color: #f3ddc2;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: filter 0.16s ease, transform 0.16s ease;
}

.home-auth-close:hover {
    filter: brightness(1.14);
    transform: translateY(-1px);
}

.modal-login-form {
    margin-top: 0.2rem;
}

.modal-login-form .panel-login-btn {
    height: 42px;
}

.modal-login-links {
    margin-top: 0.5rem;
    display: grid;
    gap: 0.16rem;
}

.modal-login-links .auth-launcher-link {
    display: inline-block;
    width: fit-content;
}

@keyframes homeAuthModalIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.quicklink-button {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    color: #d8d6d3;
    padding: 0.2rem 0;
    cursor: pointer;
    font-size: 0.8rem;
}

.quicklink-button:hover {
    color: #fff;
}

.security-form {
    margin-top: 0.7rem;
}

.account-card {
    font-size: 0.82rem;
    color: #d9d6d0;
    display: grid;
    gap: 0.35rem;
}

.auth-page {
    min-height: 70vh;
    display: grid;
    place-items: center;
    padding: 2rem 1rem;
    background: linear-gradient(180deg, #191510 0%, #080706 100%);
}

.auth-card {
    width: min(560px, 92vw);
    border: 1px solid rgba(226, 183, 98, 0.45);
    background: rgba(22, 18, 14, 0.92);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    border-radius: 8px;
    padding: 2rem;
    color: #ece5d9;
}

.auth-card h1 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.6rem;
    color: #fff;
}

.auth-card a {
    color: #e1b76a;
    text-decoration: none;
}

.auth-card a:hover {
    text-decoration: underline;
}

.auth-input {
    margin-bottom: 0.6rem;
}

.auth-input input {
    width: 100%;
    box-sizing: border-box;
}
.control-panel {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 14px;
}

.control-sidebar {
    background: rgba(23, 14, 12, 0.9);
    border: 1px solid rgba(122, 85, 64, 0.55);
    border-radius: 6px;
    padding: 0.45rem;
    display: grid;
    gap: 0.45rem;
    align-content: start;
}

.control-menu-item {
    background: rgba(53, 30, 27, 0.9);
    color: #dcc7af;
    border: 1px solid rgba(132, 92, 70, 0.5);
    border-radius: 5px;
    text-align: left;
    padding: 0.55rem 0.7rem;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
}

.control-menu-item.active,
.control-menu-item:hover {
    background: rgba(123, 75, 50, 0.9);
    color: #fff;
}

.control-content {
    display: grid;
    gap: 12px;
}

.control-block {
    background: rgba(23, 14, 12, 0.92);
    border: 1px solid rgba(122, 85, 64, 0.55);
    border-radius: 6px;
    padding: 0.9rem;
}

.control-block h3 {
    margin: 0 0 0.65rem;
    font-size: 0.95rem;
    color: #f3e7d8;
}

.account-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.account-grid div,
.bonus-item {
    background: rgba(31, 20, 18, 0.88);
    border: 1px solid rgba(118, 83, 64, 0.4);
    border-radius: 5px;
    padding: 0.55rem 0.65rem;
}

.account-grid span,
.bonus-item span {
    display: block;
    color: #bca893;
    font-size: 0.75rem;
}

.account-grid strong,
.bonus-item strong {
    color: #f4e8d8;
    font-size: 0.82rem;
}

.bonus-list {
    display: grid;
    gap: 0.45rem;
}

.bonus-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bonus-item .bonus-on {
    color: #9de39e;
}

.bonus-item .bonus-off {
    color: #f0a7a7;
}

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

.control-table {
    width: 100%;
    border-collapse: collapse;
}

.control-table th,
.control-table td {
    border: 1px solid rgba(126, 88, 68, 0.4);
    padding: 0.5rem 0.55rem;
    color: #d9c6af;
    font-size: 0.78rem;
}

.control-table th {
    background: rgba(58, 34, 28, 0.95);
    color: #f5e6d5;
    text-align: left;
}

.security-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.security-actions .btn-small-dark {
    width: 100%;
}

.character-card {
    background: rgba(27, 14, 12, 0.95);
    border: 1px solid rgba(116, 81, 62, 0.45);
    border-radius: 6px;
    padding: 0.7rem;
    margin-bottom: 0.55rem;
}

.character-main {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 0.7rem;
}

.character-avatar-wrap {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(70, 44, 41, 0.25);
}

.character-avatar {
    width: 48px;
    border-radius: 50%;
}

.character-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.character-stat {
    background: rgba(31, 20, 18, 0.88);
    border: 1px solid rgba(118, 83, 64, 0.4);
    border-radius: 5px;
    padding: 0.45rem 0.55rem;
}

.character-stat span {
    display: block;
    color: #bca893;
    font-size: 0.72rem;
}

.character-stat strong {
    color: #f4e8d8;
    font-size: 0.82rem;
}

.character-card-empty {
    border-style: dashed;
    display: grid;
    place-items: center;
    min-height: 74px;
    color: #a58b72;
}

@media (max-width: 992px) {
    .control-panel {
        grid-template-columns: 1fr;
    }

    .security-actions,
    .account-grid,
    .character-stats {
        grid-template-columns: 1fr;
    }
}

.wrapper {
    width: 100%;
    max-width: 1920px;
}

.footer .bottom-footer {
    margin-top: 14px;
}

.home-v3-content .home-v3-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 14px;
    align-items: start;
}

.home-v3-main,
.home-v3-side {
    min-width: 0;
}

.home-v3-main {
    display: grid;
    gap: 12px;
}

.home-v3-quick-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.home-v3-quick {
    border: 1px solid rgba(130, 91, 67, 0.56);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(30, 18, 16, 0.97) 0%, rgba(14, 9, 9, 0.97) 100%);
    color: #f0dfcb;
    padding: 0.68rem 2.7rem 0.68rem 0.75rem;
    text-decoration: none;
    display: grid;
    gap: 0.2rem;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.24);
    transition: filter 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
    position: relative;
    overflow: hidden;
}

.home-v3-quick:hover {
    filter: brightness(1.04);
    border-color: rgba(196, 140, 83, 0.8);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.28);
}

.home-v3-quick strong {
    font-size: 0.82rem;
    font-family: "TrajanProBold", "Open Sans", sans-serif;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #f8ebdc;
    text-transform: uppercase;
}

.home-v3-quick span {
    color: #b79f84;
    font-size: 0.72rem;
    line-height: 1.35;
}

.home-v3-quick-primary {
    grid-column: span 2;
    border-color: rgba(188, 132, 80, 0.8);
    background: linear-gradient(180deg, rgba(48, 28, 24, 0.98) 0%, rgba(20, 12, 11, 0.98) 100%);
}

.home-v3-quick-icon {
    position: absolute;
    right: 0.78rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: rgba(205, 150, 86, 0.86);
    text-shadow: none;
    opacity: 0.9;
    pointer-events: none;
    transition: filter 0.16s ease;
}

.home-v3-quick:hover .home-v3-quick-icon {
    filter: brightness(1.08);
}

.home-v3-quick-download .home-v3-quick-icon {
    color: #d8b078;
}

.home-v3-quick-itemshop .home-v3-quick-icon {
    color: #d1a06f;
}

.home-v3-quick-support .home-v3-quick-icon {
    color: #b9d5e5;
    text-shadow: 0 0 14px rgba(85, 164, 210, 0.26);
}

.home-v3-quick-wiki .home-v3-quick-icon {
    color: #d6bf96;
}

.home-v3-media-card {
    display: block;
    border: 1px solid rgba(132, 93, 71, 0.58);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    min-height: 440px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    background: #090505;
}

.home-v3-slider-card {
    min-height: 440px;
}

.home-v3-slider-track {
    display: flex;
    min-height: 440px;
    height: 100%;
    transition: transform 0.35s ease;
}

.home-v3-slide {
    min-width: 100%;
    min-height: 440px;
    position: relative;
    background: #090505;
}

.home-v3-slide img,
.home-v3-slide .home-v3-media-video {
    width: 100%;
    height: 100%;
    min-height: 440px;
    object-fit: cover;
    display: block;
    background: #090505;
}

.home-v3-slide img {
    filter: saturate(0.95) brightness(0.82);
}

.home-v3-media-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    gap: 0.25rem;
    padding: 1rem 1rem;
    background: linear-gradient(180deg, rgba(8, 5, 5, 0) 0%, rgba(12, 8, 8, 0.9) 42%, rgba(10, 7, 7, 0.98) 100%);
    z-index: 3;
}

.home-v3-media-overlay strong {
    color: #f8eddc;
    font-size: 0.98rem;
    font-family: "TrajanProBold", "Open Sans", sans-serif;
}

.home-v3-media-overlay span {
    color: #ccb49a;
    font-size: 0.82rem;
}

.home-v3-slide-video .home-v3-media-overlay {
    left: 1rem;
    top: 1rem;
    right: auto;
    bottom: auto;
    width: min(420px, calc(100% - 2rem));
    border: 1px solid rgba(126, 87, 66, 0.5);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(17, 11, 10, 0.9) 0%, rgba(10, 6, 6, 0.9) 100%);
}

.home-v3-slide-actions {
    margin-top: 0.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.home-v3-slide-actions a {
    border: 1px solid rgba(216, 159, 90, 0.6);
    border-radius: 3px;
    background: linear-gradient(180deg, rgba(201, 132, 75, 0.93) 0%, rgba(92, 52, 34, 0.93) 100%);
    color: #fff4e4;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    padding: 0.32rem 0.62rem;
    transition: filter 0.16s ease;
}

.home-v3-slide-actions a:hover {
    filter: brightness(1.08);
}

.home-v3-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border-radius: 3px;
    border: 1px solid rgba(170, 124, 86, 0.58);
    background: rgba(15, 10, 10, 0.72);
    color: #f3ddc5;
    font-size: 1.25rem;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: filter 0.16s ease;
    z-index: 4;
}

.home-v3-slider-arrow.prev {
    left: 0.7rem;
}

.home-v3-slider-arrow.next {
    right: 0.7rem;
}

.home-v3-slider-arrow:hover {
    filter: brightness(1.12);
}

.home-v3-slider-arrow:active {
    filter: brightness(0.94);
}

.home-v3-slider-dots {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    display: flex;
    gap: 0.4rem;
    z-index: 4;
}

.home-v3-slider-dot {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    border: 1px solid rgba(211, 154, 87, 0.64);
    background: rgba(36, 22, 20, 0.86);
    cursor: pointer;
    transition: transform 0.16s ease, background-color 0.16s ease;
}

.home-v3-slider-dot.active {
    background: #dfa55f;
    transform: none;
}

.home-v3-panel {
    border: 1px solid rgba(131, 92, 70, 0.6);
    border-radius: 10px;
    background:
        radial-gradient(circle at top right, rgba(183, 126, 71, 0.12), transparent 44%),
        linear-gradient(180deg, rgba(24, 15, 14, 0.95) 0%, rgba(15, 10, 9, 0.95) 100%);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.27);
}

.home-v3-panel-head {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid rgba(87, 58, 46, 0.58);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.7rem;
}

.home-v3-panel-title {
    color: #f5e9da;
    font-family: "TrajanProBold", "Open Sans", sans-serif;
    font-size: 0.93rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.home-v3-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.home-v3-tab {
    border: 1px solid rgba(132, 90, 68, 0.52);
    background: linear-gradient(180deg, rgba(45, 26, 23, 0.94) 0%, rgba(27, 16, 15, 0.94) 100%);
    color: #d9c3ac;
    border-radius: 8px;
    font-size: 0.73rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.38rem 0.62rem;
    cursor: pointer;
    transition: filter 0.16s ease, border-color 0.16s ease;
}

.home-v3-tab:hover {
    filter: brightness(1.07);
}

.home-v3-tab.active {
    border-color: rgba(220, 164, 95, 0.67);
    background: linear-gradient(180deg, rgba(171, 111, 66, 0.95) 0%, rgba(88, 50, 32, 0.95) 100%);
    color: #fff4e6;
}

.home-v3-panel-body {
    padding: 0.8rem;
}

.home-v3-overview {
    border: 1px solid rgba(111, 76, 58, 0.46);
    border-radius: 8px;
    background: rgba(21, 13, 12, 0.88);
    padding: 0.65rem 0.75rem;
    display: grid;
    gap: 0.45rem;
}

.home-v3-overview p {
    margin: 0;
    color: #c9b39c;
    font-size: 0.82rem;
    line-height: 1.55;
}

.home-v3-empty {
    border: 1px dashed rgba(121, 84, 64, 0.5);
    border-radius: 8px;
    background: rgba(18, 11, 10, 0.82);
    color: #bea78d;
    padding: 0.8rem;
    font-size: 0.82rem;
}

.home-v3-character-list {
    display: grid;
    gap: 0.45rem;
}

.home-v3-control-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

.home-v3-control-card {
    border: 1px solid rgba(120, 82, 62, 0.5);
    border-radius: 8px;
    background: rgba(22, 14, 13, 0.9);
    padding: 0.65rem;
}

.home-v3-control-card h3 {
    margin: 0 0 0.5rem;
    color: #f2e6d7;
    font-size: 0.88rem;
}

.home-v3-kv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.home-v3-kv-grid div {
    border: 1px solid rgba(112, 76, 58, 0.42);
    border-radius: 7px;
    background: rgba(17, 11, 10, 0.88);
    padding: 0.45rem 0.55rem;
}

.home-v3-kv-grid span {
    display: block;
    color: #b59f8a;
    font-size: 0.69rem;
}

.home-v3-kv-grid strong {
    color: #f2e6d7;
    font-size: 0.78rem;
}

.home-v3-control-actions {
    display: grid;
    gap: 0.4rem;
}

.home-v3-inline-btn {
    border: 1px solid rgba(133, 93, 71, 0.5);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(50, 29, 25, 0.95) 0%, rgba(29, 17, 15, 0.95) 100%);
    color: #e8d2bc;
    font-size: 0.74rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 0.45rem 0.6rem;
    transition: filter 0.16s ease;
}

.home-v3-inline-btn:hover {
    filter: brightness(1.08);
    color: #fff3e4;
}

.home-v3-inline-btn.primary {
    border-color: rgba(219, 162, 94, 0.66);
    background: linear-gradient(180deg, rgba(186, 122, 69, 0.95) 0%, rgba(90, 51, 32, 0.95) 100%);
    color: #fff4e7;
}

.home-v3-side {
    display: grid;
    gap: 8px;
}

.home-v3-auth-card {
    border: 1px solid rgba(133, 94, 72, 0.55);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(27, 16, 15, 0.96) 0%, rgba(14, 9, 8, 0.96) 100%);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.home-v3-auth-head {
    border-bottom: 1px solid rgba(102, 69, 53, 0.58);
    padding: 0.6rem 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.home-v3-auth-head h3 {
    margin: 0;
    color: #f5e8d9;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.home-v3-auth-head a {
    color: #e3c29b;
    text-transform: uppercase;
    font-size: 0.72rem;
    text-decoration: none;
    font-weight: 700;
}

.home-v3-auth-head a:hover {
    color: #fff0dc;
}

.home-v3-auth-card .auth-launcher-panel {
    border: 0;
    border-radius: 0;
    min-height: 0;
    box-shadow: none;
}

.home-v3-promo-card {
    border: 1px solid rgba(210, 156, 91, 0.68);
    border-radius: 4px;
    background:
        radial-gradient(circle at top right, rgba(255, 211, 150, 0.22), transparent 52%),
        linear-gradient(180deg, rgba(181, 120, 67, 0.96) 0%, rgba(109, 65, 39, 0.96) 100%);
    color: #2f170e;
    text-decoration: none;
    padding: 0.82rem;
    display: grid;
    gap: 0.2rem;
    box-shadow: inset 0 1px 0 rgba(255, 236, 205, 0.4), 0 8px 18px rgba(0, 0, 0, 0.28);
}

.home-v3-promo-card strong {
    font-size: 0.96rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.home-v3-promo-card span {
    font-size: 0.78rem;
    color: #502716;
}

.home-v3-rank-card {
    border: 1px solid rgba(132, 92, 70, 0.58);
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(27, 16, 15, 0.96) 0%, rgba(14, 9, 8, 0.96) 100%);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.home-v3-rank-head {
    border-bottom: 1px solid rgba(98, 66, 51, 0.58);
    padding: 0.62rem 0.75rem;
    display: grid;
    gap: 0.45rem;
}

.home-v3-rank-head h3 {
    margin: 0;
    color: #f4e8d9;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.home-v3-rank-toggle {
    display: flex;
    gap: 0.3rem;
}

.home-v3-rank-btn {
    flex: 1 1 0;
    border: 1px solid rgba(130, 89, 67, 0.5);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(45, 26, 23, 0.94) 0%, rgba(27, 16, 15, 0.94) 100%);
    color: #d9c3ac;
    font-size: 0.71rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.36rem 0.5rem;
    cursor: pointer;
}

.home-v3-rank-btn.active {
    border-color: rgba(220, 164, 95, 0.67);
    background: linear-gradient(180deg, rgba(171, 111, 66, 0.95) 0%, rgba(88, 50, 32, 0.95) 100%);
    color: #fff4e6;
}

.home-v3-rank-list {
    display: none;
}

.home-v3-rank-list.active {
    display: block;
}

.home-v3-rank-row {
    display: grid;
    grid-template-columns: 38px 1fr 88px 64px;
    gap: 0.32rem;
    padding: 0.42rem 0.65rem;
    border-top: 1px solid rgba(61, 40, 33, 0.52);
    color: #dcc5ad;
    font-size: 0.74rem;
}

.home-v3-rank-row:nth-child(even) {
    background: rgba(20, 12, 11, 0.72);
}

.home-v3-rank-row.head {
    border-top: 0;
    background: rgba(50, 29, 25, 0.92);
    color: #f3e5d5;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.home-v3-rank-row span:last-child {
    text-align: right;
}

.pixarts-site-content:not(.page-shell) .pixarts-container {
    width: calc(100% - 2rem);
    max-width: none;
}

.pixarts-site-content:not(.page-shell) .pixarts-container.relative {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.pixarts-site-content:not(.page-shell) .c-left-side {
    width: calc(100% - 352px);
    min-width: 0;
    margin-bottom: 36px;
}

.pixarts-site-content:not(.page-shell) .c-left-side:after {
    display: none;
}

.pixarts-site-content:not(.page-shell) .c-right-side {
    width: 340px;
    min-width: 340px;
    margin-left: 0;
}

.pixarts-site-content:not(.page-shell) .btns-slider-row {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 5px;
}

.pixarts-site-content:not(.page-shell) .media-box {
    width: 100%;
    min-width: 0;
    max-width: none;
}

.pixarts-site-content:not(.page-shell) .news-row {
    width: 100%;
    max-width: none;
}

.pixarts-site-content:not(.page-shell) .news-row .inner-holder {
    width: 100%;
}

/* Restore original fixed centered template shell on homepage. */
.wrapper.template-home {
    width: 1920px;
    max-width: none;
    margin: 0 auto;
}

.template-home .pixarts-site-content:not(.page-shell) .pixarts-container {
    width: 1260px;
    max-width: 1260px;
}

.template-home .pixarts-site-content:not(.page-shell) .pixarts-container.relative {
    gap: 0;
}

.template-home .pixarts-site-content:not(.page-shell) .c-left-side {
    width: 915px;
    min-width: 915px;
    margin-bottom: 100px;
}

.template-home .pixarts-site-content:not(.page-shell) .c-left-side:after {
    display: block;
}

.template-home .pixarts-site-content:not(.page-shell) .c-right-side {
    width: 340px;
    min-width: 340px;
    margin-left: auto;
}

.template-home .pixarts-site-content:not(.page-shell) .btns-slider-row {
    display: flex;
}

.template-home .pixarts-site-content:not(.page-shell) .media-box {
    width: 610px;
    min-width: 610px;
    max-width: 610px;
}

.template-home .pixarts-site-content:not(.page-shell) .news-row {
    width: 913px;
    max-width: 915px;
}

.template-home .pixarts-site-content:not(.page-shell) .news-row .inner-holder {
    width: 911px;
}

.page-header {
    min-width: 0;
    height: 460px;
    overflow: hidden;
}

.page-header .pixarts-header-video {
    top: -70px;
    opacity: 0.45;
}

.page-header-content {
    position: relative;
    z-index: 2;
}

.page-hero-banner {
    margin: 120px auto 0;
    width: min(980px, calc(100% - 2rem));
    text-align: center;
    background: rgba(15, 10, 9, 0.68);
    border: 1px solid rgba(179, 136, 92, 0.45);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
    border-radius: 10px;
    padding: 1.2rem 1.4rem;
}

.page-hero-banner h1 {
    margin: 0;
    color: #f3e9dd;
    font-size: clamp(1.35rem, 2.6vw, 2.2rem);
    font-family: "TrajanProBold", "Open Sans", sans-serif;
    letter-spacing: 0.02em;
}

.page-hero-banner p {
    margin-top: 0.5rem;
    color: #d2c3b3;
    font-size: 0.95rem;
}

.page-shell {
    margin-top: -50px;
    padding-bottom: 130px;
}

.page-shell .pixarts-container {
    width: min(1260px, calc(100% - 2rem));
    padding-top: 0;
}

.page-shell.page-shell-wide .pixarts-container {
    width: min(1540px, calc(100% - 1.4rem));
}

.inner-page-card {
    width: 100%;
    border: 1px solid rgba(130, 92, 70, 0.65);
    border-radius: 10px;
    background: rgba(20, 13, 12, 0.92);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.35);
    padding: 1.1rem;
}

.itemshop-shell {
    display: grid;
    gap: 1rem;
}

.itemshop-topbar-card,
.itemshop-showcase-card,
.itemshop-buy-panel {
    position: relative;
    overflow: hidden;
}

.itemshop-topbar-card {
    display: grid;
    gap: 1rem;
    background:
        linear-gradient(180deg, rgba(61, 31, 18, 0.96) 0%, rgba(29, 14, 11, 0.98) 100%),
        radial-gradient(circle at top right, rgba(214, 163, 101, 0.16), transparent 32%);
}

.itemshop-topbar-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.itemshop-topbar-head h2,
.itemshop-selection-content h2,
.itemshop-buy-panel-body h3 {
    margin: 0;
    color: #f8e8d1;
}

.itemshop-topbar-wallet {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.75rem;
}

.itemshop-topbar-wallet div,
.itemshop-buy-info-grid div {
    border: 1px solid rgba(127, 88, 64, 0.46);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(56, 34, 29, 0.82) 0%, rgba(25, 16, 14, 0.92) 100%);
    padding: 0.85rem 0.95rem;
}

.itemshop-topbar-wallet span,
.itemshop-buy-info-grid span,
.itemshop-buy-price-box span,
.itemshop-buy-wallet-note span {
    display: block;
    color: #c6a27f;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.itemshop-topbar-wallet strong,
.itemshop-buy-info-grid strong,
.itemshop-buy-wallet-note strong {
    display: block;
    margin-top: 0.3rem;
    color: #fff0db;
}

.itemshop-login-form.topbar {
    grid-template-columns: minmax(170px, 220px) minmax(170px, 220px) auto;
}

.itemshop-hero-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1.15fr) minmax(320px, 1fr);
    gap: 1rem;
}

.itemshop-hero-card {
    min-height: 100%;
}

.itemshop-wallet-head,
.itemshop-section-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.itemshop-wallet-head.compact {
    margin-bottom: 1rem;
}

.itemshop-eyebrow {
    margin: 0 0 0.35rem;
    color: #d9a970;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.itemshop-wallet-head h2,
.itemshop-section-head h2,
.itemshop-overview-card h2,
.itemshop-status-card h2,
.itemshop-empty-state h3 {
    margin: 0;
    color: #f3e7d8;
}

.itemshop-muted,
.itemshop-card-body p {
    color: #c8b7a5;
}

.itemshop-inline-link {
    color: #f5d4a8;
    font-size: 0.9rem;
    text-decoration: none;
}

.itemshop-inline-link:hover {
    color: #fff0db;
}

.itemshop-hero-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    justify-content: flex-end;
}

.itemshop-wallet-grid,
.itemshop-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.85rem;
    margin-top: 1.1rem;
}

.itemshop-wallet-grid div,
.itemshop-stat-grid div {
    border: 1px solid rgba(127, 88, 64, 0.46);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(56, 34, 29, 0.82) 0%, rgba(25, 16, 14, 0.92) 100%);
    padding: 0.9rem 1rem;
}

.itemshop-wallet-grid span,
.itemshop-stat-grid span {
    display: block;
    color: #b89e86;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.itemshop-wallet-grid strong,
.itemshop-stat-grid strong {
    display: block;
    margin-top: 0.3rem;
    color: #fff0db;
    font-size: 1.15rem;
}

.itemshop-login-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.7rem;
}

.itemshop-login-form input {
    border: 1px solid rgba(130, 93, 70, 0.65);
    border-radius: 9px;
    background: rgba(13, 9, 8, 0.86);
    color: #f1e4d5;
    padding: 0.8rem 0.9rem;
}

.itemshop-login-form button,
.itemshop-toolbar-btn,
.itemshop-category-btn {
    border: 1px solid rgba(170, 122, 81, 0.62);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(97, 59, 41, 0.95) 0%, rgba(54, 31, 23, 0.98) 100%);
    color: #fff0dc;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.itemshop-login-form button,
.itemshop-toolbar-btn {
    padding: 0.8rem 1rem;
    font-weight: 700;
}

.itemshop-login-form button:hover,
.itemshop-toolbar-btn:hover,
.itemshop-category-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(233, 182, 120, 0.85);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.itemshop-toolbar-btn.primary,
.itemshop-category-btn.active {
    background: linear-gradient(180deg, rgba(189, 127, 73, 0.95) 0%, rgba(106, 60, 36, 0.98) 100%);
}

.itemshop-toolbar-card {
    display: grid;
    gap: 0.9rem;
}

.itemshop-filter-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto auto;
    gap: 0.8rem;
    align-items: center;
}

.itemshop-filter-grid.legacy {
    grid-template-columns: minmax(260px, 1fr) auto;
}

.itemshop-search-input {
    margin: 0;
}

.itemshop-category-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.itemshop-category-strip.legacy {
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 0.15rem;
}

.itemshop-category-home {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(170, 122, 81, 0.62);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(210, 152, 74, 0.95) 0%, rgba(126, 77, 28, 0.98) 100%);
    color: #2a130b;
    font-size: 1.1rem;
    font-weight: 900;
    cursor: pointer;
}

.itemshop-category-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.95rem;
    white-space: nowrap;
}

.itemshop-category-strip.legacy .itemshop-category-btn {
    flex: 0 0 auto;
    border-radius: 0;
    padding: 0.75rem 1rem;
}

.itemshop-category-btn span {
    color: #f7eadb;
}

.itemshop-category-btn .icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1rem;
    font-size: 0.95rem;
    color: #f0c793;
}

.itemshop-category-btn strong {
    color: #d7b18d;
    font-size: 0.82rem;
}

.itemshop-section-block {
    display: grid;
    gap: 0.9rem;
}

.itemshop-section-head span {
    color: #c7a785;
    font-size: 0.88rem;
}

.itemshop-featured-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
}

.itemshop-catalog-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.itemshop-card {
    border: 1px solid rgba(117, 81, 61, 0.48);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(47, 28, 24, 0.96) 0%, rgba(19, 12, 11, 0.98) 100%);
    overflow: hidden;
    min-width: 0;
}

.itemshop-card.selectable {
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.itemshop-card.selectable:hover,
.itemshop-card.selectable.selected {
    transform: translateY(-2px);
    border-color: rgba(233, 182, 120, 0.85);
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
}

.itemshop-card.featured {
    box-shadow: 0 18px 36px rgba(0, 0, 0, 0.22);
}

.itemshop-card-media {
    position: relative;
    min-height: 184px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background:
        radial-gradient(circle at top, rgba(214, 164, 104, 0.18), transparent 42%),
        linear-gradient(180deg, rgba(36, 23, 22, 0.98) 0%, rgba(19, 12, 11, 1) 100%);
}

.itemshop-card-media.compact {
    min-height: 148px;
}

.itemshop-card-media img {
    max-width: 100%;
    max-height: 132px;
    object-fit: contain;
    image-rendering: auto;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));
}

.itemshop-card-fallback {
    width: 88px;
    height: 88px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff0dd;
    background: linear-gradient(180deg, rgba(196, 138, 83, 0.92) 0%, rgba(90, 52, 32, 0.98) 100%);
}

.itemshop-card-fallback.large {
    width: 132px;
    height: 132px;
    font-size: 2rem;
}

.itemshop-badge {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    border-radius: 999px;
    padding: 0.28rem 0.58rem;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.itemshop-badge.sale {
    background: #d3473f;
    color: #fff5f4;
}

.itemshop-badge.new {
    background: #6d9e35;
    color: #f6ffe8;
}

.itemshop-card-body {
    padding: 0.95rem 1rem 1rem;
}

.itemshop-card-body.compact {
    padding-top: 0.85rem;
}

.itemshop-card-category {
    margin: 0;
    color: #d09e6e;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.itemshop-card-body h3 {
    margin: 0.35rem 0 0.45rem;
    color: #f7eadb;
    font-size: 1rem;
}

.itemshop-card-body p {
    margin: 0;
    min-height: 2.8rem;
    font-size: 0.88rem;
    line-height: 1.45;
}

.itemshop-card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
    margin-top: 0.9rem;
}

.itemshop-card-actions.compact {
    margin-top: 0.75rem;
}

.itemshop-card-btn,
.itemshop-buy-now-btn {
    border: 1px solid rgba(170, 122, 81, 0.62);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(189, 127, 73, 0.95) 0%, rgba(106, 60, 36, 0.98) 100%);
    color: #fff0dc;
    cursor: pointer;
    font-weight: 700;
    padding: 0.72rem 0.9rem;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.itemshop-card-btn.alt {
    background: linear-gradient(180deg, rgba(78, 48, 36, 0.95) 0%, rgba(43, 26, 21, 0.98) 100%);
}

.itemshop-card-btn:hover:not(:disabled),
.itemshop-buy-now-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    border-color: rgba(233, 182, 120, 0.85);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.itemshop-card-btn:disabled,
.itemshop-buy-now-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.itemshop-price-row {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    margin-top: 0.9rem;
}

.itemshop-price-row strong {
    color: #ffe7c1;
    font-size: 1.02rem;
}

.itemshop-price-row span {
    color: #9f8974;
    text-decoration: line-through;
}

.itemshop-empty-state {
    text-align: center;
    padding: 2rem 1rem;
}

.itemshop-stage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(280px, 0.9fr);
    gap: 1rem;
}

.itemshop-selection-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.itemshop-selection-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    color: #d8b088;
    font-size: 0.84rem;
}

.itemshop-selection-breadcrumb a,
.itemshop-selection-breadcrumb button {
    color: inherit;
    text-decoration: none;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.itemshop-selection-breadcrumb strong {
    color: #fff0db;
}

.itemshop-selection-layout {
    display: grid;
    grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.1fr);
    gap: 1rem;
    align-items: stretch;
}

.itemshop-selection-media {
    min-height: 300px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(117, 81, 61, 0.48);
    border-radius: 14px;
    background:
        radial-gradient(circle at center, rgba(221, 170, 103, 0.18), transparent 38%),
        linear-gradient(180deg, rgba(16, 11, 10, 1) 0%, rgba(7, 5, 5, 1) 100%);
    padding: 1.5rem;
}

.itemshop-selection-media img {
    max-width: 100%;
    max-height: 240px;
    object-fit: contain;
    filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.35));
}

.itemshop-selection-content {
    display: grid;
    gap: 0.9rem;
}

.itemshop-selection-title-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
}

.itemshop-selection-description {
    margin: 0;
    color: #dfcfbd;
    line-height: 1.6;
}

.itemshop-selection-meta {
    display: grid;
    gap: 0.55rem;
}

.itemshop-selection-meta span {
    display: block;
    border-left: 3px solid rgba(215, 168, 108, 0.7);
    padding-left: 0.75rem;
    color: #ceb7a1;
}

.itemshop-buy-panel {
    display: grid;
    grid-template-rows: 170px auto;
    background: linear-gradient(180deg, rgba(58, 32, 18, 0.96) 0%, rgba(22, 12, 10, 0.98) 100%);
}

.itemshop-buy-panel-art {
    background:
        linear-gradient(180deg, rgba(18, 11, 10, 0.2), rgba(18, 11, 10, 0.84)),
        radial-gradient(circle at top right, rgba(255, 238, 190, 0.18), transparent 32%),
        url('/img/bg4.png') center/cover no-repeat;
}

.itemshop-buy-panel-body {
    display: grid;
    gap: 0.95rem;
    padding: 1.15rem;
}

.itemshop-buy-price-box {
    border: 1px solid rgba(127, 88, 64, 0.46);
    border-radius: 14px;
    background: rgba(17, 10, 8, 0.84);
    padding: 1rem;
}

.itemshop-buy-price-box strong {
    display: block;
    margin-top: 0.4rem;
    color: #ffe5bf;
    font-size: 1.55rem;
}

.itemshop-buy-price-box small {
    display: block;
    margin-top: 0.3rem;
    color: #a99480;
    text-decoration: line-through;
}

.itemshop-buy-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.itemshop-buy-now-btn {
    width: 100%;
    font-size: 1rem;
}

.itemshop-buy-wallet-note {
    border-top: 1px solid rgba(127, 88, 64, 0.32);
    padding-top: 0.9rem;
}

.itemshop-currency-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 32px;
    border-radius: 999px;
    padding: 0 0.85rem;
    color: #26140c;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: linear-gradient(180deg, rgba(255, 207, 117, 1) 0%, rgba(204, 135, 52, 1) 100%);
}

.itemshop-currency-badge.marks {
    background: linear-gradient(180deg, rgba(229, 226, 220, 1) 0%, rgba(143, 146, 152, 1) 100%);
}

.itemshop-legacy-warning {
    border: 1px solid rgba(170, 92, 70, 0.52);
    border-radius: 12px;
    background: rgba(52, 22, 17, 0.72);
    padding: 0.95rem 1rem;
}

.itemshop-legacy-warning strong {
    color: #ffd7bc;
}

.itemshop-legacy-warning p {
    margin: 0.45rem 0 0;
    min-height: 0;
}

.itemshop-status-card.inline {
    padding: 0.95rem 1rem;
}

.itemshop-account-shell {
    display: grid;
    gap: 1rem;
}

.itemshop-account-layout {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 1rem;
}

.itemshop-account-nav-card,
.itemshop-account-panel,
.itemshop-account-auth-card {
    min-height: 100%;
}

.itemshop-account-content {
    display: grid;
    gap: 1rem;
}

.itemshop-account-nav {
    display: grid;
    gap: 0.65rem;
    margin-top: 1.25rem;
}

.itemshop-account-link {
    display: block;
    border: 1px solid rgba(127, 88, 64, 0.46);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(56, 34, 29, 0.82) 0%, rgba(25, 16, 14, 0.92) 100%);
    color: #f7eadb;
    padding: 0.85rem 1rem;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.itemshop-account-link:hover,
.itemshop-account-link.active {
    transform: translateY(-1px);
    border-color: rgba(233, 182, 120, 0.85);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
}

.compact-grid {
    margin-top: 1rem;
}

.itemshop-data-table-wrap {
    overflow-x: auto;
}

.itemshop-data-table {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
}

.itemshop-data-table th,
.itemshop-data-table td {
    padding: 0.95rem 0.75rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid rgba(127, 88, 64, 0.32);
}

.itemshop-data-table th {
    color: #c6a27f;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.itemshop-depot-item-cell {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.itemshop-depot-item-cell img {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    object-fit: contain;
    background: rgba(13, 9, 8, 0.7);
    padding: 0.35rem;
}

.itemshop-depot-item-cell strong {
    display: block;
    color: #f7eadb;
}

.itemshop-depot-item-cell p {
    margin: 0.35rem 0 0;
    min-height: 0;
    font-size: 0.82rem;
}

.itemshop-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.itemshop-pill.success {
    background: rgba(71, 129, 74, 0.32);
    color: #d9ffd7;
}

.itemshop-pill.muted {
    background: rgba(86, 71, 61, 0.36);
    color: #e3d3c1;
}

.itemshop-pagination-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
    margin-top: 1rem;
}

.itemshop-redeem-form {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    gap: 0.8rem;
    align-items: center;
}

.itemshop-redeem-form input {
    border: 1px solid rgba(130, 93, 70, 0.65);
    border-radius: 9px;
    background: rgba(13, 9, 8, 0.86);
    color: #f1e4d5;
    padding: 0.8rem 0.9rem;
}

@media (max-width: 1280px) {
    .itemshop-topbar-wallet,
    .itemshop-featured-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .itemshop-stage-grid,
    .itemshop-selection-layout {
        grid-template-columns: 1fr;
    }

    .itemshop-catalog-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .itemshop-topbar-head,
    .itemshop-selection-title-row,
    .itemshop-wallet-head,
    .itemshop-section-head {
        flex-direction: column;
    }

    .itemshop-topbar-wallet,
    .itemshop-buy-info-grid,
    .itemshop-account-layout,
    .itemshop-hero-grid,
    .itemshop-featured-grid,
    .itemshop-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .itemshop-filter-grid,
    .itemshop-filter-grid.legacy,
    .itemshop-login-form,
    .itemshop-login-form.topbar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .itemshop-account-layout,
    .itemshop-hero-grid,
    .itemshop-featured-grid,
    .itemshop-catalog-grid,
    .itemshop-topbar-wallet,
    .itemshop-buy-info-grid,
    .itemshop-wallet-grid,
    .itemshop-stat-grid {
        grid-template-columns: 1fr;
    }

    .itemshop-hero-links,
    .itemshop-wallet-head,
    .itemshop-section-head {
        flex-direction: column;
    }

    .itemshop-pagination-row {
        justify-content: flex-start;
    }

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

    .itemshop-card-actions {
        grid-template-columns: 1fr;
    }
}

.content-stack {
    display: grid;
    gap: 0.95rem;
}

.feature-grid {
    display: grid;
    gap: 0.95rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feature-card {
    border: 1px solid rgba(122, 85, 64, 0.55);
    border-radius: 8px;
    background: rgba(23, 14, 12, 0.94);
    padding: 1rem;
}

.feature-card h2 {
    margin: 0 0 0.6rem;
    color: #f2e6d8;
    font-size: 1rem;
}

.feature-card p {
    color: #d0bea8;
    line-height: 1.55;
}

.list-clean {
    margin: 0;
    padding-left: 1rem;
    color: #d9c6af;
    display: grid;
    gap: 0.35rem;
    list-style: disc;
}

.list-clean li::marker {
    color: #dfb076;
}

.list-numbered {
    list-style: decimal;
}

.cta-row {
    margin-top: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.cta-row .btn-small-dark,
.cta-row .btn-small-dark.gold {
    border: 0;
}

.download-page-card {
    background:
        radial-gradient(circle at top right, rgba(210, 150, 83, 0.16), transparent 48%),
        rgba(17, 11, 10, 0.94);
}

.download-shell {
    display: grid;
    gap: 0.95rem;
}

.download-hero {
    border: 1px solid rgba(132, 93, 70, 0.58);
    border-radius: 10px;
    background:
        radial-gradient(circle at top right, rgba(220, 160, 90, 0.13), transparent 45%),
        linear-gradient(180deg, rgba(32, 19, 17, 0.95) 0%, rgba(18, 11, 10, 0.95) 100%);
    padding: 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
    gap: 0.85rem;
}

.download-eyebrow {
    margin: 0 0 0.3rem;
    color: #d7bc98;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    font-weight: 700;
    text-transform: uppercase;
}

.download-hero-copy h2 {
    margin: 0 0 0.55rem;
    color: #f6ebdf;
    font-size: clamp(1.12rem, 2vw, 1.56rem);
    line-height: 1.3;
}

.download-hero-copy p {
    margin: 0;
    color: #c9b49b;
    line-height: 1.6;
}

.download-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.download-stat {
    border: 1px solid rgba(122, 85, 64, 0.52);
    border-radius: 8px;
    background: rgba(20, 12, 11, 0.9);
    padding: 0.65rem;
}

.download-stat span {
    display: block;
    color: #bda78e;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.download-stat strong {
    color: #f3e8d9;
    font-size: 0.88rem;
}

.download-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 1.2fr repeat(2, minmax(0, 1fr));
}

.download-bottom-grid {
    display: grid;
    gap: 0.85rem;
    grid-template-columns: 1.2fr 1fr;
}

.download-card {
    border: 1px solid rgba(124, 87, 67, 0.54);
    border-radius: 10px;
    background: rgba(21, 13, 12, 0.94);
    padding: 0.95rem;
    display: grid;
    gap: 0.6rem;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.23);
}

.download-card-primary {
    border-color: rgba(216, 159, 91, 0.62);
    background:
        radial-gradient(circle at top right, rgba(219, 159, 88, 0.15), transparent 44%),
        rgba(23, 14, 13, 0.95);
}

.download-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.download-card h3 {
    margin: 0;
    color: #f3e7d8;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.download-card h3 .mud-icon-root {
    color: #d7a46a;
    font-size: 1.1rem;
}

.download-card p {
    margin: 0;
    color: #cdb8a0;
    line-height: 1.55;
}

.download-badge {
    border: 1px solid rgba(216, 160, 91, 0.6);
    border-radius: 999px;
    background: rgba(71, 41, 27, 0.78);
    color: #f7e6d0;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
}

.download-card .list-clean {
    margin-top: 0.15rem;
}

.download-actions {
    margin-top: 0.1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.download-btn {
    border: 1px solid rgba(126, 88, 66, 0.6);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(56, 33, 28, 0.95) 0%, rgba(31, 18, 16, 0.95) 100%);
    color: #e8d3bc;
    text-decoration: none;
    font-size: 0.77rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 0.7rem;
    transition: filter 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}

.download-btn.primary {
    border-color: rgba(218, 161, 92, 0.66);
    background: linear-gradient(180deg, rgba(194, 126, 72, 0.96) 0%, rgba(91, 51, 32, 0.96) 100%);
    color: #fff4e3;
}

.download-btn .mud-icon-root {
    font-size: 1rem;
}

.download-btn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.download-step-list {
    margin: 0;
    padding-left: 1.05rem;
    color: #dac6af;
    display: grid;
    gap: 0.45rem;
}

.download-step-list li::marker {
    color: #dfb177;
    font-weight: 700;
}

.download-step-list code {
    font-family: Consolas, "Courier New", monospace;
    color: #f3e7d5;
    background: rgba(32, 21, 19, 0.8);
    border: 1px solid rgba(119, 82, 63, 0.45);
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
}

.download-req-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.download-req-grid > div {
    border: 1px solid rgba(117, 80, 61, 0.45);
    border-radius: 8px;
    background: rgba(18, 11, 10, 0.9);
    padding: 0.55rem 0.62rem;
}

.download-req-grid span {
    display: block;
    color: #bca68d;
    font-size: 0.68rem;
}

.download-req-grid strong {
    color: #f4e8d8;
    font-size: 0.82rem;
}

.rankings-page-card {
    background:
        radial-gradient(circle at top right, rgba(211, 151, 82, 0.14), transparent 46%),
        rgba(18, 12, 11, 0.94);
}

.rankings-shell {
    gap: 0.85rem;
}

.rankings-panels {
    display: grid;
    gap: 0.85rem;
}

.rankings-panel {
    transition: opacity 0.22s ease, transform 0.22s ease, max-height 0.22s ease, padding 0.22s ease, margin 0.22s ease, border-width 0.22s ease;
    max-height: 2200px;
    opacity: 1;
    transform: translateY(0);
}

.rankings-panel.inactive {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
}

.rankings-toolbar {
    display: grid;
    gap: 0.75rem;
}

.rankings-tab-row {
    display: inline-flex;
    gap: 0.45rem;
}

.rankings-tab-btn {
    border: 1px solid rgba(126, 88, 67, 0.56);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(52, 30, 26, 0.95) 0%, rgba(27, 16, 14, 0.95) 100%);
    color: #dbc6ad;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    transition: filter 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}

.rankings-tab-btn.active,
.rankings-tab-btn:hover {
    border-color: rgba(218, 162, 93, 0.66);
    background: linear-gradient(180deg, rgba(190, 124, 70, 0.96) 0%, rgba(91, 51, 32, 0.96) 100%);
    color: #fff4e3;
}

.rankings-filter-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 170px 130px auto auto;
    gap: 0.55rem;
    align-items: center;
}

.rankings-input {
    width: 100%;
    box-sizing: border-box;
    height: 38px;
    border: 1px solid rgba(126, 88, 67, 0.56);
    border-radius: 7px;
    background: rgba(20, 12, 11, 0.95);
    color: #ebd8c4;
    padding: 0 0.65rem;
    font-size: 0.81rem;
}

.rankings-input:focus {
    outline: 1px solid rgba(221, 173, 109, 0.68);
}

.rankings-search {
    min-width: 0;
}

.rankings-btn {
    border: 1px solid rgba(126, 88, 67, 0.58);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(54, 31, 27, 0.95) 0%, rgba(31, 18, 16, 0.95) 100%);
    color: #e8d4bd;
    font-size: 0.76rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 700;
    height: 38px;
    padding: 0 0.75rem;
    cursor: pointer;
    transition: filter 0.16s ease, transform 0.16s ease, border-color 0.16s ease;
}

.rankings-btn:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.rankings-btn:disabled {
    cursor: not-allowed;
    opacity: 0.52;
    transform: none;
}

.rankings-btn-primary {
    border-color: rgba(219, 163, 94, 0.66);
    background: linear-gradient(180deg, rgba(192, 125, 71, 0.96) 0%, rgba(93, 53, 33, 0.96) 100%);
    color: #fff4e2;
}

.rankings-table-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

.rankings-table-head h2 {
    margin: 0;
}

.rankings-table-head p {
    margin: 0;
    color: #c7b198;
    font-size: 0.81rem;
}

.rankings-sort-btn {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0;
}

.sort-marker {
    width: 0.8rem;
    text-align: center;
    display: inline-flex;
    justify-content: center;
}

.sort-marker::before {
    color: #dfb076;
    font-size: 0.74rem;
    line-height: 1;
}

.sort-marker.sort-up::before {
    content: "\25B2";
}

.sort-marker.sort-down::before {
    content: "\25BC";
}

.rankings-table-wrap {
    position: relative;
    min-height: 430px;
}

.rankings-table-wrap .control-table {
    width: 100%;
    table-layout: fixed;
}

.rankings-table-wrap .control-table th,
.rankings-table-wrap .control-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rankings-table-wrap.is-loading .control-table {
    opacity: 0.45;
    filter: saturate(0.9);
}

.rankings-table-overlay {
    position: absolute;
    inset: 0;
    background: rgba(13, 8, 8, 0.52);
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #f2dfc8;
    font-size: 0.8rem;
    z-index: 4;
    pointer-events: none;
}

.rankings-table-wrap.is-loading .rankings-table-overlay {
    display: inline-flex;
}

.rankings-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(242, 223, 200, 0.35);
    border-top-color: #f2dfc8;
    border-radius: 50%;
    animation: rankingsSpin 0.7s linear infinite;
}

@keyframes rankingsSpin {
    to {
        transform: rotate(360deg);
    }
}

.rankings-sort-btn .sort-marker::before {
    color: #dfb076;
}

.rankings-sort-btn:hover {
    color: #fff2df;
}

.rankings-pager {
    margin-top: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.rankings-pager-meta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.rankings-pager-meta label {
    color: #ccb79f;
    font-size: 0.78rem;
}

.rankings-page-size {
    width: 90px;
    min-width: 90px;
    height: 34px;
    padding: 0 0.45rem;
}

.rankings-pager-meta span,
.rankings-pager-nav span {
    color: #d5c1aa;
    font-size: 0.8rem;
}

.rankings-pager-nav {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.auth-card-lite .input-holder {
    width: 100%;
}

.c-right-side .login-box .w-content {
    height: auto;
    min-height: 309px;
    padding-bottom: 12px;
}

.auth-lite-form {
    display: grid;
    gap: 0.55rem;
}

.account-shell {
    display: grid;
    gap: 12px;
    grid-template-columns: 240px 1fr;
}

.admin-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.7rem;
}

.admin-stat-card {
    border: 1px solid rgba(128, 90, 67, 0.5);
    border-radius: 8px;
    background: rgba(27, 17, 15, 0.95);
    padding: 0.65rem 0.7rem;
    display: grid;
    gap: 0.3rem;
}

.admin-stat-card .label {
    font-size: 0.72rem;
    color: #bda88f;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.admin-stat-card .value {
    font-size: 1.2rem;
    color: #f6e7d1;
}

.admin-filter-grid {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(180px, 220px) auto auto auto;
    gap: 0.6rem;
    align-items: center;
    margin-bottom: 0.8rem;
}

.admin-input {
    width: 100%;
    box-sizing: border-box;
    height: 38px;
    border: 1px solid rgba(128, 90, 67, 0.55);
    background: rgba(19, 12, 11, 0.96);
    color: #ead8c4;
    border-radius: 6px;
    padding: 0 0.65rem;
    font-size: 0.82rem;
}

.admin-input:focus {
    outline: 1px solid rgba(223, 176, 118, 0.65);
}

.admin-checkbox {
    color: #d9c6af;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.admin-actions-grid {
    display: grid;
    gap: 0.45rem;
}

.admin-actions-grid .cta-row {
    margin-top: 0;
}

.admin-role-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-role-input {
    width: 90px;
}

.admin-event-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.admin-item-award-form-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
    margin-bottom: 0.9rem;
}

.admin-item-award-field {
    display: grid;
    gap: 0.28rem;
    align-content: start;
}

.admin-field-label {
    font-size: 0.76rem;
    text-transform: uppercase;
    color: #e7cfb2;
    letter-spacing: 0.03em;
}

.admin-field-hint {
    font-size: 0.72rem;
    color: #bba58f;
}

.admin-item-award-field-readonly .admin-input {
    opacity: 0.9;
}

.admin-item-award-actions {
    align-self: end;
}

.admin-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(7, 5, 5, 0.74);
    z-index: 1200;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.admin-modal-card {
    width: min(620px, 100%);
    border: 1px solid rgba(176, 132, 90, 0.6);
    background: rgba(20, 13, 12, 0.98);
    border-radius: 10px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    padding: 1rem;
}

.admin-modal-card h3 {
    margin: 0 0 0.55rem;
    color: #f2e7d8;
    font-size: 1rem;
}

.admin-modal-card p {
    margin: 0;
    color: #d0bea8;
}

.ac-layout {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 14px;
}

.ac-sidebar {
    display: grid;
    gap: 10px;
    align-content: start;
}

.ac-profile-card {
    border: 1px solid rgba(128, 90, 67, 0.58);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(31, 18, 16, 0.95) 0%, rgba(20, 12, 11, 0.95) 100%);
    padding: 0.85rem;
}

.ac-profile-top {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
}

.ac-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #f8ebdc;
    font-weight: 700;
    background: linear-gradient(135deg, #b67749 0%, #623726 100%);
    border: 1px solid rgba(231, 186, 126, 0.4);
}

.ac-profile-top h3 {
    margin: 0;
    font-size: 0.98rem;
    color: #f5e7d8;
}

.ac-profile-top p {
    margin: 0.1rem 0 0;
    color: #c9b49f;
    font-size: 0.78rem;
}

.ac-profile-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
}

.ac-profile-stats div {
    border: 1px solid rgba(114, 78, 59, 0.45);
    border-radius: 7px;
    background: rgba(26, 15, 14, 0.86);
    padding: 0.45rem 0.55rem;
}

.ac-profile-stats span {
    display: block;
    color: #b49f89;
    font-size: 0.7rem;
}

.ac-profile-stats strong {
    color: #f2e6d7;
    font-size: 0.8rem;
}

.ac-nav {
    border: 1px solid rgba(128, 90, 67, 0.58);
    border-radius: 10px;
    background: rgba(23, 14, 12, 0.94);
    padding: 0.55rem;
    display: grid;
    gap: 0.45rem;
}

.ac-nav-btn {
    border: 1px solid rgba(131, 90, 69, 0.44);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(47, 27, 23, 0.9) 0%, rgba(30, 17, 15, 0.9) 100%);
    color: #dac4ac;
    text-align: left;
    padding: 0.6rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.16s ease;
}

.ac-nav-btn.active,
.ac-nav-btn:hover {
    color: #fff1df;
    border-color: rgba(225, 171, 103, 0.58);
    background: linear-gradient(180deg, rgba(138, 85, 54, 0.95) 0%, rgba(75, 42, 30, 0.95) 100%);
}

.ac-main {
    display: grid;
    gap: 10px;
}

.ac-top-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.ac-chip {
    border: 1px solid rgba(130, 89, 67, 0.52);
    border-radius: 999px;
    background: rgba(35, 20, 18, 0.9);
    color: #e4d1bc;
    font-size: 0.76rem;
    font-weight: 600;
    padding: 0.4rem 0.7rem;
    cursor: pointer;
    text-decoration: none;
}

.ac-chip:hover {
    border-color: rgba(226, 175, 108, 0.62);
    color: #fff;
}

.ac-grid {
    display: grid;
    gap: 10px;
}

.ac-grid-overview {
    grid-template-columns: 1fr;
}

.ac-card {
    border: 1px solid rgba(128, 90, 67, 0.58);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(28, 16, 15, 0.95) 0%, rgba(18, 11, 10, 0.95) 100%);
    padding: 0.95rem;
}

.ac-card h3 {
    margin: 0 0 0.65rem;
    color: #f4e8d9;
    font-size: 1rem;
}

.ac-muted {
    color: #baa792;
    margin: 0 0 0.8rem;
}

.ac-kv-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.ac-kv {
    border: 1px solid rgba(116, 80, 61, 0.44);
    border-radius: 7px;
    background: rgba(24, 14, 13, 0.9);
    padding: 0.55rem 0.65rem;
}

.ac-kv span {
    display: block;
    color: #baa58f;
    font-size: 0.73rem;
}

.ac-kv strong {
    color: #f3e8d9;
    font-size: 0.84rem;
}

.ac-bonus-list {
    display: grid;
    gap: 0.42rem;
}

.ac-bonus-item {
    border: 1px solid rgba(116, 80, 61, 0.42);
    border-radius: 7px;
    background: rgba(24, 14, 13, 0.88);
    padding: 0.48rem 0.6rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ac-bonus-item span {
    color: #bea991;
    font-size: 0.77rem;
}

.ac-bonus-item strong {
    font-size: 0.82rem;
}

.ac-action-grid {
    display: grid;
    gap: 0.55rem;
}

.ac-action-item {
    border: 1px solid rgba(113, 78, 60, 0.45);
    border-radius: 8px;
    background: rgba(24, 14, 13, 0.9);
    padding: 0.65rem;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.7rem;
    align-items: center;
}

.ac-action-item strong {
    color: #f2e5d6;
    font-size: 0.84rem;
}

.ac-action-item p {
    margin: 0.2rem 0 0;
    color: #b9a48e;
    font-size: 0.76rem;
    line-height: 1.35;
}

.ac-btn {
    border: 1px solid rgba(136, 95, 72, 0.5);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(55, 31, 27, 0.95) 0%, rgba(31, 18, 16, 0.95) 100%);
    color: #e8d3bd;
    font-size: 0.77rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ac-btn:hover {
    color: #fff5e8;
}

.ac-btn-primary {
    border-color: rgba(220, 165, 96, 0.65);
    background: linear-gradient(180deg, rgba(188, 124, 70, 0.96) 0%, rgba(94, 53, 33, 0.96) 100%);
    color: #fff4e8;
}

.ac-auth-card p {
    margin-top: 0;
    color: #d4c2ac;
}

.account-page-card {
    background:
        radial-gradient(circle at top right, rgba(180, 118, 65, 0.12), transparent 46%),
        linear-gradient(180deg, rgba(20, 13, 12, 0.96) 0%, rgba(11, 8, 8, 0.96) 100%);
}

.ac-flow-shell {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ac-flow-shell-narrow {
    width: min(980px, 100%);
    margin: 0 auto;
}

.ac-flow-card {
    min-height: 100%;
}

.register-flow-shell {
    width: min(1080px, 100%);
}

.register-flow-card .status-message {
    margin-top: 0.7rem;
}

.ac-form-grid {
    display: grid;
    gap: 0.65rem;
}

.ac-field {
    display: grid;
    gap: 0.35rem;
}

.ac-field span {
    color: #d0b89d;
    font-size: 0.76rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ac-field input {
    width: 100%;
    height: 42px;
    box-sizing: border-box;
    border: 1px solid rgba(129, 90, 68, 0.55);
    border-radius: 8px;
    background: rgba(19, 11, 10, 0.94);
    color: #ebdbc8;
    padding: 0 0.68rem;
    font-size: 0.83rem;
}

.ac-field input:focus {
    outline: 1px solid rgba(230, 179, 109, 0.55);
}

.ac2-shell {
    display: grid;
    gap: 0.85rem;
}

.ac2-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(440px, auto);
    gap: 0.8rem;
    border: 1px solid rgba(165, 120, 81, 0.58);
    border-radius: 12px;
    padding: 0.95rem;
    background: linear-gradient(120deg, rgba(43, 23, 20, 0.95) 0%, rgba(28, 16, 15, 0.95) 58%, rgba(63, 34, 25, 0.84) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 223, 180, 0.08);
}

.ac2-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ac2-avatar {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff1df;
    font-size: 1.35rem;
    font-weight: 700;
    border: 1px solid rgba(237, 182, 110, 0.55);
    background: linear-gradient(135deg, #ca8b52 0%, #5a2f21 100%);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.3);
}

.ac2-label {
    margin: 0;
    color: #d8bf9f;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ac2-identity h2 {
    margin: 0.12rem 0 0;
    color: #f6ebdc;
    font-size: 1.35rem;
    line-height: 1.15;
}

.ac2-role {
    margin: 0.16rem 0 0;
    color: #e6c8a2;
    font-size: 0.8rem;
}

.ac2-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}

.ac2-stat {
    border: 1px solid rgba(122, 85, 65, 0.52);
    border-radius: 9px;
    background: rgba(22, 12, 11, 0.84);
    padding: 0.52rem 0.6rem;
    min-height: 58px;
}

.ac2-stat span {
    display: block;
    color: #bba186;
    font-size: 0.7rem;
}

.ac2-stat strong {
    color: #f3e8d9;
    font-size: 0.84rem;
}

.ac2-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    border: 1px solid rgba(127, 89, 67, 0.5);
    border-radius: 10px;
    background: rgba(24, 14, 12, 0.95);
    padding: 0.5rem;
}

.ac2-tab {
    border: 1px solid rgba(124, 87, 67, 0.46);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(48, 28, 24, 0.92) 0%, rgba(28, 17, 15, 0.92) 100%);
    color: #ddc6ae;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0.48rem 0.68rem;
    transition: 0.18s ease;
}

.ac2-tab:hover,
.ac2-tab.active {
    color: #fff4e6;
    border-color: rgba(229, 177, 108, 0.63);
    background: linear-gradient(180deg, rgba(187, 123, 70, 0.95) 0%, rgba(91, 50, 31, 0.95) 100%);
}

.ac2-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(305px, 350px);
    gap: 0.85rem;
    align-items: start;
}

.ac2-main,
.ac2-side {
    display: grid;
    gap: 0.8rem;
}

.ac2-overview-grid {
    display: grid;
    gap: 0.8rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ac2-action-stack {
    display: grid;
    gap: 0.5rem;
}

.ac2-action-stack .ac-btn,
.ac2-link-grid .ac-btn {
    width: 100%;
}

.ac2-link-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.45rem;
}

.ac-char-inspector {
    display: grid;
    gap: 0.85rem;
}

.ac-char-hero {
    display: grid;
    grid-template-columns: 124px minmax(0, 1fr);
    gap: 0.85rem;
    border: 1px solid rgba(128, 90, 68, 0.52);
    border-radius: 10px;
    background:
        radial-gradient(circle at top right, rgba(224, 162, 92, 0.14), transparent 46%),
        linear-gradient(180deg, rgba(26, 16, 14, 0.95) 0%, rgba(15, 10, 9, 0.95) 100%);
    padding: 0.82rem;
}

.ac-char-portrait-wrap {
    border: 1px solid rgba(128, 90, 68, 0.46);
    border-radius: 10px;
    background: rgba(20, 12, 11, 0.9);
    display: grid;
    place-items: center;
    min-height: 124px;
}

.ac-char-portrait {
    width: 82px;
    height: 82px;
    object-fit: contain;
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.35));
}

.ac-char-hero-content {
    display: grid;
    gap: 0.6rem;
}

.ac-char-title-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
}

.ac-char-title-row h4 {
    margin: 0;
    color: #f6eadb;
    font-size: 1.08rem;
}

.ac-char-class {
    color: #d6ba99;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-weight: 700;
}

.ac-char-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.45rem;
}

.ac-char-hero-stats > div {
    border: 1px solid rgba(118, 82, 62, 0.44);
    border-radius: 8px;
    background: rgba(17, 10, 9, 0.9);
    padding: 0.45rem 0.52rem;
}

.ac-char-hero-stats span {
    display: block;
    color: #baa58d;
    font-size: 0.68rem;
}

.ac-char-hero-stats strong {
    color: #f3e9db;
    font-size: 0.82rem;
}

.ac-char-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem;
}

.ac-char-actions .ac-btn {
    width: 100%;
}

.ac-char-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.52rem;
}

.ac-char-item {
    border: 1px solid rgba(122, 86, 66, 0.48);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(33, 20, 18, 0.95) 0%, rgba(17, 10, 9, 0.95) 100%);
    color: #e8d3bc;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    text-align: left;
    padding: 0.52rem 0.62rem;
    cursor: pointer;
    transition: transform 0.16s ease, filter 0.16s ease, border-color 0.16s ease;
}

.ac-char-item img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.ac-char-item-text {
    min-width: 0;
    display: grid;
    gap: 0.08rem;
}

.ac-char-item-text strong {
    color: #f4e8d8;
    font-size: 0.84rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac-char-item-text span {
    color: #bda88f;
    font-size: 0.71rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac-char-item-tag {
    border: 1px solid rgba(116, 82, 63, 0.58);
    border-radius: 999px;
    padding: 0.15rem 0.46rem;
    font-size: 0.66rem;
    color: #cbb59b;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.ac-char-item:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.ac-char-item.active {
    border-color: rgba(220, 166, 99, 0.66);
    background:
        radial-gradient(circle at top right, rgba(226, 166, 96, 0.16), transparent 50%),
        linear-gradient(180deg, rgba(61, 36, 28, 0.95) 0%, rgba(28, 16, 14, 0.95) 100%);
}

.ac-char-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(7, 4, 4, 0.9);
    backdrop-filter: blur(8px);
}

.ac-char-modal {
    width: min(1160px, 100%);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    position: relative;
    isolation: isolate;
    border: 1px solid rgba(183, 132, 80, 0.62);
    border-radius: 12px;
    background-color: #130d0c;
    background-image:
        radial-gradient(circle at top right, rgba(230, 165, 95, 0.14), transparent 42%),
        linear-gradient(180deg, rgba(24, 15, 14, 1) 0%, rgba(12, 8, 8, 1) 100%);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.52);
    padding: 0.95rem;
}

.ac-char-modal::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: rgba(10, 6, 6, 0.72);
    pointer-events: none;
}

.ac-char-modal > * {
    position: relative;
    z-index: 1;
}

.ac-char-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.6rem;
    margin-bottom: 0.75rem;
}

.ac-char-modal-eyebrow {
    margin: 0;
    color: #cfb08d;
    font-size: 0.68rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.ac-char-modal-head h3 {
    margin: 0.14rem 0 0;
    color: #f6eadb;
    font-size: 1.1rem;
}

.ac-char-modal-close {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(141, 100, 72, 0.68);
    background: rgba(31, 19, 17, 0.92);
    color: #f0d9bd;
    cursor: pointer;
    transition: filter 0.16s ease, transform 0.16s ease;
}

.ac-char-modal-close:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

body:has(.ac-char-modal-backdrop) .page-hero-banner {
    opacity: 0.08;
    transform: translateY(-6px) scale(0.99);
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.ac-inventory-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 0.38rem;
}

.ac-inventory-grid.loading {
    opacity: 0.74;
}

.ac-inv-slot {
    min-height: 88px;
    border: 1px solid rgba(116, 82, 62, 0.5);
    border-radius: 8px;
    background: rgba(17, 11, 10, 0.92);
    padding: 0.35rem 0.4rem;
    display: grid;
    align-content: start;
    gap: 0.1rem;
}

.ac-inv-slot .ac-inv-slot-no {
    color: #987b62;
    font-size: 0.62rem;
    margin-bottom: 0.04rem;
}

.ac-inv-item-body {
    position: relative;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 0.35rem;
    align-items: start;
}

.ac-inv-icon,
.ac-inv-icon-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid rgba(126, 88, 67, 0.54);
    background: rgba(13, 8, 8, 0.92);
}

.ac-inv-icon {
    object-fit: contain;
    image-rendering: crisp-edges;
}

.ac-inv-icon-placeholder {
    display: grid;
    place-items: center;
    color: #a7896b;
    font-size: 0.8rem;
    font-weight: 700;
}

.ac-inv-meta {
    min-width: 0;
    display: grid;
    gap: 0.02rem;
}

.ac-inv-meta strong {
    color: #f2e5d5;
    font-size: 0.69rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ac-inv-meta span {
    color: #bea78d;
    font-size: 0.64rem;
    line-height: 1.25;
}

.ac-item-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    min-width: 220px;
    max-width: 280px;
    border: 1px solid rgba(191, 140, 86, 0.74);
    border-radius: 8px;
    background:
        radial-gradient(circle at top right, rgba(224, 163, 93, 0.2), transparent 45%),
        linear-gradient(180deg, rgba(28, 17, 15, 0.98) 0%, rgba(12, 8, 8, 0.98) 100%);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.44);
    padding: 0.52rem 0.56rem;
    z-index: 20;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.12s ease, transform 0.12s ease;
}

.ac-item-tooltip-title {
    color: #f8e8d5;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.3rem;
}

.ac-item-tooltip-line {
    color: #d8c0a3;
    font-size: 0.66rem;
    line-height: 1.28;
}

.ac-inv-item-body.has-tooltip:hover .ac-item-tooltip,
.ac-inv-item-body.has-tooltip:focus-within .ac-item-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.ac-inv-slot.empty {
    border-style: dashed;
    background: rgba(14, 9, 8, 0.8);
}

.ac-inv-empty {
    color: #826b56;
    font-size: 0.64rem;
    font-style: italic;
}

.ac2-main .ac-card,
.ac2-side .ac-card {
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.ac2-main .ac-card:hover,
.ac2-side .ac-card:hover {
    transform: translateY(-2px);
    border-color: rgba(218, 164, 96, 0.62);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}

.ac-reveal-up,
.ac2-hero,
.ac2-tabs,
.ac2-main .ac-card,
.ac2-side .ac-card {
    animation: acFadeUp 0.42s ease both;
}

.ac-delay-1 {
    animation-delay: 0.08s;
}

.ac2-tabs {
    animation-delay: 0.04s;
}

.ac2-main .ac-card:nth-child(1) {
    animation-delay: 0.08s;
}

.ac2-main .ac-card:nth-child(2) {
    animation-delay: 0.14s;
}

.ac2-main .ac-card:nth-child(3) {
    animation-delay: 0.2s;
}

.ac2-side .ac-card:nth-child(1) {
    animation-delay: 0.16s;
}

.ac2-side .ac-card:nth-child(2) {
    animation-delay: 0.22s;
}

@keyframes acFadeUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ac-btn:disabled {
    cursor: not-allowed;
    opacity: 0.62;
    filter: saturate(0.75);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .app-route-transition {
        animation: none;
    }

    .ac-reveal-up,
    .ac2-hero,
    .ac2-tabs,
    .ac2-main .ac-card,
    .ac2-side .ac-card {
        animation: none;
    }

    .ac2-main .ac-card,
    .ac2-side .ac-card {
        transition: none;
    }

    .modern-login-btn .btn-spinner {
        animation: none;
    }

    .modern-login-form .input-holder {
        transition: none;
    }

    .home-auth-modal {
        animation: none;
    }

    .rankings-panel,
    .rankings-btn,
    .home-v3-quick,
    .home-v3-slider-track {
        transition: none;
    }

    .rankings-spinner {
        animation: none;
    }
}

@media (max-width: 1280px) {
    .home-v3-content .home-v3-layout {
        grid-template-columns: 1fr;
    }

    .home-v3-side {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .pixarts-header,
    .pixarts-site-content,
    .footer {
        min-width: 0;
    }

    .pixarts-nav {
        width: 100%;
    }

    .pixarts-nav .l-menu,
    .pixarts-nav .r-menu {
        min-width: 0;
        width: auto;
    }

    .pixarts-nav .l-menu a,
    .pixarts-nav .r-menu a {
        margin: 0 12px;
    }

    .links-sections {
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        row-gap: 4px;
    }

    .pixarts-site-content:not(.page-shell) .pixarts-container.relative {
        flex-direction: column;
    }

    .pixarts-site-content:not(.page-shell) .c-left-side,
    .pixarts-site-content:not(.page-shell) .c-right-side {
        width: 100%;
        min-width: 0;
    }

    .pixarts-site-content:not(.page-shell) .btns-slider-row {
        grid-template-columns: 1fr;
    }

    .pixarts-site-content:not(.page-shell) .buttons-holder {
        width: 100%;
        max-width: none;
    }

    .pixarts-site-content:not(.page-shell) .buttons-holder .button-main {
        width: 100%;
    }

    .pixarts-site-content:not(.page-shell) .buttons-holder .button-small {
        width: calc(50% - 1px);
    }

    .download-hero {
        grid-template-columns: 1fr;
    }

    .download-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .download-card-primary {
        grid-column: span 2;
    }

    .download-bottom-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .home-v3-quick-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .home-v3-quick-primary {
        grid-column: span 2;
    }

    .home-v3-media-card,
    .home-v3-slider-card,
    .home-v3-slider-track,
    .home-v3-slide,
    .home-v3-slide img,
    .home-v3-slide .home-v3-media-video {
        min-height: 360px;
    }

    .home-v3-slide-video .home-v3-media-overlay {
        left: 0.7rem;
        top: 0.7rem;
        width: calc(100% - 1.4rem);
    }

    .home-v3-control-grid {
        grid-template-columns: 1fr;
    }

    .home-v3-panel-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .home-v3-side {
        grid-template-columns: 1fr;
    }

    .feature-grid,
    .account-shell {
        grid-template-columns: 1fr;
    }

    .download-hero-stats {
        grid-template-columns: 1fr;
    }

    .download-grid {
        grid-template-columns: 1fr;
    }

    .download-card-primary {
        grid-column: span 1;
    }

    .admin-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-filter-grid {
        grid-template-columns: 1fr;
    }

    .rankings-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rankings-pager {
        flex-direction: column;
        align-items: stretch;
    }

    .rankings-pager-meta,
    .rankings-pager-nav {
        justify-content: space-between;
    }

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

    .admin-item-award-form-grid {
        grid-template-columns: 1fr;
    }

    .admin-item-award-actions {
        align-self: stretch;
    }

    .page-header {
        height: 420px;
    }

    .page-header .pixarts-header-video {
        top: -20px;
        opacity: 0.3;
    }

    .page-hero-banner {
        margin-top: 95px;
    }

    .ac-kv-grid {
        grid-template-columns: 1fr;
    }

    .ac-action-item {
        grid-template-columns: 1fr;
    }

    .page-shell.page-shell-wide .pixarts-container {
        width: calc(100% - 1rem);
    }

    .ac2-hero {
        grid-template-columns: 1fr;
    }

    .ac2-hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ac2-grid,
    .ac2-overview-grid {
        grid-template-columns: 1fr;
    }

    .ac-char-hero {
        grid-template-columns: 1fr;
    }

    .ac-char-hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ac-char-list {
        grid-template-columns: 1fr;
    }

    .ac-char-modal {
        width: min(980px, 100%);
    }

    .ac-inventory-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .ac-flow-shell {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .home-v3-quick-grid {
        grid-template-columns: 1fr;
    }

    .home-v3-quick-primary {
        grid-column: span 1;
    }

    .home-v3-media-card,
    .home-v3-slider-card,
    .home-v3-slider-track,
    .home-v3-slide,
    .home-v3-slide img,
    .home-v3-slide .home-v3-media-video {
        min-height: 260px;
    }

    .home-v3-media-overlay {
        padding: 0.75rem;
    }

    .home-v3-slide-video .home-v3-media-overlay {
        width: calc(100% - 1rem);
        left: 0.5rem;
        top: 0.5rem;
    }

    .home-v3-slider-arrow {
        width: 34px;
        height: 34px;
        font-size: 1rem;
    }

    .home-v3-rank-row {
        grid-template-columns: 32px 1fr 76px 50px;
        font-size: 0.68rem;
        padding: 0.38rem 0.52rem;
    }

    .home-auth-modal-backdrop {
        padding: 0.5rem;
    }

    .home-auth-modal {
        padding: 0.75rem;
        border-radius: 10px;
    }

    .home-auth-modal-head h3 {
        font-size: 1rem;
    }

    .auth-launcher-panel {
        min-height: 0;
    }

    .home-session-grid {
        grid-template-columns: 1fr;
    }

    .download-card {
        padding: 0.75rem;
    }

    .download-req-grid {
        grid-template-columns: 1fr;
    }

    .download-actions {
        flex-direction: column;
    }

    .download-btn {
        width: 100%;
    }

    .rankings-tab-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .rankings-filter-grid {
        grid-template-columns: 1fr;
    }

    .rankings-pager-meta {
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .rankings-page-size {
        width: 100%;
    }

    .rankings-pager .rankings-btn {
        width: 100%;
    }

    .admin-stat-grid {
        grid-template-columns: 1fr;
    }

    .admin-role-row {
        flex-direction: column;
        align-items: stretch;
    }

    .admin-role-input {
        width: 100%;
    }

    .ac2-tabs {
        padding: 0.4rem;
    }

    .ac2-tab {
        flex: 1 1 calc(50% - 0.4rem);
        text-align: center;
    }

    .ac2-hero-stats {
        grid-template-columns: 1fr;
    }

    .ac-char-hero-stats,
    .ac-char-actions {
        grid-template-columns: 1fr;
    }

    .ac-char-modal-backdrop {
        padding: 0.55rem;
    }

    .ac-char-modal {
        padding: 0.65rem;
        border-radius: 10px;
    }

    .ac-inventory-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.28rem;
    }

.ac-inv-slot {
        min-height: 72px;
    }
}

/* ==============================
   Cookie Consent
============================== */
.som-cookie-consent {
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    width: min(1080px, calc(100vw - 24px));
    border: 1px solid rgba(196, 145, 90, 0.65);
    background: linear-gradient(180deg, rgba(30, 14, 13, 0.96) 0%, rgba(15, 8, 8, 0.97) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(95, 54, 33, 0.42),
        0 10px 36px rgba(0, 0, 0, 0.52),
        0 0 18px rgba(214, 165, 92, 0.22);
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    z-index: 1200;
}

.som-cookie-consent__content strong {
    display: block;
    color: #f5dfc4;
    font-family: "TrajanProBold", "Open Sans", sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.78rem;
    margin-bottom: 0.22rem;
}

.som-cookie-consent__content p {
    margin: 0;
    color: #d2b79a;
    font-size: 0.74rem;
    line-height: 1.42;
}

.som-cookie-consent__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.som-cookie-consent__actions a,
.som-cookie-consent__actions button {
    border: 1px solid rgba(186, 142, 87, 0.72);
    background: linear-gradient(180deg, rgba(49, 24, 17, 0.92) 0%, rgba(23, 11, 9, 0.93) 100%);
    color: #f2dbc1;
    text-decoration: none;
    font-family: "TrajanProBold", "Open Sans", sans-serif;
    font-size: 0.67rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.42rem 0.78rem;
    cursor: pointer;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.som-cookie-consent__actions button {
    background: linear-gradient(180deg, #b68b45 0%, #8e6729 100%);
    color: #fff2dc;
}

.som-cookie-consent__actions a:hover,
.som-cookie-consent__actions button:hover {
    border-color: rgba(234, 190, 122, 0.92);
    box-shadow: 0 0 12px rgba(218, 168, 96, 0.26);
    filter: brightness(1.07);
}

@media (max-width: 768px) {
    .som-cookie-consent {
        bottom: 10px;
        width: calc(100vw - 16px);
        padding: 0.72rem 0.72rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.68rem;
    }

    .som-cookie-consent__actions {
        justify-content: stretch;
    }

    .som-cookie-consent__actions a,
    .som-cookie-consent__actions button {
        flex: 1 1 0;
        text-align: center;
    }
}

/* ==============================
   Account Template Re-Skin
============================== */
.account-page-card {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.account-page-shell .pixarts-container {
    width: min(1260px, calc(100% - 1rem));
}

.account-page-shell .content-stack {
    max-width: 760px;
    margin: 0 auto;
    gap: 8px;
}

.account-page-shell .feature-card {
    border: 1px solid #2a1c1c;
    background: #1a0f11 url(../img/main-box-bg.png) repeat;
    border-radius: 0;
    box-shadow: none;
    position: relative;
}

.account-page-shell .feature-card h2 {
    color: #ffefeb;
    font-family: "TrajanProRegular", "Open Sans", sans-serif;
    font-size: 15px;
    text-transform: uppercase;
}

.account-page-shell .feature-card p {
    color: #a58f83;
}

.account-page-shell .modern-login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.account-page-shell .modern-login-form .input-holder {
    height: 40px;
    margin-top: 12px;
    background-color: #110a0a;
    width: 300px;
    border-bottom: 1px solid #2d1f17;
    position: relative;
}

.account-page-shell .modern-login-form .input-holder::after {
    content: "";
    height: 18px;
    left: 41px;
    width: 1px;
    background-color: #2d1f17;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.account-page-shell .modern-login-form .input-holder img {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
}

.account-page-shell .modern-login-form .input-holder input {
    color: #d0baa4;
    height: 40px;
    padding-left: 55px;
    padding-right: 20px;
    width: 100%;
    box-sizing: border-box;
}

.account-page-shell .modern-login-form .input-holder input::placeholder {
    color: #d0baa4;
}

.account-page-shell .modern-login-form .cta-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    width: 100%;
}

.account-page-shell .modern-login-btn {
    background-image: url(../img/btn-small-gold.png);
}

.account-page-shell .modern-login-btn,
.account-page-shell .modern-login-form .cta-row .ac-btn {
    width: 140px;
    min-width: 140px;
    height: 34px;
    min-height: 34px;
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #ffece3;
}

.account-page-shell .modern-login-form .cta-row .ac-btn:not(.modern-login-btn) {
    background-image: url(../img/btn-small-dark.png);
}

.account-page-shell .modern-login-form .btn-wait,
.account-page-shell .modern-login-form .login-progress-msg {
    color: #96847a;
}

.account-template-look {
    display: grid;
    grid-template-columns: 915px 340px;
    gap: 5px;
    align-items: start;
}

.account-template-look .ac2-hero {
    grid-column: 1 / -1;
    border: 1px solid #2a1c1c;
    border-radius: 0;
    box-shadow: none;
    background: #1a0f11;
    position: relative;
    padding: 20px 24px;
}

.account-template-look .ac2-hero::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 63px;
    background-image: url(../img/navbar-bg.png);
    background-repeat: no-repeat;
    background-position: top center;
    opacity: 0.25;
    pointer-events: none;
}

.account-template-look .ac2-identity,
.account-template-look .ac2-hero-stats {
    position: relative;
    z-index: 1;
}

.account-template-look .ac2-avatar {
    border: 1px solid #6f4a42;
    border-radius: 0;
    background: #120b0c;
    color: #e9d8c5;
    box-shadow: none;
}

.account-template-look .ac2-label {
    color: #fabc86;
}

.account-template-look .ac2-identity h2 {
    color: #ffefeb;
    font-family: "TrajanProRegular", "Open Sans", sans-serif;
    text-transform: uppercase;
}

.account-template-look .ac2-role {
    color: #d0baa4;
}

.account-template-look .ac2-stat {
    border: 1px solid #2d1f17;
    border-radius: 0;
    background: #120b0c;
}

.account-template-look .ac2-stat span {
    color: #a58f83;
    text-transform: uppercase;
    font-size: 11px;
}

.account-template-look .ac2-stat strong {
    color: #e0be9c;
}

.account-template-look .ac2-tabs {
    grid-column: 1 / -1;
    border: 1px solid #2a1c1c;
    border-radius: 0;
    background: #1a0f11;
    box-shadow: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.account-template-look .ac2-tab {
    border: 0;
    border-right: 1px solid #2a1c1c;
    border-bottom: 1px solid #2a1c1c;
    border-radius: 0;
    background: transparent;
    color: #d5c4c4;
    font-family: "TrajanProRegular", "Open Sans", sans-serif;
    font-size: 12px;
    padding: 13px 16px;
    min-height: auto;
}

.account-template-look .ac2-tab:hover,
.account-template-look .ac2-tab.active {
    color: #fff4eb;
    background: rgba(112, 63, 43, 0.18);
    box-shadow: inset 0 -1px 0 #e19f67;
}

.account-template-look .ac2-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 915px 340px;
    gap: 5px;
}

.account-template-look .ac2-main,
.account-template-look .ac2-side {
    min-width: 0;
}

.account-template-look .ac2-main .ac-card {
    border: 1px solid #2a1c1c;
    border-radius: 0;
    box-shadow: none;
    background: #1a0f11;
    padding: 0;
}

.account-template-look .ac2-main .ac-card h3 {
    margin: 0;
    padding: 18px 30px 6px;
    color: #ffefeb;
    font-family: "TrajanProRegular", "Open Sans", sans-serif;
    text-transform: uppercase;
    font-size: 15px;
}

.account-template-look .ac2-main .ac-muted {
    margin: 0;
    padding: 0 30px 10px;
    color: #a58f83;
}

.account-template-look .ac2-main .ac-kv-grid,
.account-template-look .ac2-main .ac-bonus-list,
.account-template-look .ac2-main .ac-action-grid,
.account-template-look .ac2-main .ac-char-inspector,
.account-template-look .ac2-main .ac2-overview-grid,
.account-template-look .ac2-main .ac-action-item {
    margin: 0 30px 18px;
}

.account-template-look .ac2-main .control-table-wrap {
    margin: 10px 30px 24px;
}

.account-template-look .ac2-side .ac-card {
    border: 1px solid #2a1c1c;
    border-radius: 0;
    box-shadow: none;
    background: #1a0f11;
    padding: 0;
    overflow: hidden;
}

.account-template-look .ac2-side .ac-card h3 {
    margin: 0;
    padding: 18px 20px 0;
    color: #ffefeb;
    font-family: "TrajanProRegular", "Open Sans", sans-serif;
    text-transform: uppercase;
    font-size: 14px;
}

.account-template-look .ac2-side .ac-card p,
.account-template-look .ac2-side .ac2-action-stack,
.account-template-look .ac2-side .ac2-link-grid {
    margin: 0 20px 12px;
}

.account-page-shell .ac-btn {
    border: 0;
    border-radius: 0;
    background-color: transparent;
    background-image: url(../img/btn-small-dark.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 34px;
    color: #ffdacc;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    box-shadow: none;
    padding: 0 14px;
}

.account-page-shell .ac-btn-primary {
    background-image: url(../img/btn-small-gold.png);
    color: #ffece3;
}

.account-page-shell .ac-btn:hover {
    filter: brightness(1.1);
    transform: none;
}

.account-page-shell .control-table-wrap {
    border: 1px solid #2a1c1c;
    background: #140c0d;
}

.account-page-shell .control-table {
    border-collapse: collapse;
}

.account-page-shell .control-table th,
.account-page-shell .control-table td {
    border-color: #2a1c1c;
    color: #d0baa4;
    font-size: 12px;
}

.account-page-shell .control-table th {
    color: #fabc86;
    background: #1a0f11;
}

.account-page-shell .ac-kv,
.account-page-shell .ac-bonus-item,
.account-page-shell .ac-action-item,
.account-page-shell .ac-char-item,
.account-page-shell .ac-char-hero-stats > div {
    border-radius: 0;
    border-color: #2d1f17;
    background: #110a0a;
}

.account-page-shell .ac-kv span,
.account-page-shell .ac-bonus-item span,
.account-page-shell .ac-action-item p,
.account-page-shell .ac-char-item-text span {
    color: #96847a;
}

.account-page-shell .ac-kv strong,
.account-page-shell .ac-bonus-item strong,
.account-page-shell .ac-action-item strong,
.account-page-shell .ac-char-item-text strong,
.account-page-shell .ac-char-title-row h4 {
    color: #efeddc;
}

.account-page-shell .ac-char-item.active {
    border-color: #724033;
    background: #1a0f11;
}

@media (max-width: 1280px) {
    .account-template-look {
        grid-template-columns: 1fr;
    }

    .account-template-look .ac2-grid {
        grid-template-columns: 1fr;
    }
}