@charset "UTF-8";
html, body { padding: 0; margin: 0; height: 100%; font-size: 14px; font-family: monospace; }
body{ 
    margin-top: env(safe-area-inset-top); 
    margin-bottom: env(safe-area-inset-bottom); 
    margin-left: env(safe-area-inset-left); 
    margin-right: env(safe-area-inset-right);
    position: relative; 
}
/* body.offline:after{ content: '未连接'; position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 10px; color: red; font-size: 20px; animation: fadeInOut 3s infinite ease-in-out; } */
table{ border-collapse: collapse; white-space: nowrap; }
table, th, td { border: 1px solid #999; }
th,td{ padding: 0; }
.odd>*:nth-child(odd) { background: #ffffff22; }
tr.active{ background: #ffff0066!important; }
.autoscroll{ overflow: auto; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #666; }
::-webkit-scrollbar-thumb { background: #ccc; }
::-webkit-scrollbar-thumb:hover { background: #fff; }
.flex-between-center { display: flex; justify-content: space-between; }
.flex-center { display: flex; justify-content: center; align-items: center; }
.strong { font-weight: bold; }
.small { font-size: 80%; }
.textover{ overflow: hidden;text-overflow: ellipsis; white-space: nowrap; }
.right { text-align: right; }
.hover:hover, 
tr:hover, 
barcolor:hover{ background: #1da09b6e!important; }

[disabled],
.disabled{ opacity: 0.3; pointer-events: none; }

.link{ opacity: 0.3; pointer-events: none; display: flex; justify-content: center; align-items: center; }
.link:active{ background: #666666; }
.link.active{ opacity: 1; pointer-events: all; }

#menu-box[data-state='0'] [data-active-state*='0']{ opacity: 1; pointer-events: all; }
#menu-box[data-state='1'] [data-active-state*='1']{ opacity: 1; pointer-events: all; }
#menu-box[data-state='2'] [data-active-state*='2']{ opacity: 1; pointer-events: all; }
#menu-box[data-state='3'] [data-active-state*='3']{ opacity: 1; pointer-events: all; }

#menu-box [data-visible-state]{ display: none; }
#menu-box[data-state='0'] [data-visible-state*='0']{ display: block; }
#menu-box[data-state='1'] [data-visible-state*='1']{ display: block; }
#menu-box[data-state='2'] [data-visible-state*='2']{ display: block; }
#menu-box[data-state='3'] [data-visible-state*='3']{ display: block; }

.noselect {
  user-select: none; /* 标准语法 */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
}

.textbox {
  display: flex;          /* 弹性布局 */
  align-items: center;    /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  white-space: nowrap;    /* 强制不换行 */
  overflow: hidden;       /* 防止溢出 */
  text-overflow: ellipsis; /* 溢出显示省略号 */
  min-width: 0;                     /* 允许子元素收缩 */
  transition: color 1s;       /* 平滑过渡 */
}

.textbox-2 { line-height: 100%; }

.panel-title { padding: 0.5em; border-left: 1px solid #666; }
.panel-title.active { background: #222; }

.deviceView{ border-top: 1px solid #ccc; }
.deviceRemote+.deviceRemote{ border-top: 1px dashed #ccc; }

.deviceStatus{ margin: 10px; line-height: 100%; display: flex; justify-content: center; align-items: center; }
.deviceStatus[status='0']{ color: #c60001; }
.deviceStatus[status='1']{ color: #00af01; }
.deviceStatus[status='2']{ color: orange; }
.deviceStatus:after { content: attr(label); }
.deviceStatus2{ border-radius: 50%; }
.deviceStatus2[status='0']{ color: #fff; background-color: #c60001; }
.deviceStatus2[status='1']{ color: #fff; background-color: #00af01; }
.deviceStatus2[status='2']{ color: #fff; background-color: orange; }

.deviceStatusList .deviceStatus[status='0'] { animation: fadeInOut 2s infinite ease-in-out; }

@keyframes fadeInOut {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}
        
@keyframes flash-blue {
  0%, 50%, 100% { background-color: #000; }
  25%, 75% { background-color: #0066ff; }
}

@keyframes flash-orange {
  0%, 50%, 100% { background-color: #000; }
  25%, 75% { background-color: #ff6600; }
}

@keyframes flash-red {
  0%, 50%, 100% { background-color: #000; }
  25%, 75% { background-color: #cc0000; }
}

@keyframes flash-flickerTips {
  0%, 50%, 100% { background-color: #000; }
  25%, 75% { background-color: #bd00ff; }
}

.flash-blue {
  animation: flash-blue 0.7s ease-out forwards;
}

.flash-orange {
  animation: flash-orange 0.7s ease-out forwards;
}

.flash-red {
  animation: flash-red 0.7s ease-out forwards;
}

body .full-visible{ display: none!important; }
body.full .full-visible{ display: block!important; }
body.full .full-hidden{ display: none!important; }

#clock{ position: absolute; top: 100%; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; opacity: 0; overflow: hidden; justify-content: center; align-items: center; background: #000000; white-space: nowrap; transition: all 0.5s; }
#clock.active{ opacity: 1; top: 0; }
.clock-label{ opacity: 0.5; margin-top: -1em; line-height: 1em; transition: all 0.5s; }

#task-countup-label,
#task-countdown-label
{ width: 1em; display: inline-block; white-space: normal; line-height: 125%; padding-right: 0.1em; }

#flickerTips{ position: absolute; top: 100%; right: 0; bottom: 0; left: 0; display: none; opacity: 0; justify-content: center; align-items: center; background: #bd00ff; white-space: nowrap; transition: all 0.5s; animation: flash-flickerTips 2s ease-out forwards infinite; }
#flickerTips.active{ opacity: 1; top: 0; }
.flickerTipsBtn.disabled { opacity: 0.3!important; pointer-events: none!important; }

/* 模态框 */
.modal-backdrop { font-size: 16px; display: none; opacity: 0; margin-top: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100%;  background: rgba(0,0,0,0.7); align-items: center; justify-content: center; transition: all 0.3s; }
.modal { background: #000; padding: 15px; margin-top: 10vh; border-radius: 8px; width: 300px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); border: 1px solid #fff; transition: all 0.3s; }
.modal h3 { margin: 0 0 15px 0; }
.modal .modal-message { white-space: pre-wrap; }
.modal-buttons { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.modal-btn { font-size: 1.1em; color: #000; font-family: monospace; display: none; padding: 6px 12px; border: none; border-radius: 4px; cursor: pointer; }
.modal-btn.cancel { background: #ccc; }
.modal-btn.confirm { background: #fff; }
.modal-backdrop.show { opacity: 1; }
.modal-backdrop.show .modal { margin-top: 0; }

#menu-box{ overflow: hidden; white-space: nowrap; background: #ffffff22; }

/** 特殊属性支持 */
@supports (backdrop-filter: blur(0.2em)){
    #clock{ background: #00000066; backdrop-filter: blur(0.2em); }
    #flickerTips{ background: #bd00ff; backdrop-filter: blur(0.2em); }    
    .modal-backdrop { background: #00000066; backdrop-filter: blur(1vw); }
}

/* 横屏（宽度大于高度） */ 
@media (orientation: landscape) {
    .deviceStatus{ font-size: 6vh; width: 6vh; height: 6vh; }
    .deviceStatus2{ font-size: 4vh; }
    #now{ font-size: 6vh; }
    #menu-box{ width: 0; font-size: 2vw; }
    #menu-box.show{ width: calc(50vw - env(safe-area-inset-right)); }
    #menu-btn{ bottom: 0; left: 0; }
    #menu-box>div{ border-left: 2px solid #ccc; }
    #task-countup-label{ font-size: 5vh; }
    #task-countdown-label{ font-size: 5vh; }
    .full #task-countup-label{ font-size: 10vh; }
    .full #task-countdown-label{ font-size: 10vh; }
    #task-countdown-over{ font-size: 20vh; }
    #flickerTips{ font-size: 12.5vw; }
    .full #flickerTips{ font-size: 25vw; }
    #clock{ font-size: calc((100vw - env(safe-area-inset-left) - env(safe-area-inset-left)) * 0.1); }
    .full #clock{ font-size: calc((100vw - env(safe-area-inset-left) - env(safe-area-inset-left)) * 0.2); }
    .clock-label{ font-size: 60%; }
    .full .clock-label{ font-size: 45%; }
    .textbox-2 { height: 10vh; font-size: 3.5vh; }
}

/* 竖屏（高度大于或等于宽度） */
@media (orientation: portrait) {
    .deviceStatus{ font-size: 3vw; width: 4vw; height: 4vw; }
    .deviceStatus2{ font-size: 3vw; }
    #now{ font-size: 4vw; }
    .view-box{ flex-direction: column; }
    #menu-box{ height: 0; font-size: 4vw; }
    #menu-box.show{ height: 50vh; }
    #menu-btn{ left: 0; bottom: 0; }
    #menu-box>div{ border-top: 2px solid #ccc; }
    #task-countup-label{ font-size: 7vw; }
    #task-countdown-label{ font-size: 7vw; }
    #task-countdown-over{ font-size: 20vw; }
    #flickerTips{ font-size: 25vw; }
    #clock{ font-size: 20vw; }
    .clock-label{ font-size: 75%; }
    .textbox-2 { height: 5vh; font-size: 1.75vh; }
    .full .textbox-2 { height: 8vh; }
}