:root{
  --left-panel-left: 16px;
  --left-panel-gap: 8px;
  --left-panel-width: 250px;
  --right-panel-right: 16px;
  --right-panel-gap: var(--left-panel-gap);
}

body.largeScreenEffectMode{
  --left-panel-width: clamp(220px, 24vw, 300px);
}

.screenExtraPanel{
  position: absolute;
  left: var(--left-panel-left);
  width: var(--left-panel-width);
  z-index: 29;
  color: #fff;
  user-select: none;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(5, 34, 70, 0.6), rgba(4, 24, 50, 0.55));
  box-shadow: inset 0 0 20px rgba(16, 112, 170, 0.18);
  border: 1px solid rgba(82, 162, 228, 0.22);
  display: none;
}

.screenExtraPanelRight{
  left: auto;
  right: var(--right-panel-right);
  width: var(--left-panel-width);
}

.screenExtraPanel.show{
  display: block;
}

.screenExtraTitle{
  display: flex;
  align-items: flex-end;
  height: 42px;
  padding: 0 0 0 2px;
  margin: 0 8px;
}

.screenExtraTitle span{
  background: url('../src/images/line1.png') no-repeat bottom right;
  font-size: 20px;
  font-weight: normal;
  letter-spacing: normal;
  text-shadow: none;
  white-space: nowrap;
  padding-bottom: 8px;
  padding-right: 18px;
  color: #fff;
}

.screenExtraTitle p{
  background: url('../src/images/line2.png') no-repeat bottom right;
  width: 100%;
  height: 13px;
  margin-bottom: 5px;
  opacity: .5;
}

.screenExtraContent{
  height: calc(100% - 42px);
  padding: 8px 10px 10px;
  box-sizing: border-box;
}

.screenChart{
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(3, 26, 52, 0.32), rgba(2, 18, 36, 0.2));
  border: 1px solid rgba(82, 162, 228, 0.18);
}

.screenReserveCard{
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(0, 1.15fr);
  gap: 10px;
  padding: 8px;
  box-sizing: border-box;
  background:
    linear-gradient(180deg, rgba(3, 26, 52, 0.42), rgba(2, 18, 36, 0.26));
  border: 1px solid rgba(82, 162, 228, 0.18);
}

.screenReserveVisual{
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.screenReserveDonut{
  position: relative;
  width: min(100%, 132px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background:
    conic-gradient(from 210deg, rgba(62, 190, 255, .15) 0deg, rgba(62, 190, 255, .95) 92deg, rgba(39, 116, 255, .78) 150deg, rgba(16, 42, 90, .18) 220deg, rgba(62, 190, 255, .55) 300deg, rgba(62, 190, 255, .15) 360deg);
  box-shadow:
    inset 0 0 20px rgba(40, 141, 255, .2),
    0 0 18px rgba(62, 190, 255, .18);
}

.screenReserveDonut::before,
.screenReserveDonut::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
}

.screenReserveDonut::before{
  inset: 10px;
  border: 1px dashed rgba(104, 211, 255, .42);
}

.screenReserveDonut::after{
  inset: 20px;
  background:
    radial-gradient(circle at center, rgba(44, 135, 255, .28), rgba(4, 18, 40, .92) 62%);
  border: 1px solid rgba(82, 162, 228, .28);
  box-shadow: inset 0 0 16px rgba(62, 190, 255, .12);
}

.screenReserveDonutInner{
  position: absolute;
  inset: 28px;
  z-index: 1;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
}

.screenReserveDonutTitle{
  color: #d3efff;
  font-size: 12px;
  letter-spacing: 2px;
}

.screenReserveDonutValue{
  color: #53c7ff;
  font-size: 24px;
  line-height: 1;
  text-shadow: 0 0 8px rgba(74, 199, 255, .35);
}

.screenReserveUnit{
  color: rgba(204, 236, 255, .82);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
}

.screenReserveList{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}

.screenReserveItem{
  position: relative;
  flex: 1;
  min-height: 0;
  padding: 8px 12px 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(90deg, rgba(12, 50, 93, .72), rgba(10, 32, 66, .3));
  border: 1px solid rgba(71, 171, 255, .3);
  box-shadow: inset 0 0 14px rgba(40, 141, 255, .12);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  overflow: hidden;
}

.screenReserveItem::before{
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  background: linear-gradient(180deg, #6be3ff, #2a7dff);
  box-shadow: 0 0 8px rgba(74, 199, 255, .55);
}

.screenReserveItemLabel{
  color: #ccecff;
  font-size: 13px;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.screenReserveItemValue{
  color: #52c4ff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1;
  flex: 0 0 auto;
  white-space: nowrap;
}

#businessSystemView{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: none;
  background: #eef1f7;
  overflow: hidden;
}

#businessSystemView.show{
  display: block;
}

#businessSystemView .bizSystemLayout{
  width: 100%;
  height: 100%;
  display: flex;
  color: #2f4058;
  font-family: "Microsoft YaHei", sans-serif;
}

