/* =========================================================
 * Dcat Admin ? Cyberpunk Ember / Molten Amber Theme
 * ????????????????????
 * ========================================================= */

:root {
    --cyber-bg: #0a0806;
    --cyber-bg-2: #120e0a;
    --cyber-panel: rgba(18, 12, 8, 0.55);
    --cyber-cyan: #e0a060;
    --cyber-pink: #c07050;
    --cyber-magenta: #8a6050;
    --cyber-green: #7a9a5a;
    --cyber-yellow: #e8c070;
    --cyber-text: #c4b09a;
    --cyber-muted: #8a7460;
    --cyber-border: rgba(200, 140, 80, 0.16);
    --cyber-glow: 0 0 12px rgba(220, 140, 60, 0.12);
    --cyber-font: 'Rajdhani', 'Orbitron', 'Courier New', monospace;
    --cyber-metal-hi: rgba(230, 190, 140, 0.12);
    --cyber-metal-mid: #1a1410;
    --cyber-metal-lo: #0c0907;
    --cyber-key: rgba(220, 140, 60, 0.3);
    --cyber-neon: rgba(240, 160, 70, 0.4);
    --cyber-cut-sm: 6px;
    --cyber-cut-md: 11px;
    --cyber-cut-lg: 14px;
    --cyber-metal-cut: polygon(
        var(--cyber-cut-md) 0,
        calc(100% - var(--cyber-cut-md)) 0,
        100% var(--cyber-cut-md),
        100% calc(100% - var(--cyber-cut-md)),
        calc(100% - var(--cyber-cut-md)) 100%,
        var(--cyber-cut-md) 100%,
        0 calc(100% - var(--cyber-cut-md)),
        0 var(--cyber-cut-md)
    );
    --cyber-metal-cut-sm: polygon(
        var(--cyber-cut-sm) 0,
        calc(100% - var(--cyber-cut-sm)) 0,
        100% var(--cyber-cut-sm),
        100% calc(100% - var(--cyber-cut-sm)),
        calc(100% - var(--cyber-cut-sm)) 100%,
        var(--cyber-cut-sm) 100%,
        0 calc(100% - var(--cyber-cut-sm)),
        0 var(--cyber-cut-sm)
    );
}

/* ---------- ?? ---------- */
html,
body,
body.dark-mode {
    background: var(--cyber-bg) !important;
    background-color: var(--cyber-bg) !important;
    color: var(--cyber-text) !important;
    font-family: var(--cyber-font) !important;
}

.wrapper {
    background: transparent !important;
    position: relative;
    z-index: auto;
}

/*
 * ?????? content-wrapper ? margin / position / z-index
 * AdminLTE ? margin-left ???????? padding-top ??
 * ?? margin:0 !important ??????????????
 */
.app-content.content,
.app-content {
    background: transparent !important;
    position: relative;
    z-index: 2;
    /* ???????????????????? */
    padding: 22px 28px 32px 22px !important;
}

.content-body,
.body-bg,
.main-footer,
#app {
    background: transparent !important;
    color: var(--cyber-text) !important;
}

/* ????????????????? clip-path????????? */
.content-wrapper {
    position: relative;
    --cabin-lx: 40%;
    --cabin-ly: 18%;
    background-color: rgba(12, 9, 6, 0.08) !important;
    background-image:
        radial-gradient(ellipse 70% 50% at var(--cabin-lx) var(--cabin-ly),
            rgba(160, 100, 50, 0.03), transparent 62%),
        linear-gradient(170deg,
            rgba(30, 22, 14, 0.12) 0%,
            rgba(16, 11, 8, 0.07) 50%,
            rgba(10, 8, 5, 0.05) 100%) !important;
    background-repeat: no-repeat !important;
    border: 1px solid rgba(200, 150, 100, 0.12) !important;
    border-radius: 4px !important;
    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.4),
        0 8px 24px rgba(0, 0, 0, 0.35),
        0 28px 64px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
        inset 0 -32px 56px rgba(0, 0, 0, 0.15) !important;
    padding-left: 1.75rem !important;
    padding-right: 1.75rem !important;
    padding-bottom: 2.25rem !important;
    overflow: visible;
    transition: box-shadow 0.5s ease, border-color 0.4s ease;
}

.content-wrapper > .cyber-cabin-grain {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}

body.dark-mode .content-wrapper,
body.dark-mode .body-bg {
    background-color: rgba(12, 9, 6, 0.08) !important;
}

/*
 * ???????????????? padding-top?
 */
#cyber-panel-frame {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    top: 5.6rem;
    z-index: 6;
    pointer-events: none;
    border: 1px solid rgba(200, 150, 100, 0.05);
    border-radius: 6px;
    box-shadow: none;
}

.cyber-panel-corner {
    position: absolute;
    width: 22px;
    height: 22px;
    border-color: rgba(210, 160, 110, 0.42);
    filter: none;
    animation: none;
    opacity: 0.7;
}
.cyber-panel-corner.tl {
    top: -1px; left: -1px;
    border-top: 1px solid;
    border-left: 1px solid;
}
.cyber-panel-corner.tr {
    top: -1px; right: -1px;
    border-top: 1px solid;
    border-right: 1px solid;
}
.cyber-panel-corner.bl {
    bottom: -1px; left: -1px;
    border-bottom: 1px solid;
    border-left: 1px solid;
}
.cyber-panel-corner.br {
    bottom: -1px; right: -1px;
    border-bottom: 1px solid;
    border-right: 1px solid;
}

@keyframes cyber-corner-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 0.7; }
}

/* ?????? / ????? */
#cyber-panel-frame::before,
#cyber-panel-frame::after {
    display: none !important;
}

@keyframes cyber-edge-run {
    0%, 100% { opacity: 0; }
}

/* ???????????? */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}

/* ????? canvas ?????????????? */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 55% 45% at 50% 48%, rgba(28, 20, 12, 0.25), transparent 70%),
        radial-gradient(ellipse 100% 80% at 50% 100%, rgba(0, 0, 0, 0.45), transparent 55%);
    animation: none;
    opacity: 1;
}

@keyframes cyber-grid-drift {
    0%, 100% { background-position: 0 0; }
}

/* 静态顶栏光边（替代扫描动画） */
html.cyber-scan-ready::before,
html[class*="cyber-skin-"]::before {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    z-index: 1000;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(230, 150, 70, 0.32) 18%,
        rgba(235, 155, 65, 0.82) 50%,
        rgba(255, 90, 40, 0.28) 72%,
        transparent 100%
    );
    box-shadow: 0 0 14px rgba(220, 140, 60, 0.32);
    opacity: 0.82;
    animation: none !important;
    transform: none !important;
    will-change: auto;
}

a { color: var(--cyber-cyan); }
a:hover { color: #e8c090; }

h1, h2, h3, h4, h5, h6,
.content-header h1,
.card-title,
.box-title,
.card-box-title {
    color: #c4b09a !important;
    text-shadow: none;
    letter-spacing: 0.06em;
    font-family: 'Orbitron', var(--cyber-font) !important;
    font-weight: 500;
}

/* ---------- ????????????? ---------- */
.main-header,
.header-navbar,
.header-navbar.navbar-shadow,
body.dark-mode .header-navbar {
    background:
        linear-gradient(180deg, rgba(36, 26, 18, 0.92) 0%, rgba(18, 12, 8, 0.9) 100%) !important;
    border: 1px solid rgba(220, 170, 120, 0.16) !important;
    border-radius: 4px !important;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.35),
        0 6px 18px rgba(0, 0, 0, 0.35),
        0 16px 40px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 1px 0 0 rgba(220, 180, 130, 0.1) !important;
    backdrop-filter: blur(16px) saturate(1.1);
    -webkit-backdrop-filter: blur(16px) saturate(1.1);
    overflow: visible !important;
}

.header-navbar.floating-nav {
    margin-right: 1rem !important;
}

.header-navbar .navbar-wrapper,
.header-navbar .navbar-container,
.header-navbar .navbar-collapse,
.header-navbar .navbar-right {
    overflow: visible !important;
}

.header-navbar .navbar-container {
    padding-right: 1rem !important;
}

.header-navbar .navbar-right {
    flex-shrink: 0 !important;
    margin-right: 0.5rem !important;
    max-width: none !important;
}

.header-navbar .navbar-container .nav .nav-item .nav-link,
.header-navbar .nav-link,
.navbar-nav .nav-link {
    color: var(--cyber-text) !important;
}
.header-navbar .nav-link:hover,
.header-navbar .nav-link:hover i {
    color: var(--cyber-cyan) !important;
}

