:root {
    --user-bg: #0b0a10;
    --user-panel: #14121c;
    --user-panel-soft: #1b1724;
    --user-border: #2c2634;
    --user-text: #f6edf4;
    --user-text-soft: #a79aaa;
    --user-accent: #b96898;
    --user-accent-strong: #d3a17a;
    --user-white: #ffffff;
    --user-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: radial-gradient(circle at 80% 0, #25182a 0, #0b0a10 38%);
    color: var(--user-text);
    font: 14px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
}

input,
textarea,
select {
    width: 100%;
    border: 1px solid var(--user-border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--user-text);
    padding: 12px 14px;
    outline: none;
}

input::placeholder,
textarea::placeholder {
    color: var(--user-text-soft);
}

input:focus,
textarea:focus,
select:focus {
    border-color: rgba(232, 161, 200, 0.55);
    box-shadow: 0 0 0 4px rgba(232, 161, 200, 0.12);
}

button,
.btn,
.btn-brand,
.btn-white,
.btn-primary,
.btn-del,
.btn_unbind,
.login_form_submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.16s ease, opacity 0.16s ease, background 0.16s ease;
}

button:hover,
.btn:hover,
.btn-brand:hover,
.btn-white:hover,
.btn-primary:hover,
.btn-del:hover,
.btn_unbind:hover,
.login_form_submit:hover {
    transform: translateY(-1px);
}

.btn-brand,
.btn-primary,
.login_form_submit {
    background: linear-gradient(135deg, var(--user-accent) 0%, var(--user-accent-strong) 100%);
    color: var(--user-white);
}

.btn-white {
    background: rgba(255, 255, 255, 0.1);
    color: var(--user-white);
}

.a-gry,
.text-muted,
.color {
    color: var(--user-text-soft);
}

.wrap,
.login-w,
.reg-w,
.information-w,
.form-w,
.payment,
.stui-pannel,
.often-odr,
.order-list,
.member-main {
    width: min(960px, calc(100% - 24px));
    margin: 24px auto;
    border: 1px solid var(--user-border);
    border-radius: 18px;
    background: var(--user-panel);
    box-shadow: var(--user-shadow);
}

.wrap,
.login-w,
.reg-w,
.information-w,
.form-w,
.payment,
.stui-pannel {
    padding: 24px;
}

.member-top {
    background: linear-gradient(135deg, rgba(185, 104, 152, 0.24) 0%, rgba(217, 180, 119, 0.08) 100%);
    border-radius: 18px 18px 0 0;
    padding: 28px 24px;
}

.cont-w,
.cont,
.meb-info,
.form-group,
.log-btn,
.radio-box,
.split-line,
.list-top,
.often-del,
.order-list .item,
.top-line,
.bottom-line {
    display: flex;
    gap: 12px;
}

.cont {
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.face {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.15);
}

.meb-info {
    flex-wrap: wrap;
    color: var(--user-text-soft);
}

.meb-info span {
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
}

.member-main {
    padding: 18px;
}

.member-main ul,
.often-odr ul,
.order-list ul,
.payment ul,
.information-w ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.member-main li,
.often-odr li,
.order-list li,
.payment li,
.information-w li {
    margin: 10px 0;
    padding: 14px 16px;
    border: 1px solid var(--user-border);
    border-radius: 14px;
    background: var(--user-panel-soft);
}

.member-main li a,
.often-odr li a,
.order-list li a,
.payment li a,
.information-w li a {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-group,
.login_form_group {
    position: relative;
    align-items: center;
    margin-bottom: 14px;
}

.form-group i,
.login_form_group i {
    width: 18px;
    color: var(--user-text-soft);
}

.form-group input,
.login_form_group input,
.form-control {
    flex: 1;
}

.pwd_img {
    min-width: 110px;
}

.pwd_img img {
    display: block;
    width: 100%;
    height: 42px;
    object-fit: cover;
    border-radius: 12px;
}

.log-btn {
    justify-content: space-between;
    margin-top: 18px;
}

.stui-modal {
    position: relative;
}

.stui-modal__dialog {
    width: min(520px, calc(100% - 24px));
    margin: 24px auto;
}

.stui-modal__content,
.stui-pannel-box {
    background: transparent;
}

.stui-pannel_hd,
.stui-pannel__head,
.tit,
.zy-tit,
.title {
    margin-bottom: 16px;
    font-size: 20px;
    font-weight: 700;
    color: var(--user-white);
}

.stui_login__form,
.input-list {
    display: grid;
    gap: 14px;
}

.go-back,
.btn-close,
.close,
.icon-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer {
    width: min(960px, calc(100% - 24px));
    margin: 0 auto 24px;
    color: var(--user-text-soft);
}

.loading_box {
    display: none;
}

.fl {
    float: left;
}

.fr,
.pull-right {
    float: right;
}

.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

.text-center {
    text-align: center;
}

.price,
.odr-price,
.new-val {
    color: #d9b477;
}

.mt10 {
    margin-top: 10px;
}

.ml10 {
    margin-left: 10px;
}

.mr10 {
    margin-right: 10px;
}

.mb80 {
    margin-bottom: 80px;
}

@media (max-width: 768px) {
    .wrap,
    .login-w,
    .reg-w,
    .information-w,
    .form-w,
    .payment,
    .stui-pannel,
    .often-odr,
    .order-list,
    .member-main {
        width: calc(100% - 16px);
        margin: 12px auto;
        padding: 16px;
    }

    .member-top {
        padding: 20px 16px;
    }

    .cont,
    .meb-info,
    .log-btn,
    .split-line,
    .order-list .item,
    .top-line,
    .bottom-line {
        flex-direction: column;
    }

    .btn-brand,
    .btn-white,
    .btn-primary,
    .btn-del,
    .btn_unbind,
    .login_form_submit {
        width: 100%;
    }
}