*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:Verdana,Arial,sans-serif
}

html,
body{
  background:#0b1321;
  color:#dfe6ee;
  overflow:scroll;
  scrollbar-width:none;
  -ms-overflow-style:none;
  user-select:none;
  -webkit-user-select:none;
  -ms-user-select:none
}

html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width:0;
  height:0
}

.header{
  height:56px;
  background:#0b1220;
  display:flex;
  align-items:center;
  justify-content:center;
  position:fixed;
  inset:0 0 auto 0;
  z-index:1000;
}

.header img{
  height:60%;
}

.header::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,0.35),
    transparent
  );
}

.container{
  max-width:900px;
  margin:auto;
  padding:80px 12px 16px;
  overflow-y:auto;
  scrollbar-width:none;
  -ms-overflow-style:none
}

.container::-webkit-scrollbar{
  width:0;
  height:0
}

.page-title{
  text-align:center;
  font-size:26px;
  font-weight:700;
  margin-bottom:20px
}

.filter{
  width:100%;
  padding:14px;
  margin-bottom:12px;
  border-radius:12px;
  border:none;
  background:#1e2a3a;
  color:#dfe6ee;
  text-align:center
}

.product-card{
  background:#243245;
  border-radius:18px;
  padding:16px;
  margin-bottom:10px;
  position:relative
}

.brand-tag{
  position:absolute;
  top:14px;
  right:14px;
  background:#b89b2c;
  color:#1a1400;
  font-size:12px;
  font-weight:700;
  padding:4px 12px;
  border-radius:20px
}

.model-title{
  text-align:center;
  font-size:18px;
  font-weight:700;
  margin-bottom:10px
}

.parts{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:8px
}

.parts > .part-box:last-child:nth-child(odd){
  grid-column:1 / -1
}

.part-box{
  background:#182231;
  border-radius:14px;
  overflow:hidden;
  text-align:center
}

.part-label,
.part-brand{
  display:block;
  width:100%;
  padding:5px 0;
  font-size:11px;
  font-weight:600;
  letter-spacing:.3px
}

.lcd{
  background:#2a8f72;
  color:#071f18
}

.battery{
  background:#6b5c2e;
  color:#1f1a08
}

.backglass{
  background:#7a3f3f;
  color:#1f0808
}

.brand-incell{
  background:#4e5bb8;
  color:#eef0ff
}

.brand-gx{
  background:#8a5a1f;
  color:#f3e9db
}

.brand-oled{
  background:#7a6c1f;
  color:#e6fffa
}

.brand-smatt{
  background:#5e4b8b;
  color:#f1edff
}

.brand-tft{
  background:#355f8a;
  color:#eaf2ff
}

.brand-foxconn{
  background:#4f3f36;
  color:#f0eae6
}

.brand-flycdi{
  background:#1f6f63;
  color:#e6fffa
}

.brand-classa{
  background:#182230;
  color:#f3ffe0
}

.brand-oem{
  color:#fff;
  background:repeating-linear-gradient(
    135deg,
    #7f2f2c 0%,
    #7f2f2c 25%,
    #94514d 50%,
    #7f2f2c 75%
  );
  background-size:300% 300%;
  animation:oemDiagonal 8s linear infinite
}

@keyframes oemDiagonal{
  from{background-position:0% 0%}
  to{background-position:100% 100%}
}

.part-box > div:last-child{
  padding:6px 0;
  font-size:13px;
  line-height:1.4
}

.hidden{
  display:none
}

.not-found{
  text-align:center;
  margin-top:20px;
  opacity:.7
}

@media(max-width:640px){
  .product-card{
    padding-top:48px
  }

  .parts{
    grid-template-columns:1fr
  }
}