.dropdown-user.nav-item {
    flex-shrink: 0 !important;
    margin-right: 0.25rem !important;
}
.dropdown-user .dropdown-user-link {
    display: inline-flex !important;
    align-items: center !important;
    flex-direction: row !important;
    gap: 0.55rem;
    white-space: nowrap;
    overflow: visible !important;
    padding: 0.25rem 0.35rem !important;
}
.dropdown-user .user-nav {
    display: flex !important;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
    margin: 0 !important;
}
.dropdown-user .user-name {
    color: var(--cyber-cyan) !important;
    font-size: 0.85rem;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dropdown-user .user-status {
    color: var(--cyber-muted) !important;
    font-size: 0.7rem;
}
.dropdown-user img.round {
    display: inline-block !important;
    flex-shrink: 0 !important;
    width: 36px !important;
    height: 36px !important;
    border: 1px solid var(--cyber-border);
    box-shadow: 0 0 10px rgba(240, 165, 80, 0.25);
}

/* ---------- ????????????? transform?????/?????? ---------- */
.main-sidebar,
.main-menu,
[class*="sidebar-dark-"],
[class*="sidebar-light-"],
body.dark-mode [class*="sidebar-dark-"] {
    --side-mx: 30%;
    --side-my: 20%;
    position: fixed !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background:
        radial-gradient(120% 80% at var(--side-mx) var(--side-my),
            rgba(230, 150, 70, 0.12) 0%, transparent 42%),
        linear-gradient(105deg,
            rgba(34, 24, 16, 0.98) 0%,
            rgba(18, 12, 8, 0.98) 55%,
            rgba(8, 10, 16, 0.99) 100%) !important;
    border-right: 1px solid rgba(230, 150, 70, 0.22) !important;
    box-shadow:
        14px 0 40px rgba(0, 0, 0, 0.55),
        4px 0 0 rgba(0, 0, 0, 0.35),
        2px 0 0 rgba(230, 150, 70, 0.15),
        inset -1px 0 0 rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -30px 50px rgba(0, 0, 0, 0.35) !important;
    transform: none !important;
    filter: none !important;
}

.main-sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 18%),
        linear-gradient(90deg, rgba(230, 150, 70, 0.08) 0%, transparent 12%),
        linear-gradient(135deg, rgba(240, 160, 70, 0.45) 0 1.5px, transparent 1.5px) 8px 8px / 16px 16px no-repeat,
        linear-gradient(-45deg, rgba(240, 160, 70, 0.35) 0 1.5px, transparent 1.5px) 8px calc(100% - 24px) / 16px 16px no-repeat;
    opacity: 0.85;
}

.main-sidebar::after {
    content: '';
    position: absolute;
    top: 12%;
    bottom: 12%;
    right: 0;
    width: 2px;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(240, 160, 70, 0.55),
        rgba(255, 100, 50, 0.25),
        rgba(240, 160, 70, 0.55),
        transparent
    );
    box-shadow: 0 0 12px rgba(240, 160, 70, 0.35);
    animation: cyber-side-edge 4.5s ease-in-out infinite;
}
@keyframes cyber-side-edge {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
}

.main-sidebar .navbar-header,
[class*="sidebar-dark-"] .navbar-header,
body.dark-mode [class*="sidebar-dark-"] .navbar-header {
    position: relative;
    z-index: 3;
    background: linear-gradient(180deg, #1a120c, #100c08) !important;
    border-bottom: 1px solid rgba(240, 160, 70, 0.2);
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transform: none !important;
}

.main-menu .navbar-header .logo-lg,
.main-menu .navbar-header .logo-mini {
    color: var(--cyber-cyan) !important;
    text-shadow: var(--cyber-glow);
}

.main-sidebar .nav-sidebar {
    position: relative;
    z-index: 3;
    padding: 8px 8px 16px !important;
}

.main-sidebar .nav-sidebar .nav-item > .nav-link,
.nav-sidebar .nav-link {
    position: relative;
    color: var(--cyber-muted) !important;
    border-radius: 0 !important;
    margin: 4px 0 !important;
    border: 1px solid transparent !important;
    background: rgba(255, 255, 255, 0.02) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.03),
        0 2px 6px rgba(0, 0, 0, 0.2) !important;
    clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
    transform: none !important;
    transition: color .2s, background .25s, box-shadow .25s, border-color .25s, margin .2s;
}

.main-sidebar .nav-sidebar .nav-item > .nav-link:hover,
.nav-sidebar .nav-link:hover {
    color: #ffc078 !important;
    background:
        radial-gradient(120% 100% at var(--item-mx, 40%) var(--item-my, 40%),
            rgba(240, 160, 70, 0.16), transparent 55%),
        rgba(240, 160, 70, 0.08) !important;
    border-color: rgba(240, 160, 70, 0.28) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 12px rgba(0, 0, 0, 0.35),
        0 0 14px rgba(240, 160, 70, 0.1) !important;
    margin-left: 4px !important;
    transform: none !important;
}

.main-sidebar .nav-sidebar .nav-item > .nav-link.active,
.sidebar-light-primary .nav-item > .nav-link.active,
[class*="sidebar-dark-"] .nav-sidebar > .nav-item > .nav-link.active,
body.dark-mode [class*="sidebar-dark-"] .nav-sidebar > .nav-item > .nav-link.active,
.main-menu.menu-light .navigation > li.active > a {
    color: #ffd090 !important;
    background:
        linear-gradient(90deg, rgba(240, 160, 70, 0.16), rgba(240, 160, 70, 0.04)) !important;
    border-color: rgba(240, 160, 70, 0.35) !important;
    box-shadow:
        inset 3px 0 0 #f0a050,
        0 4px 14px rgba(0, 0, 0, 0.35),
        0 0 16px rgba(240, 160, 70, 0.14) !important;
    font-weight: 700;
    margin-left: 4px !important;
    transform: none !important;
}

.nav-treeview > .nav-item > .nav-link.active {
    color: var(--cyber-cyan) !important;
    background: transparent !important;
    transform: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
    margin-left: 0 !important;
}

.main-sidebar .sidebar {
    position: relative;
    z-index: 3;
}

/* ---------- ???PBR ??????? filter:drop-shadow???????? ---------- */
.app-content { perspective: none !important; transform: none !important; }

.card,
.box,
.panel,
.dcat-box.card,
.info-box,
.dashboard-stat,
body.dark-mode .card,
body.dark-mode .box,
body.dark-mode .info-box {
    --spec-x: 40%;
    --spec-y: 16%;
    position: relative !important;
    isolation: isolate;
    background:
        radial-gradient(110% 80% at var(--spec-x) var(--spec-y),
            rgba(235, 210, 170, 0.08) 0%,
            transparent 48%),
        linear-gradient(122deg,
            transparent 0%,
            rgba(200, 160, 120, 0.03) 46%,
            transparent 62%),
        linear-gradient(158deg,
            #2a2218 0%,
            #1a1410 40%,
            #14100c 75%,
            #0c0907 100%) !important;
    border: 1px solid rgba(200, 150, 100, 0.16) !important;
    border-radius: 0 !important;
    clip-path: var(--cyber-metal-cut);
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.4),
        0 22px 40px rgba(0, 0, 0, 0.22),
        0 1px 1px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 0 1px rgba(255, 255, 255, 0.03),
        inset 1px 0 0 rgba(220, 180, 130, 0.12),
        inset -1px 0 0 rgba(0, 0, 0, 0.35),
        inset 0 -24px 36px rgba(0, 0, 0, 0.35) !important;
    filter: none !important;
    backdrop-filter: blur(8px) saturate(0.92);
    -webkit-backdrop-filter: blur(8px) saturate(0.92);
    transform: none !important;
    transform-style: flat;
    transition:
        border-color 0.4s ease,
        box-shadow 0.4s ease;
    will-change: auto;
    overflow: hidden;
}

.card::before,
.box::before,
.panel::before,
.info-box::before,
.dcat-box.card::before,
.dashboard-stat::before {
    content: '' !important;
    display: block !important;
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 0;
    /* ??????????? + ?? */
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, transparent 28%),
        linear-gradient(135deg, rgba(235, 200, 150, 0.55) 0 1.5px, transparent 1.5px) 0 0 / 14px 14px no-repeat,
        linear-gradient(-135deg, rgba(235, 200, 150, 0.55) 0 1.5px, transparent 1.5px) 100% 0 / 14px 14px no-repeat,
        linear-gradient(45deg, rgba(235, 200, 150, 0.4) 0 1.5px, transparent 1.5px) 0 100% / 14px 14px no-repeat,
        linear-gradient(-45deg, rgba(235, 200, 150, 0.4) 0 1.5px, transparent 1.5px) 100% 100% / 14px 14px no-repeat,
        linear-gradient(rgba(200, 150, 100, 0.38), rgba(200, 150, 100, 0.38)) left 12px top 0 / 12px 1px no-repeat,
        linear-gradient(rgba(200, 150, 100, 0.38), rgba(200, 150, 100, 0.38)) right 12px top 0 / 12px 1px no-repeat,
        linear-gradient(rgba(200, 150, 100, 0.28), rgba(200, 150, 100, 0.28)) left 0 top 12px / 1px 12px no-repeat,
        linear-gradient(rgba(200, 150, 100, 0.28), rgba(200, 150, 100, 0.28)) right 0 top 12px / 1px 12px no-repeat;
    z-index: 1;
    opacity: 0.9;
    mix-blend-mode: soft-light;
    animation: none !important;
}

.card::after,
.box::after,
.info-box::after,
.dcat-box.card::after,
.dashboard-stat::after {
    content: '' !important;
    display: block !important;
    position: absolute;
    left: 8%;
    right: 8%;
    bottom: 0;
    height: 38%;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.22) 100%);
    border-radius: 0;
    z-index: 2;
    opacity: 0.65;
}

.card:hover,
.box:hover,
.info-box:hover,
.dashboard-stat:hover {
    transform: none !important;
    border-color: rgba(210, 160, 110, 0.28) !important;
    filter: none !important;
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.42),
        0 28px 48px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 1px 0 0 rgba(220, 180, 130, 0.18),
        inset 0 -20px 32px rgba(0, 0, 0, 0.3) !important;
}

.card.cyber-tilt,
.box.cyber-tilt,
.info-box.cyber-tilt,
.dashboard-stat.cyber-tilt {
    transform: none !important;
}

