@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

/* ============================================================
   ГЛАВНАЯ — единый дизайн в стиле e8Gw5
   ============================================================ */

:root {
    --e8-bg: #080808;
    --e8-card: #0e0e0e;
    --e8-card-2: #141414;
    --e8-border: #242424;
    --e8-border-soft: #1a1a1a;
    --e8-text: #f5f5f5;
    --e8-muted: #9b9b9b;
    --e8-accent: #d9ff8a;
    --e8-accent-ink: #0e1505;
    --e8-accent-soft: rgba(217, 255, 138, .08);
    --e8-accent-border: rgba(217, 255, 138, .30);
    --e8-danger: #ff6464;
    --e8-status: #3ddc84;
    --e8-blue: #7ec8ff;
    --e8-orange: #ffb347;
    --e8-purple: #b07eff;
}

* {
    font-family: "Unbounded", sans-serif;
}

html, body, .form-container {
    background: #000000 !important;
    /* background: #0E0E0E !important; */
}

/* ===== NAV ===== */
.nav-bar > a {
    height: 30px !important;
}

.nav-link.social {
    height: 26px;
    width: 26px;
    min-width: 26px;
    min-height: 26px;
}

.nav-link.social.market {
    overflow: hidden;
    transition: all 0.3s;
    font-size: 0px;
    max-width: 100% !important;
    gap: 0px;
    width: 10px !important;
}

.nav-link.social.market:hover {
    overflow: hidden;
    gap: 3px;
    font-size: 10px;
    padding: 0 6px;
    max-width: 100% !important;
    width: max-content;
}

.nav-link.social.market > svg {
    height: 14px;
    width: 14px;
    stroke-width: 2;
    overflow: hidden;
}

.header-nav {
    justify-content: flex-end;
}

/* ===== HEADER ===== */
.site-header {
    z-index: 1000999 !important;
    padding: 1px 10px;
    background: #000000b6;
}

