:root {
    --header-h: 64px;
    --sidebar-w: 238px;
    --footer-h: 30px;
    --gap: 10px;
    --radius: 8px;
    --bg: #020916;
    --bg2: #041226;
    --panel: #06182d;
    --panel2: #071f39;
    --panel3: #092743;
    --line: rgba(52, 145, 222, .30);
    --line2: rgba(72, 185, 255, .55);
    --text: #f2f8ff;
    --soft: #c7d8ea;
    --muted: #7893ad;
    --blue: #4ca2ff;
    --cyan: #4dd9ee;
    --green: #67e1a5;
    --orange: #ffad32;
    --red: #ff5d63;
    --purple: #8b7dff;
    --shadow: 0 14px 34px rgba(0, 0, 0, .22), inset 0 0 32px rgba(27, 104, 174, .055);
}

* {
    box-sizing: border-box
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--bg);
    color: var(--text);
    font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
    font-size: 14px
}

body {
    min-width: 1180px;
    min-height: 680px;
    letter-spacing: .01em
}

a {
    color: inherit;
    text-decoration: none
}

button, input, select, textarea {
    font-family: inherit
}

.platform-stars {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% -25%, rgba(25, 111, 239, .24), transparent 42%),
    radial-gradient(circle at 78% 26%, rgba(33, 88, 178, .12), transparent 34%),
    linear-gradient(180deg, #020817 0%, #031329 47%, #020917 100%)
}

.platform-stars:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(86, 174, 255, .18) 1px, transparent 1.5px),
    linear-gradient(rgba(43, 123, 201, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 123, 201, .035) 1px, transparent 1px);
    background-size: 84px 84px, 48px 48px, 48px 48px;
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), rgba(0, 0, 0, .16) 72%, transparent)
}

.platform-scanline {
    position: fixed;
    inset: var(--header-h) 0 0 var(--sidebar-w);
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(180deg, transparent 0, rgba(58, 157, 255, .025) 50%, transparent 100%);
    background-size: 100% 6px;
    opacity: .34
}

/* 顶部贯穿标题栏 */
.global-header {
    height: var(--header-h);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px 0 18px;
    background: linear-gradient(90deg, rgba(3, 16, 42, .99), rgba(3, 13, 31, .985) 45%, rgba(2, 10, 24, .99));
    border-bottom: 1px solid rgba(63, 145, 234, .38);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .22)
}

.global-header:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, rgba(55, 200, 255, .75), rgba(63, 130, 255, .18) 40%, rgba(55, 200, 255, .52));
    box-shadow: 0 0 10px rgba(48, 164, 255, .42)
}

.global-brand {
    height: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    position: relative;
    z-index: 2
}

.global-brand-logo {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(31, 90, 162, .35), rgba(3, 21, 51, .12));
    border: 1px solid rgba(138, 207, 255, .38);
    box-shadow: 0 0 16px rgba(54, 154, 255, .25), inset 0 0 14px rgba(70, 166, 255, .10);
    overflow: hidden
}

.global-brand-logo img {
    width: 45px;
    height: 45px;
    object-fit: contain;
    filter: drop-shadow(0 0 6px rgba(146, 221, 255, .25))
}

.global-brand-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: .8px;
    text-shadow: 0 0 14px rgba(115, 196, 255, .25);
    white-space: nowrap
}

.global-header-glow {
    position: absolute;
    left: 318px;
    right: 430px;
    top: 0;
    height: 100%;
    opacity: .7;
    background: radial-gradient(ellipse at 50% 100%, rgba(38, 125, 231, .20), transparent 72%);
    pointer-events: none
}

.global-header-right {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 16px;
    position: relative;
    z-index: 2;
    color: #9fb5ca;
    font-size: 12px
}

.header-info {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap
}

.header-info i {
    font-size: 18px;
    color: #a6c9e9
}

.weather-info i {
    font-size: 22px;
    color: #ffc029;
    text-shadow: 0 0 10px rgba(255, 176, 33, .65)
}

.header-info strong {
    font-size: 12px;
    color: #edf6ff;
    font-weight: 600
}

.header-info span {
    color: #8aa1b8
}

.header-divider {
    height: 22px;
    width: 1px;
    background: rgba(134, 174, 211, .28)
}

.header-user-btn {
    border: 0;
    background: transparent;
    color: #d6e5f2;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 7px;
    border-radius: 7px
}

.header-user-btn:hover {
    background: rgba(27, 96, 161, .18)
}

.user-avatar {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(144, 200, 246, .46);
    background: linear-gradient(145deg, rgba(33, 91, 150, .55), rgba(8, 32, 65, .72));
    color: #fff;
    font-size: 17px;
    box-shadow: 0 0 12px rgba(65, 164, 255, .16)
}

.user-copy {
    display: flex;
    align-items: center;
    gap: 8px
}

.user-copy small {
    font-size: 11px;
    color: #8198ae
}

.user-copy strong {
    font-size: 12px;
    font-weight: 600
}

.user-chevron {
    font-size: 10px;
    color: #7190a8
}

.platform-dropdown {
    background: #061a31;
    border: 1px solid rgba(62, 151, 225, .32);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
    font-size: 12px
}

.platform-dropdown .dropdown-item {
    color: #cce0f2
}

.platform-dropdown .dropdown-item:hover {
    background: rgba(38, 120, 188, .25);
    color: #fff
}

.platform-dropdown .dropdown-header {
    color: #718ba3
}

/* 页面框架 */
.platform-frame {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-h);
    bottom: 0;
    z-index: 5;
    display: grid;
    grid-template-columns:var(--sidebar-w) minmax(0, 1fr)
}

.platform-sidebar {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(3, 18, 42, .985), rgba(2, 12, 28, .995));
    border-right: 1px solid rgba(49, 131, 211, .34);
    box-shadow: 12px 0 32px rgba(0, 0, 0, .19);
    overflow: hidden
}

.platform-sidebar:after {
    content: "";
    position: absolute;
    right: -1px;
    top: 0;
    width: 1px;
    height: 190px;
    background: linear-gradient(180deg, #42caff, transparent);
    box-shadow: 0 0 10px rgba(55, 189, 255, .62)
}

.platform-nav {
    padding: 16px 12px 10px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    z-index: 2
}

.platform-nav-link {
    height: 46px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 14px;
    color: #c1d2e3;
    border: 1px solid transparent;
    border-radius: 6px;
    font-size: 15px;
    transition: .18s ease
}

.platform-nav-link:hover {
    color: #fff;
    background: rgba(18, 74, 133, .26);
    border-color: rgba(61, 143, 219, .18);
    transform: translateX(2px)
}

.platform-nav-link.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(24, 116, 218, .78), rgba(13, 59, 116, .46));
    border-color: rgba(63, 164, 255, .62);
    box-shadow: inset 3px 0 0 #49d8ff, 0 0 18px rgba(31, 130, 240, .14)
}

.nav-icon {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    font-size: 18px;
    color: #b6cbe1
}

.platform-nav-link.active .nav-icon {
    color: #fff;
    text-shadow: 0 0 10px rgba(75, 205, 255, .65)
}

.sidebar-visual {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 32px;
    height: 320px;
    pointer-events: none;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    background: transparent
}

.sidebar-tech-city-original {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    opacity: 1;
    filter: none;
    transform: none;
    user-select: none;
    -webkit-user-drag: none
}

.sidebar-footer {
    height: 32px;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgba(49, 119, 188, .17);
    color: #8299b2;
    font-size: 11px;
    z-index: 2
}

.platform-main {
    min-width: 0;
    height: 100%;
    display: grid;
    grid-template-rows:minmax(0, 1fr) var(--footer-h);
    overflow: hidden
}

.platform-content {
    min-height: 0;
    overflow: hidden;
    padding: 12px 14px 10px;
    width: 100%
}

.platform-footer {
    height: var(--footer-h);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border-top: 1px solid rgba(45, 121, 195, .20);
    background: rgba(3, 15, 33, .72);
    color: #8499af;
    font-size: 11px
}

.footer-divider {
    height: 14px;
    width: 1px;
    background: rgba(125, 165, 201, .3)
}

.platform-message-stack {
    position: fixed;
    top: 74px;
    right: 18px;
    width: min(430px, calc(100vw - 30px));
    z-index: 90
}

.platform-alert {
    display: flex;
    align-items: center;
    gap: 9px;
    background: rgba(7, 35, 64, .98);
    border: 1px solid rgba(65, 166, 247, .45);
    color: #e5f4ff;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .4);
    font-size: 12px
}

/* 通用卡片与控件 */
.platform-card {
    position: relative;
    min-width: 0;
    min-height: 0;
    background: linear-gradient(145deg, rgba(7, 27, 51, .97), rgba(4, 18, 36, .985));
    border: 1px solid rgba(49, 129, 207, .37);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden
}

.platform-card:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 75px;
    height: 1px;
    background: linear-gradient(90deg, #42c9ff, transparent);
    box-shadow: 0 0 10px rgba(54, 190, 255, .72)
}

.platform-card:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 26px;
    height: 26px;
    border-right: 1px solid rgba(62, 157, 225, .22);
    border-bottom: 1px solid rgba(62, 157, 225, .22);
    pointer-events: none
}

.platform-card-header {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 12px;
    border-bottom: 1px solid rgba(50, 123, 192, .16);
    position: relative;
    z-index: 1
}

.platform-card-body {
    padding: 10px 12px;
    min-height: 0
}

.platform-card-title {
    font-size: 14px;
    font-weight: 800;
    color: #f3f8ff
}

.platform-card-subtitle {
    font-size: 10px;
    color: #788fa8;
    margin-top: 3px
}

.card-heading-group {
    min-width: 0
}

.card-heading-group > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.card-icon-title {
    display: flex;
    align-items: center;
    gap: 8px
}

.card-icon-title i {
    color: #51b8ff;
    font-size: 16px;
    text-shadow: 0 0 8px rgba(55, 169, 255, .4)
}

.platform-select, .platform-input {
    background: rgba(5, 24, 47, .95) !important;
    border: 1px solid rgba(54, 130, 201, .42) !important;
    color: #d9e8f6 !important;
    border-radius: 5px !important;
    font-size: 11px !important;
    min-height: 26px !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08)
}

.platform-select:hover, .platform-input:hover {
    border-color: rgba(66, 174, 255, .58) !important
}

.platform-select:focus, .platform-input:focus {
    border-color: #3caeff !important;
    box-shadow: 0 0 0 .14rem rgba(43, 157, 241, .13) !important
}

.platform-select option {
    background: #06172c;
    color: #dceaff
}

.platform-input::placeholder {
    color: #5d7690
}

.form-label {
    font-size: 11px;
    color: #90a8be;
    margin-bottom: 5px
}

.form-text {
    font-size: 10px;
    color: #667f98
}

