@charset "UTF-8";
/* */
body { background: linear-gradient(135deg, #0c0c0c 0%, #1a1a1a 100%); color: #ffffff; } 
/* */
.container { padding: 20px; box-sizing: border-box; max-width: 100%; margin: 0 auto; min-height: 100vh; display: flex; } 
.status-indicator { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; animation: pulse 2s infinite; } 
.status-online { background-color: #00ff88; } .status-warning { background-color: #ffaa00; } .status-offline { background-color: #ff4444; } 
@keyframes pulse { 
 0% { opacity: 1; } 
 50% { opacity: 0.5; } 
 100% { opacity: 1; } 
 }

.dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(500px, 1fr)); gap: 20px; width: 100%; } 
.card {max-height: 200px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; background: rgba(255, 255, 255, 0.08); border-radius: 16px; padding: 25px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; position: relative; overflow: hidden; } 
.card.w100p { width: 100%; grid-column: 1 / span 3; } 
.card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 212, 255, 0.2); border-color: rgba(0, 212, 255, 0.3); } 
.card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #00d4ff, #ff00ff); opacity: 0; transition: opacity 0.3s ease; } 
.card::before { opacity: 1; } 
.card-header { flex-direction: row; gap: 10px; display: flex; align-items: center; } 
.card-title {white-space: nowrap;overflow: hidden;text-overflow: ellipsis; line-height: 1.2; font-size: 34px; font-weight: 500; color: #ffffff; } 
.card-icon { font-size: 20px; opacity: .9; } 
.metric-value { font-size: 50px; font-weight: 700; background: linear-gradient(45deg, #00d4ff, #ffffff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } 
.card .v_l_bx { display: flex; align-items: center; justify-content: space-between; } 
/* */
.card .link { margin-top: 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; color: #ffffff; text-decoration: none; font-weight: 500; font-size: 16px; backdrop-filter: blur(10px); transition: all 0.3s ease; position: relative; overflow: hidden; text-align: center; } 
.card .link::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent); transition: left 0.5s ease; } 
.card .link:hover { background: rgba(255, 255, 255, 0.15); border-color: rgba(0, 212, 255, 0.4); box-shadow: 0 8px 25px rgba(0, 212, 255, 0.15); color: #00d4ff; } 
.card .link:hover::before { left: 100%; } 
.card .link:active { transform: translateY(0); box-shadow: 0 4px 15px rgba(0, 212, 255, 0.2); } 
.card.red .link { background: rgba(255, 107, 107, 0.15); border: 1px solid rgba(255, 107, 107, 0.3); color: #ffcccc; } 
.card.red .link::before { background: linear-gradient(90deg, transparent, rgba(255, 107, 107, 0.3), transparent); } 
.card.red .link:hover { background: rgba(255, 107, 107, 0.2); border-color: rgba(255, 107, 107, 0.5); box-shadow: 0 8px 25px rgba(255, 107, 107, 0.2); color: #ff6b6b; } 
.card.red .link:active { box-shadow: 0 4px 15px rgba(255, 107, 107, 0.25); } 
.card .link.small { padding: 8px 16px; font-size: 0.8em; min-width: 80px; } 
.card .link.large { padding: 16px 32px; font-size: 1em; min-width: 120px; } 
.card .link.icon { gap: 8px; } 
.card .link.icon::after { content: '→'; font-size: 1.1em; transition: transform 0.3s ease; } 
.card .link.icon:hover::after { transform: translateX(3px); } 
.card .link.full-width { width: 100%; justify-content: center; } 
.card .ip {border-radius: 8px 0 0 0; position: absolute; bottom: 0; right: 0; padding: 6px 12px; color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 16px; font-weight: 500; font-family: 'Courier New', monospace; transition: all 0.3s ease; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } 
.card .ip:hover { color: #00d4ff; background: rgba(255, 255, 255, 0.12); border-color: rgba(0, 212, 255, 0.3); box-shadow: 0 4px 15px rgba(0, 212, 255, 0.15); } 
.card.red .ip { color: rgba(255, 204, 204, 0.8); background: rgba(255, 107, 107, 0.12); border: 1px solid rgba(255, 107, 107, 0.2); } 
.card.red .ip:hover { color: #ff6b6b; background: rgba(255, 107, 107, 0.18); border-color: rgba(255, 107, 107, 0.4); box-shadow: 0 4px 15px rgba(255, 107, 107, 0.2); } 
/* */
.card.red { background: linear-gradient(135deg, rgba(255, 59, 48, 0.15) 0%, rgba(255, 69, 58, 0.12) 50%, rgba(255, 45, 85, 0.1) 100%); border: 1px solid rgba(255, 59, 48, 0.3); box-shadow: 0 8px 32px rgba(255, 59, 48, 0.15); } 
.card.red:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(255, 59, 48, 0.25); border-color: rgba(255, 59, 48, 0.5); } 
.card.red::before { background: linear-gradient(90deg, #ff3b30, #ff2d92, #ff453a); opacity: 1; } 
.card.red .card-title { color: #ffcccb; font-weight: 700; } 
.card.red .card-icon { color: #ff6b6b; opacity: 0.9; } 
.card.red .metric-value { background: linear-gradient(45deg, #ff6b6b, #ff9999, #ffb3b3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-shadow: 0 0 20px rgba(255, 107, 107, 0.3); } 
.card.red .status-indicator { background-color: #ff4444; box-shadow: 0 0 10px rgba(255, 68, 68, 0.5); } 
.card.red p,
.card.red span,
.card.red div { color: #ffcccc; } 
.card.red { animation: redPulse 3s infinite; } 
@keyframes redPulse { 
 0% { box-shadow: 0 8px 32px rgba(255, 59, 48, 0.15); } 
 50% { box-shadow: 0 8px 32px rgba(255, 59, 48, 0.25); } 
 100% { box-shadow: 0 8px 32px rgba(255, 59, 48, 0.15); } 
 }
.card.red.static { animation: none; background: linear-gradient(135deg, rgba(255, 59, 48, 0.18) 0%, rgba(255, 69, 58, 0.15) 50%, rgba(255, 45, 85, 0.12) 100%); } 

.card .card-icon::after { content: '🟢'; } 
.card.red .card-icon::after { content: '🚨'; } 
/* */
.card.no_link .link { display: none; } 

@media (max-width: 541px){
    .dashboard-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } 
    .card .ip { font-size: 12px; padding: 4px 8px; bottom: 10px; right: 10px; } 
}

#screenControlBtn {transition: .2s; user-select: none; z-index: 999;cursor: pointer; position: fixed; top: 10px; right: 10px; padding: 8px; background: rgba(255, 255, 255, 0.25); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); } 
#screenControlBtn:hover{transform: scale(1.05);}
#screenControlBtn .inner { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; } 
#screenControlBtn .inner img { width: 100%; height: 100%; object-fit: contain; object-position: center; } 
#screenControlBtn .inner img.min { display: none; } 
#screenControlBtn.max .inner img.min {display: flex;}
#screenControlBtn.max .inner img.max {display: none;}