/* ===== CONTEXT MENU ===== */
.context-menu {
    position: absolute;
    top: 100%;
    right: -1px;
    margin-top: 10px;
    background: #0a0a0a;
    border: 1px solid #333;
    backdrop-filter: blur(10px);
    border-radius: 4px;
    min-width: 250px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.context-menu.active {
    display: block;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.context-menu-hwid {
    background: #0e0e0e;
    border-bottom: 1px solid #2a2a2a;
}

.hwid-header {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
    font-size: 10px;
    padding: 4px 0;
    font-weight: 700;
    background: #000;
    color: #d9ff8a;
    margin: 0;
    border-bottom: 1px solid #303030;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.hwid-code {
    background: #000000;
    border: 1px solid rgba(217, 255, 138, .3);
    color: #d9ff8a;
    padding: 4px 0px;
    border-radius: 3px;
    font-family: "Unbounded", sans-serif;
    font-size: 12px;
    text-align: center;
    word-break: break-all;
}

.hwid-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 8px;
    gap: 3px;
    background: linear-gradient(135deg, rgba(217, 255, 138, 0.08), rgba(100, 100, 255, 0.05));
    border: 1px solid rgba(217, 255, 138, 0.15);
    padding: 2px;
    border-radius: 3px;
    flex-direction: row;
}

.hwid-status .label {
    text-align: center;
    flex: 1;
    padding-left: 1px;
    color: #bfc0ff;
}

.hwid-role, .hwid-status .value {
    max-width: 145px;
    background: #000000ce;
}

.hwid-status .value {
    padding: 2px 0px;
    width: 100%;
    font-size: 10px;
    border-radius: 3px;
    background: #000000ce;
    text-align: center;
}

.hwid-status .value.active {
    color: #3ddc84;
}

.hwid-status .value.expired {
    color: #ff6464;
}

.hwid-role {
    display: inline-block;
    padding: 2px 0px;
    width: 100%;
    text-align: center;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    background: #05060C;
}

.hwid-role.creator {
    color: #FFB6E1;
}

.nav-bt-title-hwid.admin,
.hwid-role.admin {
    color: #ffb347;
}

.nav-bt-title-hwid.bot,
.hwid-role.bot {
    color: #7ec8ff;
}

.nav-bt-title-hwid.player,
.hwid-role.player {
    color: #d9ff8a;
}

.nav-bt-title-hwid.banned,
.hwid-role.banned {
    color: #ff5454;
}

.hwid-expire-bar {
    height: 1px;
    border-radius: 0px;
    margin-top: 2px;
    overflow: hidden;
    display: flex;
}

.hwid-expire-progress {
    height: 100%;
    background: #d9ff8a;
    transition: width 0.3s;
}

.context-menu-item {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px 5px;
    color: #fff;
    font-size: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.context-menu-item:last-child {
    border-bottom: none;
}

.context-menu-item:hover {
    background: #2a2a2a;
}

.context-menu-item.profile-item {
    background: #272727;
    color: #c9c9c9;
    border: #383838 1px solid;
    max-width: 12px;
    overflow: hidden;
    transition: all 0.3s;
    width: max-content;
}

.context-menu-item.profile-item:hover {
    color: #e2e2e2;
    max-width: 100%;
}

.context-menu-item.profile-item > svg {
    transform: rotate(0deg) scale(1.0);
    transition: all 0.3s;
}

.context-menu-item.profile-item:hover > svg {
    transform: rotate(-6deg) scale(1.2);
    stroke-width: 1;
}

.context-menu-item.profile-item > span {
    opacity: 0;
    font-size: 0px;
    transition: all 0.3s;
}

.context-menu-item.profile-item:hover > span {
    font-size: 8px;
    opacity: 1;
}

.context-menu-item.profile-item:hover {
    background: #0c0c0c;
}

.context-menu-item.logout-item {
    color: #ff7c7c;
    border: #ff7c7c 1px solid;
}

.context-menu-item.logout-item:hover {
    background: #2a1a1a;
}

.context-menu-item svg {
    flex-shrink: 0;
}

.hwid-loading {
    text-align: center;
    padding: 8px;
    font-size: 10px;
    color: #888;
}

.context-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: none;
}

.context-menu-overlay.active {
    display: block;
}

.nav-bt-title {
    font-size: 10px;
    line-height: 10px;
}

.nav-bt-title-hwid {
    line-height: 10px;
    color: #a0a0a0;
    font-size: 10px;
    display: flex;
    gap: 3px;
}

/* ===== ADMIN LIST ===== */
.adminlist_title > div {
    width: max-content;
    display: flex;
    border: 1px solid var(--color);
}

.adminlist_box > div {
    height: 18px !important;
    border-radius: 3px;
    font-size: 13px;
    gap: 3px;
    padding: 0px 8px;
    background: #5e5e86;
    align-items: center;
    justify-content: center;
}

.adminlist_box > div > svg {
    position: relative;
    stroke-width: 2;
    height: 14px;
}

.adminlist_box {
    display: flex;
    gap: 3px;
    border: 1px solid var(--color);
}

.adminlist_title {
    padding: 0px 3px !important;
    padding-left: 6px !important;
    display: flex;
    justify-content: space-between !important;
}

.stat-item svg {
    stroke-width: 2;
}

#bannedUsers {
    display: flex;
    --color: rgb(255, 100, 100);
    background: rgba(255, 100, 100, 0.2);
    color: var(--color);
    border: 1px solid var(--color);
}

#activeUsers {
    display: flex;
    --color: rgb(217, 255, 138);
    background: rgba(217, 255, 138, 0.2);
    color: var(--color);
    border: 1px solid var(--color);
}

#expiredUsers {
    display: flex;
    --color: rgb(255, 190, 100);
    background: rgba(255, 190, 100, 0.2);
    color: var(--color);
    border: 1px solid var(--color);
}

#nolicenseUsers {
    display: flex;
    --color: rgb(200, 140, 255);
    background: rgba(200, 140, 255, 0.2);
    color: var(--color);
    border: 1px solid var(--color);
}

#allUsers {
    display: flex;
    --color: rgb(144, 192, 255);
    background: rgba(144, 192, 255, 0.2);
    color: var(--color);
    border: 1px solid var(--color);
}

.button-ctn {
    display: flex;
    padding: 3px;
    border-radius: 0px;
    gap: 2px;
    background: #000000;
}

.menu-row {
    flex: 1;
}

.hwid-info {
    padding: 3px;
}

.hwid-info > #infr {
    flex-direction: column;
    display: flex;
    gap: 3px;
    margin-top: 3px;
}

/* ===== REVIEWS LOGIN/LOGOUT ===== */
.revlogout {
    background: #360000;
    border: #940000 solid 1px !important;
    color: #ff9090;
}

