:root {
    --theme-bg: #f5f7fb;
    --theme-surface: #ffffff;
    --theme-surface-muted: #f8f9fd;
    --theme-primary: #6f5df6;
    --theme-primary-soft: rgba(111, 93, 246, 0.12);
    --theme-primary-border: rgba(111, 93, 246, 0.18);
    --theme-text: #1f2937;
    --theme-text-muted: #6b7280;
    --theme-border: #e7eaf3;
    --theme-shadow: 0 16px 40px rgba(31, 41, 55, 0.08);
    --theme-shadow-soft: 0 8px 24px rgba(31, 41, 55, 0.06);
    --theme-radius: 18px;
}

body {
    font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
    color: var(--theme-text);
}

body.gray-bg,
.gray-bg {
    background: var(--theme-bg) !important;
}

.wrapper-content,
.container-div {
    padding: 20px;
}

.search-collapse,
.select-table,
.wrapper-content > .row > .col-sm-12,
.wrapper-content > .ibox,
.wrapper-content > .ibox-content,
.wrapper-content .panel,
.wrapper-content .ibox-title,
.wrapper-content .ibox-content,
.modal-content {
    border-radius: var(--theme-radius);
}

.search-collapse,
.select-table,
.ibox,
.modal-content,
.wrapper-content > .row > .col-sm-12 > .ibox-content,
.wrapper-content > .row > .col-sm-12 > .panel {
    background: var(--theme-surface);
    box-shadow: var(--theme-shadow-soft);
    border: 1px solid var(--theme-border);
}

.skin-blue,
.skin-green,
.skin-purple,
.skin-red,
.skin-yellow {
    --theme-primary: #6f5df6;
    --theme-primary-soft: rgba(111, 93, 246, 0.12);
    --theme-primary-border: rgba(111, 93, 246, 0.18);
}

.search-collapse {
    margin-bottom: 16px;
    padding: 10px 12px 2px;
}

.search-collapse .select-list ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
}

.search-collapse .select-list ul li {
    margin-bottom: 10px;
}

.select-table {
    padding: 10px 14px 14px;
}

.fixed-sidebar .navbar-static-side,
.mini-navbar .navbar-static-side,
.navbar-default.navbar-static-side {
    background: #ffffff !important;
    box-shadow: 8px 0 24px rgba(15, 23, 42, 0.06);
    border-right: 1px solid var(--theme-border);
}

.fixed-sidebar .logo,
.navbar-default .logo {
    background: transparent !important;
    color: var(--theme-text) !important;
    height: 68px;
    line-height:  68px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.2px;

}

.fixed-sidebar .logo:before,
.navbar-default .logo:before {
    content: "\f0e7";
    font-family: FontAwesome;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin-right: 10px;
    border-radius: 12px;
    background: linear-gradient(135deg, #7c6cf8, #5a7df8);
    color: #fff;
    font-size: 16px;
    vertical-align: middle;
}

.user-panel {
    margin: 16px 14px 12px;
    padding: 16px 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, #fafbff, #f4f7ff);
    border: 1px solid var(--theme-border);
}

.user-panel .info p,
.user-panel .info a,
.nav-header a,
.nav > li > a,
.navbar-default .nav > li > a {
    color: var(--theme-text) !important;
}

.nav > li > a {
    margin: 4px 12px;
    padding: 12px 16px 12px 18px;
    border-radius: 14px;
    font-weight: 600;
    color: #4b5563 !important;
    transition: all 0.2s ease;
}

.navbar-default .nav > li > a:hover,
.navbar-default .nav > li > a:focus,
.nav > li.selected > a,
.nav > li.active > a {
    background: var(--theme-primary-soft) !important;
    color: var(--theme-primary) !important;
}

.nav > li.active,
.nav:not(.navbar-toolbar) > li.active {
    background: transparent !important;
    border-left: none !important;
}

.nav-second-level,
.nav-third-level,
.nav-four-level {
    background: transparent;
}

.nav-second-level li a,
.nav-third-level li a,
.nav-four-level li a {
    margin-left: 18px;
    margin-right: 12px;
    border-radius: 12px;
    color: var(--theme-text-muted) !important;
}

#page-wrapper {
    background: var(--theme-bg) !important;
    min-height: 100vh;
}

.border-bottom {
    border-bottom: none !important;
}

.navbar.navbar-static-top {
    margin: 0;
    padding: 0 18px;
    min-height: 64px;
    border-radius: 0;
    background: var(--theme-surface) !important;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--theme-border);
}

