/* Hub Vue-style theme
   Light shell, Element-like controls, card layout.
   Loaded after skins / ry-ui so it wins without touching business markup. */

:root {
    --hub-primary: #1677ff;
    --hub-primary-hover: #4096ff;
    --hub-primary-soft: #e8f3ff;
    --hub-success: #00b42a;
    --hub-warning: #ff7d00;
    --hub-danger: #f53f3f;
    --hub-info: #14c9c9;
    --hub-text: #1d2129;
    --hub-text-2: #4e5969;
    --hub-text-3: #86909c;
    --hub-border: #e5e6eb;
    --hub-fill: #f7f8fa;
    --hub-page: #f2f3f5;
    --hub-radius: 8px;
    --hub-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 16px rgba(29, 33, 41, .04);
    --header-bg: #ffffff;
    --header-text: #4e5969;
    --header-hover: #f2f3f5;
    --side-bg: #ffffff;
    --side-text: #4e5969;
    --side-hover: #f2f3f5;
    --side-active-bg: var(--hub-primary-soft);
    --side-active-text: var(--hub-primary);
    --side-border: #f2f3f5;
    --panel-bg: #f7f8fa;
    --panel-text: #1d2129;
}

html.skin-green, body.skin-green {
    --hub-primary: #00b42a;
    --hub-primary-hover: #23c343;
    --hub-primary-soft: #e8ffea;
}

html.skin-purple, body.skin-purple {
    --hub-primary: #722ed1;
    --hub-primary-hover: #8d4eda;
    --hub-primary-soft: #f5e8ff;
}

html.skin-red, body.skin-red {
    --hub-primary: #f53f3f;
    --hub-primary-hover: #f76560;
    --hub-primary-soft: #ffece8;
}

html.skin-yellow, body.skin-yellow {
    --hub-primary: #f77234;
    --hub-primary-hover: #ff9a2e;
    --hub-primary-soft: #fff3e8;
}

html.theme-dark, body.theme-dark {
    --side-bg: #1d2129;
    --side-text: #c9cdd4;
    --side-hover: #2e3440;
    --side-active-bg: var(--hub-primary);
    --side-active-text: #ffffff;
    --side-border: #1d2129;
    --panel-bg: rgba(255, 255, 255, .06);
    --panel-text: #ffffff;
}

html.theme-blue, body.theme-blue {
    --side-bg: #0c2744;
    --side-text: #d4e5f7;
    --side-hover: rgba(255, 255, 255, .08);
    --side-active-bg: var(--hub-primary);
    --side-active-text: #ffffff;
    --side-border: #0c2744;
    --panel-bg: rgba(255, 255, 255, .08);
    --panel-text: #ffffff;
}

html, body {
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
    color: var(--hub-text);
    -webkit-font-smoothing: antialiased;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-thumb {
    background: #c9cdd4;
    border-radius: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------- shell ---------- */
body.gray-bg,
#page-wrapper.gray-bg,
.gray-bg {
    background: var(--hub-page) !important;
}

#page-wrapper > .border-bottom {
    border-bottom: none !important;
    box-shadow: 0 1px 4px rgba(0, 21, 41, .06);
    position: relative;
    z-index: 2000;
    overflow: visible;
}

.navbar-static-top,
.navbar-top-links {
    overflow: visible;
}

body .navbar.navbar-static-top,
body[class*="skin-"] .navbar,
body[class*="skin-"] .navbar.navbar-static-top {
    background: var(--header-bg) !important;
    box-shadow: none;
}

body .navbar.navbar-static-top .nav > li > a,
body[class*="skin-"] .navbar .nav > li > a {
    color: var(--header-text) !important;
    background: transparent !important;
    font-weight: 500;
}

body .navbar.navbar-static-top .navbar-top-links > li > a:hover,
body .navbar.navbar-static-top .navbar-top-links > li > a:focus,
body[class*="skin-"] .navbar .nav > li > a:hover,
body[class*="skin-"] .navbar .nav > li > a:focus,
body[class*="skin-"] .navbar .nav .open > a {
    background: var(--header-hover) !important;
    color: var(--hub-primary) !important;
}

.minimalize-styl-2 {
    color: var(--header-text) !important;
    width: 32px;
    height: 32px;
    line-height: 32px;
    padding: 0 !important;
    margin: 9px 4px 0 14px;
    text-align: center;
    border-radius: 8px;
    background: var(--hub-fill);
}

.minimalize-styl-2:hover {
    background: var(--hub-primary-soft);
    color: var(--hub-primary) !important;
}

.navbar-right > .user-menu .user-image {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #e8f3ff;
}

.navbar-top-links > li.dropdown {
    position: relative;
}

.navbar-right > .user-menu > .dropdown-menu,
.navbar-top-links > li.dropdown > .dropdown-menu {
    top: calc(100% - 6px) !important;
    left: auto !important;
    right: 0;
    margin-top: 0 !important;
    z-index: 3000;
    border: 1px solid #f2f3f5;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(29, 33, 41, .12);
    padding: 6px;
}

.navbar-top-links > li.dropdown.open > .dropdown-menu,
.navbar-top-links > li.dropdown:hover > .dropdown-menu {
    display: block;
}

.dropdown-menu > li > a {
    border-radius: 6px;
    color: var(--hub-text-2);
    padding: 6px 12px;
}

.dropdown-menu > li > a:hover {
    background: var(--hub-primary-soft) !important;
    color: var(--hub-primary) !important;
}

#noticeList {
    border-radius: 12px !important;
}

