*{box-sizing:border-box;margin:0;padding:0}body,html{overflow-x:hidden;width:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#f5f3f7;color:#2c3e50;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0;padding:0}code{font-family:Fira Code,source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.App{display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden;padding:0;width:100%}.app-header-bar{background:#5b156f;box-shadow:0 2px 8px #5b156f26;padding:20px 40px;position:sticky;top:0;width:100%;z-index:100}.header-content{align-items:center;display:flex;justify-content:flex-start;margin:0 auto;max-width:1400px}.depay-logo{display:block;height:40px;width:auto}.app-header{animation:fadeInDown .6s ease-out;box-sizing:border-box;margin-bottom:50px;text-align:center;width:100%}.app-header h1{color:#5b156f;font-size:2.5rem;font-weight:700;letter-spacing:-1px;margin-bottom:10px}.app-header p{color:#64748b;font-size:1rem;font-weight:400}.panel-container{grid-gap:24px;box-sizing:border-box;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin:0 auto;max-width:1400px;padding:0 20px 40px;width:100%}.card{animation:fadeInUp .6s ease-out backwards;background:#fff;border:2px solid #e8e4ec;border-radius:16px;overflow:hidden;padding:28px;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1)}.card:before{background:#5b156f;content:"";height:4px;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .3s ease}.card:hover:before{opacity:1}.card:hover{border-color:#c4a0d0;box-shadow:0 12px 24px #5b156f1f;transform:translateY(-4px)}.card:first-child{animation-delay:.1s}.card:nth-child(2){animation-delay:.2s}.card:nth-child(3){animation-delay:.3s}.card:nth-child(4){animation-delay:.4s}.card h3{border:none;color:#475569;font-size:.85rem;font-weight:600;letter-spacing:1.5px;margin:0 0 20px;padding-bottom:0;text-transform:uppercase}.status{align-items:center;border-radius:12px;display:inline-flex;font-size:.95rem;font-weight:600;gap:10px;margin:12px 0;padding:12px 20px;transition:all .3s ease;width:fit-content}.status.ok{background:#98d8c8;color:#0d5a4f}.status.degraded{background:#ffd19a;color:#8b5a00}.status.down{background:#f7b5ca;color:#a8154a}.metric-row{align-items:center;border-bottom:1px solid #e2e8f080;display:flex;font-size:.9rem;justify-content:space-between;padding:12px 0}.metric-row:last-child{border-bottom:none}.metric-label{color:#94a3b8;font-weight:500}.metric-value{color:#475569;font-weight:600}.details-section{animation:slideDown .3s ease-out;background:#f8f6fa;border:1px solid #e8e4ec;border-radius:12px;margin-top:20px;padding:16px}.details-section strong{color:#5b156f;font-size:.85rem;letter-spacing:1px;text-transform:uppercase}.details-content{color:#64748b;font-size:.9rem;line-height:1.8;margin-top:12px}.details-content div{padding:6px 0}.click-hint{color:#94a3b8;font-size:.75rem;font-style:italic;margin-top:16px;text-align:center}.tab-navigation{background:#fff;border-bottom:2px solid #e8e4ec;box-sizing:border-box;display:flex;gap:12px;justify-content:center;margin-bottom:0;padding:20px;position:sticky;top:80px;width:100%;z-index:99}.App>div:not(.app-header-bar):not(.tab-navigation){box-sizing:border-box;flex:1 1;overflow-x:hidden;padding:40px 20px;width:100%}.tab-button{background:#f8f6fa;border:2px solid #0000;border-radius:12px;color:#64748b;cursor:pointer;font-size:.95rem;font-weight:600;padding:12px 32px;transition:all .3s cubic-bezier(.4,0,.2,1)}.tab-button:hover{background:#fff;border-color:#e8e4ec;transform:translateY(-2px)}.tab-button.active{background:#5b156f;box-shadow:0 6px 16px #5b156f40;color:#fff}.loading-container{align-items:center;display:flex;flex-direction:column;gap:20px;justify-content:center;min-height:400px}.loading-spinner{animation:spin 1s linear infinite;border:4px solid #e8e4ec;border-radius:50%;border-top-color:#5b156f;height:50px;width:50px}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{max-height:0;opacity:0}to{max-height:500px;opacity:1}}@keyframes spin{to{transform:rotate(1turn)}}@media (max-width:1024px){.panel-container{gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));padding:0 16px 32px}}@media (max-width:768px){.app-header-bar{padding:16px 20px}.depay-logo{height:32px}.tab-navigation{flex-wrap:wrap;padding:16px;top:64px}.app-header{margin-bottom:30px;padding:0 16px}.app-header h1{font-size:2rem}.panel-container{gap:16px;grid-template-columns:1fr;padding:0 16px 32px}.card{min-width:0;padding:20px}.tab-button{flex:1 1;min-width:120px}.App>div:not(.app-header-bar):not(.tab-navigation){padding:24px 16px}}@media (max-width:480px){.app-header-bar{padding:12px 16px}.depay-logo{height:28px}.tab-navigation{gap:8px;padding:12px;top:52px}.tab-button{font-size:.85rem;padding:10px 20px;width:100%}.app-header h1{font-size:1.75rem}.app-header p{font-size:.9rem}.panel-container{gap:12px;padding:0 12px 24px}.card{padding:16px}.card h3{font-size:.75rem}.status{font-size:.85rem;padding:10px 16px}.App>div:not(.app-header-bar):not(.tab-navigation){padding:20px 12px}}@media (max-width:360px){.panel-container{padding:0 8px 20px}.card{padding:12px}}@media (max-width:768px){.App>div:not(.app-header-bar):not(.tab-navigation)>div{padding:0 16px!important}}@media (max-width:480px){.App>div:not(.app-header-bar):not(.tab-navigation)>div{padding:0 12px!important}}
/*# sourceMappingURL=main.812928ab.css.map*/