.btn-platform {
    background: linear-gradient(180deg, #299ff2, #0d68b7);
    border: 1px solid #4bb9ff;
    color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 13px rgba(35, 145, 237, .17);
    font-size: 12px
}

.btn-platform:hover {
    background: linear-gradient(180deg, #42b5ff, #147ccf);
    color: #fff
}

.btn-outline-platform {
    border: 1px solid rgba(65, 163, 231, .48);
    background: rgba(12, 63, 108, .16);
    color: #96d8ff;
    border-radius: 5px;
    font-size: 12px
}

.btn-outline-platform:hover {
    background: rgba(25, 112, 180, .28);
    border-color: #4dbbff;
    color: #fff
}

.btn-danger-soft {
    border: 1px solid rgba(255, 83, 93, .35);
    background: rgba(255, 63, 75, .08);
    color: #ff858c
}

.btn-danger-soft:hover {
    background: rgba(255, 63, 75, .18);
    color: #fff
}

.badge-platform {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border-radius: 12px;
    border: 1px solid rgba(57, 150, 219, .38);
    background: rgba(21, 88, 139, .22);
    color: #86d7ff;
    font-size: 10px;
    white-space: nowrap
}

.badge-green {
    border-color: rgba(73, 220, 157, .32);
    background: rgba(41, 159, 112, .12);
    color: #68e4aa
}

.badge-orange {
    border-color: rgba(255, 177, 53, .34);
    background: rgba(255, 155, 26, .10);
    color: #ffc25c
}

.badge-red {
    border-color: rgba(255, 87, 98, .34);
    background: rgba(255, 65, 77, .10);
    color: #ff8a91
}

.badge-purple {
    border-color: rgba(142, 126, 255, .34);
    background: rgba(113, 92, 231, .12);
    color: #b3a8ff
}

.table-platform {
    --bs-table-bg: transparent;
    --bs-table-color: #d1dfec;
    --bs-table-border-color: rgba(50, 121, 186, .14);
    font-size: 11px;
    margin: 0
}

.table-platform thead th {
    height: 36px;
    padding: 7px 9px;
    vertical-align: middle;
    background: rgba(10, 45, 83, .72);
    color: #93abc1;
    font-weight: 600;
    border-bottom: 1px solid rgba(56, 137, 207, .30);
    white-space: nowrap
}

.table-platform tbody td {
    height: 42px;
    padding: 7px 9px;
    vertical-align: middle
}

.table-platform tbody tr:hover {
    --bs-table-bg: rgba(24, 86, 142, .18)
}

.table-platform .small {
    font-size: 9.5px
}

.table-fixed {
    table-layout: fixed;
    width: 100%
}

.table-fixed td, .table-fixed th {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.modal-content {
    background: linear-gradient(145deg, #071c34, #041326);
    border: 1px solid rgba(67, 164, 240, .45);
    border-radius: 8px;
    box-shadow: 0 22px 55px rgba(0, 0, 0, .48)
}

.modal-header, .modal-footer {
    border-color: rgba(57, 130, 195, .20)
}

.modal-title {
    font-size: 16px;
    font-weight: 700
}

.nav-tabs.platform-tabs {
    border-bottom: 1px solid rgba(52, 128, 198, .26);
    gap: 4px
}

.platform-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: #7994ad;
    background: transparent;
    font-size: 12px;
    padding: 7px 12px
}

.platform-tabs .nav-link.active {
    color: #fff;
    background: rgba(34, 113, 182, .15);
    border-bottom-color: #48b9ff
}

.tab-content {
    min-height: 0
}

/* 页面通用标题栏 */
.page-screen {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows:48px minmax(0, 1fr);
    gap: var(--gap)
}

.page-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 2px
}

.page-title-wrap {
    display: flex;
    align-items: center;
    gap: 11px
}

.page-title-icon {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(73, 170, 244, .42);
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: linear-gradient(145deg, rgba(33, 106, 173, .42), rgba(8, 39, 76, .36));
    color: #7ed2ff;
    font-size: 18px;
    box-shadow: 0 0 14px rgba(38, 137, 222, .12)
}

.page-title {
    font-size: 18px;
    font-weight: 800
}

.page-description {
    font-size: 10.5px;
    color: #748da5;
    margin-top: 3px
}

.page-actions {
    display: flex;
    align-items: center;
    gap: 8px
}

.page-body {
    min-height: 0;
    overflow: hidden
}

/* 首页 */
.dashboard-screen {
    height: 100%;
    display: grid;
    grid-template-rows:104px minmax(238px, 1.30fr) minmax(156px, .76fr) minmax(166px, .82fr);
    gap: var(--gap)
}

.stats-grid {
    display: grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap: var(--gap);
    min-height: 0
}

.stat-card {
    padding: 11px 13px;
    display: grid;
    grid-template-columns:70px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 10px;
    overflow: hidden
}

.stat-card:after {
    border-color: rgba(255, 255, 255, .04)
}

.stat-icon-box {
    width: 66px;
    height: 72px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    position: relative;
    font-size: 31px
}

.stat-icon-box:after {
    content: "";
    position: absolute;
    bottom: -7px;
    width: 55px;
    height: 10px;
    border-radius: 50%;
    filter: blur(5px);
    opacity: .45
}

.stat-icon-box i {
    filter: drop-shadow(0 0 8px currentColor)
}

.stat-card-blue .stat-icon-box {
    color: #70b7ff;
    border: 1px solid rgba(64, 155, 255, .35);
    background: linear-gradient(145deg, rgba(36, 103, 201, .42), rgba(10, 42, 83, .36))
}

.stat-card-blue .stat-icon-box:after {
    background: #1e78ff
}

.stat-card-cyan .stat-icon-box {
    color: #66e7df;
    border: 1px solid rgba(52, 220, 205, .32);
    background: linear-gradient(145deg, rgba(21, 143, 145, .38), rgba(7, 61, 77, .35))
}

.stat-card-cyan .stat-icon-box:after {
    background: #18cfc6
}

.stat-card-purple .stat-icon-box {
    color: #b2a5ff;
    border: 1px solid rgba(137, 116, 255, .36);
    background: linear-gradient(145deg, rgba(91, 72, 210, .40), rgba(37, 27, 95, .35))
}

.stat-card-purple .stat-icon-box:after {
    background: #775dff
}

.stat-card-orange .stat-icon-box {
    color: #ffbd58;
    border: 1px solid rgba(255, 173, 46, .38);
    background: linear-gradient(145deg, rgba(178, 99, 14, .42), rgba(85, 41, 7, .33))
}

.stat-card-orange .stat-icon-box:after {
    background: #ff970e
}

.stat-card-red .stat-icon-box {
    color: #ff747a;
    border: 1px solid rgba(255, 87, 94, .38);
    background: linear-gradient(145deg, rgba(164, 50, 57, .40), rgba(78, 21, 28, .33))
}

.stat-card-red .stat-icon-box:after {
    background: #ff3f49
}

.stat-copy {
    min-width: 0
}

.stat-title {
    font-size: 13px;
    color: #e3eef9;
    font-weight: 700
}

.stat-value {
    font-size: 31px;
    font-weight: 800;
    line-height: 1.2;
    margin-top: 5px
}

.stat-unit {
    font-size: 12px;
    color: #a2b8cb;
    margin-left: 5px;
    font-weight: 500
}

.stat-note {
    font-size: 9.5px;
    color: #738ca5;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.stat-note .good {
    color: #72e1ad
}

.stat-arrow {
    font-size: 18px;
    color: #4ca8ff
}

.stat-card-cyan .stat-arrow {
    color: #4de1d8
}

.stat-card-purple .stat-arrow {
    color: #9a83ff
}

.stat-card-orange .stat-arrow {
    color: #ffad31
}

.stat-card-red .stat-arrow {
    color: #ff565e
}

.analytics-section {
    min-height: 0;
    display: grid;
    grid-template-rows:34px minmax(0, 1fr)
}

.section-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    background: linear-gradient(90deg, rgba(7, 39, 73, .72), rgba(4, 25, 48, .38));
    border: 1px solid rgba(45, 123, 198, .25);
    border-bottom: 0;
    border-radius: 8px 8px 0 0
}

.section-strip-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700
}

.section-strip-title i {
    color: #52bdff
}

.section-strip-right {
    display: flex;
    align-items: center;
    gap: 7px
}

.section-strip-right label {
    font-size: 10px;
    color: #738da7
}

.section-strip-right select {
    width: 175px
}

.analytics-grid {
    min-height: 0;
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1.65fr)) repeat(2, minmax(160px, 1fr));
    gap: var(--gap);
    padding: 0;
    border: 0
}

.analytics-grid .platform-card {
    border-radius: 0 0 var(--radius) var(--radius)
}

.analytics-grid .platform-card:not(:first-child) {
    border-radius: var(--radius)
}

.trend-card .platform-card-body, .donut-card .platform-card-body {
    height: calc(100% - 44px);
    padding: 2px 7px 5px
}

.chart-box {
    width: 100%;
    height: 100%;
    min-height: 0
}

.selector-inline {
    width: 150px;
    height: 28px !important;
    min-height: 28px !important
}

.donut-card .platform-card-title {
    text-align: center;
    width: 100%
}

.live-grid {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: var(--gap);
    min-height: 0
}

.sensor-live-card {
    padding: 9px 12px 7px;
    display: grid;
    grid-template-rows:31px 30px minmax(0, 1fr) 21px;
    min-height: 0
}

.sensor-live-card.sensor-blue {
    border-color: rgba(52, 147, 244, .48)
}

.sensor-live-card.sensor-green {
    border-color: rgba(48, 187, 132, .42)
}

.sensor-live-card.sensor-orange {
    border-color: rgba(234, 147, 24, .45)
}

.sensor-live-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.sensor-title-group {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0
}

.sensor-type-icon {
    width: 29px;
    height: 29px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 15px;
    border: 1px solid currentColor;
    background: rgba(20, 80, 130, .16)
}

.sensor-blue .sensor-type-icon, .sensor-blue .sensor-live-title {
    color: #55b3ff
}

.sensor-green .sensor-type-icon, .sensor-green .sensor-live-title {
    color: #5ee4b3
}

.sensor-orange .sensor-type-icon, .sensor-orange .sensor-live-title {
    color: #ffb43c
}

.sensor-live-title {
    font-size: 15px;
    font-weight: 800
}

.sensor-selector {
    height: 27px !important;
    min-height: 27px !important
}

.sensor-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 13px;
    padding: 3px 8px;
    font-size: 9.5px;
    color: #67e5ad;
    border: 1px solid rgba(70, 218, 156, .31);
    background: rgba(42, 155, 110, .10)
}

.sensor-status.offline {
    color: #ff7f87;
    border-color: rgba(255, 80, 91, .32);
    background: rgba(255, 65, 75, .08)
}

.sensor-status-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 7px currentColor
}

.sensor-main-row {
    display: grid;
    grid-template-columns:minmax(120px, .72fr) minmax(150px, 1.28fr);
    align-items: center;
    gap: 12px;
    min-height: 0
}

.primary-reading {
    display: flex;
    align-items: baseline;
    gap: 7px
}

.primary-reading-value {
    font-size: 34px;
    font-weight: 800;
    line-height: 1
}

.primary-reading-unit {
    font-size: 12px;
    color: #c4d5e5;
    font-weight: 600
}

.sensor-meta {
    font-size: 9px;
    color: #70899f;
    margin-bottom: 4px
}

.sparkline {
    height: 58px;
    min-width: 0
}

.minor-readings {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 10px
}

.minor-label {
    font-size: 9px;
    color: #6f879e
}