.card-header,
.box-header,
.card-header.with-border,
.box-header.with-border,
body.dark-mode .with-border {
    position: relative;
    z-index: 3;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent) !important;
    border-bottom: 1px solid rgba(200, 150, 100, 0.1) !important;
    color: #c4b09a;
}

.card-footer,
.box-footer,
body.dark-mode .card .box-footer,
body.dark-mode .box .box-footer {
    position: relative;
    z-index: 3;
    background: rgba(0, 0, 0, 0.18) !important;
    border-top: 1px solid rgba(240, 165, 80, 0.16) !important;
}

.info-box .info-box-content,
.info-box .info-box-icon,
.card-body,
.box-body {
    position: relative;
    z-index: 3;
}

/* info-box ?? AdminLTE flex?????/???? */
.info-box,
.dashboard-stat {
    display: flex !important;
    align-items: stretch !important;
    min-height: 80px;
}
.info-box .info-box-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 70px !important;
    width: 70px !important;
    max-width: 70px !important;
}
.info-box .info-box-content {
    flex: 1 1 auto !important;
    padding: 8px 12px !important;
    overflow: hidden;
}

.info-box .info-box-number {
    color: #d0b898 !important;
    text-shadow: none;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.info-box .info-box-icon {
    text-shadow: none;
    opacity: 0.85;
}
.dashboard-stat .info-box-icon .feather {
    font-size: 1.75rem;
    color: var(--cyber-cyan);
    opacity: 0.92;
}
.box .cyber-dash-table {
    margin-bottom: 0;
    font-size: 0.88rem;
}
.box .cyber-dash-table thead th {
    white-space: nowrap;
    font-size: 0.82rem;
}
.box .cyber-dash-table td {
    vertical-align: middle !important;
}
.box .table-responsive.no-padding {
    padding: 0;
}
.box .cyber-chart-wrap {
    position: relative;
    z-index: 4;
    min-height: 280px;
    padding: 8px 12px 4px;
}
.box .cyber-chart-wrap .apexcharts-canvas,
.box .cyber-chart-wrap .apexcharts-svg {
    position: relative;
    z-index: 1;
    background: transparent !important;
}
.box .cyber-radar-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 340px;
    padding: 12px 16px 8px;
}
.box .cyber-radar-wrap #catRadar {
    margin: 0 auto;
    flex: 0 0 auto;
}
.box .cyber-radar-wrap .apexcharts-canvas,
.box .cyber-radar-wrap .apexcharts-svg,
.box .cyber-radar-wrap .apexcharts-inner {
    background: transparent !important;
}
.box .cyber-radar-wrap .apexcharts-canvas.apexcharts-theme-dark {
    background: transparent !important;
}
html.cyber-skin-ember .box .cyber-radar-wrap .apexcharts-radar-series polygon:nth-child(odd) {
    fill: #3d2416 !important;
}
html.cyber-skin-ember .box .cyber-radar-wrap .apexcharts-radar-series polygon:nth-child(even) {
    fill: #2a160e !important;
}
html.cyber-skin-dark .box .cyber-radar-wrap .apexcharts-radar-series polygon:nth-child(odd),
html:not([class*="cyber-skin-"]) .box .cyber-radar-wrap .apexcharts-radar-series polygon:nth-child(odd) {
    fill: #141c28 !important;
}
html.cyber-skin-dark .box .cyber-radar-wrap .apexcharts-radar-series polygon:nth-child(even),
html:not([class*="cyber-skin-"]) .box .cyber-radar-wrap .apexcharts-radar-series polygon:nth-child(even) {
    fill: #0c121c !important;
}
html.cyber-skin-light .box .cyber-radar-wrap .apexcharts-radar-series polygon:nth-child(even) {
    fill: #f1f5f9 !important;
}
html.cyber-skin-light .box .cyber-radar-wrap .apexcharts-radar-series polygon:nth-child(odd) {
    fill: #e2e8f0 !important;
}
html.cyber-skin-dark .box .cyber-radar-wrap,
html:not([class*="cyber-skin-"]) .box .cyber-radar-wrap {
    background: radial-gradient(circle at 50% 50%, rgba(14, 20, 30, 0.45) 0%, transparent 72%);
}
html.cyber-skin-ember .box .cyber-radar-wrap {
    background: radial-gradient(circle at 50% 50%, rgba(52, 30, 18, 0.42) 0%, transparent 72%);
}
html.cyber-skin-light .box .cyber-radar-wrap {
    background: radial-gradient(circle at 50% 50%, rgba(226, 232, 240, 0.65) 0%, transparent 72%);
}
.info-box .info-box-text {
    color: var(--cyber-muted) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
}

/* ---------- ?? ---------- */
.table,
body.dark-mode .table {
    background: transparent !important;
    color: var(--cyber-text) !important;
}

.table thead th,
body.dark-mode .table thead tr th {
    background: rgba(240, 165, 80, 0.04) !important;
    color: var(--cyber-cyan) !important;
    border-bottom: 2px solid rgba(240, 165, 80, 0.3) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.85rem !important;
}

.table td,
.table th,
body.dark-mode .table td,
body.dark-mode .table th {
    border-color: rgba(240, 165, 80, 0.12) !important;
    background: transparent !important;
    color: var(--cyber-text) !important;
}

.table-hover tbody tr:hover,
body.dark-mode .table.table-hover tbody tr:hover,
table.custom-data-table.data-table tbody tr:hover {
    background: rgba(224, 160, 96, 0.12) !important;
    background-color: rgba(224, 160, 96, 0.12) !important;
}

table.custom-data-table.data-table tbody tr,
body.dark-mode .table tbody tr {
    background: rgba(32, 20, 12, 0.88) !important;
    background-color: rgba(32, 20, 12, 0.88) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}
table.custom-data-table.data-table tbody tr td,
body.dark-mode .table tbody tr td {
    background: transparent !important;
    background-color: transparent !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(240, 165, 80, 0.03) !important;
}

/* ---------- ?? ---------- */
.form-control,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
body.dark-mode .form-control,
body.dark-mode .select2-container--default .select2-selection--single,
body.dark-mode .select2-container--default .select2-selection--multiple {
    --cyber-cut-sm: 5px;
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(200, 150, 100, 0.28) !important;
    color: #f5e6d0 !important;
    border-radius: 0 !important;
    clip-path: var(--cyber-metal-cut-sm);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 1px 0 0 rgba(210, 160, 110, 0.08) !important;
}

.form-control:focus,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--cyber-cyan) !important;
    box-shadow: 0 0 14px rgba(240, 165, 80, 0.35) !important;
}

.input-group .form-control,
.input-group-prepend .input-group-text,
.input-group-append .input-group-text,
.input-group-addon,
.modal .form-control,
.modal .input-group-text,
.modal .input-group-addon,
.layui-layer .form-control,
.layui-layer .input-group-text,
.layui-layer .input-group-addon,
.fields-group .form-control,
.fields-group .input-group-text {
    clip-path: none !important;
    filter: none !important;
}
.input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100%;
}

.form-control::placeholder {
    color: rgba(176, 196, 222, 0.4) !important;
}

.input-group-text,
.input-group-addon,
body.dark-mode .input-group-text {
    background: #1a120c !important;
    border-color: rgba(240, 165, 80, 0.25) !important;
    color: var(--cyber-cyan) !important;
}

.select2-dropdown,
body.dark-mode .select2-dropdown {
    background: var(--cyber-bg-2) !important;
    border: 1px solid var(--cyber-border) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: rgba(240, 165, 80, 0.15) !important;
    color: var(--cyber-cyan) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--cyber-cyan) !important;
    color: #061018 !important;
}

.control-label,
.help-block {
    color: var(--cyber-muted) !important;
}

/* ---------- ????????? ---------- */
.btn:not(.btn-app):not(.btn-icon) {
    --cyber-cut-sm: 5px;
    border-radius: 0 !important;
    clip-path: var(--cyber-metal-cut-sm);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
    transition: box-shadow .25s, transform .2s, background .2s, border-color .2s, filter .25s;
}

.cyber-quick-links,
.box-body:has(> .btn-app) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
}

.btn.btn-app,
a.btn-app {
    --cyber-cut-md: 10px;
    position: relative;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 112px !important;
    width: auto !important;
    height: 88px !important;
    margin: 0 !important;
    padding: 14px 12px 10px !important;
    background:
        linear-gradient(160deg, rgba(72, 48, 28, 0.95), rgba(18, 12, 8, 0.98)) !important;
    border: 1px solid rgba(220, 170, 120, 0.28) !important;
    border-radius: 0 !important;
    color: var(--cyber-cyan) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 1px 0 0 rgba(220, 180, 130, 0.15),
        inset -1px 0 0 rgba(0, 0, 0, 0.35),
        inset 0 -10px 18px rgba(0, 0, 0, 0.28) !important;
    clip-path: var(--cyber-metal-cut) !important;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), filter 0.35s ease;
}
.btn.btn-app::before,
a.btn-app::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255, 200, 140, 0.55) 0 1.2px, transparent 1.2px) 0 0 / 12px 12px no-repeat,
        linear-gradient(-135deg, rgba(255, 200, 140, 0.55) 0 1.2px, transparent 1.2px) 100% 0 / 12px 12px no-repeat,
        linear-gradient(45deg, rgba(255, 200, 140, 0.4) 0 1.2px, transparent 1.2px) 0 100% / 12px 12px no-repeat,
        linear-gradient(-45deg, rgba(255, 200, 140, 0.4) 0 1.2px, transparent 1.2px) 100% 100% / 12px 12px no-repeat;
    opacity: 0.85;
}
.btn.btn-app > .fa,
.btn.btn-app > i,
a.btn-app > .fa,
a.btn-app > i {
    display: block;
    position: relative;
    z-index: 1;
    font-size: 1.55rem !important;
    margin: 0 0 8px !important;
    color: var(--cyber-cyan) !important;
    text-shadow: 0 0 8px rgba(220, 140, 60, 0.3);
}
.btn.btn-app:hover,
a.btn-app:hover {
    background: linear-gradient(160deg, rgba(90, 58, 30, 0.98), rgba(22, 14, 8, 0.99)) !important;
    border-color: rgba(240, 180, 100, 0.45) !important;
    color: #fff !important;
    transform: translateY(-3px);
    filter: drop-shadow(0 12px 22px rgba(0, 0, 0, 0.45)) drop-shadow(0 0 12px rgba(200, 120, 50, 0.12));
}