.revlogout:hover {
    background: #520000;
}

.revlogout, .revlogin {
    display: none !important;
    position: relative;
}

.revlogout::after {
    position: absolute;
    top: 25px;
    background: #3f0000;
    opacity: 0;
    color: #fff;
    width: max-content;
    padding: 5px 15px;
    z-index: 100;
    border: 1px solid #ff5b5b;
    border-radius: 3px;
    content: 'Требуется вход';
    transition: all 0.3s;
}

.revlogout:hover::after {
    opacity: 1;
}

/* ===== HEADER BLOCK ===== */
.container {
    margin: 0 auto;
    background: white;
    overflow: hidden;
}

.header {
    border-bottom: 1px solid #303030 !important;
    background: #000000;
    color: white;
    padding: 10px;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.header div {
    font-size: 20px;
    line-height: 20px;
    font-weight: 900;
    color: #d9ff8a;
}

.header p {
    color: #7cb9ff;
    line-height: 14px;
    font-size: 14px;
}

/* ===== FORM ===== */
.form-container {
    padding: 10px;
}

.form-group {
    background: #0A0A0A;
    border: 1px solid #303030 !important;
    border-radius: 5px;
    padding: 5px;
    overflow: hidden;
    flex-direction: column;
    display: flex;
    gap: 5px;
}

.subtitle-form {
    color: rgb(126, 126, 126) !important;
    font-size: 10px;
    line-height: 10px;
    font-style: italic;
    text-transform: none;
    letter-spacing: normal;
}

.title-form {
    font-size: 14px;
    line-height: 14px;
    background: linear-gradient(135deg, #d9ff8a 0%, #b8e35e 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    color: transparent !important;
    font-style: italic;
    font-weight: 800;
}

label {
    padding: 0px 2px;
    font-size: 14px;
    font-weight: bolder;
    display: block;
    color: #333;
}

.required-star {
    color: #e74c3c;
    margin-left: 4px;
}

input, select, textarea {
    background: rgb(8, 8, 8);
    border-color: #303030;
    color: #ffffff;
    padding: 6px 10px;
    border: 1px solid rgb(48, 48, 48);
    border-radius: 4px;
    font-size: 13px;
    transition: border 0.3s;
    font-family: "Unbounded", sans-serif;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #d9ff8a;
    box-shadow: 0 0 0 3px rgba(217, 255, 138, 0.1);
}

textarea {
    resize: vertical;
    min-height: 100px;
}

/* ===== RATING ===== */
.rating {
    flex: 1;
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
}

.rating input {
    display: none;
}

.rating label {
    color: #ddd;
    cursor: pointer;
    transition: color 0.2s;
    margin: 0;
}

.rating label:hover,
.rating label:hover ~ label,
.rating input:checked ~ label {
    color: #ffc107;
}

.hidden-field {
    display: none;
}

/* ===== BUTTONS ===== */
button {
    padding: 14px;
    background: #0E0E0E;
    border: 1px solid rgba(217, 255, 138, .3);
    background: linear-gradient(135deg, rgba(217, 255, 138, 0.08), rgba(100, 100, 255, 0.05));
    color: white;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, border-color 0.2s;
    /* text-transform: uppercase; */
    letter-spacing: 0.5px;
    font-family: "Unbounded", sans-serif;
}

button:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    border: 1px solid #d9ff8a;
}

button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== MESSAGES ===== */
.message {
    padding: 5px 5px;
    border-radius: 5px;
    display: none;
    font-size: 12px;
    text-transform: none;
    letter-spacing: normal;
}

.message.success {
    background: #0e1a0e;
    color: #3ddc84;
    border: 1px solid #3ddc84;
    display: block;
}

.message.error {
    background: #0e0001;
    color: #ff4759;
    border: 1px solid #ff4759 !important;
    display: block;
}

/* ===== LOADING ===== */
.loading {
    display: none;
    text-align: center;
    margin-top: 5px !important;
    padding: 10px;
    border: 1px solid rgb(48, 48, 48);
    border-radius: 4px;
    background: #000000;
    max-width: 500px;
    margin: auto;
    gap: 10px;
    justify-content: center;
}

.loading.show {
    display: flex;
}

.star-icon2 {
    width: 30px;
    padding: 1px 0px;
    display: block;
}

.loading > p {
    display: flex;
    margin: 0 !important;
    color: #929292;
    align-items: center;
}

.spinner {
    border: 2px solid #1f1f1f;
    border-top: 2px solid #d9ff8a;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    animation: spin 0.5s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.info {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 10px;
    margin-bottom: 25px;
    font-size: 13px;
    color: #666;
    border-left: 4px solid #d9ff8a;
}

.star-icon2 {
    fill: #505050;
    stroke: #505050;
    transition: all 0.2s;
}

.star-icon2.empty {
    fill: #505050;
    stroke: #505050;
}

.star-icon2.filled {
    fill: #ffb347;
    stroke: #ffb347;
}

#dataForm {
    padding: 10px;
    border-radius: 5px;
    gap: 5px;
    display: flex;
    max-width: 500px;
    margin: 0 auto;
    background: #010101;
    flex-direction: column;
    border: 1px solid rgb(48, 48, 48);
}