#noticeBadge {
    background: var(--hub-danger) !important;
    box-shadow: 0 0 0 2px #fff;
}

/* horizontal menu (topnav mode) */
.navbar-toolbar.nav-tabs {
    border-bottom: none;
}

.navbar-toolbar.nav-tabs > li > a {
    border: none !important;
    border-radius: 8px !important;
    margin: 9px 2px 0;
    padding: 6px 12px !important;
    height: auto !important;
    line-height: 20px !important;
    color: var(--hub-text-2) !important;
}

.navbar-toolbar.nav-tabs > li.active > a,
.navbar-toolbar.nav-tabs > li.active > a:hover,
.navbar-toolbar.nav-tabs > li.active > a:focus,
.navbar-toolbar.nav-tabs > li > a:hover {
    background: var(--hub-primary-soft) !important;
    color: var(--hub-primary) !important;
    border: none !important;
}

/* ---------- sidebar ---------- */
body .navbar-static-side,
body.theme-dark .navbar-static-side,
body.theme-light .navbar-static-side,
body[class*="skin-"] .wrapper,
body[class*="skin-"] .main-sidebar,
body[class*="skin-"] .left-side {
    background: var(--side-bg) !important;
    box-shadow: 1px 0 0 var(--side-border) !important;
}

body nav .logo,
body[class*="skin-"] .logo,
body[class*="skin-"] .logo:hover {
    background: var(--side-bg) !important;
    color: var(--panel-text) !important;
    border-bottom: 1px solid var(--side-border) !important;
    font-weight: 700;
    letter-spacing: .2px;
    height: 50px;
    line-height: 50px;
}

body.mini-navbar nav .logo {
    width: 70px;
    padding: 0;
}

body.mini-navbar nav .logo .logo-lg {
    font-size: 0;
}

body.mini-navbar nav .logo .logo-lg::before {
    margin-right: 0;
}

nav .logo .logo-lg::before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    border-radius: 7px;
    vertical-align: -4px;
    background: var(--hub-primary);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}

.sidebar-collapse .user-panel,
body.theme-dark .user-panel,
body.theme-light .user-panel {
    width: auto;
    margin: 12px 12px 6px;
    padding: 10px 12px;
    background: var(--panel-bg) !important;
    border-radius: 12px;
}

.sidebar-collapse .user-panel > .info > p,
.sidebar-collapse .user-panel > .info,
.sidebar-collapse .user-panel > .info a,
body.theme-dark .user-panel > .info > p,
body.theme-dark .user-panel > .info,
body.theme-dark .user-panel > .info > a,
body.theme-light .user-panel > .info > p,
body.theme-light .user-panel > .info a {
    color: var(--panel-text) !important;
}

.sidebar-collapse .user-panel .image > img {
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(29, 33, 41, .08);
}