.navbar-header .minimalize-styl-2 {
    margin: 12px 0 0;
    border-radius: 12px;
    background: var(--theme-primary);
    color: #fff !important;
}

.nav.navbar-top-links li a,
.nav.navbar-right > li > a {
    color: var(--theme-text) !important;
    border-radius: 12px;
}

.nav.navbar-top-links li a:hover,
.nav.navbar-right > li > a:hover {
    background: var(--theme-surface-muted) !important;
    color: var(--theme-primary) !important;
}

.skin-blue .navbar-default .nav > li.selected > a,
.skin-blue .navbar-default .nav > li.selected > a:focus,
.skin-green .navbar-default .nav > li.selected > a,
.skin-green .navbar-default .nav > li.selected > a:focus,
.skin-purple .navbar-default .nav > li.selected > a,
.skin-purple .navbar-default .nav > li.selected > a:focus,
.skin-red .navbar-default .nav > li.selected > a,
.skin-red .navbar-default .nav > li.selected > a:focus,
.skin-yellow .navbar-default .nav > li.selected > a,
.skin-yellow .navbar-default .nav > li.selected > a:focus,
.skin-blue .dropdown-menu > .active > a,
.skin-blue .dropdown-menu > .active > a:hover,
.skin-blue .dropdown-menu > .active > a:focus,
.skin-green .dropdown-menu > .active > a,
.skin-green .dropdown-menu > .active > a:hover,
.skin-green .dropdown-menu > .active > a:focus,
.skin-purple .dropdown-menu > .active > a,
.skin-purple .dropdown-menu > .active > a:hover,
.skin-purple .dropdown-menu > .active > a:focus,
.skin-red .dropdown-menu > .active > a,
.skin-red .dropdown-menu > .active > a:hover,
.skin-red .dropdown-menu > .active > a:focus,
.skin-yellow .dropdown-menu > .active > a,
.skin-yellow .dropdown-menu > .active > a:hover,
.skin-yellow .dropdown-menu > .active > a:focus {
    background-color: var(--theme-primary) !important;
    color: #fff !important;
}

.content-tabs {

    background: var(--theme-surface);
    box-shadow: var(--theme-shadow-soft);
    border: 1px solid var(--theme-border);
}

.content-tabs .roll-nav,
.page-tabs a {
    color: var(--theme-text-muted);
}