/* ===== MODAL ===== */
.x7k9m2p4_modal_title {
    font-size: 14px;
}

.form-group > label {
    text-align: left;
}

.x7k9m2p4_modal_close_btn {
    position: absolute;
    border-radius: 3px;
    right: 3px;
    top: 3px;
    height: 18px;
    width: 30px;
}

.x7k9m2p4_modal_header {
    justify-content: center;
    display: flex;
    background: #000000;
    padding-left: 6px;
    height: 24px;
    padding: 0px 0px;
    border-bottom: 1px solid #303030;
}

.x7k9m2p4_modal_container {
    text-align: center;
    height: auto;
    width: 500px;
}

.x7k9m2p4_modal_content_wrapper {
    padding: 10px;
}

#closeModal {
    font-size: 8px;
}

/* ===== MASCOT ===== */
.mascot {
    height: 100px;
    bottom: -8px;
    left: 2px;
    z-index: 999999999999999999;
    transition: all 0.5s;
    position: relative;
    filter: drop-shadow(0 0 5px rgb(0, 0, 0));
}

.mascot-container-fixed {
    max-width: 1600px;
    width: 100%;
    /* height: 0px; */
    margin: 0 auto;
    position: sticky;
    bottom: 0;
    z-index: 999999999999999999;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
    transition: all 0;
}

@media (max-width: 860px) {
    .mascot-container-fixed {
        left: 0px;
    }
}

.mascot-bubble-fixed {
    position: relative;
    background: rgba(8, 8, 8, 0.96);
    border: 1px solid #d9ff8a;
    border-radius: 4px;
    padding: 5px 5px;
    margin-bottom: 18px;
    color: #f0f0f0;
    font-size: 12px;
    font-family: "Unbounded", sans-serif;
    opacity: 0;
    transition: opacity 0.6s ease;
    box-shadow: 0 4px 30px rgba(217, 255, 138, 0.12);
    backdrop-filter: blur(10px);
    flex-shrink: 0;
    order: 1;
}

.mascot-bubble-fixed.show {
    opacity: 1;
}