body .navbar-static-side .nav > li > a {
    color: var(--side-text) !important;
    font-weight: 500;
    border-radius: 8px;
    margin: 2px 10px;
    padding: 10px 12px;
    transition: background .15s ease, color .15s ease;
}

body .navbar-static-side .nav-second-level > li > a,
body .navbar-static-side .nav-third-level > li > a,
body .navbar-static-side .nav-four-level > li > a {
    font-weight: 400;
    margin: 1px 10px;
    padding: 8px 12px 8px 36px !important;
    border-radius: 8px;
    color: var(--side-text) !important;
}

body .navbar-static-side .nav-third-level > li > a,
body .navbar-static-side .nav-four-level > li > a {
    padding-left: 48px !important;
}

body .navbar-static-side .navbar-default .nav > li > a:hover,
body .navbar-static-side .navbar-default .nav > li > a:focus,
body .navbar-static-side .nav > li > a:hover,
body .navbar-static-side .nav > li > a:focus,
body.theme-dark .navbar-default .nav > li > a:hover,
body.theme-dark .navbar-default .nav > li > a:focus,
body.theme-light .navbar-default .nav > li > a:hover,
body.theme-light .navbar-default .nav > li > a:focus {
    background: var(--side-hover) !important;
    color: var(--panel-text) !important;
}

body .navbar-static-side .nav > li.active,
body .navbar-static-side .nav:not(.navbar-toolbar) > li.active,
body[class*="skin-"] .nav:not(.navbar-toolbar) > li.active,
body.theme-dark .nav:not(.navbar-toolbar) > li.active,
body.theme-light .nav:not(.navbar-toolbar) > li.active {
    border-left: none !important;
    background: transparent !important;
}

body .navbar-static-side .nav > li.selected > a,
body .navbar-static-side .nav > li.active > a,
body[class*="skin-"] .navbar-default .nav > li.selected > a,
body[class*="skin-"] .navbar-default .nav > li.selected > a:focus,
body[class*="skin-"] .navbar-default .nav > li.active > a,
body.theme-light .navbar-default .nav > li.selected > a,
body.theme-light .navbar-default .nav > li.active > a {
    background: var(--side-active-bg) !important;
    color: var(--side-active-text) !important;
}

body .navbar-static-side .nav > li > a > .fa {
    width: 18px;
    margin-right: 8px;
    text-align: center;
    color: var(--side-text);
}

body .navbar-static-side .nav > li.selected > a > .fa,
body .navbar-static-side .nav > li.active > a > .fa {
    color: var(--side-active-text);
}

body.mini-navbar .navbar-static-side .nav > li > a {
    margin: 4px 8px;
    padding: 12px 0 !important;
    text-align: center;
}

body.mini-navbar .sidebar-collapse .user-panel {
    margin: 8px 6px;
    padding: 8px 0;
    background: transparent !important;
}

body.fixed-sidebar.mini-navbar .nav li:hover > .nav-second-level,
body.canvas-menu.mini-navbar .nav-second-level,
body.mini-navbar .nav li:hover > .nav-second-level {
    background: var(--side-bg) !important;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(29, 33, 41, .12);
}

body.mini-navbar .navbar-default .nav > li > .nav-second-level li a {
    color: var(--side-text) !important;
}

/* ---------- tags ---------- */
.content-tabs {
    background: var(--hub-page) !important;
    border-bottom: none !important;
    height: 40px;
    line-height: 40px;
    box-shadow: none;
}

.content-tabs .roll-nav,
.content-tabs button,
.roll-right.tabReload {
    background: transparent !important;
    border: none !important;
    color: var(--hub-text-3) !important;
    height: 40px;
}

.content-tabs button:hover,
.content-tabs .roll-nav:hover,
.roll-right.tabReload:hover {
    color: var(--hub-primary) !important;
    background: transparent !important;
}

nav.page-tabs {
    height: 40px;
}

.page-tabs a {
    height: 28px;
    line-height: 28px;
    margin: 6px 3px 0;
    padding: 0 12px !important;
    border: none !important;
    border-radius: 6px !important;
    background: transparent;
    color: var(--hub-text-2) !important;
}

.page-tabs a:hover {
    background: rgba(255, 255, 255, .7) !important;
    color: var(--hub-text) !important;
}