.btn-primary,
.btn.btn-primary {
    background: var(--cyber-cyan) !important;
    border-color: var(--cyber-cyan) !important;
    color: #061018 !important;
    box-shadow: var(--cyber-glow) !important;
}
.btn-primary:hover,
.btn.btn-primary:hover {
    background: #ffd090 !important;
    border-color: #ffd090 !important;
    color: #061018 !important;
    box-shadow: 0 0 28px rgba(240, 165, 80, 0.65) !important;
}

/* ???????????? clip-path / ?????????? */
.btn.scroll-top,
button.scroll-top.btn-icon {
    clip-path: none !important;
    overflow: visible !important;
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1050 !important;
    bottom: 52px !important;
    right: 18px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45)) !important;
}
.btn.scroll-top::before,
button.scroll-top.btn-icon::before {
    display: none !important;
}
.btn.scroll-top .feather,
.btn.scroll-top i,
button.scroll-top.btn-icon .feather,
button.scroll-top.btn-icon i {
    position: relative !important;
    z-index: 2 !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    color: inherit !important;
    margin: 0 !important;
    pointer-events: none;
}

.btn-outline-primary,
.btn-primary.btn-outline,
.btn-outline.btn-primary {
    background: transparent !important;
    color: var(--cyber-cyan) !important;
    border-color: var(--cyber-cyan) !important;
    box-shadow: none !important;
}
.btn-outline-primary:hover,
.btn-primary.btn-outline:hover {
    background: rgba(240, 165, 80, 0.1) !important;
    color: var(--cyber-cyan) !important;
}

.btn-danger { background: var(--cyber-pink) !important; border-color: var(--cyber-pink) !important; color: #fff !important; }
.btn-success { background: var(--cyber-green) !important; border-color: var(--cyber-green) !important; color: #061018 !important; }
.btn-warning { background: var(--cyber-yellow) !important; border-color: var(--cyber-yellow) !important; color: #061018 !important; }
.btn-info { background: #4199de !important; border-color: #4199de !important; color: #fff !important; }

.btn-default,
.btn-white,
.btn-light,
body.dark-mode .btn.btn-default,
body.dark-mode .btn.btn-white,
body.dark-mode .btn.btn-light {
    background: #2a1c12 !important;
    border-color: #6a4520 !important;
    color: var(--cyber-text) !important;
}
.btn-default:hover,
.btn-white:hover,
.btn-light:hover {
    border-color: var(--cyber-cyan) !important;
    color: var(--cyber-cyan) !important;
    box-shadow: var(--cyber-glow) !important;
}

/* ---------- ?? / ?? ---------- */
.dropdown-menu,
.modal-content,
.popover,
.layui-layer,
body.dark-mode .dropdown-menu,
body.dark-mode .modal .modal-content,
body.dark-mode .modal .modal-body,
body.dark-mode .modal .modal-footer,
body.dark-mode .layui-layer {
    background: rgba(10, 14, 23, 0.96) !important;
    border: 1px solid var(--cyber-border) !important;
    color: var(--cyber-text) !important;
    box-shadow: 0 0 30px rgba(240, 165, 80, 0.12) !important;
}

.dropdown-item,
.dropdown-item a,
.dropdown-menu label,
body.dark-mode .dropdown-item,
body.dark-mode .dropdown-item a {
    color: var(--cyber-text) !important;
}
.dropdown-item:hover,
.dropdown-menu .dropdown-item:hover,
body.dark-mode .dropdown-menu .dropdown-item:hover {
    background: rgba(240, 165, 80, 0.1) !important;
    color: var(--cyber-cyan) !important;
}

.modal-header,
.layui-layer-title,
body.dark-mode .modal .modal-header,
body.dark-mode .layui-layer-title {
    background: #0b101a !important;
    border-bottom: 1px solid var(--cyber-border) !important;
    color: var(--cyber-cyan) !important;
}

.modal-title { color: var(--cyber-cyan) !important; }

/* ---------- ?? / ?? ---------- */
.pagination .page-item .page-link,
body.dark-mode .pagination:not([class*=pagination-]) .page-item .page-link {
    background: var(--cyber-bg-2) !important;
    border: 1px solid #6a4520 !important;
    color: var(--cyber-text) !important;
}
.pagination .page-item.active .page-link,
.pagination > .active > a {
    background: var(--cyber-cyan) !important;
    border-color: var(--cyber-cyan) !important;
    color: #061018 !important;
}

.badge,
.label {
    border-radius: 0 !important;
    border: 1px solid var(--cyber-border);
}
.badge-primary,
.bg-primary {
    background: var(--cyber-cyan) !important;
    color: #061018 !important;
}

/* ---------- ??? / Alert / Tab ---------- */
.breadcrumb,
.content-header .breadcrumb {
    background: transparent !important;
}
.breadcrumb a { color: var(--cyber-muted) !important; }
.breadcrumb .active,
.breadcrumb-item.active { color: var(--cyber-cyan) !important; }

.alert {
    background: rgba(10, 14, 23, 0.85) !important;
    border: 1px solid var(--cyber-border) !important;
    border-radius: 0 !important;
    color: var(--cyber-text) !important;
}
.alert-primary { border-color: var(--cyber-cyan) !important; color: var(--cyber-cyan) !important; }
.alert-danger { border-color: var(--cyber-pink) !important; color: var(--cyber-pink) !important; }
.alert-success { border-color: var(--cyber-green) !important; color: var(--cyber-green) !important; }
.alert-warning { border-color: var(--cyber-yellow) !important; color: var(--cyber-yellow) !important; }

.nav.nav-tabs {
    border-bottom: 1px solid var(--cyber-border) !important;
}
.nav.nav-tabs .nav-item .nav-link {
    color: var(--cyber-muted) !important;
}
.nav.nav-tabs .nav-item .nav-link.active {
    color: var(--cyber-cyan) !important;
}
.nav.nav-tabs .nav-item .nav-link.active:after {
    background: var(--cyber-cyan) !important;
    box-shadow: var(--cyber-glow) !important;
}

.callout {
    background: var(--cyber-panel) !important;
    border-left: 3px solid var(--cyber-cyan) !important;
}

/* ---------- ?? / ?? ---------- */
.grid-selector .wrap,
.filter-box,
.right-side-filter-container .header {
    background: var(--cyber-bg-2) !important;
    border-color: var(--cyber-border) !important;
}

.login-page,
body.dark-mode .login-page {
    background: transparent !important;
}
.login-card-body,
.register-card-body,
body.dark-mode .login-card-body {
    background: rgba(10, 14, 23, 0.88) !important;
    border: 1px solid var(--cyber-border);
    box-shadow: var(--cyber-glow);
}

/* ---------- ??? ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #050508; }
::-webkit-scrollbar-thumb {
    background: rgba(240, 165, 80, 0.35);
    border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--cyber-cyan); }

/* ---------- ??? ---------- */
.scanlines::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15) 0px,
        rgba(0, 0, 0, 0.15) 2px,
        transparent 2px,
        transparent 6px
    );
}

.pulse-glow {
    animation: none;
    filter: none;
}

@keyframes cyber-pulse {
    0%, 100% { filter: none; }
}

/* =========================================================
 * Octane ?????????
 * ========================================================= */

#cyber-fx-canvas {
    position: fixed !important;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 0.88 !important;
    display: block !important;
}

.main-sidebar,
.main-menu {
    z-index: 1038 !important;
}
.header-navbar {
    z-index: 1039 !important;
}

/* ???? */
#cyber-scan-beam {
    display: none !important;
}

#cyber-content-frame,
.cyber-hud-corner,
body > .cyber-hud-corner {
    display: none !important;
}

#cyber-status-hud {
    position: fixed !important;
    right: 28px;
    bottom: 18px;
    z-index: 1040 !important;
    pointer-events: none !important;
    font-family: 'Orbitron', monospace;
    font-size: 9px;
    letter-spacing: 0.16em;
    color: rgba(200, 160, 110, 0.45);
    text-shadow: none;
    opacity: 0.55;
    display: flex;
    align-items: center;
    gap: 8px;
}
body:not(.sidebar-collapse) #cyber-status-hud {
    right: 28px;
}
#cyber-status-hud .dot {
    width: 6px;
    height: 6px;
    background: rgba(80, 220, 140, 0.85);
    box-shadow: 0 0 8px rgba(80, 220, 140, 0.4);
    animation: cyber-blink 1.6s steps(1) infinite;
    border-radius: 50%;
}

/* 星球浮层配色 — 详见 cyber-planet.css */
:root {
    --cyber-planet-glow: rgba(255, 170, 80, 0.42);
    --cyber-planet-glow-soft: rgba(255, 120, 40, 0.12);
}

