*{box-sizing:border-box}
body{margin:0;font-family:Arial,sans-serif;background:#f5f7fb;color:#172033}
.topbar{height:64px;background:#fff;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;padding:0 5%;position:sticky;top:0;z-index:5}
.brand{font-size:22px;font-weight:800;color:#155eef;text-decoration:none}
nav{display:flex;gap:14px;align-items:center}
nav a{color:#344054;text-decoration:none}
.container{max-width:1100px;margin:auto;padding:28px 18px}
.hero{background:#155eef;color:white;padding:38px;border-radius:18px;margin-bottom:24px}
.hero h1{margin:0 0 8px;font-size:34px}
.card{background:white;padding:22px;border-radius:16px;border:1px solid #e5e7eb;margin:20px 0}
.toolbar{display:flex;gap:12px;margin:20px 0}
input,select{width:100%;padding:12px;border:1px solid #d0d5dd;border-radius:10px;font-size:15px}
.toolbar input{flex:2}.toolbar select{flex:1}
button{background:#155eef;color:white;border:0;border-radius:10px;padding:12px 16px;cursor:pointer;font-weight:600}
button.secondary{background:#eef4ff;color:#155eef}
.linkbtn{background:none;color:#155eef;padding:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.product{background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:17px}
.product h3{font-size:16px;margin:0 0 8px}
.product .brand{font-size:13px;color:#667085;font-weight:normal}
.price{font-size:20px;font-weight:800;margin:15px 0}
.hidden{display:none!important}
.status{font-weight:700}
.success{color:#079455}.pending{color:#b54708}.failed{color:#d92d20}
table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px;border-bottom:1px solid #eee;font-size:14px}
@media(max-width:600px){.topbar{padding:0 15px}.topbar nav a{display:none}.hero h1{font-size:27px}.toolbar{flex-direction:column}}