.page-tabs a.active,
.page-tabs a.active:hover,
.page-tabs a.active i:hover {
    background: #fff !important;
    color: var(--hub-primary) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}

.page-tabs a i {
    color: inherit !important;
}

.footer {
    background: transparent;
    border-top: none;
    color: var(--hub-text-3);
}

/* ---------- list pages ---------- */
.container-div {
    padding: 12px 16px 16px;
}

.search-collapse,
.select-table,
.ibox {
    background: #fff;
    border: 1px solid #f2f3f5 !important;
    border-radius: 12px !important;
    box-shadow: var(--hub-shadow) !important;
}

.search-collapse {
    padding: 14px 16px 8px;
    margin-top: 0;
}

.select-list li {
    color: var(--hub-text-2);
    margin: 6px 16px 6px 0;
}

.select-list li input,
.select-list li select,
.select-list .btn-default,
.select-list .select2-container--bootstrap .select2-selection {
    border: 1px solid var(--hub-border) !important;
    border-radius: 6px !important;
    height: 32px !important;
    background: #fff !important;
    color: var(--hub-text);
    transition: border-color .15s, box-shadow .15s;
}

.select-list li input:focus,
.select-list li select:focus {
    border-color: var(--hub-primary) !important;
    box-shadow: 0 0 0 2px rgba(22, 119, 255, .15);
    outline: none;
}

#toolbar {
    display: block;
    margin: 12px 15px 0;
    padding: 0;
}

.select-table {
    padding: 8px 12px 12px;
}

.table-striped table thead,
.fixed-table-container thead th {
    background: #fafafa !important;
}

.table-striped .table > thead > tr > th,
.table-striped table > thead > tr > th {
    color: var(--hub-text) !important;
    font-weight: 600 !important;
    font-size: 13px;
    border-bottom: 1px solid #f2f3f5 !important;
    background: #fafafa !important;
}

.table-striped table > tbody > tr > td,
.table > tbody > tr > td {
    border-top: none !important;
    border-bottom: 1px solid #f2f3f5 !important;
    color: var(--hub-text-2);
    padding-top: 11px !important;
    padding-bottom: 11px !important;
}

.table-striped .table > tbody > tr:hover > td,
.table > tbody > tr:hover > td {
    background: #f7faff !important;
}

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

.fixed-table-toolbar .btn,
.fixed-table-toolbar .btn-default {
    border-radius: 6px;
    border-color: var(--hub-border);
    color: var(--hub-text-2);
    background: #fff;
}

.pagination > li > a,
.pagination > li > span {
    margin: 0 3px;
    border-radius: 6px !important;
    border: 1px solid var(--hub-border);
    color: var(--hub-text-2);
    min-width: 32px;
    text-align: center;
}

.pagination > li > a:hover {
    background: var(--hub-primary-soft);
    border-color: #bedaff;
    color: var(--hub-primary);
}

.pagination > .active > a,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:hover {
    background: var(--hub-primary) !important;
    border-color: var(--hub-primary) !important;
    color: #fff !important;
}

/* ---------- buttons & inputs ---------- */
.btn {
    border-radius: 6px;
    font-weight: 500;
    box-shadow: none !important;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.btn-rounded {
    border-radius: 6px;
}

.btn-primary,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
    background-color: #1677ff !important;
    border-color: #1677ff !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #4096ff !important;
    border-color: #4096ff !important;
    color: #fff !important;
}

.btn-success,
.btn-success:active,
.btn-success.active {
    background-color: var(--hub-success) !important;
    border-color: var(--hub-success) !important;
    color: #fff !important;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #23c343 !important;
    border-color: #23c343 !important;
}

.btn-warning,
.btn-warning:active,
.btn-warning.active {
    background-color: var(--hub-warning) !important;
    border-color: var(--hub-warning) !important;
    color: #fff !important;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #ff9a2e !important;
    border-color: #ff9a2e !important;
    color: #fff !important;
}

.btn-danger,
.btn-danger:active,
.btn-danger.active {
    background-color: var(--hub-danger) !important;
    border-color: var(--hub-danger) !important;
    color: #fff !important;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #f76560 !important;
    border-color: #f76560 !important;
}