.minor-value {
    font-size: 12px;
    color: #eef7ff;
    font-weight: 700;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.minor-value small {
    font-size: 9px;
    color: #8ba1b4
}

.sensor-update-row {
    display: flex;
    align-items: center;
    gap: 6px;
    border-top: 1px solid rgba(48, 116, 180, .16);
    padding-top: 5px;
    font-size: 8.8px;
    color: #6f889f
}

.sensor-update-row strong {
    color: #97acc0;
    font-weight: 500
}

.sensor-update-row span:last-child {
    margin-left: auto
}

.bottom-grid {
    display: grid;
    grid-template-columns:1fr 1fr 1fr;
    gap: var(--gap);
    min-height: 0
}

.bottom-card .platform-card-body {
    height: calc(100% - 44px);
    padding: 3px 8px 6px
}

.alarm-empty {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #617d98;
    gap: 6px
}

.alarm-empty-icon {
    font-size: 46px;
    color: #35679e;
    text-shadow: 0 0 18px rgba(56, 124, 196, .4)
}

.alarm-empty strong {
    font-size: 13px;
    color: #829ab1
}

.alarm-list {
    height: 100%;
    overflow: hidden
}

.alarm-row {
    height: 34px;
    display: grid;
    grid-template-columns:68px 1fr auto;
    gap: 8px;
    align-items: center;
    border-bottom: 1px dashed rgba(66, 127, 184, .15);
    font-size: 9.5px
}

.alarm-time {
    color: #7990a6
}

.alarm-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.alarm-level {
    padding: 2px 6px;
    border-radius: 4px
}

.alarm-level.critical {
    color: #ff858c;
    background: rgba(255, 70, 82, .12)
}

.alarm-level.warning {
    color: #ffc35a;
    background: rgba(255, 170, 35, .12)
}

.alarm-level.info {
    color: #65caff;
    background: rgba(45, 151, 230, .12)
}

/* 实时监测 */
.realtime-screen {
    height: 100%;
    display: grid;
    grid-template-rows:48px minmax(0, 1fr);
    gap: var(--gap)
}

.realtime-workspace {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: var(--gap);
    min-height: 0
}

.realtime-panel {
    padding: 13px;
    display: grid;
    grid-template-rows:42px 34px 84px 76px minmax(0, 1fr) 24px;
    gap: 8px
}

.realtime-panel .primary-reading-value {
    font-size: 44px
}

.realtime-panel .minor-readings {
    grid-template-columns:repeat(3, 1fr)
}

.realtime-chart {
    height: 100%;
    min-height: 110px
}

.realtime-tip {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    color: #6f8aa3;
    border-top: 1px solid rgba(52, 123, 188, .15);
    padding-top: 5px
}

/* 历史数据 */
.history-screen {
    height: 100%;
    display: grid;
    grid-template-rows:88px minmax(0, 1fr);
    gap: var(--gap)
}

.history-filter {
    padding: 10px 12px;
    display: grid;
    grid-template-columns:1.05fr .8fr 1.35fr .8fr 1.2fr 1.2fr .7fr .7fr 70px;
    gap: 8px;
    align-items: end
}

.history-workspace {
    display: grid;
    grid-template-columns:minmax(0, 1.8fr) minmax(315px, .62fr);
    gap: var(--gap);
    min-height: 0
}

.history-chart-card {
    display: grid;
    grid-template-rows:44px minmax(0, 1fr)
}

.history-chart {
    height: 100%;
    min-height: 0
}

.history-side {
    display: grid;
    grid-template-rows:220px minmax(0, 1fr);
    gap: var(--gap);
    min-height: 0
}

.history-kpis {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 8px;
    padding: 10px
}

.mini-kpi {
    border: 1px solid rgba(55, 134, 204, .20);
    background: rgba(10, 49, 83, .36);
    border-radius: 6px;
    padding: 8px
}

.mini-kpi span {
    font-size: 9.5px;
    color: #748da5
}

.mini-kpi strong {
    display: block;
    font-size: 18px;
    margin-top: 4px
}

.history-points {
    padding: 8px;
    min-height: 0
}

.history-point-list {
    height: calc(100% - 30px);
    display: grid;
    grid-auto-rows: 31px;
    overflow: hidden
}

.history-point {
    display: grid;
    grid-template-columns:1fr auto;
    gap: 8px;
    align-items: center;
    border-bottom: 1px dashed rgba(54, 122, 182, .14);
    font-size: 10px
}

.history-point time {
    color: #7891a8
}

.history-point strong {
    color: #eaf5ff
}

.history-point-empty {
    display: grid;
    place-items: center;
    height: 100%;
    color: #627d96;
    font-size: 11px
}

/* 传感器管理 */
.sensor-list-screen {
    height: 100%;
    display: grid;
    grid-template-rows:48px minmax(0, 1fr);
    gap: var(--gap)
}

.table-panel {
    height: 100%;
    display: grid;
    grid-template-rows:44px minmax(0, 1fr) 38px;
    min-height: 0
}

.table-panel .table-wrap {
    min-height: 0;
    overflow: hidden
}

.table-panel-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    border-top: 1px solid rgba(53, 123, 188, .15);
    font-size: 10px;
    color: #6f879e
}

.pager {
    display: flex;
    align-items: center;
    gap: 5px
}

.pager button {
    width: 27px;
    height: 25px;
    border: 1px solid rgba(59, 145, 213, .35);
    background: rgba(10, 53, 91, .32);
    color: #9fc8e5;
    border-radius: 4px;
    font-size: 10px
}

.pager button:disabled {
    opacity: .35
}

.pager span {
    min-width: 48px;
    text-align: center;
    color: #9db4c8
}

.sensor-type-cell {
    display: flex;
    align-items: center;
    gap: 8px
}

.list-icon {
    width: 27px;
    height: 27px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(69, 162, 230, .35);
    background: rgba(20, 82, 130, .18);
    color: #70c5ff
}

.list-icon.green {
    color: #62e0af;
    border-color: rgba(72, 215, 157, .32)
}

.list-icon.orange {
    color: #ffbd54;
    border-color: rgba(255, 174, 55, .32)
}

/* 详情页 */
.detail-screen {
    height: 100%;
    display: grid;
    grid-template-rows:48px minmax(0, 1fr);
    gap: var(--gap)
}

.detail-workspace {
    display: grid;
    grid-template-columns:minmax(300px, .68fr) minmax(0, 1.32fr);
    gap: var(--gap);
    min-height: 0
}

.detail-left {
    display: grid;
    grid-template-rows:210px minmax(0, 1fr);
    gap: var(--gap);
    min-height: 0
}

.detail-summary {
    padding: 14px
}

.detail-hero {
    display: flex;
    align-items: center;
    gap: 13px
}

.detail-hero-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 26px;
    color: #6dcaff;
    border: 1px solid rgba(80, 176, 243, .38);
    background: rgba(17, 76, 127, .22)
}

.detail-hero h3 {
    font-size: 18px;
    margin: 0 0 5px
}

.detail-hero p {
    font-size: 10px;
    color: #758ea5;
    margin: 0
}

.detail-metrics {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 8px;
    margin-top: 13px
}

.detail-metric {
    padding: 9px;
    border: 1px solid rgba(54, 128, 192, .18);
    background: rgba(8, 45, 76, .34);
    border-radius: 6px
}

.detail-metric .k {
    font-size: 9px;
    color: #7189a0
}

.detail-metric .v {
    font-size: 17px;
    font-weight: 800;
    margin-top: 4px
}

.detail-form {
    padding: 12px;
    min-height: 0
}

.detail-form .row {
    --bs-gutter-y: .55rem
}

.detail-right {
    display: grid;
    grid-template-rows:minmax(0, .55fr) minmax(0, .45fr);
    gap: var(--gap);
    min-height: 0
}

.detail-chart {
    height: 100%;
    min-height: 160px
}

.records-tabs {
    height: 100%;
    display: grid;
    grid-template-rows:38px minmax(0, 1fr)
}

.records-tabs .tab-content {
    min-height: 0;
    overflow: hidden
}

/* 频率设置 */
.frequency-screen {
    height: 100%;
    display: grid;
    grid-template-rows:48px minmax(0, 1fr);
    gap: var(--gap)
}

.frequency-workspace {
    display: grid;
    grid-template-columns:minmax(0, 1.45fr) minmax(300px, .55fr);
    gap: var(--gap);
    min-height: 0
}

.frequency-table {
    height: 100%;
    display: grid;
    grid-template-rows:44px minmax(0, 1fr) 38px
}

.frequency-guide {
    display: grid;
    grid-template-rows:160px minmax(0, 1fr);
    gap: var(--gap);
    min-height: 0
}

.frequency-presets {
    padding: 11px;
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 8px
}

.frequency-preset {
    height: 44px;
    border: 1px solid rgba(54, 135, 206, .26);
    background: rgba(8, 48, 82, .32);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9fc2dd
}

.frequency-preset strong {
    font-size: 13px;
    color: #eaf5ff
}

.frequency-preset small {
    font-size: 8.5px;
    color: #6f889f
}

.frequency-info {
    padding: 13px;
    font-size: 10.5px;
    color: #7891a7;
    line-height: 1.8
}

.frequency-info li {
    margin-bottom: 6px
}

.inline-form {
    display: flex;
    align-items: center;
    gap: 5px
}

.inline-form .platform-select {
    width: 92px
}

/* 校准/校核 */
.calibration-center-screen {
    height: 100%;
    display: grid;
    grid-template-rows:48px minmax(0, 1fr);
    gap: var(--gap)
}

.calibration-workspace {
    display: grid;
    grid-template-columns:minmax(0, 1fr) 300px;
    gap: var(--gap);
    min-height: 0
}

.calibration-card-grid {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    grid-template-rows:repeat(2, minmax(0, 1fr));
    gap: var(--gap);
    min-height: 0
}

.cal-card {
    padding: 12px;
    display: grid;
    grid-template-rows:34px 1fr 32px;
    min-height: 0
}

.cal-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.cal-card-name {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700
}

.cal-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.cal-main-value {
    font-size: 28px;
    font-weight: 800
}

.cal-meta {
    font-size: 10px;
    color: #718aa2;
    line-height: 1.7
}

/* 校准/校核页面右侧区域 */
.calibration-aside {
    display: grid;
    grid-template-rows:220px minmax(0, 1fr);
    gap: var(--gap);
    min-height: 0;
}

/*
 * 当前状态卡片
 * 必须把标题栏和图表区域分开。
 * 否则 chart 的 height:100% 会把标题栏高度也算进去，
 * 导致 ECharts canvas 超出卡片并被 overflow:hidden 裁切。
 */
.calibration-aside > .platform-card:first-child {
    display: grid;
    grid-template-rows:44px minmax(0, 1fr);
    min-height: 0;
    overflow: hidden;
}

/* 圆环图只占标题栏以下的区域 */
.calibration-status-chart {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

.calibration-help {
    padding: 13px;
    font-size: 10px;
    color: #7891a8;
    line-height: 1.8
}

.calibration-detail-screen {
    height: 100%;
    display: grid;
    grid-template-rows:48px minmax(0, 1fr);
    gap: var(--gap)
}

.calibration-detail-workspace {
    display: grid;
    grid-template-columns:320px minmax(0, 1fr);
    gap: var(--gap);
    min-height: 0
}

.cal-sensor-summary {
    display: grid;
    grid-template-rows:200px minmax(0, 1fr);
    gap: var(--gap)
}

.cal-action-area {
    height: 100%;
    display: grid;
    grid-template-rows:minmax(0, .58fr) minmax(0, .42fr);
    gap: var(--gap);
    min-height: 0
}

.cal-form-tabs, .cal-record-tabs {
    height: 100%;
    display: grid;
    grid-template-rows:38px minmax(0, 1fr)
}

.cal-form-body {
    padding: 10px 12px;
    overflow: hidden
}

.cal-form-body .row {
    --bs-gutter-y: .55rem
}

.cal-form-body .form-control, .cal-form-body .form-select {
    height: 30px
}

.cal-form-body textarea {
    height: 58px !important;
    resize: none
}

/* 告警 */
.alarm-screen {
    height: 100%;
    display: grid;
    grid-template-rows:48px minmax(0, 1fr);
    gap: var(--gap)
}

.alarm-workspace {
    display: grid;
    grid-template-columns:350px minmax(0, 1fr);
    gap: var(--gap);
    min-height: 0
}

.alarm-config {
    display: grid;
    grid-template-rows:120px minmax(0, 1fr);
    gap: var(--gap);
    min-height: 0
}

.alarm-summary {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 10px;
    padding: 12px
}

.alarm-summary-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid rgba(59, 136, 204, .20);
    background: rgba(9, 50, 84, .32);
    border-radius: 7px
}

.alarm-summary-item i {
    font-size: 25px;
    color: #ff6a72
}

.alarm-summary-item:nth-child(2) i {
    color: #5fb8ff
}

.alarm-summary-item strong {
    font-size: 24px
}

.alarm-summary-item span {
    display: block;
    font-size: 9px;
    color: #758ea5
}

.alarm-form {
    padding: 12px;
    min-height: 0
}

.alarm-form .row {
    --bs-gutter-y: .55rem
}

.alarm-form textarea {
    height: 54px;
    resize: none
}

.alarm-tables {
    height: 100%;
    display: grid;
    grid-template-rows:38px minmax(0, 1fr)
}

/* 报表 */
.report-screen {
    height: 100%;
    display: grid;
    grid-template-rows:82px 104px minmax(0, 1fr);
    gap: var(--gap)
}

.report-filter {
    padding: 10px 12px;
    display: grid;
    grid-template-columns:1.5fr 1fr 1fr 240px;
    gap: 9px;
    align-items: end
}

#exportXlsx,
#exportPdf {
    white-space: nowrap;
    min-width: 108px;
}

.report-summary {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: var(--gap)
}

.report-kpi {
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px
}

.report-kpi i {
    font-size: 26px;
    color: #5cbcff
}

.report-kpi strong {
    font-size: 22px
}

.report-kpi span {
    display: block;
    font-size: 10px;
    color: #748da5
}

.report-table {
    height: 100%;
    display: grid;
    grid-template-rows:44px minmax(0, 1fr) 38px
}

/* 系统设置 */
.settings-screen {
    height: 100%;
    display: grid;
    grid-template-rows:48px minmax(0, 1fr);
    gap: var(--gap)
}

.settings-workspace {
    display: grid;
    grid-template-columns:minmax(0, 1.15fr) minmax(330px, .85fr);
    gap: var(--gap);
    min-height: 0
}

.settings-form-card {
    display: grid;
    grid-template-rows:44px minmax(0, 1fr) 48px
}

.settings-grid {
    padding: 12px;
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 12px
}

.setting-item {
    padding: 12px;
    border: 1px solid rgba(56, 133, 198, .19);
    background: rgba(8, 45, 76, .34);
    border-radius: 7px
}

.setting-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px
}

