*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f5f5f5;color:#333}.container{max-width:1200px;margin:0 auto;padding:20px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px;background:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 10px #0000001a;position:relative}.logo{margin-right:30px}#company-logo{height:60px;width:auto}.overall-status{display:flex;align-items:center;text-align:center;position:absolute;left:50%;transform:translate(-50%)}.status-indicator{font-size:48px;margin-right:20px;width:60px;height:60px;display:flex;align-items:center;justify-content:center}.status-up{color:#28a745}.status-down{color:#dc3545}.overall-text h1{font-size:28px;margin-bottom:5px}.overall-text p{font-size:16px;color:#666}.api-item{background:#fff;margin-bottom:20px;padding:20px;border-radius:10px;box-shadow:0 2px 10px #0000001a}.api-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.api-name{font-size:20px;font-weight:600}.api-uptime{font-size:16px;color:#666}.history-bar{display:flex;gap:2px;height:20px;background:#e9ecef;border-radius:10px;padding:2px;overflow:hidden}.history-tick{flex:1;border-radius:2px;min-width:2px}.tick-up{background-color:#28a745}.tick-down{background-color:#dc3545}.loading{text-align:center;padding:40px;color:#666}.controls-section{display:flex;justify-content:flex-start;margin-bottom:10px}.time-range-bar{display:flex;background:#fff;border-radius:6px;box-shadow:0 1px 5px #0000001a;overflow:hidden;border:1px solid #e9ecef}.time-option{padding:5px 8px;cursor:pointer;font-size:10px;font-weight:500;color:#666;background:#fff;transition:all .3s ease;border-right:1px solid #e9ecef;-webkit-user-select:none;user-select:none}.time-option:last-child{border-right:none}.time-option:hover{background:#f8f9fa;color:#333}.time-option.active{background:#28a745;color:#fff}.time-option.active:hover{background:#218838}.footer-banner{position:fixed;bottom:0;left:0;right:0;background:#aaa;border-top:1px solid #e9ecef;box-shadow:0 -2px 10px #0000001a;z-index:1000;padding:5px 0}.footer-content{max-width:1200px;margin:0 auto;display:flex;justify-content:center;gap:40px;padding:0 20px}.footer-link{text-decoration:none;color:#000;font-weight:500;padding:1px 2px;border-radius:6px;transition:all .3s ease}.footer-link:hover{color:#fff;transform:translateY(-2px)}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background-color:#f5f5f5;color:#333;padding-bottom:80px}.main-content{display:flex;gap:30px;align-items:flex-start}.api-list{flex:2;min-width:0;width:0}.messages-section{flex:1;background:#fff;border-radius:10px;box-shadow:0 2px 10px #0000001a;padding:20px;max-height:600px;display:flex;flex-direction:column;min-width:300px;max-width:330px;flex-shrink:0}.messages-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:15px;border-bottom:1px solid #e9ecef}.messages-header h3{margin:0;font-size:18px;color:#333}.pagination-controls{display:flex;align-items:center;gap:10px}.pagination-btn{background:#f8f9fa;border:1px solid #e9ecef;border-radius:4px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:#666;transition:all .3s ease}.pagination-btn:hover:not(:disabled){background:#28a745;color:#fff;border-color:#28a745}.pagination-btn:disabled{opacity:.5;cursor:not-allowed}#page-info{font-size:12px;color:#666;min-width:40px;text-align:center}.messages-container{flex:1;overflow-y:auto}.message-item{padding:12px 0;border-bottom:1px solid #f0f0f0}.message-item:last-child{border-bottom:none}.message-timestamp{font-size:11px;color:#999;margin-bottom:5px}.message-api{font-size:12px;font-weight:600;color:#28a745;margin-bottom:3px}.message-text{font-size:13px;color:#333;line-height:1.4}.message-status{display:inline-block;padding:2px 6px;border-radius:3px;font-size:10px;font-weight:500;margin-left:8px}.message-status.success{background:#d4edda;color:#155724}.message-status.error{background:#f8d7da;color:#721c24}@media (max-width: 768px){.main-content{flex-direction:column}.messages-section{max-height:400px}}