*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#c11720,#c11720);min-height:100vh;padding:20px;color:#333}.container{max-width:1200px;margin:0 auto}header{text-align:center;color:white;margin-bottom:40px;animation:fadeInDown .8s ease-out}header h1{font-size:3rem;margin-bottom:10px;text-shadow:2px 2px 4px rgba(0,0,0,.2)}header h1 i{color:#ff6b6b;animation:heartbeat 2s ease-in-out infinite}.subtitle{font-size:1.2rem;opacity:.9}.environments-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));grid-gap:30px;gap:30px;margin-bottom:30px}.environment-card{background:white;border-radius:20px;padding:30px;box-shadow:0 10px 30px rgba(0,0,0,.2);transition:transform .3s ease,box-shadow .3s ease;animation:fadeInUp .8s ease-out;position:relative;overflow:hidden}.environment-card:before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#dc2626,#991b1b);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}.environment-card:hover{transform:translateY(-5px);box-shadow:0 15px 40px rgba(0,0,0,.3)}.environment-card:hover:before{transform:scaleX(1)}.environment-card.healthy:before{background:linear-gradient(90deg,#51cf66,#40c057);transform:scaleX(1)}.environment-card.unhealthy:before{background:linear-gradient(90deg,#ff6b6b,#fa5252);transform:scaleX(1)}.environment-header{display:flex;align-items:flex-start;gap:15px;margin-bottom:25px;padding-bottom:20px;border-bottom:2px solid #eee}.environment-icon{width:60px;height:60px;background:linear-gradient(135deg,#dc2626,#991b1b);border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:white;flex-shrink:0}.environment-card#env-production .environment-icon{background:linear-gradient(135deg,#10b981,#059669)}.environment-title{flex:1 1}.environment-name{font-size:1.8rem;color:#333;margin-bottom:15px}.environment-overall-status{display:flex;align-items:center;gap:15px}.overall-status-indicator{position:relative;width:50px;height:50px;flex-shrink:0}.overall-pulse-ring{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:50%;border:2px solid #dc2626;animation:pulse 2s ease-out infinite}.overall-pulse-ring.healthy{border-color:#51cf66;animation:pulseGreen 2s ease-out infinite}.overall-pulse-ring.unhealthy{border-color:#ff6b6b;animation:pulseRed 2s ease-out infinite}.overall-status-icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:36px;height:36px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#dc2626;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:all .3s ease}.environment-card.healthy .overall-status-icon{background:#51cf66;color:white}.environment-card.unhealthy .overall-status-icon{background:#ff6b6b;color:white}.overall-status-text{font-size:1rem;font-weight:700;color:#333}.environment-card.healthy .overall-status-text{color:#51cf66}.environment-card.unhealthy .overall-status-text{color:#ff6b6b}.services-list{display:flex;flex-direction:column;gap:12px}.service-item{background:#f8f9fa;border-radius:12px;padding:15px;transition:all .3s ease;border:2px solid transparent}.service-item:hover{background:#e9ecef;transform:translateX(5px)}.service-item.healthy{border-color:#51cf66;background:#f0fdf4}.service-item.unhealthy{border-color:#ff6b6b;background:#fef2f2}.service-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.service-item-name{font-size:1rem;font-weight:600;color:#333}.service-item-status{display:flex;align-items:center;gap:8px}.service-item-icon{font-size:1rem;color:#dc2626;transition:all .3s ease}.service-item.healthy .service-item-icon{color:#51cf66}.service-item.unhealthy .service-item-icon{color:#ff6b6b}.service-item-text{font-size:.85rem;font-weight:500;color:#666}.service-item.healthy .service-item-text{color:#51cf66}.service-item.unhealthy .service-item-text{color:#ff6b6b}.service-item-details{display:flex;justify-content:flex-end;margin-top:5px}.service-item-response-time{font-size:.75rem;color:#999;font-weight:500}.controls{text-align:center;background:white;padding:25px;border-radius:15px;box-shadow:0 5px 20px rgba(0,0,0,.1);animation:fadeInUp 1s ease-out}.refresh-btn{background:linear-gradient(135deg,#dc2626,#991b1b);color:white;border:none;padding:15px 40px;font-size:1.1rem;border-radius:50px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 15px rgba(220,38,38,.4);margin-right:20px}.refresh-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(220,38,38,.6)}.refresh-btn:active{transform:translateY(0)}.refresh-btn i{margin-right:8px;transition:transform .3s ease}.refresh-btn:hover i{transform:rotate(180deg)}.refresh-btn.refreshing i{animation:spin 1s linear infinite}.auto-refresh{display:inline-block}.auto-refresh label{display:flex;align-items:center;gap:10px;cursor:pointer;color:#333;font-size:1rem}.auto-refresh input[type=checkbox]{width:20px;height:20px;cursor:pointer}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes heartbeat{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes pulse{0%{transform:scale(1);opacity:1}to{transform:scale(1.5);opacity:0}}@keyframes pulseGreen{0%{transform:scale(1);opacity:1}to{transform:scale(1.5);opacity:0}}@keyframes pulseRed{0%{transform:scale(1);opacity:1}to{transform:scale(1.5);opacity:0}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@media (max-width:768px){header h1{font-size:2rem}.environments-grid{grid-template-columns:1fr}.environment-header{flex-direction:column;align-items:center;text-align:center}.environment-overall-status{justify-content:center;width:100%}.refresh-btn{margin-right:0;margin-bottom:15px;display:block;width:100%}}