#businessSystemView .bizSidebar{
  width: 210px;
  background: #304156;
  color: #bfcbd9;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #263445;
}

#businessSystemView .bizSidebarHeader{
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  background: #304156;
  border-bottom: 1px solid #263445;
}

#businessSystemView .bizSidebarSection{
  height: 10px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background: transparent;
}

#businessSystemView .bizSidebarMenu{
  margin: 0;
  padding: 8px 0;
}

#businessSystemView .bizMenuGroup{
  margin-bottom: 2px;
}

#businessSystemView .bizMenuGroupTitle{
  width: 100%;
  height: 42px;
  border: none;
  background: #304156;
  color: #bfcbd9;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  cursor: pointer;
  text-align: left;
  border-left: 2px solid transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

#businessSystemView .bizMenuDirectItem{
  width: 100%;
  height: 42px;
  border: none;
  background: #304156;
  color: #bfcbd9;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  cursor: pointer;
  text-align: left;
  border-left: 2px solid transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

#businessSystemView .bizMenuGroupTitle:hover{
  background: #263445;
  border-left-color: #409eff;
  color: #ffffff;
}

#businessSystemView .bizMenuDirectItem:hover,
#businessSystemView .bizMenuDirectItem.active{
  background: #263445;
  border-left-color: #409eff;
  color: #ffffff;
}

#businessSystemView .bizMenuArrow{
  position: relative;
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
}

#businessSystemView .bizMenuArrow::before{
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid #bfcbd9;
  border-bottom: 1.5px solid #bfcbd9;
  transform: rotate(-45deg);
  transform-origin: center;
  transition: transform .2s ease, border-color .2s ease;
}

#businessSystemView .bizMenuChildren{
  margin: 0;
  padding: 0;
  list-style: none;
  display: none;
}

#businessSystemView .bizMenuGroup.open .bizMenuChildren{
  display: block;
  background: #1F2D3D;
}

#businessSystemView .bizMenuGroup.open .bizMenuArrow{
}

#businessSystemView .bizMenuGroup.open .bizMenuArrow::before{
  transform: rotate(45deg);
  border-color: #ffffff;
}

#businessSystemView .bizMenuGroup.open .bizMenuGroupTitle{
  color: #ffffff;
  background: #304156;
}

#businessSystemView .bizMenuChildren li{
  height: 38px;
  line-height: 38px;
  padding: 0 20px 0 30px;
  font-size: 13px;
  color: #bfcbd9;
  cursor: pointer;
}

#businessSystemView .bizMenuChildren li:hover{
  background: #001528;
  color: #ffffff;
}

#businessSystemView .bizMenuChildren li.active{
  color: #ffffff;
  background: #001528;
}

#businessSystemView .bizMain{
  flex: 1;
  display: flex;
  flex-direction: column;
}

#businessSystemView .bizMainViews{
  flex: 1;
  min-height: 0;
}

#businessSystemView .bizViewPanel{
  display: none;
  width: 100%;
  height: 100%;
}

#businessSystemView .bizViewPanel.active{
  display: block;
}

#businessSystemView .bizMainHeader{
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: #f7f9fc;
  border-bottom: 1px solid #e3e9f2;
}

#businessSystemView .bizMainHeader span{
  font-size: 13px;
  color: #667894;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#businessSystemView .bizMainHeader button{
  height: 30px;
  padding: 0 16px;
  border: 1px solid #3896ff;
  border-radius: 4px;
  background: #3896ff;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(56, 150, 255, 0.22);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

#businessSystemView .bizMainHeader button:hover{
  background: #2f86e8;
  border-color: #2f86e8;
  box-shadow: 0 3px 10px rgba(56, 150, 255, 0.3);
}

#businessSystemView .bizContent{
  flex: 1;
  height: calc(100% - 24px);
  margin: 12px;
  background: #ffffff;
  border: 1px solid #e7edf6;
  border-radius: 4px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#businessSystemView .bizEmptyPage{
  margin: 12px;
  height: calc(100% - 24px);
  border: 1px solid #e7edf6;
  border-radius: 4px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #90a0b7;
  font-size: 14px;
}

#businessSystemView .bizHomeDashboard{
  height: calc(100% - 24px);
  margin: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#businessSystemView .bizHomeStatGrid{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

#businessSystemView .bizHomeStatCard,
#businessSystemView .bizHomePanel{
  background: #fff;
  border: 1px solid #e7edf6;
  border-radius: 4px;
}