@keyframes cyber-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.card.cyber-fx-ready,
.box.cyber-fx-ready,
.info-box.cyber-fx-ready,
.dashboard-stat.cyber-fx-ready {
    --mouse-x: 50%;
    --mouse-y: 40%;
    --spec-x: 40%;
    --spec-y: 16%;
}
.card.cyber-fx-ready:hover,
.box.cyber-fx-ready:hover,
.info-box.cyber-fx-ready:hover,
.dashboard-stat.cyber-fx-ready:hover {
    background-image:
        radial-gradient(120% 90% at var(--spec-x) var(--spec-y),
            rgba(240, 220, 180, 0.1) 0%,
            transparent 50%),
        linear-gradient(122deg,
            transparent 0%,
            rgba(200, 160, 120, 0.035) 46%,
            transparent 62%),
        linear-gradient(158deg,
            #2a2218 0%,
            #1a1410 40%,
            #14100c 75%,
            #0c0907 100%) !important;
}

.card::before,
.box::before,
.info-box::before,
.dcat-box.card::before,
.dashboard-stat::before {
    animation: none !important;
}
@keyframes cyber-sheen-pulse {
    0%, 100% { opacity: 0.75; }
}

.cyber-enter {
    animation: cyber-enter-up 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes cyber-enter-up {
    from {
        opacity: 0;
        transform: translate3d(0, 10px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.main-sidebar .nav-sidebar .nav-item > .nav-link.active,
[class*="sidebar-dark-"] .nav-sidebar > .nav-item > .nav-link.active {
    animation: none !important;
    box-shadow: inset 2px 0 0 rgba(150, 190, 210, 0.55) !important;
}
@keyframes cyber-nav-glow {
    0%, 100% { box-shadow: inset 2px 0 0 rgba(150, 190, 210, 0.55); }
}

.btn-primary:not(.btn-app),
.btn.btn-primary:not(.btn-app) {
    position: relative;
    overflow: hidden;
}
.btn-primary:not(.btn-app)::before,
.btn.btn-primary:not(.btn-app)::before {
    content: '';
    display: block !important;
    position: absolute;
    top: -40%;
    left: -60%;
    width: 40%;
    height: 180%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transform: skewX(-20deg);
    animation: cyber-btn-shine 3.2s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes cyber-btn-shine {
    0%, 55% { left: -60%; opacity: 0; }
    60% { opacity: 1; }
    85%, 100% { left: 140%; opacity: 0; }
}

.cyber-glitch-once {
    animation: cyber-glitch 0.45s steps(2, end);
}
@keyframes cyber-glitch {
    0% { transform: translate(0); text-shadow: 0 0 6px rgba(230, 150, 70, 0.25); }
    20% { transform: translate(-2px, 1px); text-shadow: -2px 0 rgba(255, 100, 50, 0.7), 2px 0 rgba(230, 150, 70, 0.7); }
    40% { transform: translate(2px, -1px); text-shadow: 2px 0 rgba(255, 100, 50, 0.6), -2px 0 rgba(230, 150, 70, 0.6); }
    60% { transform: translate(-1px, 2px); }
    100% { transform: translate(0); text-shadow: none; }
}

.cyber-tick {
    color: #d0b898 !important;
    text-shadow: none;
}

/* =========================================================
 * ?????????Grid / Form / Show / Login / Auth / ???
 * ========================================================= */

/* ?? ???????? ?? */
.bg-white,
.bg-light,
.card.bg-white,
.box.bg-white,
.input-group-text.bg-white,
body.dark-mode .bg-white,
body.dark-mode .bg-light {
    background-color: rgba(20, 14, 10, 0.92) !important;
    color: var(--cyber-text) !important;
}
.shadow-100,
.shadow-sm,
.shadow {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}
.text-dark,
body.dark-mode .text-dark {
    color: var(--cyber-text) !important;
}

/* ?? Grid ??? / ???? / ??? ?? */
.custom-data-table-header,
[data-responsive-table-toolbar],
.table-responsive + .box-footer,
.dcat-box .box-header .box-tools,
.grid-table .box-header {
    background: transparent !important;
    border-color: rgba(200, 150, 100, 0.12) !important;
}
.quick-search-container,
.quick-search-form,
.quick-search .input-group,
.grid-quick-search {
    background: transparent !important;
}
.quick-search-input,
.quick-search .form-control {
    background: rgba(0, 0, 0, 0.4) !important;
    border: 1px solid rgba(200, 150, 100, 0.28) !important;
    color: #f5e6d0 !important;
    border-radius: 0 !important;
}
.column-selector,
.column-selector .dropdown-menu,
.grid-selector .dropdown-menu,
.grid-column-selector {
    background: rgba(16, 11, 8, 0.96) !important;
    border: 1px solid rgba(200, 150, 100, 0.16) !important;
    color: var(--cyber-text) !important;
}
.column-selector .selectors,
.column-selector label {
    color: var(--cyber-text) !important;
}

/* ?? Filter ?? ?? */
.filter-box,
.filter-box.card,
.right-side-filter-container,
.filter-box .card-body,
.filter-box .box-body {
    background: rgba(16, 11, 8, 0.88) !important;
    border-color: rgba(200, 150, 100, 0.14) !important;
    color: var(--cyber-text) !important;
}
.filter-box .card-header,
.filter-input label,
.filter-box .control-label {
    color: #c4b09a !important;
    background: transparent !important;
    border-color: rgba(200, 150, 100, 0.12) !important;
}

/* ?? Show ??????? ?? */
.show-field,
.box-show,
.box.box-solid,
.box.box-default,
body.dark-mode .box.box-default,
body.dark-mode .show .box {
    background:
        linear-gradient(158deg, #2a2218 0%, #1a1410 40%, #14100c 100%) !important;
    border: 1px solid rgba(200, 150, 100, 0.16) !important;
    color: var(--cyber-text) !important;
    border-radius: 0 !important;
    clip-path: var(--cyber-metal-cut);
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35));
}
.fields-group {
    background: transparent !important;
    border: none !important;
    clip-path: none !important;
    filter: none !important;
    overflow: visible !important;
}
.fields-group .row.form-group {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}
.fields-group .form-group .control-label {
    margin-bottom: 0;
}
.show .box-header,
.show-field .box-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent) !important;
    border-bottom: 1px solid rgba(200, 150, 100, 0.12) !important;
    color: #c4b09a !important;
}
.show .box-body,
.show-field .box-body,
.fields-group .form-group {
    color: var(--cyber-text) !important;
}
.show .control-label,
.show .help-block,
.fields-group .control-label {
    color: var(--cyber-muted) !important;
}

/* ?? Switchery ?? */
.switchery,
.switchery-small {
    background-color: rgba(40, 50, 66, 0.95) !important;
    border: 1px solid rgba(200, 150, 100, 0.25) !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45) !important;
}
.switchery > small,
.switchery-small > small {
    background: #c8d8e6 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}
.grid-column-switch .switchery,
.form-group .switchery {
    opacity: 1 !important;
}

/* ?? VS Checkbox / Radio??????????? ?? */
.vs-checkbox-con input:checked ~ .vs-checkbox,
.vs-checkbox-con .vs-checkbox,
.vs-radio-con .vs-radio {
    border-color: rgba(200, 150, 100, 0.35) !important;
    background: rgba(0, 0, 0, 0.35) !important;
}
.vs-checkbox-con input:checked ~ .vs-checkbox {
    background: rgba(210, 130, 55, 0.25) !important;
    border-color: rgba(230, 150, 70, 0.55) !important;
}
.vs-checkbox-con .vs-checkbox .vs-checkbox--check i,
.vs-checkbox--check i {
    color: #ffc078 !important;
}
.vs-checkbox-con span,
.vs-radio-con span,
.custom-control-label {
    color: var(--cyber-text) !important;
}

/* ?? WebUploader / ???? ?? */
.web-uploader,
.webuploader-container,
.uploader-list,
.queueList,
.web-uploader .queueList,
.file-panel,
.statusBar {
    background: rgba(18, 12, 8, 0.9) !important;
    border-color: rgba(200, 150, 100, 0.18) !important;
    color: var(--cyber-text) !important;
}
.webuploader-pick,
.web-uploader .webuploader-pick,
.file-item,
.filelist li,
.thumbnail {
    background: rgba(28, 18, 12, 0.95) !important;
    border: 1px solid rgba(200, 150, 100, 0.2) !important;
    color: var(--cyber-text) !important;
    border-radius: 0 !important;
}
.webuploader-pick:hover,
.web-uploader .webuploader-pick-hover {
    background: rgba(210, 130, 55, 0.12) !important;
    color: #ffc078 !important;
}
.statusBar .btns .uploadBtn,
.statusBar .info {
    color: var(--cyber-text) !important;
}

.web-uploader .placeholder {
    border: 2px dashed rgba(200, 150, 100, 0.38) !important;
    background: rgba(18, 12, 8, 0.62) !important;
    color: rgba(200, 150, 100, 0.62) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 0 18px rgba(240, 140, 60, 0.05);
}
.web-uploader .placeholder p,
.web-uploader .placeholder .flashTip {
    color: rgba(200, 150, 100, 0.55) !important;
}
.web-uploader .placeholder .flashTip a {
    color: #e0a060 !important;
}
.web-uploader .placeholder .icon-upload-cloud,
.web-uploader .placeholder .icon-upload,
.web-uploader .placeholder i[class*="icon-"] {
    color: #e0a060 !important;
}
.web-uploader .placeholder .webuploader-pick {
    background: rgba(240, 140, 60, 0.16) !important;
    border: 1px solid rgba(240, 165, 80, 0.42) !important;
    color: #f5e6d0 !important;
    border-radius: 8px !important;
    box-shadow: 0 0 14px rgba(240, 140, 60, 0.14) !important;
}
.web-uploader .placeholder .webuploader-pick-hover,
.web-uploader .placeholder .webuploader-pick:hover {
    background: rgba(240, 140, 60, 0.28) !important;
    border-color: rgba(240, 165, 80, 0.58) !important;
    color: #ffc078 !important;
    opacity: 1 !important;
}
.web-uploader .placeholder.webuploader-dnd-over {
    border-color: rgba(240, 140, 60, 0.55) !important;
    background: rgba(240, 140, 60, 0.08) !important;
}
.web-uploader .statusBar .upload-progress span.percentage {
    background: rgba(240, 140, 60, 0.85) !important;
}

/* ?? Color picker ?? */
.colorpicker,
.colorpicker-dropdown,
.colorpicker-element .input-group-addon,
.colorpicker-element .input-group-prepend .input-group-text,
.colorpicker-element .input-group-append .input-group-text {
    background: rgba(28, 18, 12, 0.95) !important;
    border-color: rgba(200, 150, 100, 0.2) !important;
    color: var(--cyber-text) !important;
}
.colorpicker-saturation,
.colorpicker-hue,
.colorpicker-alpha,
.colorpicker-bar {
    border: 1px solid rgba(200, 150, 100, 0.2) !important;
}

/* ?? Toastr ?? */
#toast-container > div,
.toast {
    --cyber-cut-sm: 6px;
    background: rgba(16, 11, 8, 0.96) !important;
    border: 1px solid rgba(200, 150, 100, 0.28) !important;
    color: var(--cyber-text) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45) !important;
    border-radius: 0 !important;
    clip-path: var(--cyber-metal-cut-sm);
    opacity: 1 !important;
}
#toast-container > .toast-success { border-color: rgba(90, 200, 140, 0.45) !important; }
#toast-container > .toast-error { border-color: rgba(220, 80, 100, 0.45) !important; }
#toast-container > .toast-info { border-color: rgba(80, 180, 220, 0.45) !important; }
#toast-container > .toast-warning { border-color: rgba(200, 170, 80, 0.45) !important; }
.toast-title,
.toast-message { color: var(--cyber-text) !important; }

/* ?? SweetAlert2 ?? */
.swal2-popup {
    --cyber-cut-md: 12px;
    background: linear-gradient(160deg, #2a1c12, #0c0907) !important;
    border: 1px solid rgba(200, 150, 100, 0.25) !important;
    color: var(--cyber-text) !important;
    border-radius: 0 !important;
    clip-path: var(--cyber-metal-cut);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55) !important;
}
.swal2-title,
.swal2-html-container,
.swal2-content {
    color: var(--cyber-text) !important;
}
.swal2-confirm {
    background: rgba(210, 130, 55, 0.85) !important;
    border: 1px solid rgba(230, 150, 70, 0.5) !important;
    color: #061018 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.swal2-cancel,
.swal2-deny {
    background: rgba(30, 40, 56, 0.95) !important;
    border: 1px solid rgba(200, 150, 100, 0.25) !important;
    color: var(--cyber-text) !important;
    border-radius: 0 !important;
}
.swal2-icon.swal2-warning { border-color: rgba(200, 170, 80, 0.7) !important; color: #c8aa50 !important; }
.swal2-icon.swal2-error { border-color: rgba(220, 80, 100, 0.7) !important; }
.swal2-icon.swal2-success [class^=swal2-success-line] { background-color: #5ac88c !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(90, 200, 140, 0.35) !important; }

/* ?? ?????????????????/?? ?? */
.login-page,
.register-page,
body.login-page,
body.dark-mode .login-page,
.login-page.bg-40,
.register-page.bg-40 {
    background: transparent !important;
    background-color: transparent !important;
}
.login-page.bg-40::before,
.login-page.bg-40::after,
.login-page::before,
.login-page::after {
    display: none !important;
    content: none !important;
}
body.login-page::after,
body:has(.login-page)::after {
    opacity: 0.15;
    background: radial-gradient(ellipse 100% 70% at 50% 100%, rgba(0, 0, 0, 0.2), transparent 55%);
}
.login-box,
.register-box,
.login-page .card,
.login-page .card-body,
.login-page .login-card-body {
    background: rgba(22, 14, 10, 0.72) !important;
    border: 1px solid rgba(200, 150, 100, 0.28) !important;
    border-radius: 0 !important;
    clip-path: var(--cyber-metal-cut);
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.45));
    color: var(--cyber-text) !important;
    backdrop-filter: blur(10px) saturate(0.95);
    -webkit-backdrop-filter: blur(10px) saturate(0.95);
}
.login-logo,
.login-logo a,
.login-box-msg,
.login-page .card-title {
    color: #c4b09a !important;
}
.login-page .form-control,
.login-page .input-group-text {
    background: rgba(0, 0, 0, 0.35) !important;
    border-color: rgba(200, 150, 100, 0.28) !important;
    color: #f5e6d0 !important;
}
.form-label-group > label,
.login-page label {
    color: var(--cyber-muted) !important;
}
/* ?????? bg-40 ??????????????? */
.login-page.bg-40,
.register-page.bg-40 {
    background: transparent !important;
}
body:not(:has(.login-page)):not(:has(.register-page)) .bg-40 {
    background: rgba(8, 12, 20, 0.9) !important;
}

/* ?????content-wrapper / content ?????? */
body:has(.login-page) .content-wrapper,
body:has(.register-page) .content-wrapper,
body:has(.login-page) .app-content,
body:has(.login-page) .content,
body:has(.login-page) .content-body,
body:has(.login-page) .body-bg {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    clip-path: none !important;
    filter: none !important;
}
body:has(.login-page) #cyber-panel-frame,
body:has(.login-page) #cyber-status-hud {
    display: none !important;
}
body:has(.login-page) .content-wrapper > .cyber-cabin-grain {
    display: none !important;
}

/* ?? Auth Tree / Nestable ?? ?? */
.dd,
.dd-list,
.dd-item,
.dd-empty {
    background: transparent !important;
    color: var(--cyber-text) !important;
}
.dd-handle,
.dd3-content,
.dd-nodrag {
    background: rgba(28, 18, 12, 0.95) !important;
    border: 1px solid rgba(200, 150, 100, 0.18) !important;
    color: var(--cyber-text) !important;
    border-radius: 0 !important;
    clip-path: var(--cyber-metal-cut-sm);
}
.dd-handle:hover,
.dd3-content:hover {
    background: rgba(210, 130, 55, 0.1) !important;
    color: #ffc078 !important;
    border-color: rgba(230, 150, 70, 0.35) !important;
}
.dd-item > button {
    color: var(--cyber-cyan) !important;
}

/* ?? Badge / Label ??? ?? */
.badge,
.label {
    border-radius: 0 !important;
}
.bg-primary, .badge-primary, .label-primary { background: rgba(220, 140, 60, 0.25) !important; color: #ffc078 !important; border: 1px solid rgba(210, 130, 55, 0.35) !important; }
.bg-success, .badge-success, .label-success { background: rgba(90, 200, 140, 0.2) !important; color: #8ce0b0 !important; border: 1px solid rgba(90, 200, 140, 0.35) !important; }
.bg-danger, .badge-danger, .label-danger { background: rgba(220, 80, 100, 0.2) !important; color: #f0a0b0 !important; border: 1px solid rgba(220, 80, 100, 0.35) !important; }
.bg-warning, .badge-warning, .label-warning { background: rgba(200, 170, 80, 0.2) !important; color: #e0cc80 !important; border: 1px solid rgba(200, 170, 80, 0.35) !important; }
.bg-info, .badge-info, .label-info { background: rgba(80, 150, 210, 0.2) !important; color: #90c8e8 !important; border: 1px solid rgba(80, 150, 210, 0.35) !important; }
.bg-secondary, .badge-secondary, .label-default { background: rgba(80, 90, 110, 0.35) !important; color: #b0bcc8 !important; border: 1px solid rgba(120, 140, 160, 0.3) !important; }

/* ?? ?????? ?? */
.pagination .page-item .page-link,
body.dark-mode .pagination .page-item .page-link {
    --cyber-cut-sm: 4px;
    background: rgba(22, 14, 10, 0.95) !important;
    border: 1px solid rgba(200, 150, 100, 0.2) !important;
    color: var(--cyber-text) !important;
    border-radius: 0 !important;
    clip-path: var(--cyber-metal-cut-sm);
}
.pagination .page-item.active .page-link {
    background: rgba(220, 140, 60, 0.25) !important;
    border-color: rgba(230, 150, 70, 0.45) !important;
    color: #ffc078 !important;
}

/* ?? Select2 ???? ?? */
.select2-container--default .select2-results__option,
.select2-results__option {
    background: transparent !important;
    color: var(--cyber-text) !important;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected=true] {
    background: rgba(210, 130, 55, 0.15) !important;
    color: #ffc078 !important;
}
.select2-container--default .select2-selection__rendered {
    color: #f5e6d0 !important;
}
.select2-container--default .select2-selection__arrow b {
    border-color: #b09070 transparent transparent transparent !important;
}
.select2-search__field {
    background: rgba(0, 0, 0, 0.4) !important;
    color: #f5e6d0 !important;
    border-color: rgba(200, 150, 100, 0.25) !important;
}

/* ?? Modal / Layer??? clip-path?????????? ?? */
.modal,
.modal.show,
.modal.fade.show {
    position: fixed !important;
    z-index: 12000 !important;
    pointer-events: auto !important;
}
.modal-backdrop,
.modal-backdrop.show {
    z-index: 11990 !important;
    background: rgba(2, 4, 8, 0.72) !important;
    pointer-events: auto !important;
}
.modal-dialog,
.modal-content,
.modal-body,
.modal-footer,
.modal-header {
    pointer-events: auto !important;
    clip-path: none !important;
    filter: none !important;
    transform: none !important;
}
.modal-content {
    --cyber-cut-md: 12px;
    border-radius: 2px !important;
    clip-path: none !important;
    overflow: visible !important;
    background: linear-gradient(160deg, #2a2218, #0c0907) !important;
    position: relative;
    z-index: 1;
}
.layui-layer,
.layui-layer-page,
.layui-layer-dialog {
    position: fixed !important;
    z-index: 19891015 !important;
    pointer-events: auto !important;
    clip-path: none !important;
    filter: none !important;
    transform: none !important;
    overflow: visible !important;
    background: linear-gradient(160deg, #2a2218, #0c0907) !important;
    border-radius: 2px !important;
}
.layui-layer-shade {
    position: fixed !important;
    z-index: 19891014 !important;
    pointer-events: auto !important;
}
.modal .close,
.layui-layer-setwin a {
    color: var(--cyber-muted) !important;
    text-shadow: none !important;
    opacity: 0.85;
    pointer-events: auto !important;
    position: relative;
    z-index: 5;
}
.modal .close:hover,
.layui-layer-setwin a:hover {
    color: #ffc078 !important;
    opacity: 1;
}
.modal .btn,
.modal-footer .btn,
.layui-layer-btn a {
    position: relative;
    z-index: 5;
    pointer-events: auto !important;
}
.layui-layer-btn a {
    border-radius: 0 !important;
    background: rgba(20, 28, 40, 0.95) !important;
    border: 1px solid rgba(200, 150, 100, 0.25) !important;
    color: var(--cyber-text) !important;
}
.layui-layer-btn .layui-layer-btn0 {
    background: rgba(200, 120, 50, 0.85) !important;
    border-color: rgba(230, 150, 70, 0.45) !important;
    color: #061018 !important;
}

.modal .btn-primary::before,
.modal .btn.btn-primary::before {
    display: none !important;
}

.modal .box::before,
.modal .box::after,
.modal .card::before,
.modal .card::after,
.layui-layer .box::before,
.layui-layer .box::after,
.layui-layer .card::before,
.layui-layer .card::after {
    display: none !important;
}
.modal .box,
.modal .card,
.modal .fields-group,
.modal .show-field,
.layui-layer .box,
.layui-layer .card,
.layui-layer .fields-group,
.layui-layer .show-field,
.layui-layer-content .box,
.layui-layer-content .fields-group {
    clip-path: none !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
    transform: none !important;
    isolation: auto !important;
}
.modal .form-group.row,
.layui-layer .form-group.row,
.modal .fields-group .row.form-group,
.layui-layer .fields-group .row.form-group {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}
.modal .form-group .control-label,
.layui-layer .form-group .control-label {
    margin-bottom: 0;
}
.modal .web-uploader,
.modal .webuploader-container,
.layui-layer .web-uploader,
.layui-layer .webuploader-container {
    clip-path: none !important;
    filter: none !important;
    overflow: visible !important;
}

body.modal-open #cyber-fx-canvas,
body.modal-open #cyber-scan-beam,
body.modal-open #cyber-panel-frame,
body.modal-open #cyber-status-hud,
body.cyber-modal-open #cyber-fx-canvas,
body.cyber-modal-open #cyber-scan-beam,
body.cyber-modal-open #cyber-panel-frame,
body.cyber-modal-open #cyber-status-hud {
    display: none !important;
    pointer-events: none !important;
    z-index: 0 !important;
}
body.modal-open::before,
body.modal-open::after,
body.cyber-modal-open::before,
body.cyber-modal-open::after {
    pointer-events: none !important;
    z-index: 0 !important;
}
.cyber-stat-link {
    color: var(--cyber-cyan) !important;
    font-size: 12px !important;
}

/* ?? Popover / Tooltip ?? */
.popover,
.tooltip-inner {
    background: rgba(16, 11, 8, 0.96) !important;
    border: 1px solid rgba(200, 150, 100, 0.2) !important;
    color: var(--cyber-text) !important;
    border-radius: 0 !important;
}
.popover-header {
    background: rgba(28, 18, 12, 0.98) !important;
    border-bottom: 1px solid rgba(200, 150, 100, 0.14) !important;
    color: #c4b09a !important;
}
.popover-body { color: var(--cyber-text) !important; }
.bs-popover-auto[x-placement^=top] .arrow::before,
.bs-popover-top .arrow::before { border-top-color: rgba(200, 150, 100, 0.2) !important; }
.bs-popover-auto[x-placement^=top] .arrow::after,
.bs-popover-top .arrow::after { border-top-color: rgba(16, 11, 8, 0.96) !important; }

/* ?? ???? ?? */
.is-invalid,
.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: rgba(220, 80, 100, 0.55) !important;
    box-shadow: 0 0 0 1px rgba(220, 80, 100, 0.2) !important;
}
.invalid-feedback,
.help-block.with-errors,
.has-error .help-block {
    color: #f0a0b0 !important;
}

/* ?? ??????? ?? */
.box-footer,
.form-footer,
.dcat-box .box-footer {
    background: rgba(0, 0, 0, 0.22) !important;
    border-top: 1px solid rgba(200, 150, 100, 0.12) !important;
}

/* ?? ????? / ??? ?? */
.box-body ul,
.content-body ul {
    color: var(--cyber-text);
}
.box-body li {
    border-color: rgba(200, 150, 100, 0.1);
}
.empty-data,
.table .empty-grid,
.no-data {
    color: var(--cyber-muted) !important;
    background: transparent !important;
}

/* ?? NProgress ?? */
#nprogress .bar {
    background: rgba(230, 150, 70, 0.75) !important;
    height: 2px !important;
}
#nprogress .peg {
    box-shadow: 0 0 10px rgba(230, 150, 70, 0.45), 0 0 4px rgba(230, 150, 70, 0.35) !important;
}

/* ?? Tabs / ???????? ?? */
.nav.nav-tabs .nav-link {
    border-radius: 0 !important;
    clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%, 0 6px);
}
.card .btn-group .btn,
.box-tools .btn {
    border-radius: 0 !important;
}

/* ?? PJAX / ??????? ?? */
.content-wrapper .content,
.app-content .content,
.content-body > .row > [class*="col-"] > .card,
.main-content {
    background-color: transparent !important;
}
body.dark-mode .card.card-outline,
body.dark-mode .card-outline {
    border-color: rgba(200, 150, 100, 0.16) !important;
}

@media (prefers-reduced-motion: reduce) {
    #cyber-scan-beam,
    .cyber-hud-corner,
    .card, .box, .info-box,
    .btn-primary::before,
    .main-sidebar .nav-sidebar .nav-item > .nav-link.active {
        animation: none !important;
    }
    #cyber-fx-canvas { display: none !important; }
    #cyber-planet-wrap { display: none !important; }
}

/* =========================================================
 * Ember???????? dcat-app-cyberpunk ?? #0ff ???????
 * ========================================================= */
html.cyber-skin-ember .dd-handle,
html.cyber-skin-ember .dd3-content,
html.cyber-skin-ember .dd-nodrag,
html.cyber-skin-ember .dd-handle a,
html.cyber-skin-ember .dd3-content a,
html.cyber-skin-ember .dd-item > button,
html.cyber-skin-ember .table a,
html.cyber-skin-ember .box-body a:not(.btn),
html.cyber-skin-ember .card-body a:not(.btn),
html.cyber-skin-ember .text-primary,
html.cyber-skin-ember .text-info,
html.cyber-skin-ember code,
html.cyber-skin-ember .feather,
html.cyber-skin-ember i.feather,
html.cyber-skin-ember .grid-dropdown-icon,
html.cyber-skin-ember .btn-outline-primary {
    color: #e0a060 !important;
}
html.cyber-skin-ember .btn-outline-primary {
    border-color: #e0a060 !important;
    background: transparent !important;
}
html.cyber-skin-ember .btn-outline-primary:hover {
    background: rgba(224, 160, 96, 0.18) !important;
    color: #ffc078 !important;
}
html.cyber-skin-ember .bg-primary,
html.cyber-skin-ember .badge-primary,
html.cyber-skin-ember .label-primary {
    background: rgba(220, 140, 60, 0.22) !important;
    color: #ffc078 !important;
    border: 1px solid rgba(220, 140, 60, 0.4) !important;
}
html.cyber-skin-ember .badge-success,
html.cyber-skin-ember .label-success,
html.cyber-skin-ember .bg-success {
    background: rgba(80, 160, 90, 0.24) !important;
    color: #9ed8a8 !important;
    border: 1px solid rgba(90, 180, 100, 0.48) !important;
}
html.cyber-skin-ember .badge-danger,
html.cyber-skin-ember .label-danger,
html.cyber-skin-ember .bg-danger {
    background: rgba(200, 55, 65, 0.32) !important;
    color: #ffb4bc !important;
    border: 1px solid rgba(220, 80, 90, 0.58) !important;
    box-shadow: 0 0 10px rgba(200, 60, 70, 0.18) !important;
}
html.cyber-skin-ember .badge-warning,
html.cyber-skin-ember .label-warning,
html.cyber-skin-ember .bg-warning {
    background: rgba(200, 150, 60, 0.22) !important;
    color: #e8c878 !important;
    border: 1px solid rgba(200, 160, 70, 0.45) !important;
}
html.cyber-skin-ember .badge-info,
html.cyber-skin-ember .label-info,
html.cyber-skin-ember .bg-info {
    background: rgba(70, 130, 180, 0.22) !important;
    color: #90c8e8 !important;
    border: 1px solid rgba(80, 150, 200, 0.42) !important;
}
html.cyber-skin-ember .badge-secondary,
html.cyber-skin-ember .label-default,
html.cyber-skin-ember .bg-secondary {
    background: rgba(70, 62, 56, 0.55) !important;
    color: #a89888 !important;
    border: 1px solid rgba(120, 100, 88, 0.35) !important;
}
html.cyber-skin-ember .dd-handle,
html.cyber-skin-ember .dd3-content {
    background: rgba(28, 18, 12, 0.95) !important;
    border-color: rgba(200, 140, 80, 0.22) !important;
}
html.cyber-skin-ember .btn.btn-default,
html.cyber-skin-ember a.btn-default {
    background: #2a1c12 !important;
    border-color: #6a4520 !important;
    color: #e0a060 !important;
}
html.cyber-skin-ember .btn.btn-app,
html.cyber-skin-ember a.btn-app {
    background: linear-gradient(160deg, rgba(72, 48, 28, 0.95), rgba(18, 12, 8, 0.98)) !important;
    color: #e0a060 !important;
}
html.cyber-skin-ember .cyber-stat-link {
    color: #e0a060 !important;
}

/* Ember?????/??????????????????????????????? */
html.cyber-skin-ember .card,
html.cyber-skin-ember .box,
html.cyber-skin-ember .panel,
html.cyber-skin-ember .dcat-box,
html.cyber-skin-ember .info-box,
html.cyber-skin-ember .table,
html.cyber-skin-ember .table > thead,
html.cyber-skin-ember .table > tbody,
html.cyber-skin-ember .table td,
html.cyber-skin-ember .table th,
html.cyber-skin-ember .box-body,
html.cyber-skin-ember .card-body,
html.cyber-skin-ember .custom-data-table,
html.cyber-skin-ember .table-responsive,
html.cyber-skin-ember .dd,
html.cyber-skin-ember .dd-list {
    background-color: transparent !important;
}
html.cyber-skin-ember .card,
html.cyber-skin-ember .box,
html.cyber-skin-ember .panel,
html.cyber-skin-ember .dcat-box.card,
html.cyber-skin-ember .info-box,
html.cyber-skin-ember .dashboard-stat {
    background-image:
        radial-gradient(110% 80% at 40% 16%, rgba(255, 200, 140, 0.08) 0%, transparent 48%),
        linear-gradient(158deg, #2a2218 0%, #1a1410 40%, #14100c 75%, #0c0907 100%) !important;
    border-color: rgba(200, 140, 80, 0.22) !important;
}
html.cyber-skin-ember .table thead th {
    background: rgba(220, 140, 60, 0.08) !important;
    color: #e0a060 !important;
    border-bottom-color: rgba(220, 140, 60, 0.35) !important;
}
html.cyber-skin-ember .table td,
html.cyber-skin-ember .table th {
    border-color: rgba(200, 140, 80, 0.14) !important;
    color: #c4b09a !important;
}
html.cyber-skin-ember .content-wrapper {
    background-color: rgba(12, 9, 6, 0.12) !important;
    background-image:
        radial-gradient(ellipse 70% 50% at 40% 18%, rgba(160, 100, 50, 0.04), transparent 62%),
        linear-gradient(170deg, rgba(42, 28, 18, 0.14) 0%, rgba(16, 11, 8, 0.08) 50%, rgba(10, 8, 5, 0.06) 100%) !important;
    border-color: rgba(200, 140, 80, 0.14) !important;
}

/* Ember???????? dcat-app-cyberpunk ?? #0ff / cyan ??? */
html.cyber-skin-ember,
html.cyber-skin-ember body,
body.cyber-theme-ember,
body[data-cyber-skin='ember'] {
    --primary: #e0a060 !important;
    --blue: #e0a060 !important;
    --cyan: #e0a060 !important;
}
html.cyber-skin-ember .btn-primary,
html.cyber-skin-ember .btn.btn-primary,
html.cyber-skin-ember .page-item.active .page-link,
html.cyber-skin-ember .custom-switch input:checked ~ .custom-control-label::before,
html.cyber-skin-ember .vs-checkbox-con input:checked ~ .vs-checkbox,
html.cyber-skin-ember .vs-radio-con input:checked ~ .vs-radio .vs-radio--circle {
    background-color: #e0a060 !important;
    border-color: #e0a060 !important;
    color: #1a1008 !important;
}
html.cyber-skin-ember a:not(.btn):not(.nav-link),
html.cyber-skin-ember .text-primary,
html.cyber-skin-ember .btn-link,
html.cyber-skin-ember .page-link,
html.cyber-skin-ember .feather,
html.cyber-skin-ember i.icon-edit,
html.cyber-skin-ember i.icon-trash,
html.cyber-skin-ember .grid-dropdown-actions .grid-action,
html.cyber-skin-ember code {
    color: #e0a060 !important;
}
html.cyber-skin-ember .table,
html.cyber-skin-ember table.data-table,
html.cyber-skin-ember .custom-data-table,
html.cyber-skin-ember .box .box-body,
html.cyber-skin-ember .card .card-body {
    background: transparent !important;
    color: #c4b09a !important;
}
html.cyber-skin-ember .table thead th,
html.cyber-skin-ember table.data-table thead th {
    background: rgba(224, 160, 96, 0.1) !important;
    color: #e0a060 !important;
    border-color: rgba(224, 160, 96, 0.28) !important;
}
html.cyber-skin-ember .table td,
html.cyber-skin-ember .table th,
html.cyber-skin-ember table.data-table td {
    background: transparent !important;
    border-color: rgba(200, 140, 80, 0.14) !important;
    color: #c4b09a !important;
}
html.cyber-skin-ember .bg-primary,
html.cyber-skin-ember .badge-primary,
html.cyber-skin-ember .label-primary {
    background: rgba(224, 160, 96, 0.22) !important;
    color: #ffc078 !important;
    border-color: rgba(224, 160, 96, 0.4) !important;
}
html.cyber-skin-ember .badge-success,
html.cyber-skin-ember .label-success,
html.cyber-skin-ember .bg-success {
    background: rgba(80, 160, 90, 0.24) !important;
    color: #9ed8a8 !important;
    border-color: rgba(90, 180, 100, 0.48) !important;
}
html.cyber-skin-ember .badge-danger,
html.cyber-skin-ember .label-danger,
html.cyber-skin-ember .bg-danger {
    background: rgba(200, 55, 65, 0.32) !important;
    color: #ffb4bc !important;
    border-color: rgba(220, 80, 90, 0.58) !important;
    box-shadow: 0 0 10px rgba(200, 60, 70, 0.18) !important;
}

/* Dcat grid rows ? override dcat-app-cyberpunk #fff / cold navy */
html.cyber-skin-ember table.custom-data-table.data-table tbody tr,
html.cyber-skin-ember body.dark-mode table.custom-data-table.data-table tbody tr {
    background: rgba(32, 20, 12, 0.92) !important;
    background-color: rgba(32, 20, 12, 0.92) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28) !important;
}
html.cyber-skin-ember table.custom-data-table.data-table tbody tr td,
html.cyber-skin-ember body.dark-mode table.custom-data-table.data-table tbody tr td {
    background: transparent !important;
    background-color: transparent !important;
    color: #c4b09a !important;
}
html.cyber-skin-ember table.custom-data-table.data-table tbody tr:hover,
html.cyber-skin-ember body.dark-mode table.custom-data-table.data-table tbody tr:hover {
    background: rgba(224, 160, 96, 0.14) !important;
    background-color: rgba(224, 160, 96, 0.14) !important;
}
html.cyber-skin-ember table.custom-data-table.data-table tbody tr:nth-child(even),
html.cyber-skin-ember body.dark-mode table.custom-data-table.data-table tbody tr:nth-child(even) {
    background: rgba(38, 24, 14, 0.92) !important;
    background-color: rgba(38, 24, 14, 0.92) !important;
}

/* beat dcat-app-cyberpunk body.dark-mode .table tbody tr { background:#2c2c43 } */
html.cyber-skin-ember body.dark-mode .table tbody tr,
html.cyber-skin-ember body.dark-mode .table tbody tr td,
html.cyber-skin-ember body.dark-mode .table tbody tr th {
    background: rgba(32, 20, 12, 0.92) !important;
    background-color: rgba(32, 20, 12, 0.92) !important;
    color: #c4b09a !important;
}
html.cyber-skin-ember body.dark-mode .table.table-hover tbody tr:hover,
html.cyber-skin-ember body.dark-mode .table.table-hover tbody tr:hover td,
html.cyber-skin-ember body.dark-mode .table.table-hover tbody tr:hover th {
    background: rgba(224, 160, 96, 0.14) !important;
    background-color: rgba(224, 160, 96, 0.14) !important;
}