.mascot-bubble-fixed.hide {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.mascot-bubble-fixed::before {
    content: '';
    position: absolute;
    bottom: 12px;
    left: -10px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 10px solid rgba(8, 8, 8, 0.96);
    filter: drop-shadow(-1px 0 0 #d9ff8a);
}

.mascot-bubble-fixed .bubble-text-fixed .highlight {
    color: #d9ff8a;
}

.mascot-bubble-fixed .bubble-text-fixed .highlight-gold {
    color: #ffdb5c;
}

.mascot-bubble-fixed .bubble-text-fixed .highlight-pink {
    color: #ff8a9e;
}

.mascot-bubble-fixed .bubble-text-fixed .highlight-blue {
    color: #7cb9ff;
}

.mascot-bubble-fixed .bubble-text-fixed .emoji {
    font-size: 16px;
    display: inline-block;
}

.mascot-bubble-fixed .bubble-tip-fixed {
    display: block;
    font-size: 10px;
    color: #5c5c5c;
    border-top: 1px solid #1a1a1a;
    margin-bottom: 2px;
    font-weight: 500;
    margin-top: 2px;
}

.mascot-wrapper {
    order: 2;
    pointer-events: auto;
    cursor: pointer;
    position: relative;
    bottom: -4px;
}

.mascot-bubble-fixed {
    font-weight: 300;
    font-size: 12px;
    padding: 1px 5px;
    margin-bottom: 12px;
    border-radius: 3px;
}

.mascot-bubble-fixed::before {
    top: 5px;
    left: -7px;
    border-top-width: 5px;
    border-bottom-width: 5px;
    border-right-width: 8px;
}

#dev-shop {
    position: absolute;
    top: 48px;
    cursor: default;
    font-size: 0;
    display: block;
    height: 20px;
    width: 6px;
    left: 0;
}

/* ===== PROFILE ===== */
.profile-ban-reason2:hover,
.admin_card:hover .profile-ban-reason2 {
    max-height: 200px;
}

.profile-ban-reason2:hover::after,
.admin_card:hover .profile-ban-reason2::after {
    opacity: 0;
}

.profile-ban-reason2:hover,
.profile-ban-reason2:hover::after,
.admin_card:hover .profile-ban-reason2,
.admin_card:hover .profile-ban-reason2::after {
    transition-delay: 0.8s;
}

.carousel-slide:hover .gallery-overlay,
.carousel-slide:hover::after {
    transition-delay: 0.8s;
}

.profile-launch-box {
    align-items: flex-start;
}

.profile-launch-box .profile-launch-version {
    font-size: 14px;
    font-family: Stratum2, sans-serif !important;
    transform: skewX(169deg);
    transition: all 0.2s;
    font-weight: 200;
}

.profile-launch-box .profile-launch-time {
    font-size: 10px;
    color: #505050;
    font-family: Stratum2, sans-serif !important;
}

.profile-launch-box:hover .profile-launch-time,
.profile-launch-box:hover .profile-launch-version {
    opacity: 1;
}

.profile-launch-username {
    font-family: Stratum2, sans-serif !important;
    font-size: 14px;
    line-height: 16px;
}

/* ===== NOTIFY ===== */
.notify-block {
    display: none;
    background: linear-gradient(135deg, rgba(217, 255, 138, 0.12), rgba(100, 100, 255, 0.08));
    border: 1px solid rgba(217, 255, 138, 0.25);
    border-radius: 4px;
    padding: 8px 14px;
    color: #e8e8e8;
    font-size: 12px;
    align-items: center;
    gap: 10px;
    margin: 5px 0 10px 0;
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}

.notify-block:hover {
    border-color: rgba(217, 255, 138, 0.5);
    background: linear-gradient(135deg, rgba(217, 255, 138, 0.18), rgba(100, 100, 255, 0.12));
}

.notify-block .notify-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.notify-block .notify-text {
    flex: 1;
    line-height: 1.4;
}

.notify-block .notify-text a {
    color: #d9ff8a;
    text-decoration: none;
}

.notify-block .notify-text a:hover {
    text-decoration: underline;
}

.notify-block .notify-close {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 16px;
    padding: 0 4px;
    transition: color 0.2s;
    flex-shrink: 0;
}

.notify-block .notify-close:hover {
    color: #ff6b6b;
}

/* ===== REVEAL ===== */
.product-header, .dropdown-wrapper2, .section-title {
    opacity: 0;
}

.kenso-reveal {
    opacity: 0;
    transition: opacity .55s ease;
    transition-delay: var(--kenso-delay, 0ms);
    will-change: opacity;
}

.kenso-visible {
    opacity: 1;
    will-change: auto;
}

.no-js .kenso-reveal,
.kenso-reveal.kenso-fallback {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .kenso-reveal,
    .kenso-visible {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        transition-delay: 0ms !important;
        will-change: auto !important;
    }
}

/* ===== SKELETON ===== */
.kenso-skeleton {
    display: inline-block;
    border-radius: 4px;
    background: #17191d;
    position: relative;
    overflow: hidden;
    min-height: 12px;
}

.kenso-shimmer {
    position: relative;
    overflow: hidden;
}

.kenso-shimmer > * { position: relative; z-index: 1; }

.kenso-skeleton::after,
.kenso-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(217, 255, 138, .08) 40%,
        rgba(255, 255, 255, .16) 50%,
        rgba(217, 255, 138, .08) 60%,
        transparent 100%);
    animation: kensoShimmer 1.4s ease-in-out infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes kensoShimmer {
    100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .kenso-skeleton::after, .kenso-shimmer::after { animation: none; }
}

.kenso-skeleton-row td { padding: 12px 8px; }
.kenso-skeleton-card { display: flex; flex-direction: column; gap: 10px; }