.setting-item-head i {
    color: #61bfff;
    font-size: 17px
}

.setting-item-head strong {
    font-size: 12px
}

.setting-item p {
    font-size: 9px;
    color: #6c849c;
    margin: 7px 0 0
}

.settings-save {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 12px;
    border-top: 1px solid rgba(54, 126, 190, .14)
}

.platform-info-grid {
    display: grid;
    grid-template-rows:170px minmax(0, 1fr);
    gap: var(--gap)
}

.platform-info {
    padding: 14px
}

.platform-logo-large {
    height: 86px;
    display: flex;
    align-items: center;
    gap: 14px
}

.platform-logo-large img {
    width: 74px;
    height: 74px;
    object-fit: contain
}

.platform-logo-large h3 {
    font-size: 20px;
    margin: 0 0 5px
}

.platform-logo-large p {
    font-size: 10px;
    color: #728ca4;
    margin: 0
}

.platform-meta-list {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 7px
}

.platform-meta {
    padding: 8px;
    border: 1px solid rgba(54, 128, 192, .17);
    background: rgba(8, 42, 72, .28);
    border-radius: 6px
}

.platform-meta span {
    font-size: 9px;
    color: #6f879e
}

.platform-meta strong {
    display: block;
    font-size: 12px;
    margin-top: 3px
}

.ui-preview {
    position: relative;
    overflow: hidden;
    background: url('../images/ui-reference-fullscreen.png') center/cover no-repeat
}

.ui-preview:after {
    content: "界面设计基准";
    position: absolute;
    right: 10px;
    bottom: 9px;
    padding: 3px 7px;
    border-radius: 4px;
    background: rgba(3, 17, 35, .82);
    border: 1px solid rgba(70, 164, 235, .35);
    color: #9edaff;
    font-size: 9px
}

/* 空状态 */
.empty-state {
    height: 100%;
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    color: #617b94;
    text-align: center
}

.empty-state i {
    font-size: 34px;
    color: #356ea8;
    text-shadow: 0 0 14px rgba(54, 119, 191, .42)
}

.empty-state strong {
    font-size: 12px;
    color: #869eb5
}

.empty-state small {
    font-size: 9px
}

.loading-state {
    opacity: .68
}

/* 高度适配：保证常用桌面分辨率不纵向滚动 */
@media (max-height: 900px) {
    :root {
        --header-h: 56px;
        --footer-h: 26px;
        --gap: 8px;
        --sidebar-w: 210px
    }

    html, body {
        font-size: 13px
    }

    .global-brand-title {
        font-size: 21px
    }

    .global-brand-logo {
        width: 42px;
        height: 42px
    }

    .global-brand-logo img {
        width: 39px;
        height: 39px
    }

    .platform-nav {
        padding-top: 10px;
        gap: 4px
    }

    .platform-nav-link {
        height: 39px;
        font-size: 13px
    }

    .sidebar-visual {
        height: 235px
    }

    .platform-content {
        padding: 8px 10px 7px
    }

    .dashboard-screen {
        grid-template-rows:88px minmax(205px, 1.18fr) minmax(135px, .72fr) minmax(142px, .75fr)
    }

    .stat-card {
        padding: 8px 10px;
        grid-template-columns:55px 1fr 14px
    }

    .stat-icon-box {
        width: 51px;
        height: 58px;
        font-size: 25px
    }

    .stat-value {
        font-size: 25px
    }

    .stat-title {
        font-size: 11.5px
    }

    .stat-note {
        font-size: 8.5px
    }

    .platform-card-header {
        height: 38px;
        padding: 5px 9px
    }

    .platform-card-title {
        font-size: 12.5px
    }

    .platform-card-subtitle {
        font-size: 8.8px
    }

    .analytics-section {
        grid-template-rows:28px minmax(0, 1fr)
    }

    .section-strip-title {
        font-size: 11.5px
    }

    .selector-inline {
        width: 126px;
        height: 25px !important;
        min-height: 25px !important
    }

    .sensor-live-card {
        padding: 7px 9px 5px;
        grid-template-rows:27px 26px minmax(0, 1fr) 18px
    }

    .sensor-type-icon {
        width: 25px;
        height: 25px;
        font-size: 13px
    }

    .sensor-live-title {
        font-size: 13px
    }

    .primary-reading-value {
        font-size: 28px
    }

    .sparkline {
        height: 48px
    }

    .minor-readings {
        gap: 6px
    }

    .minor-label {
        font-size: 8px
    }

    .minor-value {
        font-size: 10.5px
    }

    .bottom-card .platform-card-body {
        height: calc(100% - 38px)
    }

    .page-screen, .realtime-screen, .sensor-list-screen, .frequency-screen, .calibration-center-screen, .calibration-detail-screen, .alarm-screen, .settings-screen, .detail-screen {
        grid-template-rows:40px minmax(0, 1fr)
    }

    .page-title-icon {
        width: 31px;
        height: 31px;
        font-size: 15px
    }

    .page-title {
        font-size: 15px
    }

    .page-description {
        font-size: 9px
    }

    .history-screen {
        grid-template-rows:76px minmax(0, 1fr)
    }

    .report-screen {
        grid-template-rows:68px 86px minmax(0, 1fr)
    }
}

@media (max-width: 1500px) {
    :root {
        --sidebar-w: 205px
    }

    .global-brand-title {
        font-size: 21px
    }

    .platform-nav-link {
        font-size: 13px
    }

    .analytics-grid {
        grid-template-columns:repeat(3, minmax(0, 1.45fr)) repeat(2, minmax(135px, .9fr))
    }

    .stat-icon-box {
        width: 58px
    }

    .history-filter {
        grid-template-columns:1fr .7fr 1.15fr .7fr 1fr 1fr .6fr .6fr 62px
    }

    .global-header-right {
        gap: 10px
    }

    .header-divider {
        margin: 0 2px
    }
}

@media (max-width: 1280px) {
    :root {
        --sidebar-w: 78px
    }

    .global-brand-title {
        font-size: 19px
    }

    .platform-nav-link span:last-child, .sidebar-footer {
        display: none
    }

    .platform-nav-link {
        justify-content: center;
        padding: 0
    }

    .nav-icon {
        font-size: 20px
    }

    .sidebar-visual {
        display: none
    }

    .platform-nav {
        padding-left: 8px;
        padding-right: 8px
    }

    .platform-scanline {
        left: var(--sidebar-w)
    }

    .global-header-right .weather-info span, .global-header-right .time-info span, .user-copy small {
        display: none
    }

    .analytics-grid {
        grid-template-columns:repeat(3, 1.5fr) repeat(2, .8fr)
    }
}

/* V1.0.0 全屏界面补充：详情页、页签与下拉控件 */
.user-dropdown {
    position: relative
}

.rt-select {
    width: 100%;
    height: 32px !important;
    min-height: 32px !important
}

.detail-summary {
    overflow: hidden
}

.detail-metric .v span {
    font-size: 9px;
    font-weight: 500;
    color: #7f98b0
}

.detail-form {
    height: calc(100% - 44px);
    overflow: hidden;
    padding: 10px 12px
}

.detail-form .platform-input {
    height: 30px;
    min-height: 30px !important
}

.detail-field-select {
    width: 152px;
    height: 28px !important;
    min-height: 28px !important
}

.detail-interval-select {
    width: 108px;
    height: 28px !important;
    min-height: 28px !important
}

.history-chart-card .platform-card-body {
    height: calc(100% - 44px);
    min-height: 0;
    padding: 3px 8px 7px
}

.records-table-wrap {
    height: 100%;
    min-height: 0;
    overflow: hidden
}

.records-table-wrap .tab-pane {
    height: 100%;
    min-height: 0;
    overflow: hidden
}

.records-table-wrap .table-platform {
    height: auto
}

.records-tabs .platform-tabs {
    height: 38px;
    align-items: flex-end
}

.records-tabs .platform-tabs .nav-link {
    height: 37px;
    padding: 7px 13px
}

.nav-pills .nav-link {
    color: #7f9bb4;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 11px;
    padding: 6px 10px
}

.nav-pills .nav-link.active {
    color: #fff;
    background: linear-gradient(180deg, rgba(37, 132, 213, .45), rgba(15, 75, 133, .36));
    border-color: rgba(71, 165, 237, .35)
}

.card-scroll {
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(68, 151, 220, .32) transparent
}

.fit-card {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column
}

@media (max-height: 900px) {
    .detail-left {
        grid-template-rows:178px minmax(0, 1fr)
    }

    .detail-summary {
        padding: 10px
    }

    .detail-hero-icon {
        width: 45px;
        height: 45px;
        font-size: 21px
    }

    .detail-hero h3 {
        font-size: 15px
    }

    .detail-metrics {
        margin-top: 9px;
        gap: 6px
    }

    .detail-metric {
        padding: 6px
    }

    .detail-metric .v {
        font-size: 14px
    }

    .detail-form {
        padding: 7px 10px
    }
}

/* V1.0.2：深色主题可读性与设备管理合并 */
:root {
    --text-primary-102: #f7fbff;
    --text-normal-102: #dce9f6;
    --text-secondary-102: #afc4d8;
    --text-muted-102: #8fa8bf;
}

body, .platform-content, .platform-card, .table-platform {
    color: var(--text-normal-102)
}

.page-title, .platform-card-title, .stat-title, .sensor-live-title, .detail-hero h3, .cal-card-name, .setting-item-head strong {
    color: var(--text-primary-102) !important
}

.page-description, .platform-card-subtitle, .form-text, .small.text-secondary, .text-secondary, .table-panel-footer, .minor-label, .stat-note {
    color: var(--text-secondary-102) !important
}

.table-platform {
    --bs-table-color: var(--text-normal-102)
}

.table-platform thead th {
    color: #c2d5e7 !important
}

.table-platform tbody td {
    color: #e1ecf6 !important
}

.platform-select, .platform-input, .form-control, .form-select {
    color: #f5fbff !important
}

.platform-select option, .form-select option {
    background: #071c34 !important;
    color: #f5fbff !important
}

.form-label {
    color: #c1d3e5 !important
}

.platform-input::placeholder, .form-control::placeholder {
    color: #8ba4bb !important;
    opacity: 1
}

.platform-tabs .nav-link {
    color: #a8bfd4
}

.platform-tabs .nav-link.active {
    color: #fff
}

.device-management-screen {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows:48px 104px minmax(0, 1fr);
    gap: var(--gap)
}

.device-box-strip {
    display: grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap: var(--gap);
    min-height: 0;
    overflow: hidden
}

.device-box-card {
    min-width: 0;
    height: 100%;
    display: grid;
    grid-template-columns:52px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid rgba(65, 151, 222, .30);
    border-radius: var(--radius);
    background: linear-gradient(145deg, rgba(8, 34, 61, .96), rgba(4, 20, 39, .98));
    box-shadow: var(--shadow)
}

.device-box-card.online {
    border-color: rgba(77, 201, 158, .30)
}

.device-box-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    border: 1px solid rgba(70, 165, 235, .34);
    background: rgba(24, 93, 151, .18);
    font-size: 22px;
    color: #70c8ff;
    text-shadow: 0 0 12px rgba(68, 177, 255, .42)
}

.device-box-card.online .device-box-icon {
    color: #65dfad;
    border-color: rgba(83, 219, 169, .32)
}

.device-box-main {
    min-width: 0
}

.device-box-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px
}

.device-box-head strong {
    font-size: 13px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.device-box-code {
    margin-top: 3px;
    font-size: 9.5px;
    color: #9cb5ca;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.device-box-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 10px;
    margin-top: 8px;
    color: #b9cce0;
    font-size: 9px
}

.device-box-metrics i {
    color: #5ebeff;
    margin-right: 3px
}

.device-sensor-panel {
    min-height: 0
}

.empty-state.compact {
    min-height: 0;
    height: 100%;
    border: 1px dashed rgba(65, 145, 210, .28);
    border-radius: 7px
}

.empty-state.compact i {
    font-size: 20px
}

.empty-state.compact strong {
    font-size: 10px
}

@media (max-height: 900px) {
    .device-management-screen {
        grid-template-rows:40px 84px minmax(0, 1fr)
    }

    .device-box-card {
        padding: 7px 9px;
        grid-template-columns:42px minmax(0, 1fr)
    }

    .device-box-icon {
        width: 38px;
        height: 38px;
        font-size: 18px
    }

    .device-box-metrics {
        margin-top: 5px;
        gap: 3px 8px;
        font-size: 8px
    }
}

@media (max-width: 1500px) {
    .device-box-strip {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }

    .device-box-strip .device-box-card:nth-child(n+4) {
        display: none
    }
}

@media (max-width: 1100px) {
    .device-box-strip {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }

    .device-box-strip .device-box-card:nth-child(n+3) {
        display: none
    }
}

/* ============================================================
   V1.1.0 用户认证 / 用户审核 / 权限
   ============================================================ */
.auth-body {
    min-width: 0 !important;
    min-height: 100vh !important;
    background: #001032 !important;
    overflow: hidden !important
}

.auth-backdrop {
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at 70% 15%, rgba(34, 115, 240, .22), transparent 35%),
    radial-gradient(circle at 18% 75%, rgba(32, 157, 255, .12), transparent 34%),
    linear-gradient(135deg, #00091f 0%, #001032 50%, #00183f 100%)
}

.auth-backdrop:after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(68, 146, 226, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(68, 146, 226, .035) 1px, transparent 1px);
    background-size: 42px 42px
}