#businessSystemView .bizHomeStatCard{
  min-height: 84px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 18px;
}

#businessSystemView .bizHomeStatIcon{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

#businessSystemView .bizHomeStatIconCyan{ background: linear-gradient(135deg, #49d8d1, #29b8c9); }
#businessSystemView .bizHomeStatIconBlue{ background: linear-gradient(135deg, #56b8ff, #3a8dff); }
#businessSystemView .bizHomeStatIconGold{ background: linear-gradient(135deg, #ffd45c, #f0af17); }
#businessSystemView .bizHomeStatIconGreen{ background: linear-gradient(135deg, #6ddc70, #3bbd4d); }
#businessSystemView .bizHomeStatIconRed{ background: linear-gradient(135deg, #ff866f, #e04f45); }

#businessSystemView .bizHomeStatText span{
  display: block;
  color: #6f819c;
  font-size: 13px;
  margin-bottom: 6px;
}

#businessSystemView .bizHomeStatText strong{
  font-size: 28px;
  color: #354861;
  font-weight: 700;
}

#businessSystemView .bizHomeChartGrid{
  display: grid;
  gap: 12px;
}

#businessSystemView .bizHomeChartGridTop{
  grid-template-columns: 1.2fr 1.4fr 1.2fr;
  min-height: 210px;
}

#businessSystemView .bizHomeChartGridBottom{
  grid-template-columns: repeat(2, minmax(0, 1fr));
  flex: 1;
  min-height: 0;
}

#businessSystemView .bizHomePanel{
  padding: 12px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#businessSystemView .bizHomePanelWide{
  min-height: 0;
}

#businessSystemView .bizHomePanelTitle{
  font-size: 14px;
  color: #4f6280;
  font-weight: 600;
  margin-bottom: 10px;
}

#businessSystemView .bizHomeChart{
  flex: 1;
  min-height: 180px;
}

#businessSystemView .bizHomeAnalysisGrid{
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

#businessSystemView .bizHomeAnalysisCard{
  background: #f7f9fe;
  border-radius: 4px;
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
}

#businessSystemView .bizHomeAnalysisCardWide{
  grid-column: span 1;
}

#businessSystemView .bizHomeAnalysisBadge{
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: linear-gradient(135deg, #8ba8ff, #687ef7);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}

#businessSystemView .bizHomeAnalysisBadgeBlue{ background: linear-gradient(135deg, #6bc9ff, #548eff); }
#businessSystemView .bizHomeAnalysisBadgePurple{ background: linear-gradient(135deg, #97a6ff, #6d7cf7); }
#businessSystemView .bizHomeAnalysisBadgeLight{ background: linear-gradient(135deg, #b7c6ff, #90a2fb); }

#businessSystemView .bizHomeAnalysisCard p{
  margin: 0 0 6px;
  color: #7587a2;
  font-size: 12px;
}

#businessSystemView .bizHomeAnalysisCard strong{
  color: #354861;
  font-size: 24px;
}

#businessSystemView .bizFilterRow{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

#businessSystemView .bizFilterRow input,
#businessSystemView .bizFilterRow select{
  height: 30px;
  min-width: 150px;
  border: 1px solid #dce4ef;
  border-radius: 4px;
  padding: 0 8px;
  font-size: 12px;
  color: #52647f;
  background: #fff;
  outline: none;
}

#businessSystemView .bizFilterRow select{
  min-width: 170px;
}

#businessSystemView .bizBtnPrimary,
#businessSystemView .bizBtnSecondary{
  height: 30px;
  border-radius: 4px;
  padding: 0 14px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid transparent;
}

#businessSystemView .bizBtnPrimary{
  background: #3896ff;
  color: #fff;
}

#businessSystemView .bizBtnSecondary{
  background: #fff;
  border-color: #dce4ef;
  color: #667a97;
}

#businessSystemView .bizTabBar{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

#businessSystemView .bizTabItem{
  min-width: 96px;
  height: 30px;
  padding: 0 14px;
  border: 1px solid #dce4ef;
  border-radius: 4px 4px 0 0;
  background: #fff;
  color: #7d8faa;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#businessSystemView .bizTabItem.active{
  background: #3896ff;
  border-color: #3896ff;
  color: #fff;
}

#businessSystemView .reserveFilterRow{
  margin-bottom: 12px;
}

#businessSystemView .reserveFilterLabel{
  font-size: 12px;
  color: #4f6280;
}

#businessSystemView .bizTableTools{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

#businessSystemView .bizBtnToolbar{
  height: 28px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}

#businessSystemView .bizBtnToolbarAdd{
  background: #e9f6ff;
  border-color: #bfe4ff;
  color: #3896ff;
}

