:root {
    --theme-bg-start: #060816;
    --theme-bg-mid: #0a0f2a;
    --theme-bg-end: #040713;
    --theme-panel-start: rgba(13, 22, 58, 0.96);
    --theme-panel-end: rgba(8, 14, 42, 0.98);
    --theme-panel-soft: rgba(10, 18, 48, 0.88);
    --theme-border: rgba(46, 98, 255, 0.34);
    --theme-border-strong: rgba(51, 198, 255, 0.46);
    --theme-accent: #1e7dff;
    --theme-accent-soft: #47b6ff;
    --theme-cyan: #24d5ff;
    --theme-blue: #2458ff;
    --theme-violet: #4b54d8;
    --theme-green: #31d98b;
    --theme-yellow: #ffc857;
    --theme-orange: #ff9a4e;
    --theme-red: #ff6b74;
    --theme-text: #edf5ff;
    --theme-text-soft: #8fa8d8;
    --theme-shadow: 0 14px 40px rgba(0, 0, 0, 0.48);
}

html, body {
    background:
        radial-gradient(circle at 50% 0%, rgba(36, 88, 255, 0.22), transparent 28%),
        radial-gradient(circle at 14% 18%, rgba(36, 213, 255, 0.10), transparent 20%),
        radial-gradient(circle at 88% 16%, rgba(255, 154, 78, 0.05), transparent 14%),
        linear-gradient(180deg, var(--theme-bg-start) 0%, var(--theme-bg-mid) 52%, var(--theme-bg-end) 100%) !important;
    color: var(--theme-text) !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(rgba(40, 88, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(40, 88, 255, 0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    opacity: 0.72;
    z-index: 0;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(43, 91, 255, 0.10), transparent 16%, transparent 84%, rgba(43, 91, 255, 0.06)),
        radial-gradient(circle at 50% 0%, rgba(76, 154, 255, 0.14), transparent 24%);
    opacity: 0.82;
    z-index: 0;
}

body > * {
    position: relative;
    z-index: 1;
}

.system-container,
.home-container,
.page,
.container,
.main-container,
.dashboard-container,
.content-wrapper {
    color: var(--theme-text) !important;
}

.top-nav,
.header,
.page-header,
.panel,
.panel-container,
.card,
.stat-card,
.toolbar,
.sidebar,
.left-sidebar,
.user-info,
.modal-content,
.drawer-shell,
.drawer-body,
.drawer-topbar,
.search-panel,
.filter-panel,
.content-panel,
.chart-panel,
.table-panel,
.summary-card,
.data-card,
.monitor-card,
.alert-card {
    background:
        linear-gradient(180deg, rgba(23, 54, 160, 0.08), transparent 18%),
        linear-gradient(180deg, var(--theme-panel-start), var(--theme-panel-end)) !important;
    border-color: var(--theme-border) !important;
    box-shadow: var(--theme-shadow) !important;
    color: var(--theme-text) !important;
    backdrop-filter: blur(14px) saturate(125%) !important;
}

.top-nav,
.header,
.page-header,
.panel-header,
.drawer-topbar,
.card-header,
.module-header:hover,
.module-header.active {
    background:
        linear-gradient(90deg, rgba(31, 91, 255, 0.36) 0%, rgba(41, 202, 255, 0.18) 34%, rgba(19, 48, 144, 0.08) 72%, transparent 100%),
        linear-gradient(180deg, rgba(15, 34, 103, 0.98), rgba(8, 16, 54, 0.99)) !important;
}

.logo-text,
.page-title,
.panel-title,
.title,
.panel-header h2,
.panel-header h3,
.module-name,
.stat-label,
.label,
.header-meta,
.panel-note,
.subtitle {
    color: var(--theme-text-soft) !important;
}

.panel-title,
.page-title,
.title,
.logo-text,
.drawer-topbar-title,
.drawer-title {
    text-shadow: 0 0 14px rgba(36, 213, 255, 0.26), 0 0 24px rgba(36, 88, 255, 0.18);
}

.stat-value,
.metric-value,
.value,
.number,
.big-number,
.count,
.total-value {
    color: var(--theme-text) !important;
    text-shadow: 0 0 16px rgba(36, 88, 255, 0.24);
}

.stat-card:nth-child(1) .stat-value,
.summary-card:nth-child(1) .value,
.metric-card:nth-child(1) .value { color: var(--theme-cyan) !important; }
.stat-card:nth-child(2) .stat-value,
.summary-card:nth-child(2) .value,
.metric-card:nth-child(2) .value { color: var(--theme-yellow) !important; }
.stat-card:nth-child(3) .stat-value,
.summary-card:nth-child(3) .value,
.metric-card:nth-child(3) .value { color: var(--theme-green) !important; }
.stat-card:nth-child(4) .stat-value,
.summary-card:nth-child(4) .value,
.metric-card:nth-child(4) .value { color: var(--theme-orange) !important; }
.stat-card:nth-child(5) .stat-value,
.summary-card:nth-child(5) .value,
.metric-card:nth-child(5) .value { color: #9be7ff !important; }

.stat-icon,
.logo-icon,
.module-icon,
.quick-icon-wrap,
.card-icon {
    box-shadow: 0 0 18px rgba(57, 212, 255, 0.18) !important;
}

.stat-icon.blue,
.logo-icon,
.module-icon,
.btn-primary,
.search-btn,
.action-btn.primary,
.detail-btn,
.pager-btn.active,
.tab-btn.active,
.menu-item.active {
    background: linear-gradient(135deg, #1f7cff, #34c9ff) !important;
    color: #f7fbff !important;
    border-color: rgba(71, 132, 255, 0.46) !important;
    box-shadow: 0 0 18px rgba(41, 131, 255, 0.26) !important;
}

.stat-icon.green,
.btn-success {
    background: linear-gradient(135deg, #75ffaf, #2fd4a7) !important;
    color: #11273a !important;
}

.stat-icon.orange,
.warning-accent {
    background: linear-gradient(135deg, #ffcf57, #ff9a4c) !important;
    color: #352200 !important;
}

.stat-icon.red,
.danger-accent {
    background: linear-gradient(135deg, #ff8c8c, #ff6f91) !important;
    color: #3c1118 !important;
}

.stat-icon.purple,
.btn-secondary,
.tab-btn,
.action-btn,
.quick-item,
.menu-item:hover {
    background: rgba(28, 62, 170, 0.22) !important;
    color: #bad8ff !important;
    border-color: rgba(53, 105, 255, 0.26) !important;
}

.btn,
.button,
button,
.search-btn,
.action-btn,
.tab-btn,
.menu-item,
.quick-item {
    transition: all 0.25s ease !important;
}

.btn:hover,
.button:hover,
button:hover,
.search-btn:hover,
.action-btn:hover,
.tab-btn:hover,
.quick-item:hover,
.stat-card:hover,
.panel:hover {
    box-shadow: 0 0 0 1px rgba(36, 213, 255, 0.26), 0 12px 32px rgba(0, 0, 0, 0.36), 0 0 20px rgba(36, 88, 255, 0.12) !important;
}

input,
select,
textarea,
.input,
.select,
.filter-select {
    background: rgba(7, 14, 42, 0.94) !important;
    color: var(--theme-text) !important;
    border-color: rgba(43, 91, 255, 0.30) !important;
}

input:focus,
select:focus,
textarea:focus,
.input:focus,
.select:focus,
.filter-select:focus {
    border-color: rgba(57, 212, 255, 0.68) !important;
    box-shadow: 0 0 0 3px rgba(57, 212, 255, 0.12) !important;
    outline: none !important;
}

table,
.data-table,
.mini-table {
    color: var(--theme-text) !important;
}

th,
.data-table th,
.mini-table th {
    background: linear-gradient(180deg, rgba(18, 40, 118, 0.96), rgba(8, 22, 68, 0.98)) !important;
    color: #7ddcff !important;
    border-bottom-color: rgba(48, 109, 255, 0.24) !important;
}

td,
.data-table td,
.mini-table td {
    color: var(--theme-text-soft) !important;
    border-bottom-color: rgba(87, 119, 255, 0.10) !important;
}

tbody tr:hover,
.data-table tbody tr:hover {
    background: rgba(36, 88, 255, 0.10) !important;
}

.status-normal,
.status-success,
.badge-success {
    background: rgba(125, 255, 155, 0.14) !important;
    color: var(--theme-green) !important;
    border-color: rgba(125, 255, 155, 0.26) !important;
}

.status-warning,
.status-alarm,
.badge-warning {
    background: rgba(255, 230, 109, 0.14) !important;
    color: var(--theme-yellow) !important;
    border-color: rgba(255, 230, 109, 0.26) !important;
}

.status-error,
.status-danger,
.badge-danger,
.status-offline {
    background: rgba(255, 114, 114, 0.14) !important;
    color: var(--theme-red) !important;
    border-color: rgba(255, 114, 114, 0.24) !important;
}

.status-tag,
.status-badge,
.badge,
.chip {
    background: rgba(38, 76, 190, 0.18) !important;
    border: 1px solid rgba(53, 104, 255, 0.24) !important;
    color: #d8e6ff !important;
}

.drawer-mask {
    background: rgba(7, 8, 26, 0.58) !important;
    backdrop-filter: blur(2px);
}

.drawer-shell {
    background: linear-gradient(180deg, rgba(11, 24, 76, 0.985), rgba(7, 13, 40, 0.995)) !important;
    border-left-color: var(--theme-border) !important;
}

.drawer-body,
.panel-body,
.table-wrap,
.alert-list,
.box-list {
    scrollbar-color: var(--theme-accent) rgba(17, 20, 52, 0.8);
}

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

::-webkit-scrollbar-track {
    background: rgba(18, 20, 52, 0.72) !important;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--theme-cyan), var(--theme-blue)) !important;
    border-radius: 999px;
}

.echarts-for-react,
#map,
.chart,
.chart-container {
    background-color: transparent !important;
}

/* Content page layout consistency */
.page-container {
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 20px 24px 0 !important;
}

.page-container + .main-container,
.page-container ~ .main-container {
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 0 24px 28px !important;
}

.page-header,
.content-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    min-height: 72px;
    margin-bottom: 24px !important;
    padding: 16px 18px !important;
    border-radius: 14px !important;
    border-bottom: 1px solid rgba(45, 101, 255, 0.22) !important;
    box-shadow: inset 0 1px 0 rgba(77, 197, 255, 0.14) !important;
}

.page-title,
.content-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: #b4e7ff !important;
}

.page-title i,
.content-title i {
    color: var(--theme-cyan) !important;
}

.header-actions,
.page-header .actions,
.page-header > div:last-child:not(.page-title):not(.content-title) {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    padding-right: 4px !important;
    padding-left: 8px !important;
}

.page-header > .page-title,
.content-header > .content-title,
.page-header > div:first-child {
    padding-left: 4px !important;
}

.page-header .btn,
.page-header .button,
.page-header button,
.content-header .btn,
.content-header .button,
.content-header button {
    margin-right: 2px !important;
}

.stats-grid {
    gap: 18px !important;
    margin-bottom: 24px !important;
}

.toolbar,
.filter-bar,
.filter-panel,
.search-panel,
.tabs-nav,
.tabs {
    margin-bottom: 20px !important;
}

.toolbar,
.filter-bar,
.filter-panel,
.search-panel {
    padding: 16px 18px !important;
    border-radius: 14px !important;
}

.content-panel,
.table-panel,
.chart-panel,
.monitor-card,
.data-card {
    border-radius: 16px !important;
    overflow: hidden !important;
}

.panel-header,
.card-header {
    min-height: 56px;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.panel-title,
.card-title {
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #9fe2ff !important;
}

.panel-title::before,
.card-title::before {
    height: 18px !important;
}

.table-container,
.table-wrap,
.panel-body,
.content-body {
    padding: 0 18px 18px !important;
}

.panel-body > .chart-container:first-child,
.panel-body > .data-table:first-child,
.panel-body > .table-container:first-child {
    margin-top: 2px;
}

.tabs-nav,
.tabs {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
}

.tab-btn,
.tabs button,
.tabs .tab {
    min-height: 36px;
    padding: 8px 16px !important;
    border-radius: 10px !important;
}

@media (max-width: 900px) {
    .page-container {
        padding: 16px 16px 0 !important;
    }

    .page-container + .main-container,
    .page-container ~ .main-container {
        padding: 0 16px 22px !important;
    }

    .page-header,
    .content-header {
        align-items: flex-start !important;
        flex-direction: column !important;
        min-height: auto;
        margin-bottom: 18px !important;
        padding: 14px 0 14px !important;
    }

    .page-title,
    .content-title {
        font-size: 22px !important;
    }

    .stats-grid {
        gap: 14px !important;
    }
}

/* Command-screen child pages */
body.tech-bg,
.tech-bg {
    background:
        radial-gradient(circle at 50% 0%, rgba(35, 83, 255, 0.26), transparent 26%),
        radial-gradient(circle at 14% 16%, rgba(33, 206, 255, 0.10), transparent 18%),
        radial-gradient(circle at 86% 18%, rgba(79, 132, 255, 0.10), transparent 16%),
        linear-gradient(180deg, #050816 0%, #09112c 48%, #050815 100%) !important;
}

.tech-bg::before {
    background-image:
        linear-gradient(rgba(43, 96, 255, 0.052) 1px, transparent 1px),
        linear-gradient(90deg, rgba(43, 96, 255, 0.052) 1px, transparent 1px) !important;
    background-size: 42px 42px !important;
    opacity: 0.74 !important;
}

.tech-bg::after {
    background-image:
        linear-gradient(90deg, transparent 0%, rgba(45, 115, 255, 0.10) 50%, transparent 100%),
        linear-gradient(180deg, transparent 0%, rgba(0, 194, 255, 0.04) 50%, transparent 100%) !important;
    opacity: 0.92 !important;
}

.tech-bg .header-bar {
    background:
        linear-gradient(90deg, transparent 0%, rgba(36, 92, 255, 0.18) 18%, rgba(31, 133, 255, 0.26) 50%, rgba(36, 92, 255, 0.18) 82%, transparent 100%) !important;
    border-bottom: 1px solid rgba(53, 120, 255, 0.34) !important;
}

.tech-bg .header-bar::after {
    width: 260px !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, #2b63ff, #35cfff, transparent) !important;
}

.tech-bg .glow-card {
    background:
        linear-gradient(180deg, rgba(20, 49, 145, 0.14), transparent 16%),
        linear-gradient(180deg, rgba(10, 24, 72, 0.96), rgba(7, 14, 41, 0.985)) !important;
    border: 1px solid rgba(45, 108, 255, 0.34) !important;
    box-shadow:
        inset 0 0 22px rgba(37, 101, 255, 0.10),
        0 0 0 1px rgba(30, 90, 255, 0.10),
        0 16px 38px rgba(0, 0, 0, 0.42) !important;
    backdrop-filter: blur(14px) saturate(130%) !important;
}

.tech-bg .glow-card::before {
    background: linear-gradient(135deg,
        rgba(48, 122, 255, 0.50) 0%,
        rgba(48, 122, 255, 0.10) 28%,
        transparent 58%,
        rgba(53, 207, 255, 0.24) 100%) !important;
    opacity: 0.78 !important;
}

.tech-bg .glow-card::after {
    background: linear-gradient(90deg, transparent 0%, rgba(45, 123, 255, 0.95) 34%, rgba(53, 207, 255, 0.90) 50%, rgba(45, 123, 255, 0.95) 66%, transparent 100%) !important;
}

.tech-bg .corner-decoration {
    border-color: rgba(66, 158, 255, 0.68) !important;
}

.tech-bg .section-title {
    color: #8fd9ff !important;
    text-shadow: 0 0 12px rgba(53, 207, 255, 0.24), 0 0 20px rgba(43, 99, 255, 0.18) !important;
}

.tech-bg .section-title::before {
    background: linear-gradient(180deg, #2a62ff 0%, #35cfff 100%) !important;
}

.tech-bg .glow-number {
    text-shadow: 0 0 18px rgba(43, 99, 255, 0.22), 0 0 28px rgba(53, 207, 255, 0.10) !important;
}

.tech-bg .progress-container {
    background: rgba(4, 8, 25, 0.74) !important;
    box-shadow: inset 0 0 0 1px rgba(38, 82, 208, 0.22) !important;
}

.tech-bg .progress-bar {
    box-shadow: 0 0 14px rgba(43, 99, 255, 0.20) !important;
}

.tech-bg .status-tag,
.tech-bg .status-badge {
    background: rgba(26, 61, 167, 0.18) !important;
    border-color: rgba(47, 103, 255, 0.28) !important;
}

.tech-bg .status-normal {
    background: rgba(31, 112, 255, 0.16) !important;
    color: #6fddff !important;
    border-color: rgba(47, 176, 255, 0.28) !important;
}

.tech-bg .status-alarm,
.tech-bg .status-warning {
    background: rgba(255, 153, 76, 0.16) !important;
    color: #ffb15c !important;
    border-color: rgba(255, 153, 76, 0.28) !important;
}

.tech-bg .status-maintenance {
    background: rgba(56, 89, 225, 0.18) !important;
    color: #9ab4ff !important;
    border-color: rgba(83, 118, 255, 0.28) !important;
}

.tech-bg .status-offline {
    background: rgba(86, 105, 156, 0.18) !important;
    color: #9fb0d4 !important;
    border-color: rgba(112, 130, 176, 0.22) !important;
}

.tech-bg .text-tech-blue,
.tech-bg .fa.text-tech-blue,
.tech-bg #current-time {
    color: #35cfff !important;
}

.tech-bg .text-tech-cyan,
.tech-bg .fa.text-tech-cyan {
    color: #64e1ff !important;
}

.tech-bg .text-tech-green,
.tech-bg .fa.text-tech-green {
    color: #4da2ff !important;
}

.tech-bg .text-tech-yellow,
.tech-bg .fa.text-tech-yellow {
    color: #ffb75e !important;
}

.tech-bg .text-tech-orange,
.tech-bg .fa.text-tech-orange {
    color: #ff9a4e !important;
}

.tech-bg .text-tech-purple,
.tech-bg .fa.text-tech-purple {
    color: #88a1ff !important;
}

.tech-bg .bg-tech-blue,
.tech-bg .bg-tech-cyan,
.tech-bg .bg-tech-green,
.tech-bg .bg-tech-purple {
    background-color: #265cff !important;
}

.tech-bg .bg-tech-blue\/10 {
    background-color: rgba(37, 92, 255, 0.12) !important;
}

.tech-bg .border-tech-blue\/30,
.tech-bg .border-tech-orange\/30,
.tech-bg .border-tech-green\/30,
.tech-bg .border-tech-red\/30,
.tech-bg .border-tech-yellow\/30 {
    border-color: rgba(45, 108, 255, 0.30) !important;
}

.tech-bg .from-tech-blue,
.tech-bg .from-tech-cyan,
.tech-bg .from-tech-green,
.tech-bg .from-tech-purple,
.tech-bg .from-tech-orange {
    --tw-gradient-from: #2a62ff var(--tw-gradient-from-position) !important;
}

.tech-bg .to-tech-cyan,
.tech-bg .to-tech-blue,
.tech-bg .to-yellow-500,
.tech-bg .to-emerald-400,
.tech-bg .to-pink-500,
.tech-bg .to-pink-400,
.tech-bg .to-orange-400 {
    --tw-gradient-to: #35cfff var(--tw-gradient-to-position) !important;
}

.tech-bg table thead tr,
.tech-bg th {
    background: linear-gradient(180deg, rgba(15, 40, 126, 0.96), rgba(8, 22, 71, 0.98)) !important;
    color: #8ed9ff !important;
}

.tech-bg tbody tr:hover {
    background: rgba(29, 74, 210, 0.14) !important;
}