.btn-info,
.btn-info:active,
.btn-info.active {
    background-color: var(--hub-info) !important;
    border-color: var(--hub-info) !important;
    color: #fff !important;
}

.btn-info:hover,
.btn-info:focus {
    background-color: #37d4cf !important;
    border-color: #37d4cf !important;
}

.btn-white,
.btn-default {
    background: #fff;
    border-color: var(--hub-border);
    color: var(--hub-text-2);
}

.btn-white:hover,
.btn-default:hover {
    color: var(--hub-primary);
    border-color: #bedaff;
    background: var(--hub-primary-soft);
}

.btn.disabled,
.btn[disabled],
.btn.disabled:hover {
    opacity: .45;
}

.form-control {
    border: 1px solid var(--hub-border) !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    color: var(--hub-text);
    height: 34px;
}

.form-control:focus,
.has-error .form-control:focus,
.has-success .form-control:focus {
    border-color: var(--hub-primary) !important;
    box-shadow: 0 0 0 2px rgba(22, 119, 255, .15) !important;
}

.input-group-addon {
    background: var(--hub-fill);
    border-color: var(--hub-border);
    color: var(--hub-text-3);
    border-radius: 6px;
}

.form-header {
    color: var(--hub-text) !important;
    font-weight: 600;
    border-bottom: 1px solid #f2f3f5 !important;
    padding-bottom: 8px;
}

.control-label {
    color: var(--hub-text-2);
}

.label {
    border-radius: 10px;
    font-weight: 500;
    padding: .2em .6em;
}

.select-list .dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.bootstrap-select.form-control .dropdown-menu li > a:hover {
    background-color: var(--hub-primary) !important;
    color: #fff !important;
}

/* ---------- cards / home ---------- */
.ibox {
    overflow: hidden;
    margin-bottom: 16px;
}

.ibox-title {
    background: #fff;
    border: none;
    border-bottom: 1px solid #f2f3f5;
    min-height: 46px;
    padding: 14px 16px 8px;
}

.ibox-title h5 {
    font-size: 15px;
    font-weight: 600;
    color: var(--hub-text);
}

.ibox-content {
    border: none !important;
    padding: 16px;
}

.dashboard-header,
.border-bottom.white-bg.dashboard-header {
    background: #fff !important;
    border: 1px solid #f2f3f5 !important;
    border-radius: 12px;
    margin: 16px 16px 0;
    box-shadow: var(--hub-shadow);
}

.wrapper.wrapper-content {
    padding: 16px;
}

.panel {
    border-radius: 10px;
    border-color: #f2f3f5;
    box-shadow: none;
}

.panel-default > .panel-heading {
    background: #fafafa;
    border-color: #f2f3f5;
    border-radius: 10px 10px 0 0;
}

/* ---------- dialogs ---------- */
.layui-layer {
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(29, 33, 41, .16) !important;
}

.layui-layer-title {
    background: #fff !important;
    color: var(--hub-text) !important;
    font-weight: 600;
    border-bottom: 1px solid #f2f3f5 !important;
    height: 48px !important;
    line-height: 48px !important;
    border-radius: 12px 12px 0 0 !important;
}

.layui-layer-setwin {
    top: 16px;
}

body.gray-bg .main-content,
.main-content {
    background: transparent;
}