.auth-shell {
    position: relative;
    z-index: 2;
    width: min(1180px, 92vw);
    height: min(720px, 88vh);
    margin: 6vh auto;
    display: grid;
    grid-template-columns:1.12fr .88fr;
    border: 1px solid rgba(68, 160, 242, .30);
    border-radius: 18px;
    overflow: hidden;
    background: rgba(3, 17, 43, .74);
    box-shadow: 0 30px 90px rgba(0, 0, 0, .48), inset 0 0 60px rgba(43, 122, 226, .04)
}

.auth-brand-panel {
    position: relative;
    padding: 52px 56px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(3, 22, 58, .93), rgba(2, 12, 35, .88));
    border-right: 1px solid rgba(70, 145, 218, .20)
}

.auth-brand-panel:before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, #3ed8ff, transparent 65%)
}

.auth-brand-lockup {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
    z-index: 2
}

.auth-brand-lockup img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter: drop-shadow(0 0 14px rgba(90, 190, 255, .32))
}

.auth-brand-lockup strong {
    display: block;
    font-size: 28px;
    color: #fff;
    letter-spacing: 1px
}

.auth-brand-lockup span {
    display: block;
    margin-top: 5px;
    color: #8fa8c1;
    font-size: 13px
}

.auth-brand-copy {
    position: relative;
    z-index: 2;
    margin-top: 74px;
    max-width: 540px
}

.auth-kicker {
    font-size: 11px;
    letter-spacing: 3px;
    color: #56b9ff
}

.auth-brand-copy h1 {
    margin: 14px 0;
    font-size: 34px;
    line-height: 1.3;
    color: #f7fbff
}

.auth-brand-copy p {
    color: #9bb0c6;
    font-size: 14px;
    line-height: 1.9
}

.auth-city {
    position: absolute;
    left: -10px;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 300px;
    object-fit: contain;
    object-position: center bottom;
    opacity: .58;
    pointer-events: none
}

.auth-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 38px;
    background: linear-gradient(180deg, rgba(4, 19, 48, .72), rgba(2, 13, 35, .92))
}

.auth-card {
    width: min(410px, 100%);
    padding: 34px;
    border: 1px solid rgba(75, 167, 245, .30);
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(8, 32, 67, .96), rgba(4, 20, 47, .98));
    box-shadow: 0 20px 55px rgba(0, 0, 0, .33), inset 0 0 34px rgba(61, 149, 232, .045)
}

.auth-card-head h2 {
    font-size: 25px;
    margin: 0;
    color: #fff
}

.auth-card-head p {
    margin: 8px 0 24px;
    color: #7f9ab6;
    font-size: 12px
}

.auth-error {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 16px;
    border: 1px solid rgba(255, 90, 102, .38);
    border-radius: 7px;
    background: rgba(255, 57, 72, .08);
    color: #ff9aa1;
    font-size: 12px
}

.auth-field {
    display: block;
    margin-bottom: 15px
}

.auth-field > span {
    display: block;
    margin-bottom: 6px;
    color: #adc2d7;
    font-size: 12px
}

.auth-field > div, .captcha-input {
    height: 44px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(73, 151, 225, .38);
    border-radius: 7px;
    background: rgba(3, 19, 46, .92)
}

.auth-field i {
    width: 42px;
    text-align: center;
    color: #65baff;
    font-size: 16px
}

.auth-field input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    padding: 0 12px 0 0;
    font-size: 13px
}

.auth-field input::placeholder {
    color: #617d9a
}

.captcha-row {
    border: 0 !important;
    background: transparent !important;
    gap: 10px
}

.captcha-input {
    flex: 1
}

.captcha-row img {
    width: 150px;
    height: 44px;
    border-radius: 7px;
    cursor: pointer;
    border: 1px solid rgba(73, 151, 225, .30)
}

.auth-submit {
    width: 100%;
    height: 44px;
    margin-top: 5px;
    border: 1px solid #4bbcff;
    border-radius: 7px;
    background: linear-gradient(180deg, #259df1, #0b68bb);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    box-shadow: 0 0 20px rgba(35, 145, 237, .17)
}

.auth-submit:hover {
    color: #fff;
    background: linear-gradient(180deg, #3eb5ff, #117dd4)
}

.auth-links {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    font-size: 12px;
    color: #7892ad
}

.auth-links a {
    color: #62bdff
}

.auth-session-note {
    margin-top: 22px;
    padding-top: 15px;
    border-top: 1px solid rgba(66, 136, 205, .16);
    text-align: center;
    color: #6f89a5;
    font-size: 11px
}

.auth-session-note i {
    margin-right: 5px;
    color: #63baff
}

.auth-register-shell {
    grid-template-columns:.95fr 1.05fr
}

.auth-register-card {
    width: min(600px, 100%)
}

.auth-register-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 0 14px
}

.auth-field-wide {
    grid-column: 1/-1
}

.auth-single {
    position: relative;
    z-index: 2;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center
}

.auth-result-card {
    text-align: center
}

.auth-result-icon {
    width: 74px;
    height: 74px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(56, 211, 145, .12);
    border: 1px solid rgba(56, 211, 145, .42);
    box-shadow: 0 0 24px rgba(56, 211, 145, .14)
}

.auth-result-icon span {
    font-size: 38px;
    color: #59dda0
}

.auth-result-card h2 {
    font-size: 25px
}

.auth-result-card p {
    color: #97adc3;
    line-height: 1.8;
    margin: 14px 0 24px
}

.access-denied-wrap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.access-denied-card {
    width: 430px;
    padding: 44px;
    text-align: center
}

.access-denied-card > i {
    font-size: 52px;
    color: #ffb13b
}

.access-denied-card h2 {
    margin: 16px 0 8px
}

.access-denied-card p {
    color: #91a9bf;
    margin-bottom: 22px
}

.user-management-screen {
    height: 100%;
    min-height: 0
}

.user-management-grid {
    display: grid;
    grid-template-columns:minmax(0, 1fr) 300px;
    gap: var(--gap);
    min-height: 0;
    height: 100%
}

.user-table-card {
    display: grid;
    grid-template-rows:44px minmax(0, 1fr)
}

.user-table-scroll {
    min-height: 0;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(71, 151, 220, .4) transparent
}

.user-role-select {
    width: 120px !important;
    height: 29px !important;
    min-height: 29px !important
}

.role-matrix-card {
    display: grid;
    grid-template-rows:44px minmax(0, 1fr)
}

.role-matrix-body {
    padding: 12px;
    display: grid;
    align-content: start;
    gap: 10px
}

.role-item, .role-timeout {
    padding: 12px;
    border: 1px solid rgba(63, 135, 201, .20);
    border-radius: 7px;
    background: rgba(8, 43, 76, .32)
}

.role-item strong, .role-timeout strong {
    font-size: 12px;
    color: #fff
}

.role-item p, .role-timeout p {
    font-size: 10px;
    color: #8fa7bf;
    line-height: 1.6;
    margin: 5px 0 0
}

.role-admin {
    border-color: rgba(139, 125, 255, .30)
}

.role-device {
    border-color: rgba(76, 162, 255, .30)
}

.role-analyst {
    border-color: rgba(77, 217, 238, .28)
}

.role-viewer {
    border-color: rgba(103, 225, 165, .25)
}

.role-timeout {
    display: flex;
    gap: 10px
}

.role-timeout i {
    font-size: 20px;
    color: #ffb13b
}

@media (max-width: 900px) {
    .auth-shell {
        width: 94vw;
        grid-template-columns:1fr
    }

    .auth-brand-panel {
        display: none
    }

    .auth-form-panel {
        padding: 20px
    }

    .auth-register-grid {
        grid-template-columns:1fr
    }

    .auth-field-wide {
        grid-column: auto
    }
}

/* ========================================================================
   V1.2.0 用户认证最终视觉：按登录/注册设计图重构
   ======================================================================== */
.auth-body {
    margin: 0 !important;
    min-width: 0 !important;
    min-height: 100vh !important;
    overflow: hidden !important;
    color: #f4f9ff !important;
    background: #001032 !important;
    font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
}

.auth-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 18% 12%, rgba(36, 118, 255, .20), transparent 28%),
    radial-gradient(circle at 72% 40%, rgba(12, 102, 226, .13), transparent 33%),
    linear-gradient(145deg, #00091f 0%, #001032 50%, #00163d 100%);
}

.auth-backdrop:before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle at 11% 18%, rgba(80, 170, 255, .55) 0 1px, transparent 1.3px),
    radial-gradient(circle at 33% 52%, rgba(80, 170, 255, .34) 0 1px, transparent 1.4px),
    radial-gradient(circle at 61% 24%, rgba(80, 170, 255, .28) 0 1px, transparent 1.4px),
    linear-gradient(rgba(62, 135, 218, .025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(62, 135, 218, .025) 1px, transparent 1px);
    background-size: 230px 230px, 310px 310px, 370px 370px, 46px 46px, 46px 46px;
    opacity: .78;
}

.auth-layout {
    position: relative;
    z-index: 2;
    width: min(1520px, 94vw);
    height: min(860px, 90vh);
    margin: 4vh auto 0;
    display: grid;
    grid-template-columns:1.08fr .92fr;
    gap: 44px;
}

.auth-visual-panel {
    position: relative;
    min-width: 0;
    padding: 36px 34px 20px;
    overflow: hidden;
}

.auth-brand-lockup {
    display: flex;
    align-items: center;
    gap: 18px;
    position: relative;
    z-index: 3;
}

.auth-brand-lockup img {
    width: 76px;
    height: 76px;
    object-fit: contain;
    filter: drop-shadow(0 0 16px rgba(74, 169, 255, .38));
}

.auth-brand-lockup strong {
    display: block;
    font-size: 32px;
    line-height: 1.15;
    color: #fff;
    letter-spacing: 1px;
}

.auth-brand-lockup span {
    display: block;
    margin-top: 7px;
    color: #a9bdd6;
    font-size: 14px;
    letter-spacing: 1px;
}

.auth-visual-copy {
    position: relative;
    z-index: 3;
    margin-top: 46px;
}

.auth-visual-copy h1 {
    margin: 0;
    font-size: 31px;
    font-weight: 800;
    color: #f8fbff;
    letter-spacing: 2px;
}

.auth-visual-copy p {
    margin: 14px 0 0;
    color: #7faee0;
    font-size: 15px;
    letter-spacing: 1px;
}

.auth-sensor-stage {
    position: relative;
    height: 430px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-stage-image {
    width: 86%;
    height: 100%;
    object-fit: contain;
    opacity: .92;
    filter: brightness(1.06) saturate(1.10) drop-shadow(0 0 18px rgba(32, 118, 255, .18));
}

.auth-sensor-tag {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: #cce7ff;
    font-size: 12px;
    text-shadow: 0 0 10px rgba(71, 169, 255, .42);
}

.auth-sensor-tag i {
    font-size: 24px;
    color: #50b8ff
}

.auth-tag-ph {
    left: 8%;
    bottom: 28%
}

.auth-tag-ec {
    right: 7%;
    bottom: 30%
}

.auth-tag-pz {
    left: 47%;
    bottom: 5%
}

.auth-feature-strip {
    position: absolute;
    left: 34px;
    right: 34px;
    bottom: 12px;
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    border: 1px solid rgba(56, 145, 231, .26);
    border-radius: 10px;
    overflow: hidden;
    background: rgba(3, 22, 54, .64);
    backdrop-filter: blur(8px);
}

.auth-feature-strip > div {
    min-height: 104px;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-right: 1px solid rgba(64, 138, 211, .15);
}

.auth-feature-strip > div:last-child {
    border-right: 0
}

.auth-feature-strip i {
    font-size: 25px;
    color: #41aefe;
    margin-bottom: 7px
}

.auth-feature-strip strong {
    font-size: 13px;
    color: #fff
}

.auth-feature-strip span {
    margin-top: 5px;
    color: #7691b1;
    font-size: 10px;
    line-height: 1.5
}

.auth-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: transparent;
}

