:root {
    --ycode-primary: #5b67ff;
    --ycode-primary-dark: #3a46db;
    --ycode-accent: #8b5cf6;
    --ycode-bg: #f3f6ff;
    --ycode-panel: #ffffff;
    --ycode-line: rgba(94, 114, 228, 0.12);
    --ycode-shadow: 0 20px 60px rgba(37, 55, 104, 0.12);
    --ycode-soft-shadow: 0 12px 32px rgba(37, 55, 104, 0.08);
    --ycode-text: #18233d;
    --ycode-muted: #6f7c97;
}

body.ycode-client-skin {
    background:
        radial-gradient(circle at top left, rgba(91, 103, 255, 0.16), transparent 34%),
        radial-gradient(circle at top right, rgba(139, 92, 246, 0.18), transparent 26%),
        linear-gradient(180deg, #f7f9ff 0%, #eef3ff 100%);
    color: var(--ycode-text);
}

body.ycode-client-skin .template,
body.ycode-client-skin .product,
body.ycode-client-skin .product_detail {
    min-height: 100vh;
}

body.ycode-client-skin .main-card,
body.ycode-client-skin .recommend-box-open,
body.ycode-client-skin .recommend-box,
body.ycode-client-skin .WorkOrder-box,
body.ycode-client-skin .notice-box,
body.ycode-client-skin .product-list-box,
body.ycode-client-skin .statistics-box,
body.ycode-client-skin .info-box,
body.ycode-client-skin .content-box,
body.ycode-client-skin .card,
body.ycode-client-skin .el-dialog,
body.ycode-client-skin .main-card-table {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--ycode-line);
    box-shadow: var(--ycode-shadow);
    border-radius: 24px;
}

body.ycode-client-skin .main-card,
body.ycode-client-skin .content-box,
body.ycode-client-skin .main-card-table {
    overflow: hidden;
}

body.ycode-client-skin .main-card-title,
body.ycode-client-skin .title-text,
body.ycode-client-skin .main-title {
    color: var(--ycode-text);
    font-weight: 700;
}

body.ycode-client-skin .dashboard-hero,
body.ycode-client-skin .ycode-page-intro {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
    padding: 24px 28px;
    background: linear-gradient(135deg, #4454ff 0%, #7a5cff 52%, #8d7bff 100%);
    border-radius: 24px;
    color: #fff;
    box-shadow: 0 18px 45px rgba(74, 84, 255, 0.28);
}

body.ycode-client-skin .dashboard-hero h2,
body.ycode-client-skin .ycode-page-intro h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 24px;
    line-height: 1.3;
}

body.ycode-client-skin .dashboard-hero p,
body.ycode-client-skin .ycode-page-intro p {
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 14px;
    line-height: 1.8;
}

body.ycode-client-skin .dashboard-hero-actions,
body.ycode-client-skin .ycode-page-intro-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

body.ycode-client-skin .dashboard-hero-actions a,
body.ycode-client-skin .ycode-page-intro-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 118px;
    padding: 11px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

body.ycode-client-skin .dashboard-hero-actions a:hover,
body.ycode-client-skin .ycode-page-intro-actions a:hover {
    background: rgba(255, 255, 255, 0.22);
}

body.ycode-client-skin .login-container {
    min-height: 100vh;
    padding: 40px;
    background:
        radial-gradient(circle at left top, rgba(86, 102, 255, 0.22), transparent 30%),
        linear-gradient(120deg, #edf2ff 0%, #f8faff 45%, #edf0ff 100%);
}

body.ycode-client-skin .container-back,
body.ycode-client-skin .container-before {
    border-radius: 28px;
}

body.ycode-client-skin .container-back {
    background: linear-gradient(145deg, #4c57ff 0%, #8457ff 100%);
    box-shadow: 0 24px 70px rgba(76, 87, 255, 0.32);
}

body.ycode-client-skin .container-before {
    box-shadow: 0 24px 70px rgba(31, 45, 87, 0.12);
}

body.ycode-client-skin .login {
    background: rgba(255, 255, 255, 0.98);
}

body.ycode-client-skin .login-text-title,
body.ycode-client-skin .text-title,
body.ycode-client-skin .text-welcome {
    color: var(--ycode-text);
}

body.ycode-client-skin .container-back .text-title,
body.ycode-client-skin .container-back .text-level,
body.ycode-client-skin .container-back .text-welcome {
    color: #fff;
}

body.ycode-client-skin .text-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

body.ycode-client-skin .text-points span {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    border: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 13px;
}

body.ycode-client-skin .el-input__inner,
body.ycode-client-skin .el-textarea__inner,
body.ycode-client-skin .el-select .el-input__inner {
    height: 46px;
    border-radius: 14px;
    border-color: rgba(91, 103, 255, 0.18);
    box-shadow: none;
}

body.ycode-client-skin .el-textarea__inner {
    min-height: 120px;
}

body.ycode-client-skin .el-input__inner:focus,
body.ycode-client-skin .el-textarea__inner:focus {
    border-color: var(--ycode-primary);
    box-shadow: 0 0 0 3px rgba(91, 103, 255, 0.1);
}

body.ycode-client-skin .el-button--primary,
body.ycode-client-skin .login-btn,
body.ycode-client-skin .btn-ok,
body.ycode-client-skin .recharge-btn,
body.ycode-client-skin .no-recommend,
body.ycode-client-skin .copy-btn {
    background: linear-gradient(135deg, var(--ycode-primary) 0%, var(--ycode-accent) 100%);
    border: 0;
    box-shadow: 0 12px 24px rgba(91, 103, 255, 0.22);
}

body.ycode-client-skin .el-button--default,
body.ycode-client-skin .pass-btn,
body.ycode-client-skin .btn-no {
    border-radius: 14px;
}

body.ycode-client-skin .info-box,
body.ycode-client-skin .statistics-box,
body.ycode-client-skin .product-list-box,
body.ycode-client-skin .WorkOrder-box,
body.ycode-client-skin .notice-box,
body.ycode-client-skin .recommend-box,
body.ycode-client-skin .recommend-box-open {
    padding: 24px;
}

body.ycode-client-skin .el-table {
    border-radius: 18px;
    overflow: hidden;
}

body.ycode-client-skin .el-table th,
body.ycode-client-skin .el-table tr {
    background: transparent;
}

body.ycode-client-skin .el-table th {
    background: rgba(91, 103, 255, 0.05);
    color: var(--ycode-text);
}

body.ycode-client-skin .el-tabs__nav-wrap::after {
    background-color: rgba(91, 103, 255, 0.12);
}

body.ycode-client-skin .el-tabs__item.is-active,
body.ycode-client-skin .bule-text,
body.ycode-client-skin .base-color,
body.ycode-client-skin .more,
body.ycode-client-skin .cloud-name:hover,
body.ycode-client-skin .column-id,
body.ycode-client-skin .a-text {
    color: var(--ycode-primary) !important;
}

body.ycode-client-skin .el-tabs__active-bar {
    background: linear-gradient(90deg, var(--ycode-primary) 0%, var(--ycode-accent) 100%);
}

body.ycode-client-skin .el-dialog {
    overflow: hidden;
}

body.ycode-client-skin .dialog-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--ycode-text);
}

@media (max-width: 991.98px) {
    body.ycode-client-skin .login-container {
        padding: 16px;
    }

    body.ycode-client-skin .dashboard-hero,
    body.ycode-client-skin .ycode-page-intro {
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
    }
}