#businessSystemView .bizBtnToolbarEdit{
  background: #edfbf4;
  border-color: #caefd8;
  color: #37b26f;
}

#businessSystemView .bizBtnToolbarDelete{
  background: #fff1f2;
  border-color: #ffd5db;
  color: #ef5b72;
}

#businessSystemView .bizBtnToolbarExport{
  background: #fff8e8;
  border-color: #ffe2a3;
  color: #d9a72f;
}

#businessSystemView .bizTable{
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 12px;
}

#businessSystemView .bizTable thead{
  background: #f5f8fd;
}

#businessSystemView .bizTable th,
#businessSystemView .bizTable td{
  border-bottom: 1px solid #edf2f8;
  padding: 10px 8px;
  text-align: center;
  color: #5d708d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#businessSystemView .bizTable th{
  font-weight: 600;
  color: #4f6280;
}

#businessSystemView .reserveTable th:nth-child(7),
#businessSystemView .reserveTable td:nth-child(7){
  width: 220px;
}

#businessSystemView .reserveTable th:nth-child(8),
#businessSystemView .reserveTable td:nth-child(8){
  width: 110px;
}

#businessSystemView .reserveFileTable th:nth-child(2),
#businessSystemView .reserveFileTable td:nth-child(2){
  width: 190px;
}

#businessSystemView .reserveFileTable th:nth-child(9),
#businessSystemView .reserveFileTable td:nth-child(9),
#businessSystemView .volumeStatisticsTable th:nth-child(10),
#businessSystemView .volumeStatisticsTable td:nth-child(10),
#businessSystemView .coalSeamTable th:nth-child(9),
#businessSystemView .coalSeamTable td:nth-child(9),
#businessSystemView .drillingTable th:nth-child(5),
#businessSystemView .drillingTable td:nth-child(5){
  width: 138px;
}

#businessSystemView .volumeStatisticsTable th:nth-child(9),
#businessSystemView .volumeStatisticsTable td:nth-child(9){
  width: 150px;
}

#businessSystemView .coalSeamTable th:nth-child(2),
#businessSystemView .coalSeamTable td:nth-child(2){
  width: 160px;
}

#businessSystemView .coalSeamTable th:nth-child(5),
#businessSystemView .coalSeamTable td:nth-child(5){
  width: 150px;
}

#businessSystemView .drillingTable th:nth-child(1),
#businessSystemView .drillingTable td:nth-child(1){
  width: 90px;
}

#businessSystemView .drillingTable th:nth-child(4),
#businessSystemView .drillingTable td:nth-child(4){
  width: 120px;
}

#businessSystemView .blockModelTable th:nth-child(1),
#businessSystemView .blockModelTable td:nth-child(1){
  width: 44px;
}

#businessSystemView .blockModelTable th:nth-child(2),
#businessSystemView .blockModelTable td:nth-child(2){
  width: 90px;
}

#businessSystemView .blockModelTable th:nth-child(7),
#businessSystemView .blockModelTable td:nth-child(7){
  width: 180px;
}

#businessSystemView .bizTable tbody tr:nth-child(odd){
  background: #ffffff;
}

#businessSystemView .bizTable tbody tr:nth-child(even){
  background: #fbfdff;
}

#businessSystemView .bizPagination{
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 12px;
  color: #7589a4;
}

#businessSystemView .bizPageBtn{
  min-width: 26px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid #d6e0ee;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: #fff;
  color: #5f7390;
}

#businessSystemView .bizPageBtn.active{
  background: #3896ff;
  border-color: #3896ff;
  color: #fff;
}

#businessSystemView .reserveFileLink{
  color: #6b7d98;
  text-decoration: none;
}

#businessSystemView .reserveFileLink:hover{
  color: #3896ff;
}

#businessSystemView .bizActionLink{
  color: #60a7f8;
  cursor: pointer;
  margin: 0 4px;
}

#businessSystemView .bizActionLink:hover{
  color: #3896ff;
}

#businessSystemView .bizStatusTag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  background: #e8f4ff;
  color: #5aa8ef;
  font-size: 12px;
}

#businessSystemView .blockModelTable input[type="checkbox"]{
  width: 14px;
  height: 14px;
  accent-color: #3896ff;
  cursor: pointer;
}

#businessSystemView .reserveManagePage .bizTable td:nth-child(8),
#businessSystemView .reserveFileTable td:nth-child(8){
  font-weight: 500;
}

body.businessSystemMode .myHeader,
body.businessSystemMode .myFooter,
body.businessSystemMode .myLayer,
body.businessSystemMode #cesiumContainer,
body.businessSystemMode #myInfoBox,
body.businessSystemMode .headerMenu,
body.businessSystemMode .opacitySliderBar,
body.businessSystemMode .screenExtraPanel{
  display: none !important;
}