.auth-card {
    width: min(560px, 100%);
    padding: 38px 42px;
    border: 1px solid rgba(71, 162, 246, .44);
    border-radius: 17px;
    background: linear-gradient(145deg, rgba(7, 30, 69, .97), rgba(2, 18, 49, .985));
    box-shadow: 0 24px 80px rgba(0, 0, 0, .30),
    inset 0 0 40px rgba(45, 133, 239, .035),
    0 0 26px rgba(37, 126, 245, .08);
}

.auth-card:before {
    content: "";
    display: block;
    position: absolute;
}

.auth-login-card {
    width: min(560px, 100%)
}

.auth-register-card-v2 {
    width: min(590px, 100%);
    padding: 30px 36px
}

.auth-card-head h2 {
    margin: 0;
    color: #fff;
    font-size: 30px;
    font-weight: 800;
}

.auth-card-head p {
    margin: 9px 0 24px;
    color: #9db3cc;
    font-size: 14px;
}

.auth-field {
    display: block;
    margin: 0 0 13px
}

.auth-field > span {
    display: none
}

.auth-field > div, .captcha-input {
    height: 48px;
    display: flex;
    align-items: center;
    border: 1px solid rgba(77, 153, 228, .40);
    border-radius: 7px;
    background: rgba(2, 17, 43, .78);
    transition: .18s ease;
}

.auth-field > div:focus-within, .captcha-input:focus-within {
    border-color: #48adff;
    box-shadow: 0 0 0 2px rgba(57, 155, 255, .09);
}

.auth-field i, .captcha-input i {
    width: 44px;
    text-align: center;
    color: #9dbbe0;
    font-size: 16px;
}

.auth-field input, .captcha-input input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    padding: 0 14px 0 0;
    font-size: 14px;
}

.auth-field input::placeholder, .captcha-input input::placeholder {
    color: #7589a3
}

.auth-field-compact {
    margin-bottom: 13px
}

.auth-password-eye {
    width: 44px;
    height: 100%;
    border: 0;
    background: transparent;
    color: #7d99b9;
}

.auth-password-eye i {
    width: auto;
    color: inherit
}

.auth-login-captcha-row {
    display: grid;
    grid-template-columns:minmax(0, 1fr) 124px 64px;
    gap: 9px;
    margin-top: 3px;
}

.auth-login-captcha-row .captcha-input {
    height: 48px
}

.auth-login-captcha-row img {
    width: 124px;
    height: 48px;
    object-fit: cover;
    border: 1px solid rgba(76, 150, 225, .35);
    border-radius: 7px;
    cursor: pointer;
    background: #071f43;
}

.captcha-refresh {
    border: 0;
    background: transparent;
    color: #44b6ff;
    font-size: 12px;
    white-space: nowrap;
}

.auth-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 38px;
    color: #93a9c2;
    font-size: 12px;
}

.auth-checkbox {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer
}

.auth-checkbox input {
    accent-color: #2c9fff
}

.auth-timeout-hint {
    color: #6f89a6
}

.auth-timeout-hint i {
    margin-right: 4px;
    color: #5baef0
}