/* ---------- login / register ---------- */
body.signin {
    min-height: 100vh;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px 56px;
    background:
        radial-gradient(900px 480px at 12% 8%, rgba(22, 119, 255, .28), transparent 55%),
        radial-gradient(700px 420px at 90% 90%, rgba(114, 46, 209, .16), transparent 50%),
        linear-gradient(180deg, #eef3fb 0%, #f7f8fc 100%) !important;
}

body.signin::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(22, 119, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22, 119, 255, .05) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: radial-gradient(circle at 50% 45%, #000 20%, transparent 75%);
}

.signinpanel {
    position: relative;
    z-index: 1;
    width: 960px;
    max-width: 100%;
    margin: 0;
    color: var(--hub-text);
    background: #fff;
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(16, 40, 80, .12);
    overflow: hidden;
}

.signinpanel > .row {
    margin: 0;
    display: flex;
    align-items: stretch;
    min-height: 560px;
}

.signinpanel > .row:before,
.signinpanel > .row:after {
    display: none;
}

.signinpanel .login-side,
.signinpanel .login-main,
.signinpanel .col-sm-7,
.signinpanel .col-sm-5,
.signinpanel .col-sm-6 {
    float: none;
    width: 50%;
    box-sizing: border-box;
}

.signinpanel .login-side {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    background:
        radial-gradient(420px 240px at 80% 110%, rgba(105, 177, 255, .45), transparent 60%),
        linear-gradient(165deg, #071526 0%, #0e2f5b 46%, #1677ff 140%);
    color: #fff;
    padding: 52px 48px;
}

.signinpanel .login-side::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
    background-size: 26px 26px;
    mask-image: linear-gradient(180deg, transparent, #000 18%, #000 70%, transparent);
}

.signinpanel .login-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(2px);
    pointer-events: none;
}

.signinpanel .login-orb-a {
    width: 180px;
    height: 180px;
    right: -40px;
    top: -50px;
    background: rgba(255, 255, 255, .14);
}

.signinpanel .login-orb-b {
    width: 120px;
    height: 120px;
    left: -30px;
    bottom: 36px;
    background: rgba(64, 150, 255, .45);
}

.signinpanel .signin-info {
    position: relative;
    z-index: 1;
    width: 100%;
}

.signinpanel .login-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 36px;
}

.signinpanel .login-logo {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
}

.signinpanel .login-brand strong {
    display: block;
    font-size: 18px;
    color: #fff;
}

.signinpanel .login-brand p,
.signinpanel .login-lead {
    margin: 4px 0 0;
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
    line-height: 1.6;
}

.signinpanel .signin-info h4 {
    margin: 0 0 12px;
    font-size: 32px;
    line-height: 1.35;
    font-weight: 700;
    color: #fff;
    letter-spacing: .2px;
}

.signinpanel .login-points {
    margin-top: 32px;
}

.signinpanel .login-points > div {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    color: rgba(255, 255, 255, .92);
    font-size: 14px;
}

.signinpanel .login-points i {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.signinpanel .login-register {
    display: inline-block;
    margin-top: 28px;
}

.signinpanel .signin-info strong,
.signinpanel .signin-info a {
    color: #fff;
}

.signinpanel .signin-info a {
    text-decoration: underline;
}

.signinpanel .signin-info ul {
    margin: 28px 0 24px;
    padding: 0;
}

.signinpanel .signin-info ul li {
    display: inline-block;
    margin: 0 8px 8px 0;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    font-size: 13px;
    line-height: 1.4;
}

.signinpanel .signin-info ul li i {
    display: none;
}

.signinpanel .login-main {
    display: flex;
    align-items: center;
    padding: 52px 56px;
    background: #fff;
}

.signinpanel form {
    width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
    margin: 0;
}

.signinpanel .login-kicker {
    margin: 0 0 8px;
    color: #1677ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.signinpanel form h4 {
    font-size: 28px;
    font-weight: 700;
    color: #1d2129;
    margin: 0 0 6px;
}

.signinpanel form .m-t-md {
    color: #86909c;
    margin: 0 0 8px;
}

.signinpanel .login-label {
    display: block;
    margin: 18px 0 0;
    color: #1d2129;
    font-size: 13px;
    font-weight: 600;
}

.signinpanel .login-field {
    position: relative;
    margin-top: 8px;
}

.signinpanel .login-field > .fa {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #86909c;
    z-index: 2;
}

.signinpanel .form-control,
.signinpanel .uname,
.signinpanel .pword,
.signinpanel .code {
    height: 46px !important;
    margin-top: 14px !important;
    border-radius: 12px !important;
    border: 1px solid #e5e6eb !important;
    background: #f7f8fa !important;
    color: #1d2129 !important;
    padding: 6px 14px !important;
    box-shadow: none !important;
}

.signinpanel .login-field .form-control {
    margin-top: 0 !important;
    padding-left: 40px !important;
}

.signinpanel .form-control:focus {
    background: #fff !important;
    border-color: #1677ff !important;
    box-shadow: 0 0 0 3px rgba(22, 119, 255, .15) !important;
}

.signinpanel .row.m-t {
    margin-left: -6px;
    margin-right: -6px;
    margin-top: 14px;
}

.signinpanel .row.m-t > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
}