.page-tabs a.active {
    color: var(--theme-primary);
    background: linear-gradient(180deg, #fff, #faf9ff);
}

.mainContent {

    overflow: hidden;

}

.RuoYi_iframe {
    background: var(--theme-bg);
}

.footer {
    margin: 0 16px 16px;
    padding: 14px 18px;

}

.btn,
.form-control,
.select2-selection,
.bootstrap-select .dropdown-toggle,
.dropdown-menu,
.popover,
.layui-layer,
.modal-content {
    border-radius: 12px !important;
}

.btn-primary,
.btn-success {
    border-color: var(--theme-primary) !important;
    background: var(--theme-primary) !important;
}

.btn-primary:hover,
.btn-success:hover {
    filter: brightness(0.96);
}

.form-control,
.bootstrap-select .dropdown-toggle,
.select2-container--bootstrap .select2-selection {
    min-height: 40px;
    border-color: var(--theme-border) !important;
    background: #fff;
    box-shadow: none !important;
}

.form-control:focus,
.bootstrap-select .dropdown-toggle:focus,
.select2-container--bootstrap .select2-selection:focus {
    border-color: var(--theme-primary) !important;
    box-shadow: 0 0 0 3px rgba(111, 93, 246, 0.12) !important;
}

.bootstrap-table {
    border-radius: 16px;
    overflow: hidden;
}

.fixed-table-container {
    border: none !important;
}

.fixed-table-toolbar,
.fixed-table-pagination,
.fixed-table-container tbody td,
.fixed-table-container thead th {
    border-color: var(--theme-border) !important;
}

.fixed-table-container thead th {
    background: #fafbff;
    color: #374151;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fcfcff;
}

.pagination > li > a,
.pagination > li > span {
    color: var(--theme-text-muted);
    border-color: var(--theme-border);
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
}

body.signin {
    min-height: 100vh;
    background:
        radial-gradient(circle at 18% 20%, rgba(94, 114, 228, 0.22), transparent 32%),
        radial-gradient(circle at 78% 82%, rgba(111, 93, 246, 0.28), transparent 28%),
        linear-gradient(135deg, #102a58 0%, #163c72 48%, #1d477d 100%) !important;
}

.language-selector {
    top: 24px !important;
    right: 28px !important;
    z-index: 3;
}

.lang-option {
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(8px);
}

.lang-option:hover {
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.16);
}

.signinpanel {
    width: min(1120px, calc(100vw - 48px));
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    align-items: center;
    color: #fff;
}

.signinpanel .row {
    width: 100%;
    display: flex;
    align-items: stretch;
    margin: 0;
    overflow: hidden;
    border-radius: 28px;
    box-shadow: 0 28px 70px rgba(9, 19, 37, 0.3);
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(8px);
}

.signinpanel .col-sm-7,
.signinpanel .col-sm-5 {
    float: none;
    padding: 0;
}

.signinpanel .col-sm-7 {
    width: 58.33333333%;
    background:
        radial-gradient(circle at 18% 20%, rgba(120, 153, 255, 0.22), transparent 28%),
        radial-gradient(circle at 85% 90%, rgba(127, 92, 255, 0.28), transparent 24%),
        linear-gradient(150deg, rgba(14, 40, 82, 0.96) 0%, rgba(20, 50, 95, 0.96) 60%, rgba(23, 61, 105, 0.96) 100%);
}

.signinpanel .col-sm-5 {
    width: 41.66666667%;
    background: #f7f8fc;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 42px;
}

.signinpanel .signin-info {
    min-height: 640px;
    padding: 88px 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.signinpanel .signin-info:before {
    content: "AI";
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    margin-bottom: 26px;
    background: linear-gradient(135deg, #7c6cf8, #5a7df8);
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 1px;
    box-shadow: 0 18px 32px rgba(90, 125, 248, 0.28);
}

.signinpanel .signin-info h2 {
    margin: 0 0 18px;
    font-size: 42px;
    line-height: 1.24;
    font-weight: 700;
    color: #fff;
}

.signinpanel .signin-info p {
    max-width: 460px;
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.78);
}

.signinpanel .signin-info ul {
    margin-top: 30px;
}

.signinpanel .signin-info ul li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 16px;
    color: rgba(255, 255, 255, 0.86);
    font-size: 15px;
}

.signinpanel .signin-info ul li:before {
    content: "\f00c";
    position: absolute;
    left: 0;
    top: 2px;
    font-family: FontAwesome;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(124, 108, 248, 0.28);
    color: #dfe3ff;
    font-size: 10px;
}

.signinpanel form {
    width: 100%;
    max-width: 390px;
    padding: 40px 34px 28px;
    border: 1px solid rgba(17, 24, 39, 0.06);
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08);
}

.signinpanel form h4 {
    margin: 0 0 24px;
    color: #111827;
    font-size: 31px;
    font-weight: 700;
}

.signinpanel .form-control {
    height: 46px !important;
    margin-top: 14px;
    padding-left: 16px !important;
    border: 1px solid #dbe1ee;
    background-position: calc(100% - 16px) center;
}

.signinpanel .btn {
    margin-top: 20px;
    height: 46px;
    border: none;
    font-size: 15px;
    font-weight: 600;
    background: linear-gradient(135deg, #1d6fe8, #1264d1) !important;
}

.signinpanel .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(29, 111, 232, 0.22);
}

.signinpanel .checkbox-custom,
.signinpanel .checkbox-custom label {
    color: #6b7280;
}

.signup-footer {
    display: none;
}

body.signin .imgcode {
    border-radius: 12px;
    border: 1px solid #dbe1ee;
    background: #fff;
    padding: 2px;
}

#groupId {
    height: 46px !important;
    border-radius: 12px !important;
    border-color: #dbe1ee !important;
}

@media (max-width: 991px) {
    .signinpanel {
        width: min(720px, calc(100vw - 32px));
    }

    .signinpanel .row {
        display: block;
    }

    .signinpanel .col-sm-7,
    .signinpanel .col-sm-5 {
        width: 100%;
    }

    .signinpanel .signin-info {
        min-height: auto;
        padding: 56px 40px 32px;
    }

    .signinpanel .col-sm-5 {
        padding: 28px;
    }
}

@media (max-width: 768px) {
    .signinpanel {
        width: calc(100vw - 24px);
    }

    .signinpanel .signin-info h2 {
        font-size: 30px;
    }

    .signinpanel form {
        max-width: none;
        padding: 28px 22px 24px;
    }

    .navbar.navbar-static-top,
    .content-tabs,
    .mainContent,
    .footer {
        margin-left: 10px;
        margin-right: 10px;
    }
}