.auth-primary-submit {
    width: 100%;
    height: 48px;
    margin-top: 8px;
    border: 1px solid #48adff;
    border-radius: 7px;
    background: linear-gradient(180deg, #2d9eff, #126ed1);
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 2px;
    box-shadow: 0 0 22px rgba(46, 147, 255, .16);
}

.auth-primary-submit:hover {
    background: linear-gradient(180deg, #43b1ff, #1680e8)
}

.auth-links {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    color: #8ea4bd;
    font-size: 12px
}

.auth-links a {
    color: #46b5ff;
    text-decoration: none
}

.auth-links-divider {
    position: relative;
    margin-top: 22px
}

.auth-links-divider:before, .auth-links-divider:after {
    content: "";
    width: 90px;
    height: 1px;
    background: rgba(82, 151, 217, .18);
    align-self: center
}

.auth-login-tipbox {
    margin-top: 22px;
    padding: 16px 18px;
    border: 1px solid rgba(65, 145, 222, .25);
    border-radius: 9px;
    background: rgba(4, 25, 57, .54);
}

.tipbox-title {
    color: #4eb8ff;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px
}

.tipbox-title i {
    margin-right: 6px
}

.auth-login-tipbox p {
    margin: 5px 0;
    color: #8ca3bd;
    font-size: 11px;
    line-height: 1.55
}

.auth-error {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 91, 109, .34);
    border-radius: 7px;
    background: rgba(255, 63, 82, .08);
    color: #ffadb5;
    font-size: 12px;
}

.auth-register-fields-v2 {
    display: grid;
    grid-template-columns:1fr;
    gap: 0
}

.auth-register-card-v2 .auth-card-head p {
    margin-bottom: 17px
}

.auth-register-card-v2 .auth-field > div {
    height: 43px
}

.auth-register-card-v2 .auth-field {
    margin-bottom: 9px
}

.auth-register-card-v2 .auth-primary-submit {
    height: 44px;
    margin-top: 5px
}

.auth-review-note {
    margin-top: 12px;
    color: #879eb8;
    font-size: 11px;
    text-align: center;
}

.auth-review-note i {
    color: #42b9ff;
    margin-right: 5px
}

.auth-register-stage {
    height: 380px
}

.auth-page-footer {
    position: fixed;
    z-index: 5;
    left: 0;
    right: 0;
    bottom: 14px;
    text-align: center;
    color: #5f7898;
    font-size: 11px;
}

.auth-single {
    position: relative;
    z-index: 3;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-password-card {
    width: min(460px, 92vw)
}

@media (max-width: 1100px) {
    .auth-layout {
        width: 94vw;
        grid-template-columns:1fr;
        height: auto;
        min-height: 100vh;
        margin: 0 auto;
        padding: 40px 0;
        box-sizing: border-box
    }

    .auth-visual-panel {
        display: none
    }

    .auth-form-panel {
        padding: 0
    }

    .auth-card {
        width: min(560px, 94vw)
    }
}

@media (max-height: 820px) and (min-width: 1101px) {
    .auth-layout {
        height: 94vh;
        margin: 2vh auto 0
    }

    .auth-sensor-stage {
        height: 330px
    }

    .auth-feature-strip > div {
        min-height: 88px
    }

    .auth-register-card-v2 {
        padding: 24px 32px
    }

    .auth-register-card-v2 .auth-field > div {
        height: 39px
    }

    .auth-register-card-v2 .auth-field {
        margin-bottom: 7px
    }
}


/* V1.2.1 用户细粒度权限页面 */
.user-permission-screen {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.user-permission-card {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.permission-grid {
    padding: 14px;
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow: auto;
    max-height: calc(100vh - 245px)
}

.permission-item {
    min-height: 86px;
    padding: 12px 14px;
    border: 1px solid rgba(65, 151, 255, .18);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(7, 28, 61, .96), rgba(4, 20, 47, .98));
    display: grid;
    grid-template-columns:minmax(150px, 1fr) auto auto;
    gap: 12px;
    align-items: center
}

.permission-name {
    color: #f5f9ff;
    font-weight: 700;
    font-size: 13px
}

.permission-code {
    margin-top: 3px;
    color: #7893b4;
    font-size: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace
}

.permission-default {
    color: #9eb5cf;
    font-size: 11px;
    white-space: nowrap
}

.permission-mode-select {
    min-width: 118px;
    height: 34px
}

.permission-actions {
    padding: 12px 16px;
    border-top: 1px solid rgba(65, 151, 255, .14);
    display: flex;
    justify-content: flex-end;
    gap: 10px
}

.permission-fixed-tip {
    margin: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(54, 217, 150, .22);
    border-radius: 12px;
    background: rgba(28, 145, 102, .08);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    color: #a9bdd5
}

.permission-fixed-tip > i {
    font-size: 25px;
    color: #36d996
}

.permission-fixed-tip strong {
    color: #e8fff5
}

.permission-fixed-tip p {
    margin: 4px 0 0;
    font-size: 11px
}

@media (max-width: 1100px) {
    .permission-grid {
        grid-template-columns:1fr
    }

    .permission-item {
        grid-template-columns:minmax(150px, 1fr) auto auto
    }
}


/* ========================================================================
   V1.3.0 浅色科技主题
   ======================================================================== */
:root {
    --bg: #f3f7fd;
    --bg2: #edf4fd;
    --panel: #ffffff;
    --panel2: #f8fbff;
    --panel3: #edf5ff;
    --line: rgba(50, 120, 205, .18);
    --line2: rgba(36, 124, 255, .38);
    --text: #17324f;
    --soft: #4f6781;
    --muted: #7d91a8;
    --blue: #247cff;
    --cyan: #11afd3;
    --green: #22b573;
    --orange: #f59f23;
    --red: #e94b5f;
    --purple: #7457e8;
    --shadow: 0 10px 28px rgba(39, 82, 132, .08), 0 2px 8px rgba(39, 82, 132, .04);
}

html, body {
    background: #f3f7fd !important;
    color: var(--text) !important
}

.platform-stars {
    background: radial-gradient(circle at 52% -12%, rgba(71, 151, 255, .11), transparent 38%),
    radial-gradient(circle at 90% 22%, rgba(58, 180, 226, .06), transparent 30%),
    linear-gradient(180deg, #f8fbff 0%, #f1f6fd 55%, #edf4fb 100%) !important;
}

.platform-stars:before {
    background-image: radial-gradient(circle, rgba(50, 132, 220, .15) 1px, transparent 1.5px),
    linear-gradient(rgba(75, 125, 180, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(75, 125, 180, .045) 1px, transparent 1px) !important;
    background-size: 84px 84px, 48px 48px, 48px 48px !important;
    opacity: .58;
}

.platform-scanline {
    display: none !important
}

.global-header {
    background: rgba(255, 255, 255, .95) !important;
    border-bottom: 1px solid rgba(55, 120, 195, .15) !important;
    box-shadow: 0 6px 22px rgba(39, 82, 132, .07) !important;
}

.global-header:after {
    background: linear-gradient(90deg, rgba(36, 124, 255, .68), rgba(52, 168, 228, .16), rgba(36, 124, 255, .48)) !important;
    box-shadow: none !important;
}

.global-brand {
    color: #173b68 !important
}

.global-brand-logo {
    background: #fff !important;
    border-color: rgba(48, 112, 189, .18) !important;
    box-shadow: 0 4px 14px rgba(28, 85, 146, .08) !important;
}

.global-brand-logo img {
    filter: none !important
}

.global-brand-title {
    color: #173b68 !important;
    text-shadow: none !important
}

.global-header-glow {
    background: radial-gradient(ellipse at 50% 100%, rgba(48, 135, 235, .07), transparent 72%) !important
}

.global-header-right {
    color: #71859c !important
}

.header-info i {
    color: #5e7894 !important
}

.weather-info i {
    color: #ffb020 !important;
    text-shadow: none !important
}

.header-info strong {
    color: #263f5b !important
}

.header-info span {
    color: #7e91a6 !important
}

.header-divider {
    background: rgba(85, 117, 151, .18) !important
}

.header-user-btn {
    color: #2b4662 !important
}

.header-user-btn:hover {
    background: #f1f6fd !important
}

.user-avatar {
    background: linear-gradient(145deg, #eaf4ff, #dcecff) !important;
    border-color: rgba(36, 124, 255, .25) !important;
    color: #247cff !important;
    box-shadow: none !important
}

.user-copy small {
    color: #8395a9 !important
}

.user-copy strong {
    color: #314b66 !important
}

.user-chevron {
    color: #8294a7 !important
}

.platform-dropdown {
    background: #fff !important;
    border-color: #d9e5f3 !important;
    box-shadow: 0 14px 34px rgba(37, 75, 118, .14) !important
}

.platform-dropdown .dropdown-header {
    color: #70859b !important
}

.platform-dropdown .dropdown-item {
    color: #334f6d !important
}

.platform-dropdown .dropdown-item:hover {
    background: #edf5ff !important;
    color: #126fd0 !important
}

.platform-sidebar {
    background: linear-gradient(180deg, #ffffff, #f3f8ff) !important;
    border-right: 1px solid #dbe7f4 !important;
    box-shadow: 8px 0 24px rgba(39, 82, 132, .04) !important;
}

.platform-sidebar:after {
    background: linear-gradient(180deg, #3ca7ff, transparent) !important;
    box-shadow: none !important;
    opacity: .42
}

.platform-nav-link {
    color: #516b85 !important
}

.platform-nav-link:hover {
    color: #126fd0 !important;
    background: #edf5ff !important;
    border-color: #d7e8fb !important
}

.platform-nav-link.active {
    color: #fff !important;
    background: linear-gradient(90deg, #1677ff, #5aaeff) !important;
    border-color: #4d9ff7 !important;
    box-shadow: 0 8px 18px rgba(36, 124, 255, .18) !important
}

.nav-icon {
    color: #6685a4 !important
}

.platform-nav-link.active .nav-icon {
    color: #fff !important;
    text-shadow: none !important
}

.sidebar-visual {
    background: transparent !important
}

.sidebar-tech-city-light {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    opacity: .76;
    filter: none;
    user-select: none;
    -webkit-user-drag: none
}

.sidebar-footer {
    color: #7890a8 !important;
    border-top-color: #deebf7 !important
}

.platform-content {
    background: radial-gradient(circle at 45% 0%, rgba(55, 141, 235, .055), transparent 34%), transparent !important;
}

.platform-footer {
    background: rgba(255, 255, 255, .78) !important;
    border-top-color: #dce7f3 !important;
    color: #758aa0 !important
}

.footer-divider {
    background: #d7e3ef !important
}

.platform-alert {
    background: #fff !important;
    color: #34506d !important;
    border-color: #cfe0f2 !important;
    box-shadow: 0 12px 32px rgba(35, 75, 120, .14) !important
}

.platform-card {
    background: linear-gradient(145deg, #ffffff, #fbfdff) !important;
    border-color: #d7e5f3 !important;
    box-shadow: var(--shadow) !important
}

.platform-card:before {
    background: linear-gradient(90deg, #3aa7ff, transparent) !important;
    box-shadow: none !important
}

.platform-card:after {
    border-color: rgba(46, 124, 205, .13) !important
}

.platform-card-header {
    border-bottom-color: #e7eef7 !important
}

.platform-card-title {
    color: #183653 !important
}

.platform-card-subtitle {
    color: #7c91a7 !important
}

.card-icon-title i {
    color: #247cff !important;
    text-shadow: none !important
}

.platform-select, .platform-input, .form-control, .form-select, textarea.form-control {
    background: #fff !important;
    border-color: #cfddeb !important;
    color: #294866 !important;
    box-shadow: none !important;
}

.platform-select:hover, .platform-input:hover, .form-control:hover, .form-select:hover {
    border-color: #99bde5 !important
}

.platform-select:focus, .platform-input:focus, .form-control:focus, .form-select:focus {
    border-color: #247cff !important;
    box-shadow: 0 0 0 .14rem rgba(36, 124, 255, .10) !important
}

.platform-select option, .form-select option {
    background: #fff !important;
    color: #294866 !important
}

.platform-input::placeholder, .form-control::placeholder {
    color: #9aabbd !important
}

.form-label {
    color: #5d7590 !important
}

.form-text {
    color: #8498ac !important
}

.btn-platform {
    background: linear-gradient(180deg, #3698ff, #1677ff) !important;
    border-color: #1677ff !important;
    color: #fff !important;
    box-shadow: 0 6px 15px rgba(36, 124, 255, .18) !important
}

.btn-platform:hover {
    background: linear-gradient(180deg, #4ca7ff, #126fd0) !important;
    color: #fff !important
}

.btn-outline-platform {
    border-color: #b8d3ee !important;
    background: #f6faff !important;
    color: #247cff !important
}

.btn-outline-platform:hover {
    background: #eaf4ff !important;
    border-color: #83b6e9 !important;
    color: #126fd0 !important
}

.btn-danger-soft {
    background: #fff5f6 !important;
    color: #df4053 !important;
    border-color: #f3c5cb !important
}

.text-secondary {
    color: #7890a8 !important
}

.table-platform, .table {
    color: #36516d !important
}

.table-platform thead th, .table thead th {
    background: #eef5fd !important;
    color: #31506f !important;
    border-color: #d8e4f0 !important
}

.table-platform tbody td, .table tbody td {
    border-color: #e4edf6 !important;
    color: #3e5872 !important
}

.table-platform tbody tr, .table tbody tr {
    background: #fff !important
}

.table-platform tbody tr:hover, .table tbody tr:hover {
    background: #f5f9ff !important
}

.badge-platform {
    background: #eef6ff !important;
    color: #2470bd !important;
    border-color: #c7ddf4 !important
}

.badge-green {
    background: #eefbf5 !important;
    color: #15945a !important;
    border-color: #bce9d3 !important
}

.badge-red {
    background: #fff2f4 !important;
    color: #d83f51 !important;
    border-color: #f0c0c7 !important
}

.badge-orange {
    background: #fff8ec !important;
    color: #d88708 !important;
    border-color: #f4d8aa !important
}

.page-title, .detail-title, .sensor-name, .stat-value, .value-big, .metric-value, .minor-value {
    color: #17324f !important;
    text-shadow: none !important
}

.page-description, .detail-subtitle, .metric-label, .minor-label, .meta-text, .muted-text {
    color: #778ca2 !important
}

.sensor-status, .sensor-state, .status-pill {
    box-shadow: none !important
}

.stat-card, .trend-card, .live-card, .bottom-card {
    background: #fff !important
}

.stat-label {
    color: #60768d !important
}

.stat-main-value, .live-primary-value {
    color: #17324f !important
}

.stat-footnote, .live-meta, .live-time {
    color: #8195a8 !important
}

.chart-box {
    background: transparent !important
}

.alarm-empty {
    color: #7e93aa !important
}

.alarm-empty strong {
    color: #395875 !important
}

.permission-item {
    background: linear-gradient(145deg, #fff, #f8fbff) !important;
    border-color: #d9e5f1 !important
}

.permission-name {
    color: #203d5a !important
}

.permission-code {
    color: #8699ab !important
}

.permission-default {
    color: #6d8297 !important
}

.permission-fixed-tip {
    background: #f0fbf6 !important;
    border-color: #c9ead9 !important;
    color: #637c70 !important
}

.permission-fixed-tip strong {
    color: #1f6c4b !important
}

/* 登录 / 注册 */
.auth-body {
    color: #17324f !important;
    background: #f5f9ff !important
}

.auth-backdrop {
    background: radial-gradient(circle at 16% 12%, rgba(51, 139, 255, .12), transparent 28%),
    radial-gradient(circle at 72% 40%, rgba(27, 168, 219, .08), transparent 34%),
    linear-gradient(145deg, #f8fbff 0%, #f1f7ff 48%, #eaf3fd 100%) !important;
}

.auth-backdrop:before {
    background-image: radial-gradient(circle at 11% 18%, rgba(50, 135, 230, .24) 0 1px, transparent 1.3px),
    radial-gradient(circle at 33% 52%, rgba(50, 135, 230, .18) 0 1px, transparent 1.4px),
    linear-gradient(rgba(76, 124, 177, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76, 124, 177, .035) 1px, transparent 1px) !important;
}

.auth-visual-panel {
    color: #17324f !important
}

.auth-brand-lockup img {
    background: #fff !important;
    border-radius: 50%;
    padding: 3px;
    box-shadow: 0 8px 22px rgba(39, 82, 132, .10) !important
}

.auth-brand-lockup strong, .auth-visual-copy h1 {
    color: #173b68 !important;
    text-shadow: none !important
}

.auth-brand-lockup span, .auth-visual-copy p {
    color: #6f8299 !important
}

.auth-sensor-stage {
    background: linear-gradient(145deg, rgba(255, 255, 255, .76), rgba(239, 247, 255, .92)) !important;
    border-color: #d7e6f4 !important;
    box-shadow: 0 14px 36px rgba(39, 82, 132, .08) !important
}

.auth-stage-image {
    filter: none !important;
    opacity: .90 !important
}

.auth-sensor-tag {
    background: rgba(255, 255, 255, .92) !important;
    border-color: #c9dff3 !important;
    color: #32618d !important;
    box-shadow: 0 8px 20px rgba(39, 82, 132, .10) !important
}

.auth-feature-strip {
    background: rgba(255, 255, 255, .86) !important;
    border-color: #d8e6f3 !important;
    box-shadow: 0 10px 28px rgba(39, 82, 132, .07) !important
}

.auth-feature-strip > div {
    border-color: #e4edf6 !important
}

.auth-feature-strip i {
    color: #1677ff !important
}

.auth-feature-strip strong {
    color: #294a69 !important
}

.auth-feature-strip span {
    color: #7c91a7 !important
}

.auth-form-panel {
    background: transparent !important
}

.auth-card {
    background: rgba(255, 255, 255, .97) !important;
    border-color: #cfe0f2 !important;
    box-shadow: 0 22px 60px rgba(35, 78, 128, .13) !important
}

.auth-card:before {
    background: linear-gradient(90deg, #247cff, #5ebcff, transparent) !important
}

.auth-card-head h2 {
    color: #17324f !important
}

.auth-card-head p {
    color: #7c91a7 !important
}

.auth-field, .captcha-input {
    background: #fff !important;
    border-color: #cbdbea !important
}

.auth-field > div, .captcha-input {
    color: #496682 !important
}

.auth-field i, .captcha-input i {
    color: #5c8fbe !important
}

.auth-field input, .captcha-input input {
    color: #213d59 !important
}

.auth-field input::placeholder, .captcha-input input::placeholder {
    color: #9aabbc !important
}

.auth-password-eye {
    color: #6f91af !important
}

.auth-login-captcha-row img {
    border-color: #cdddeb !important;
    background: #f7fbff !important
}

.captcha-refresh, .auth-links a {
    color: #1677ff !important
}

.auth-login-options, .auth-links {
    color: #7b8fa4 !important
}

.auth-timeout-hint {
    color: #8195a8 !important
}

.auth-login-tipbox, .auth-review-note {
    background: #f3f8ff !important;
    border-color: #d6e5f4 !important;
    color: #71869b !important
}

.tipbox-title {
    color: #2470bd !important
}

.auth-error {
    background: #fff3f4 !important;
    border-color: #efc3c9 !important;
    color: #cf4051 !important
}

.auth-page-footer {
    color: #7f92a6 !important;
    border-color: #dce7f2 !important
}

.auth-submit {
    background: linear-gradient(180deg, #3c9dff, #1677ff) !important;
    border-color: #1677ff !important;
    box-shadow: 0 8px 20px rgba(36, 124, 255, .20) !important
}

.auth-submit:hover {
    background: linear-gradient(180deg, #52aaff, #126fd0) !important
}

.auth-checkbox span {
    color: #6f8299 !important
}

.auth-center-card, .auth-message-card {
    background: #fff !important;
    color: #17324f !important;
    border-color: #d5e3f0 !important;
    box-shadow: 0 18px 50px rgba(39, 82, 132, .12) !important
}

.dropdown-divider {
    border-color: #e1eaf3 !important
}

.modal-content {
    background: #fff !important;
    color: #294866 !important;
    border-color: #d5e3f0 !important;
    box-shadow: 0 18px 50px rgba(35, 75, 120, .16) !important
}

.modal-header, .modal-footer {
    border-color: #e5edf5 !important
}

.list-group-item {
    background: #fff !important;
    color: #3b5772 !important;
    border-color: #e4edf5 !important
}

.platform-card .text-white, .platform-content .text-white {
    color: #17324f !important
}

@media (max-width: 1280px) {
    .sidebar-tech-city-light {
        opacity: .45
    }
}


/* ========================================================================
   V1.3.1 浅色主题精修（按设计稿进一步统一）
   ======================================================================== */
body,
.platform-main,
.platform-content,
.page-body,
.platform-footer,
.platform-card,
.platform-card-body,
.platform-card-title,
.platform-card-subtitle,
.page-title,
.page-description,
.detail-title,
.detail-subtitle,
.table,
.table-platform {
    color: #17324f !important;
}

/* 顶部与侧栏继续保持浅色科技感 */
.global-header {
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(248, 251, 255, .96)) !important;
    border-bottom: 1px solid rgba(79, 123, 170, .16) !important;
}

.platform-sidebar {
    background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%) !important;
}

.sidebar-visual {
    padding: 14px 8px 0 !important;
}

.sidebar-tech-city-light {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    opacity: .92 !important;
}

.sidebar-footer {
    color: #8a9bb0 !important;
}

/* 标题区与区块条 */
.page-toolbar {
    padding: 0 2px !important;
}

.page-title-icon {
    border-color: #cfe0f1 !important;
    background: linear-gradient(145deg, #edf5ff, #dcecff) !important;
    color: #247cff !important;
    box-shadow: 0 5px 14px rgba(36, 124, 255, .09) !important;
}

.page-title {
    color: #17324f !important;
}

.page-description {
    color: #778da3 !important;
}

.section-strip {
    background: linear-gradient(90deg, #6c82a2 0%, #899bb4 48%, #b0bdd0 100%) !important;
    border: 1px solid #a3b9d3 !important;
    box-shadow: 0 8px 20px rgba(56, 88, 125, .08) !important;
}

.section-strip-title,
.section-strip-title span,
.section-strip-right,
.section-strip-right label {
    color: #ffffff !important;
}

.section-strip-title i {
    color: #ffffff !important;
    opacity: .95;
}

.section-strip .platform-select {
    background: rgba(255, 255, 255, .96) !important;
    border-color: rgba(255, 255, 255, .48) !important;
    color: #445c79 !important;
}

/* 卡片主体统一 */
.platform-card {
    background: linear-gradient(145deg, #ffffff, #fbfdff) !important;
    border-color: #d8e5f2 !important;
    box-shadow: 0 10px 28px rgba(39, 82, 132, .08), 0 2px 8px rgba(39, 82, 132, .04) !important;
}

.platform-card-header {
    border-bottom-color: #e6eef6 !important;
}

.platform-card-title {
    color: #17324f !important;
}

.platform-card-subtitle {
    color: #7a8fa4 !important;
}

.card-icon-title i {
    color: #247cff !important;
    text-shadow: none !important;
}

/* 表单控件 */
.platform-select,
.platform-input,
.form-control,
.form-select,
textarea.form-control {
    background: #ffffff !important;
    border-color: #cadbeb !important;
    color: #294866 !important;
    box-shadow: 0 4px 14px rgba(38, 82, 128, .04) !important;
}

.platform-select option,
.form-select option {
    background: #ffffff !important;
    color: #294866 !important;
}

.form-label {
    color: #60768d !important;
}

.form-text,
.text-secondary {
    color: #8194a7 !important;
}

/* 按钮 */
.btn-platform {
    background: linear-gradient(180deg, #3f9fff, #1677ff) !important;
    border-color: #1677ff !important;
    box-shadow: 0 8px 20px rgba(36, 124, 255, .16) !important;
}

.btn-outline-platform {
    background: #f5f9ff !important;
    border-color: #b8d3ee !important;
    color: #247cff !important;
}

.btn-outline-platform:hover {
    background: #eaf4ff !important;
    border-color: #86b8e8 !important;
    color: #126fd0 !important;
}

/* badge */
.badge-platform {
    background: #eef6ff !important;
    border-color: #c7dbef !important;
    color: #35648d !important;
}

.badge-green {
    background: #eefbf5 !important;
    color: #15945a !important;
    border-color: #bce9d3 !important;
}

.badge-red {
    background: #fff2f4 !important;
    color: #d83f51 !important;
    border-color: #f0c0c7 !important;
}

.badge-orange {
    background: #fff8ec !important;
    color: #d88708 !important;
    border-color: #f4d8aa !important;
}

/* 首页统计卡 */
.stat-title,
.stat-value,
.stat-unit,
.stat-arrow {
    color: #17324f !important;
}

.stat-title {
    font-weight: 700 !important;
}

.stat-note {
    color: #7c91a7 !important;
}

.stat-note .good {
    color: #1e9b62 !important;
}

.stat-card-blue .stat-icon-box {
    background: linear-gradient(145deg, #eaf3ff, #dcecff) !important;
    border-color: #c8ddf5 !important;
    color: #4a86ff !important;
}

.stat-card-cyan .stat-icon-box {
    background: linear-gradient(145deg, #eafcfc, #dcf4f5) !important;
    border-color: #c4eaee !important;
    color: #1db7c8 !important;
}

.stat-card-purple .stat-icon-box {
    background: linear-gradient(145deg, #f1edff, #e6e1ff) !important;
    border-color: #d9cffd !important;
    color: #7e68ef !important;
}

.stat-card-orange .stat-icon-box {
    background: linear-gradient(145deg, #fff6e7, #ffedd3) !important;
    border-color: #f3ddb4 !important;
    color: #e89b1c !important;
}

.stat-card-red .stat-icon-box {
    background: linear-gradient(145deg, #fff0f2, #ffe3e7) !important;
    border-color: #f4cdd3 !important;
    color: #ea6070 !important;
}

/* 仪表/图表区 */
.chart-box,
.history-chart,
.detail-chart {
    background: transparent !important;
}

.mini-kpi {
    background: linear-gradient(145deg, #eef4fb, #f8fbff) !important;
    border: 1px solid #d7e5f3 !important;
    border-radius: 8px !important;
    padding: 10px !important;
}

.mini-kpi span {
    color: #7a8fa5 !important;
}

.mini-kpi strong {
    color: #17324f !important;
}

.history-point {
    border-bottom: 1px dashed #d8e4f0 !important;
}

.history-point time {
    color: #7e93a8 !important;
}

.history-point strong {
    color: #294866 !important;
}

.history-point-empty {
    color: #8b9caf !important;
}

.history-point-list {
    overflow: auto !important;
    padding-right: 4px !important;
}

/* 实时监测大卡 */
.realtime-panel,
.sensor-live-card,
.live-card,
.trend-card,
.bottom-card {
    background: linear-gradient(145deg, #ffffff, #fbfdff) !important;
}

.sensor-type-icon {
    background: #eef5ff !important;
    border-color: rgba(36, 124, 255, .20) !important;
}

.sensor-live-title {
    color: #17324f !important;
}

.sensor-meta,
.minor-label,
.realtime-tip,
.sensor-update-row,
.update-time,
.live-meta,
.live-time {
    color: #7c90a5 !important;
}

.primary-reading-value,
.primary-reading-unit,
.minor-value,
.minor-value small,
.stat-main-value,
.live-primary-value,
.summary-value,
.summary-unit,
.summary-time {
    color: #17324f !important;
}

.minor-value small {
    opacity: .75;
}

.sensor-status {
    box-shadow: none !important;
}

.sensor-status.offline {
    background: #fff2f4 !important;
    border-color: #f0c0c7 !important;
    color: #d83f51 !important;
}

.sensor-status:not(.offline) {
    background: #eefbf5 !important;
    border-color: #bce9d3 !important;
    color: #15945a !important;
}

.realtime-tip strong,
.sensor-update-row strong {
    color: #5e7894 !important;
    font-weight: 600 !important;
}

/* 详情页 */
.detail-summary {
    background: linear-gradient(145deg, #ffffff, #fbfdff) !important;
}

.detail-hero-icon {
    background: #eef5ff !important;
    border-color: #cfe0f1 !important;
    color: #247cff !important;
}

.detail-hero h3,
.detail-metric .v {
    color: #17324f !important;
}

.detail-hero p,
.detail-metric .k {
    color: #7c91a7 !important;
}

.detail-metric {
    background: #f8fbff !important;
    border-color: #d9e5f1 !important;
}

.detail-form {
    background: transparent !important;
}

/* 表格、分页、tab */
.table-platform thead th,
.table thead th {
    background: #eef5fd !important;
    color: #31506f !important;
    border-color: #d8e4f0 !important;
}

.table-platform tbody td,
.table tbody td {
    color: #3b5772 !important;
    border-color: #e4edf6 !important;
}

.table-platform tbody tr:hover,
.table tbody tr:hover {
    background: #f5f9ff !important;
}

.table-panel-footer {
    color: #7c91a6 !important;
    border-top-color: #e5edf5 !important;
}

.pager button {
    background: #f6faff !important;
    border-color: #c8ddf1 !important;
    color: #247cff !important;
}

.platform-tabs .nav-link {
    background: #f8fbff !important;
    color: #70859a !important;
    border-color: #dbe7f3 !important;
}

.platform-tabs .nav-link.active {
    color: #1677ff !important;
    background: #edf5ff !important;
    border-bottom-color: #1677ff !important;
}

/* 登录 / 注册按设计稿继续收口 */
.auth-backdrop {
    background: radial-gradient(circle at 12% 14%, rgba(46, 136, 255, .10), transparent 26%),
    radial-gradient(circle at 76% 32%, rgba(22, 167, 230, .07), transparent 30%),
    linear-gradient(145deg, #f8fbff 0%, #f2f7fd 50%, #ecf3fb 100%) !important;
}

.auth-layout {
    gap: min(5vw, 72px) !important;
}

.auth-brand-lockup strong,
.auth-visual-copy h1,
.auth-card-head h2 {
    color: #17324f !important;
}

.auth-brand-lockup span,
.auth-visual-copy p,
.auth-card-head p {
    color: #7a8fa5 !important;
}

.auth-sensor-stage {
    background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(244, 249, 255, .96)) !important;
    border-color: #d7e5f4 !important;
    box-shadow: 0 18px 46px rgba(39, 82, 132, .08) !important;
}

.auth-stage-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    opacity: .96 !important;
}

.auth-sensor-tag {
    background: rgba(255, 255, 255, .96) !important;
    border-color: #c9dff3 !important;
    color: #38648f !important;
}

.auth-feature-strip {
    background: rgba(255, 255, 255, .95) !important;
    border-color: #d8e6f3 !important;
}

.auth-feature-strip strong {
    color: #294a69 !important;
}

.auth-feature-strip span {
    color: #7c91a7 !important;
}

.auth-card {
    background: rgba(255, 255, 255, .98) !important;
    border-color: #d4e2f0 !important;
    box-shadow: 0 24px 64px rgba(35, 78, 128, .13) !important;
}

.auth-card:before {
    background: linear-gradient(90deg, #247cff, #5ebcff, transparent) !important;
}

.auth-field > div,
.captcha-input {
    background: #ffffff !important;
    border-color: #cadbea !important;
    box-shadow: 0 4px 14px rgba(38, 82, 128, .04) !important;
}

.auth-field i,
.captcha-input i {
    color: #5c8fbe !important;
}

.auth-field input,
.captcha-input input {
    color: #17324f !important;
}

.auth-field input::placeholder,
.captcha-input input::placeholder {
    color: #9aabbc !important;
}

.auth-password-eye {
    color: #6f91af !important;
}

.auth-login-captcha-row img {
    background: #f8fbff !important;
    border-color: #ccdeef !important;
}

.captcha-refresh,
.auth-links a {
    color: #1677ff !important;
}

.auth-login-options,
.auth-links,
.auth-timeout-hint {
    color: #7f93a7 !important;
}

.auth-links-divider:before,
.auth-links-divider:after {
    background: #dbe6f0 !important;
}

.auth-login-tipbox {
    background: #f3f8ff !important;
    border-color: #d6e5f4 !important;
}

.tipbox-title {
    color: #2470bd !important;
}

.auth-login-tipbox p {
    color: #6f8299 !important;
}

.auth-error {
    background: #fff3f4 !important;
    border-color: #efc3c9 !important;
    color: #cf4051 !important;
}

.auth-page-footer {
    color: #8a9caf !important;
}

/* 其它常见深色残留 */
.modal-content {
    background: #ffffff !important;
    border-color: #d6e4f1 !important;
    color: #294866 !important;
}

.list-group-item {
    background: #ffffff !important;
    border-color: #e4edf5 !important;
    color: #3b5772 !important;
}

.platform-dropdown {
    background: #ffffff !important;
    border-color: #d9e5f3 !important;
    box-shadow: 0 14px 34px rgba(37, 75, 118, .14) !important;
}

.platform-dropdown .dropdown-item {
    color: #334f6d !important;
}

.platform-dropdown .dropdown-item:hover {
    background: #edf5ff !important;
    color: #126fd0 !important;
}

/* 小屏补充 */
@media (max-width: 1440px) {
    .section-strip {
        padding: 0 8px !important;
    }

    .history-workspace {
        grid-template-columns:minmax(0, 1.6fr) minmax(300px, .7fr) !important;
    }
}