.signinpanel .code {
    margin-top: 0 !important;
}

.signinpanel .imgcode {
    height: 44px;
    border-radius: 8px;
    border: 1px solid #e5e6eb;
    width: 100% !important;
    object-fit: cover;
    background: #f7f8fa;
}

.signinpanel .checkbox-custom {
    margin-top: 16px;
}

.signinpanel .checkbox-custom label,
.signinpanel .checkbox-custom {
    color: #4e5969;
}

body.signin #btnSubmit,
body.signin .btn-success,
body.signin .btn-success:hover,
body.signin .btn-success:focus {
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(180deg, #3c8dff 0%, #1677ff 100%) !important;
    border-color: #1677ff !important;
    font-size: 15px;
    letter-spacing: 2px;
    margin-top: 22px;
    box-shadow: 0 8px 18px rgba(22, 119, 255, .28) !important;
}

body.signin #btnSubmit:hover {
    background: #4096ff !important;
    border-color: #4096ff !important;
}

.signup-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 14px;
    border: none;
    margin: 0;
    padding: 0 24px;
    color: #86909c;
    background: transparent;
    text-align: center;
    font-size: 12px;
}

.signup-footer .pull-left,
.signup-footer .pull-right {
    float: none !important;
}

@media screen and (max-width: 768px) {
    .signinpanel > .row {
        display: block;
        min-height: 0;
    }

    .signinpanel .login-side,
    .signinpanel .login-main,
    .signinpanel .col-sm-7,
    .signinpanel .col-sm-5,
    .signinpanel .col-sm-6 {
        width: 100% !important;
        display: block;
    }

    .signinpanel .login-side,
    .signinpanel .login-main {
        padding: 28px 24px;
    }
}

#noticeList .notice-head {
    padding: 12px 16px;
    background: #f7f8fa;
    border-bottom: 1px solid #f2f3f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#noticeList .notice-head > span {
    font-size: 13px;
    font-weight: 600;
    color: #1d2129;
}

/* ---------- night ---------- */
html.hub-night {
    color-scheme: dark;
    --hub-text: #e8eaed;
    --hub-text-2: #c5cad3;
    --hub-text-3: #8b93a1;
    --hub-border: #343a46;
    --hub-fill: #2a303b;
    --hub-page: #141820;
    --hub-shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 8px 24px rgba(0, 0, 0, .28);
}

html.hub-night,
html.hub-night body,
html.hub-night body.gray-bg,
html.hub-night #page-wrapper.gray-bg,
html.hub-night .gray-bg {
    background: #141820 !important;
    color: #e8eaed;
}

html.hub-night {
    --header-bg: #1c212b;
    --header-text: #c5cad3;
    --header-hover: #2a303b;
}

html.hub-night #page-wrapper > .border-bottom {
    box-shadow: none !important;
}

html.hub-night .navbar-right > .user-menu .user-image {
    box-shadow: 0 0 0 2px #1c212b, 0 0 0 3px #2c3340;
}

html.hub-night .minimalize-styl-2 {
    background: #2a303b;
    color: #c5cad3 !important;
}

html.hub-night .minimalize-styl-2:hover {
    background: #343a46;
    color: var(--hub-primary) !important;
}

html.hub-night .content-tabs {
    background: #141820 !important;
}

html.hub-night .page-tabs a {
    color: #c5cad3 !important;
}

html.hub-night .page-tabs a.active,
html.hub-night .page-tabs a.active:hover {
    background: #1c212b !important;
    color: var(--hub-primary) !important;
}

html.hub-night .search-collapse,
html.hub-night .select-table,
html.hub-night .ibox,
html.hub-night .ibox-title,
html.hub-night .ibox-content,
html.hub-night .dashboard-header,
html.hub-night .border-bottom.white-bg.dashboard-header,
html.hub-night .white-bg,
html.hub-night .panel,
html.hub-night .panel-default > .panel-heading,
html.hub-night #toolbar {
    background: #1c212b !important;
    color: #e8eaed;
    border-color: #2c3340 !important;
}

