*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}html{scroll-behavior:smooth}body{color:#fff;background:#08152d}.navbar{z-index:1000;background:#0f172a;justify-content:space-between;align-items:center;width:100%;padding:20px 8%;display:flex;position:fixed;top:0}.navbar h2{color:#22d3ee;font-size:32px}.navbar ul{gap:30px;list-style:none;display:flex}.navbar li{color:#cbd5e1;cursor:pointer}.hero{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:70vh;padding:90px 20px 40px;display:flex}.hero h1{margin-bottom:10px;font-size:64px;font-weight:800}.hero h3{color:#22d3ee;margin-bottom:12px;font-size:26px}.hero p{color:#94a3b8;margin-bottom:24px;font-size:18px}.pipeline-section{text-align:center;background:#08152d;padding:80px 5%}.pipeline-section h2{color:#22d3ee;margin-bottom:10px;font-size:42px}.pipeline-subtitle{color:#94a3b8;margin-bottom:40px}.pipeline-wrapper{flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;display:flex}.flow{align-items:center;display:flex}.pipeline-card{background:#111827;border:1px solid #1e3a5f;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;width:145px;height:165px;padding:18px 12px;transition:all .3s;display:flex}.pipeline-card:hover{border-color:#22d3ee;transform:translateY(-6px);box-shadow:0 0 16px #22d3ee40}.tool-icon{color:#22d3ee;justify-content:center;margin-bottom:12px;font-size:42px;display:flex}.pipeline-card h3{color:#fff;margin:0 0 8px;font-size:18px}.pipeline-card span{color:#22d3ee;background:#0f172a;border:1px solid #164e63;border-radius:20px;padding:4px 10px;font-size:12px}.arrow{color:#38bdf8;margin:0 8px;font-size:22px}.monitoring{border:1px dashed #2563eb;border-radius:18px;margin-top:50px;padding:28px}.monitoring h3{color:#22d3ee;margin-bottom:22px;font-size:26px}.monitor-cards{flex-wrap:wrap;justify-content:center;gap:24px;display:flex}.monitor-card{background:#111827;border:1px solid #334155;border-radius:16px;width:220px;padding:22px}.monitor-card h4{color:#fff;margin:10px 0 6px}.monitor-card p{color:#94a3b8;font-size:14px}@media (width<=900px){.pipeline-wrapper{flex-wrap:nowrap;justify-content:flex-start;padding-bottom:10px;overflow-x:auto}.flow{flex-shrink:0}.pipeline-card{width:140px}}.pipeline-footer{color:#22d3ee;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:35px;font-weight:600;display:flex}.pipeline-footer span{background:#0f172a;border:1px solid #164e63;border-radius:30px;padding:10px 16px}.feedback{text-align:center;padding:80px 8%}.feedback h2{color:#22d3ee;margin-bottom:20px;font-size:40px}.footer{text-align:center;color:#94a3b8;background:#0f172a;padding:30px}.navbar a{color:#cbd5e1;text-decoration:none}.admin-btn{background:#22d3ee;border-radius:20px;padding:8px 16px;font-weight:700;color:#0f172a!important}.feedback-form{flex-direction:column;gap:18px;width:100%;max-width:650px;margin:30px auto;display:flex}.feedback-form input,.feedback-form textarea{color:#fff;background:#1f2937;border:1px solid #334155;border-radius:10px;padding:15px;font-size:16px}.feedback-form textarea{resize:none}.feedback-form button{align-self:center}.login-page{background:#08152d;justify-content:center;align-items:center;min-height:100vh;display:flex}.login-card{background:#111827;border-radius:16px;flex-direction:column;gap:18px;width:360px;padding:35px;display:flex}.login-card h2{text-align:center;color:#22d3ee}.login-card input{color:#fff;background:#1f2937;border:none;border-radius:8px;padding:14px}.error{text-align:center;color:#ef4444;font-size:14px}.hero-links{flex-wrap:wrap;justify-content:center;gap:16px;margin:25px 0;display:flex}.hero-btn{color:#fff;border-radius:30px;padding:12px 24px;font-weight:600;text-decoration:none;transition:all .3s}.github{background:#0ea5e9}.linkedin{background:#2563eb}.resume{background:#7c3aed}.hero-btn:hover{transform:translateY(-3px)}.explore-btn{color:#08152d;background:#22d3ee;border-radius:30px;margin-top:10px;padding:14px 28px;font-weight:700;text-decoration:none}.footer h3{color:#22d3ee;margin-bottom:12px}.footer p{margin:6px 0}.optional-box{background:#111827;border:1px solid #334155;border-radius:12px;padding:20px}.optional-box h3{color:#22d3ee;margin-bottom:8px}.optional-box p{color:#94a3b8;margin-bottom:18px;font-size:14px}.feedback-status{color:#22d3ee;margin-top:18px;font-weight:600}.grafana-section{text-align:center;background:#08152d;padding:80px 5%}.grafana-section h2{color:#22d3ee;margin-bottom:10px;font-size:38px}.grafana-section p{color:#94a3b8;margin-bottom:28px;font-size:17px}.grafana-frame{border:1px solid #1e3a5f;border-radius:18px;overflow:hidden;box-shadow:0 0 24px #22d3ee2e}.grafana-frame iframe{background:#0b1220;display:block}.feedback-admin{color:#e2e8f0;background:#111c30;border:1px solid #26364f;border-radius:12px;margin-top:40px;padding:24px}.feedback-admin h2{color:#22d3ee;margin-bottom:8px}.feedback-table-wrapper{width:100%;margin-top:20px;overflow-x:auto}.feedback-table{border-collapse:collapse;text-align:left;width:100%;min-width:850px}.feedback-table th,.feedback-table td{vertical-align:top;border-bottom:1px solid #334155;padding:14px}.feedback-table th{color:#67e8f9;background:#17243a}.feedback-table td{color:#e2e8f0}.feedback-message{overflow-wrap:anywhere;white-space:pre-wrap;min-width:220px;max-width:360px}.feedback-table tbody tr:hover{background:#1e293b}