html.hub-night .ibox-title,
html.hub-night .panel-default > .panel-heading {
    border-bottom-color: #2c3340 !important;
}

html.hub-night .ibox-title h5,
html.hub-night .form-header,
html.hub-night h1,
html.hub-night h2,
html.hub-night h3,
html.hub-night h4,
html.hub-night h5,
html.hub-night p,
html.hub-night li,
html.hub-night .control-label,
html.hub-night .select-list li {
    color: #e8eaed;
}

html.hub-night .table-striped table thead,
html.hub-night .fixed-table-container thead th,
html.hub-night .table-striped .table > thead > tr > th,
html.hub-night .table-striped table > thead > tr > th {
    background: #262c38 !important;
    color: #e8eaed !important;
    border-bottom-color: #343a46 !important;
}

html.hub-night .table-striped table > tbody > tr > td,
html.hub-night .table > tbody > tr > td,
html.hub-night .table > thead > tr > th {
    background: #1c212b;
    color: #c5cad3 !important;
    border-color: #2c3340 !important;
}

html.hub-night .table-striped .table > tbody > tr:hover > td,
html.hub-night .table > tbody > tr:hover > td {
    background: #262c38 !important;
}

html.hub-night .form-control,
html.hub-night .select-list li input,
html.hub-night .select-list li select,
html.hub-night .select-list .btn-default,
html.hub-night .input-group-addon,
html.hub-night .btn-default,
html.hub-night .btn-white {
    background: #141820 !important;
    color: #e8eaed !important;
    border-color: #343a46 !important;
}

html.hub-night .form-control:focus,
html.hub-night .select-list li input:focus,
html.hub-night .select-list li select:focus {
    border-color: #4096ff !important;
}

html.hub-night .dropdown-menu,
html.hub-night .navbar-right > .user-menu > .dropdown-menu,
html.hub-night .navbar-top-links > li.dropdown > .dropdown-menu,
html.hub-night #noticeList {
    background: #1c212b !important;
    border-color: #343a46 !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}

html.hub-night .dropdown-menu > li > a {
    color: #c5cad3 !important;
}

html.hub-night .dropdown-menu > li > a:hover {
    background: rgba(64, 150, 255, .16) !important;
    color: #69b1ff !important;
}

html.hub-night .dropdown-menu > .divider {
    background: #343a46;
}

html.hub-night .pagination > li > a,
html.hub-night .pagination > li > span {
    background: #1c212b;
    color: #c5cad3;
    border-color: #343a46;
}

html.hub-night .fixed-table-toolbar .btn,
html.hub-night .fixed-table-pagination,
html.hub-night .pagination-detail,
html.hub-night .footer {
    color: #8b93a1;
    background: transparent;
}

html.hub-night .layui-layer,
html.hub-night .layui-layer-title {
    background: #1c212b !important;
    color: #e8eaed !important;
    border-color: #343a46 !important;
}

html.hub-night .layui-layer-content {
    background: #1c212b;
    color: #e8eaed;
}

html.hub-night #noticeList .notice-head {
    background: #262c38 !important;
    border-bottom: 1px solid #343a46 !important;
}

html.hub-night #noticeList .notice-head > span,
html.hub-night #noticeItems li,
html.hub-night #noticeItems li a,
html.hub-night #noticeItems li a span {
    color: #e8eaed !important;
}

html.hub-night #noticeItems li {
    background: transparent !important;
    border-bottom-color: #2c3340 !important;
}

html.hub-night #noticeItems li a:hover,
html.hub-night #noticeItems li a:active,
html.hub-night #noticeItems li a:focus {
    background: #2a303b !important;
}

html.hub-night #noticeList .mark-all-read,
html.hub-night #noticeList .mark-all-read:hover {
    color: #69b1ff !important;
    background: transparent !important;
}

html.hub-night #noticeItems li a > span:first-child {
    background: #343a46 !important;
    color: #c5cad3 !important;
}

html.hub-night a {
    color: #69b1ff;
}

html.hub-night .navbar-static-top a,
html.hub-night .navbar-static-side a,
html.hub-night .page-tabs a,
html.hub-night .btn {
    color: inherit;
}